/* ==========================================================
ELDORIA — GAME COMPONENTS & SCREENS
========================================================== */
/* 2026-05-12: Game Icons (game-icons.net) via Iconify v3 web component.
Sustituye iconos FA/Phosphor para items del juego. Hereda color (currentColor).
font-size se hereda por cascade naturalmente — no se declara acá para que
reglas con menor especificidad (.loot-row-icon, etc.) puedan sobreescribir. */
iconify-icon.gi {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
line-height: 1;
}
/* Color por rareza — heredan currentColor del SVG */
iconify-icon.gi.r-common { color: #b9bcc4; }
iconify-icon.gi.r-uncommon { color: #5fd684; }
iconify-icon.gi.r-rare { color: #6cd4ff; }
iconify-icon.gi.r-epic { color: #b884ff; }
iconify-icon.gi.r-legendary { color: #ffd24a; filter: drop-shadow(0 0 6px rgba(255,200,87,0.4)); }
iconify-icon.gi.r-mythic { color: #ff5c7c; filter: drop-shadow(0 0 6px rgba(255,92,124,0.45)); }
/* Slot vacío más grande/transparente */
iconify-icon.gi.equip-slot-empty-icon {
font-size: 36px;
opacity: 0.45;
}
/* Loot/cap rows */
iconify-icon.gi.cap-loot-item-icon { font-size: 22px; }
/* ============================================================
AUTH LANDING — épico con live stats + features
============================================================ */
.auth-landing {
min-height: 100vh;
width: 100%;
position: relative;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
/* Background layers */
.auth-bg-img {
position: fixed;
inset: 0;
z-index: -3;
background: url('../assets/bg/login.webp') center/cover no-repeat;
filter: brightness(0.45) saturate(1.2);
}
.auth-bg-overlay {
position: fixed;
inset: 0;
z-index: -2;
background:
radial-gradient(ellipse 80% 60% at 70% 30%, rgba(184,132,255,0.18), transparent 60%),
radial-gradient(ellipse 60% 80% at 20% 70%, rgba(233,185,99,0.12), transparent 60%),
linear-gradient(180deg, rgba(10,4,20,0.85) 0%, rgba(5,2,10,0.97) 100%);
}
.auth-bg-particles {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.auth-bg-particles .alp {
position: absolute;
width: 3px;
height: 3px;
background: var(--gold);
border-radius: 50%;
box-shadow: 0 0 8px var(--gold);
left: calc(var(--i) * 5.5%);
bottom: -10px;
opacity: 0.5;
animation: alpFloat 18s linear infinite;
animation-delay: calc(var(--i) * -1s);
}
.auth-bg-particles .alp:nth-child(3n) { background: #b884ff; box-shadow: 0 0 8px #b884ff; }
.auth-bg-particles .alp:nth-child(5n) { background: #56a6ff; box-shadow: 0 0 8px #56a6ff; }
@keyframes alpFloat {
0% { transform: translateY(0) scale(0.5); opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.7; }
100% { transform: translateY(-110vh) scale(1.2); opacity: 0; }
}
/* Top bar */
.auth-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 32px;
border-bottom: 1px solid rgba(233,185,99,0.15);
background: linear-gradient(180deg, rgba(10,4,20,0.6), transparent);
backdrop-filter: blur(12px);
position: sticky;
top: 0;
z-index: 10;
}
.auth-brand {
display: flex;
align-items: center;
gap: 12px;
}
.auth-brand-logo {
height: 44px;
width: auto;
filter: drop-shadow(0 0 12px rgba(233,185,99,0.4));
}
.auth-brand-name {
font-family: var(--font-title);
font-size: 18px;
font-weight: 900;
letter-spacing: 0.18em;
color: var(--gold);
line-height: 1;
}
.auth-brand-tag {
font-family: var(--font-cormorant);
font-style: italic;
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
/* Stats pills */
.auth-stats-pills {
display: flex;
gap: 10px;
}
.auth-stat-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: linear-gradient(135deg, rgba(33,20,58,0.75), rgba(15,8,30,0.85));
border: 1.5px solid rgba(233,185,99,0.3);
border-radius: 99px;
position: relative;
overflow: hidden;
}
.auth-stat-pill.is-warriors { border-color: rgba(225,80,90,0.4); }
.auth-stat-pill.is-active { border-color: rgba(95,214,132,0.4); box-shadow: 0 0 14px rgba(95,214,132,0.15); }
.auth-stat-pill.is-guilds { border-color: rgba(86,166,255,0.4); }
.auth-stat-pill.skeleton { opacity: 0.5; }
.auth-stat-pill > i {
font-size: 18px;
color: var(--gold);
}
.auth-stat-pill.is-warriors > i { color: var(--blood); }
.auth-stat-pill.is-active > i { color: #5fd684; animation: pulseFlame 2s ease-in-out infinite; }
.auth-stat-pill.is-guilds > i { color: #56a6ff; }
@keyframes pulseFlame {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px #5fd684); }
50% { transform: scale(1.15); filter: drop-shadow(0 0 12px #5fd684); }
}
.asp-num {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.asp-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
margin-top: 2px;
}
/* Hero — split layout */
.auth-hero {
flex: 1;
display: grid;
grid-template-columns: 1fr 440px;
gap: 48px;
padding: 48px 48px 32px;
align-items: start;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
.auth-hero-content { min-width: 0; }
.auth-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: linear-gradient(90deg, rgba(233,185,99,0.18), rgba(233,185,99,0.04));
border: 1px solid rgba(233,185,99,0.4);
border-radius: 99px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--gold);
font-weight: 700;
text-transform: uppercase;
margin-bottom: 16px;
}
.auth-hero-eyebrow i { font-size: 13px; }
.auth-hero-title {
font-family: var(--font-title);
font-size: clamp(40px, 5vw, 64px);
font-weight: 900;
line-height: 1.05;
letter-spacing: 0.02em;
margin: 0 0 18px;
background: linear-gradient(180deg, #ffe7b3 0%, #e9b963 50%, #8a5d1d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 48px rgba(233,185,99,0.25);
}
.auth-hero-sub {
font-family: var(--font-cormorant);
font-size: 18px;
line-height: 1.55;
color: var(--text-muted);
max-width: 600px;
margin-bottom: 22px;
}
/* Live join CTA */
.auth-join-cta {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
background: linear-gradient(135deg, rgba(225,80,90,0.18), rgba(225,80,90,0.04));
border: 1.5px solid rgba(225,80,90,0.45);
border-radius: var(--r-lg);
margin-bottom: 28px;
max-width: 600px;
position: relative;
overflow: hidden;
}
.auth-join-cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(225,80,90,0.1), transparent);
animation: ctaSweep 4s ease-in-out infinite;
}
@keyframes ctaSweep {
0%, 100% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
}
.auth-join-cta > i {
font-size: 32px;
color: var(--blood);
filter: drop-shadow(0 0 10px rgba(225,80,90,0.6));
flex-shrink: 0;
animation: pulseFlame 1.8s ease-in-out infinite;
}
.ajc-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; position: relative; z-index: 1; }
.ajc-line1 {
font-family: var(--font-title);
font-size: 16px;
font-weight: 800;
color: var(--text);
letter-spacing: 0.02em;
}
.ajc-line1 b {
color: var(--blood);
font-size: 19px;
text-shadow: 0 0 8px rgba(225,80,90,0.4);
}
.ajc-line2 {
font-size: 13px;
color: var(--text-muted);
}
.ajc-line2 b { color: #5fd684; font-weight: 700; }
/* Features grid */
.auth-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 28px;
max-width: 720px;
}
.auth-feat-card {
padding: 16px 14px;
background: linear-gradient(180deg, rgba(33,20,58,0.6), rgba(15,8,30,0.85));
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
transition: all 0.25s;
backdrop-filter: blur(4px);
}
.auth-feat-card:hover {
transform: translateY(-3px);
border-color: rgba(233,185,99,0.4);
box-shadow: 0 8px 24px rgba(233,185,99,0.15);
}
.auth-feat-card > i {
font-size: 28px;
color: var(--gold);
margin-bottom: 8px;
display: block;
filter: drop-shadow(0 0 8px rgba(233,185,99,0.3));
}
.afc-title {
font-family: var(--font-title);
font-size: 13px;
font-weight: 800;
color: var(--text);
margin-bottom: 4px;
letter-spacing: 0.04em;
}
.afc-desc {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.4;
}
/* Showcase grid */
.auth-showcase-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
max-width: 720px;
margin-bottom: 32px;
}
.ash-cell {
padding: 14px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(233,185,99,0.2);
border-radius: var(--r-md);
text-align: center;
}
.ash-cell.ash-gold { border-color: rgba(233,185,99,0.5); }
.ash-cell.ash-eldor { border-color: rgba(184,132,255,0.5); }
.ash-cell.ash-top {
display: flex;
align-items: center;
gap: 12px;
text-align: left;
border-color: rgba(255,170,80,0.5);
background: linear-gradient(135deg, rgba(255,170,80,0.18), rgba(255,170,80,0.04));
}
.ash-top-icon {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(255,170,80,0.3), rgba(255,170,80,0.08));
border: 1px solid rgba(255,170,80,0.5);
border-radius: 50%;
flex-shrink: 0;
}
.ash-top-icon i { font-size: 20px; color: #ffaa50; }
.ash-num {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 800;
color: var(--text);
line-height: 1;
margin-bottom: 4px;
}
.ash-cell.ash-gold .ash-num { color: var(--gold); }
.ash-cell.ash-eldor .ash-num { color: #b884ff; }
.ash-cell.ash-top .ash-num { color: #ffaa50; font-family: var(--font-title); font-size: 14px; }
.ash-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
/* Auth form card */
.auth-form-card {
padding: 28px 24px;
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,4,20,0.95));
border: 1.5px solid rgba(233,185,99,0.4);
border-radius: var(--r-xl);
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(233,185,99,0.1);
position: sticky;
top: 100px;
backdrop-filter: blur(12px);
}
.afc-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px dashed rgba(233,185,99,0.2);
}
.afc-crest {
width: 52px;
height: 52px;
filter: drop-shadow(0 0 12px rgba(233,185,99,0.4));
}
.afc-h-title {
font-family: var(--font-title);
font-size: 17px;
font-weight: 800;
color: var(--gold);
letter-spacing: 0.06em;
margin-bottom: 3px;
}
.afc-h-sub {
font-size: 12px;
color: var(--text-muted);
font-family: var(--font-cormorant);
font-style: italic;
}
.afc-ref-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: linear-gradient(90deg, rgba(95,214,132,0.15), rgba(95,214,132,0.04));
border: 1px solid rgba(95,214,132,0.4);
border-radius: var(--r-md);
margin-bottom: 14px;
}
.afc-ref-banner > i { font-size: 22px; color: #5fd684; flex-shrink: 0; }
.afc-ref-line1 { font-size: 12.5px; color: var(--text); margin-bottom: 2px; }
.afc-ref-line2 { font-size: 11px; color: #5fd684; font-style: italic; }
.afc-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
margin-bottom: 18px;
background: rgba(0,0,0,0.4);
padding: 4px;
border-radius: var(--r-md);
border: 1px solid rgba(255,255,255,0.06);
}
.afc-tab {
padding: 10px;
border-radius: var(--r-sm);
cursor: pointer;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: all 0.2s;
font-family: var(--font-title);
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.afc-tab i { font-size: 14px; }
.afc-tab.active {
background: linear-gradient(180deg, rgba(233,185,99,0.25), rgba(233,185,99,0.08));
color: var(--gold);
box-shadow: 0 0 16px rgba(233,185,99,0.2);
}
.afc-form { display: flex; flex-direction: column; gap: 14px; }
.afc-submit { padding: 14px; font-size: 14px; }
.afc-submit i { font-size: 16px; }
.afc-footer {
margin-top: 18px;
padding-top: 14px;
border-top: 1px dashed rgba(233,185,99,0.2);
}
.afc-trust-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 12px;
}
.afc-trust {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(95,214,132,0.1);
border: 1px solid rgba(95,214,132,0.3);
border-radius: 99px;
font-size: 10.5px;
color: #5fd684;
font-weight: 600;
}
.afc-trust i { font-size: 11px; }
.afc-quote {
text-align: center;
font-family: var(--font-cormorant);
font-style: italic;
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0.06em;
}
/* Footer steps */
.auth-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
padding: 28px 24px 36px;
border-top: 1px solid rgba(233,185,99,0.1);
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
}
.auth-step {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--text-muted);
font-weight: 700;
}
.auth-step-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), #8a5d1d);
color: #1a0a30;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
font-size: 13px;
font-weight: 900;
box-shadow: 0 0 12px rgba(233,185,99,0.3);
}
.auth-step-arrow {
color: var(--gold);
opacity: 0.4;
font-size: 16px;
}
/* ============================================================
AUTH LANDING — Mobile responsive
============================================================ */
@media (max-width: 1024px) {
.auth-hero {
grid-template-columns: 1fr;
gap: 28px;
padding: 28px 18px 24px;
}
.auth-form-card {
position: static;
order: -1;
max-width: 480px;
width: 100%;
margin: 0 auto;
}
}
@media (max-width: 720px) {
.auth-topbar {
flex-direction: column;
gap: 12px;
padding: 14px 14px;
}
.auth-brand-logo { height: 38px; }
.auth-brand-name { font-size: 16px; }
.auth-stats-pills {
width: 100%;
justify-content: space-around;
gap: 6px;
}
.auth-stat-pill {
padding: 6px 10px;
gap: 6px;
}
.auth-stat-pill > i { font-size: 16px; }
.asp-num { font-size: 14px; }
.asp-lbl { font-size: 9px; }
.auth-hero { padding: 22px 14px 18px; gap: 20px; }
.auth-hero-title { font-size: clamp(28px, 8vw, 42px); }
.auth-hero-sub { font-size: 15px; }
.auth-join-cta { padding: 12px 14px; gap: 10px; }
.auth-join-cta > i { font-size: 26px; }
.ajc-line1 { font-size: 14px; }
.ajc-line1 b { font-size: 16px; }
.ajc-line2 { font-size: 12px; }
.auth-features-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.auth-feat-card { padding: 12px 10px; }
.auth-feat-card > i { font-size: 22px; }
.afc-title { font-size: 12px; }
.afc-desc { font-size: 10.5px; }
.auth-form-card { padding: 22px 18px; border-radius: var(--r-lg); }
.afc-h-title { font-size: 15px; }
.afc-crest { width: 44px; height: 44px; }
.auth-footer { gap: 8px; padding: 18px 12px 22px; font-size: 11px; }
.auth-step { font-size: 11px; }
.auth-step-num { width: 24px; height: 24px; font-size: 11px; }
.auth-step-arrow { display: none; }
}
@media (max-width: 480px) {
.auth-features-grid { grid-template-columns: 1fr; }
.auth-stat-pill .asp-lbl { display: none; }
.auth-stat-pill { padding: 6px 12px; }
}
/* ============================================================
BANNER STUDIO MODAL
============================================================ */
.rh-banners-btn {
margin-top: 12px;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
font-size: 13px;
border: 1px dashed rgba(233,185,99,0.45);
background: rgba(233,185,99,0.06);
color: var(--gold);
border-radius: var(--r-md);
cursor: pointer;
transition: all .2s;
}
.rh-banners-btn:hover {
background: rgba(233,185,99,0.15);
border-color: rgba(233,185,99,0.8);
border-style: solid;
}
.rh-banners-btn > i { font-size: 16px; }
.bn-modal-overlay { background: rgba(0,0,0,0.82); }
.bn-modal {
width: 96%;
max-width: 980px;
max-height: 90vh;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(28,15,50,0.98), rgba(15,7,30,1));
border: 2px solid rgba(233,185,99,0.4);
border-radius: 18px;
position: relative;
overflow: hidden;
}
.bn-modal-close {
position: absolute;
top: 12px; right: 12px;
z-index: 5;
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
color: var(--text);
cursor: pointer;
font-size: 16px;
}
.bn-modal-close:hover { background: rgba(225,80,90,0.3); border-color: rgba(225,80,90,0.6); }
.bn-modal-header {
display: flex;
align-items: center;
gap: 14px;
padding: 22px 24px 16px;
border-bottom: 1px solid rgba(233,185,99,0.15);
}
.bn-modal-icon {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(233,185,99,0.2), rgba(184,132,255,0.18));
border: 1px solid rgba(233,185,99,0.45);
border-radius: 12px;
color: var(--gold);
font-size: 24px;
flex-shrink: 0;
}
.bn-modal-title {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 700;
font-size: 20px;
color: #fff;
letter-spacing: 0.02em;
}
.bn-modal-sub {
font-size: 12.5px;
color: rgba(220,210,200,0.65);
margin-top: 3px;
line-height: 1.4;
}
.bn-modal-sub b { color: var(--gold); font-family: var(--font-mono, monospace); }
.bn-modal-body {
flex: 1;
overflow-y: auto;
padding: 18px 22px 24px;
}
.bn-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 60px 20px;
color: rgba(220,210,200,0.6);
font-size: 14px;
}
.bn-loading > i { font-size: 22px; color: var(--gold); }
.bn-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
.bn-cell {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
background: rgba(15,5,30,0.55);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 14px;
}
.bn-cell-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.bn-cell-size {
font-family: var(--font-mono, monospace);
font-size: 14px;
color: var(--gold);
}
.bn-cell-size b { font-size: 16px; }
.bn-cell-px { color: rgba(220,210,200,0.5); font-size: 12px; }
.bn-cell-info { text-align: right; }
.bn-cell-label {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 700;
font-size: 13px;
color: #fff;
letter-spacing: 0.04em;
}
.bn-cell-desc {
font-size: 11px;
color: rgba(220,210,200,0.55);
}
/* Preview viewport — shows actual size, scrolls horizontally if too wide */
.bn-cell-preview {
display: flex;
justify-content: center;
align-items: center;
padding: 14px;
background:
repeating-conic-gradient(rgba(255,255,255,0.04) 0% 25%, transparent 0% 50%) 0 0/14px 14px,
rgba(0,0,0,0.4);
border: 1px dashed rgba(255,255,255,0.08);
border-radius: 10px;
overflow: auto;
max-width: 100%;
}
.bn-cell-canvas {
display: block;
max-width: 100%;
height: auto;
box-shadow: 0 8px 24px rgba(0,0,0,0.55);
border-radius: 4px;
}
/* For tall skyscraper, cap height so it doesn't blow out the modal */
.bn-cell-preview[data-h="600"] .bn-cell-canvas { max-height: 380px; width: auto; max-width: none; }
.bn-cell-dl {
align-self: flex-start;
padding: 10px 18px;
font-size: 13px;
}
.bn-cell-dl > i { font-size: 16px; }
@media (min-width: 900px) {
.bn-grid { grid-template-columns: 1fr 1fr; }
/* Skyscraper takes its own row alone (it's tall) */
.bn-cell:has([data-h="600"]) { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.bn-cell:has([data-h="600"]) .bn-cell-preview { flex: 0 0 auto; }
.bn-cell:has([data-h="600"]) .bn-cell-meta { flex: 1; align-content: flex-start; }
}
@media (max-width: 600px) {
.bn-modal-header { padding: 18px 16px 12px; gap: 10px; }
.bn-modal-icon { width: 40px; height: 40px; font-size: 20px; }
.bn-modal-title { font-size: 17px; }
.bn-modal-sub { font-size: 11.5px; }
.bn-modal-body { padding: 14px 14px 18px; }
.bn-cell { padding: 12px; }
.bn-cell-preview { padding: 8px; }
.bn-cell-preview[data-h="600"] .bn-cell-canvas { max-height: 320px; }
.bn-cell-dl { width: 100%; align-self: stretch; justify-content: center; }
}
/* ============================================================
TELEGRAM / COMMUNITY LINKS
============================================================ */
/* Side panel widget (in-game) */
.side-community .tg-links {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 6px;
}
.tg-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: rgba(40,140,220,0.08);
border: 1px solid rgba(40,140,220,0.25);
border-radius: 10px;
text-decoration: none;
color: var(--text);
transition: all .18s;
}
.tg-link:hover {
background: rgba(40,140,220,0.18);
border-color: rgba(40,140,220,0.55);
transform: translateX(2px);
}
.tg-link > i:first-child {
font-size: 22px;
color: #4ec1f0;
flex-shrink: 0;
width: 26px;
text-align: center;
}
.tg-link.tg-channel > i:first-child { color: #58aee8; }
.tg-link.tg-chat > i:first-child { color: #6fd9b5; }
.tg-link.tg-support > i:first-child { color: #ffaa50; }
.tg-info { flex: 1; min-width: 0; }
.tg-name {
font-size: 12.5px;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tg-tag {
font-size: 10.5px;
color: rgba(220,210,200,0.55);
font-family: var(--font-mono, monospace);
margin-top: 1px;
}
.tg-arrow {
font-size: 13px;
color: rgba(220,210,200,0.4);
flex-shrink: 0;
}
.tg-link:hover .tg-arrow { color: rgba(78,193,240,0.95); }
/* Auth landing community section */
.ldn-community {
position: relative; z-index: 4;
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding: 14px 32px 6px;
}
.ldn-community-title {
display: flex; align-items: center; gap: 10px;
margin-bottom: 14px;
font-family: var(--font-cinzel, 'Cinzel', serif);
font-size: 15px;
font-weight: 700;
color: var(--gold);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ldn-community-title > i { font-size: 20px; color: #4ec1f0; }
.ldn-community-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.ldn-tg-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(40,140,220,0.12) 0%, rgba(15,8,30,0.8) 100%);
border: 1px solid rgba(40,140,220,0.3);
border-radius: 12px;
text-decoration: none;
color: var(--text);
transition: all .25s;
position: relative;
overflow: hidden;
}
.ldn-tg-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(78,193,240,0.15), transparent 70%);
opacity: 0;
transition: opacity .25s;
}
.ldn-tg-card:hover {
transform: translateY(-2px);
border-color: rgba(78,193,240,0.7);
box-shadow: 0 10px 28px rgba(40,140,220,0.25);
}
.ldn-tg-card:hover::before { opacity: 1; }
.ldn-tg-card > i:first-child {
position: relative; z-index: 1;
font-size: 26px;
color: #4ec1f0;
filter: drop-shadow(0 0 10px rgba(78,193,240,0.4));
}
.ldn-tg-card > div {
position: relative; z-index: 1;
flex: 1; min-width: 0;
}
.ldn-tg-name {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 700;
font-size: 14px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ldn-tg-tag {
font-size: 11.5px;
color: rgba(180,210,230,0.7);
font-family: var(--font-mono, monospace);
margin-top: 2px;
}
.ldn-tg-arrow {
position: relative; z-index: 1;
font-size: 16px;
color: rgba(220,210,200,0.45);
transition: transform .2s, color .2s;
}
.ldn-tg-card:hover .ldn-tg-arrow {
color: #4ec1f0;
transform: translate(2px, -2px);
}
@media (max-width: 720px) {
.ldn-community { padding: 12px 16px 4px; }
.ldn-community-grid { grid-template-columns: 1fr; gap: 8px; }
.ldn-tg-card { padding: 11px 14px; }
.ldn-tg-name { font-size: 13px; }
.ldn-tg-tag { font-size: 10.5px; }
.ldn-community-title { font-size: 13px; margin-bottom: 10px; }
}
/* ============================================================
EMAIL VERIFY MODAL
============================================================ */
.ev-modal-overlay { background: rgba(0,0,0,0.85); }
.ev-verify-modal {
width: 92%;
max-width: 440px;
padding: 32px 28px 22px;
background: linear-gradient(180deg, rgba(28,15,50,0.98), rgba(15,7,30,1));
border: 2px solid rgba(184,132,255,0.4);
border-radius: 20px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 28px 70px rgba(0,0,0,0.7), 0 0 60px rgba(184,132,255,0.18);
}
.evm-icon {
width: 78px; height: 78px;
margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle, rgba(184,132,255,0.4), rgba(28,15,50,0.6));
border: 2px solid rgba(184,132,255,0.55);
border-radius: 50%;
color: #d4b8ff;
font-size: 38px;
filter: drop-shadow(0 0 16px rgba(184,132,255,0.55));
}
.evm-title {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 800;
font-size: 22px;
color: #fff;
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.evm-sub {
font-size: 13px;
color: rgba(220,210,200,0.7);
margin-bottom: 22px;
line-height: 1.5;
}
.evm-sub b { color: var(--gold); font-family: var(--font-mono, monospace); font-size: 12.5px; word-break: break-all; }
.evm-warn {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
margin-bottom: 18px;
background: rgba(255,170,80,0.12);
border: 1px solid rgba(255,170,80,0.4);
border-radius: var(--r-md);
font-size: 12px;
color: #ffaa50;
text-align: left;
}
.evm-warn > i { font-size: 18px; flex-shrink: 0; }
.evm-code-row {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 22px;
}
.evm-code-cell {
width: 46px; height: 56px;
background: rgba(8,4,20,0.7);
border: 2px solid rgba(184,132,255,0.3);
border-radius: 11px;
color: #fff;
font-family: var(--font-mono, monospace);
font-size: 26px;
font-weight: 700;
text-align: center;
outline: none;
transition: all .2s;
}
.evm-code-cell:focus {
border-color: rgba(184,132,255,0.85);
box-shadow: 0 0 0 3px rgba(184,132,255,0.18), 0 0 20px rgba(184,132,255,0.25);
transform: translateY(-1px);
}
.evm-code-cell:not(:placeholder-shown) {
border-color: rgba(184,132,255,0.6);
}
.evm-verify-btn {
margin-bottom: 14px;
}
.evm-resend {
margin-bottom: 14px;
font-size: 13px;
}
.evm-resend-btn {
background: transparent;
border: 0;
color: var(--gold);
font-weight: 700;
font-size: 13px;
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
text-decoration: underline;
text-underline-offset: 3px;
}
.evm-resend-btn:hover { color: #f0c97c; }
.evm-resend-wait {
color: rgba(220,210,200,0.55);
font-size: 12.5px;
}
.evm-help {
font-size: 11.5px;
color: rgba(220,210,200,0.5);
line-height: 1.45;
}
.evm-skip {
margin-top: 14px;
background: transparent;
border: 0;
color: rgba(220,210,200,0.4);
font-size: 12px;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.evm-skip:hover { color: rgba(220,210,200,0.7); }
@media (max-width: 480px) {
.ev-verify-modal { padding: 26px 20px 18px; }
.evm-icon { width: 64px; height: 64px; font-size: 30px; }
.evm-title { font-size: 18px; }
.evm-code-cell { width: 38px; height: 48px; font-size: 22px; }
.evm-code-row { gap: 6px; }
}
/* Email-not-verified banner in shell — fixed at top, full-width below header */
.email-verify-banner {
position: fixed;
top: 64px;
left: 0;
right: 0;
z-index: 50;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
margin: 0;
background: linear-gradient(90deg, rgba(58,32,8,0.96), rgba(40,22,6,0.96));
border: 0;
border-top: 1px solid rgba(255,170,80,0.4);
border-bottom: 1px solid rgba(255,170,80,0.4);
border-radius: 0;
font-size: 13px;
color: #ffd28a;
box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.email-verify-banner > i { font-size: 20px; color: #ffaa50; flex-shrink: 0; }
.email-verify-banner-text { flex: 1; line-height: 1.4; min-width: 0; }
.email-verify-banner-btn {
padding: 7px 16px;
background: linear-gradient(135deg, #d99548, #f0c97c);
border: 0;
border-radius: 8px;
color: #1a0c00;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.04em;
cursor: pointer;
flex-shrink: 0;
transition: transform .15s, box-shadow .15s;
box-shadow: 0 2px 8px rgba(217,149,72,0.4);
}
.email-verify-banner-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(217,149,72,0.55); }
/* Mobile: stack en columna si no entra, bajo el header móvil */
@media (max-width: 600px) {
.email-verify-banner {
padding: 9px 12px;
gap: 8px;
font-size: 11.5px;
}
.email-verify-banner > i { font-size: 16px; }
.email-verify-banner-text { font-size: 11.5px; }
.email-verify-banner-btn { padding: 6px 12px; font-size: 11px; }
}
/* ============================================================
Topbar language pill
============================================================ */
.top-action-btn.ts-lang {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 0 10px !important;
width: auto !important;
min-width: 56px;
}
.top-action-btn.ts-lang .ts-lang-code {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--gold);
}
/* Lang picker modal */
.modal.lang-pick-modal { max-width: 360px; }
.lang-pick-body {
display: flex;
flex-direction: column;
gap: 6px;
}
.lang-pick-opt {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
color: var(--text);
font-size: 14px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: all .2s;
}
.lang-pick-opt:hover {
background: rgba(233,185,99,0.1);
border-color: rgba(233,185,99,0.4);
}
.lang-pick-opt.is-active {
background: rgba(233,185,99,0.12);
border-color: rgba(233,185,99,0.5);
color: var(--gold);
}
.lpo-flag { font-size: 22px; }
.lpo-name { flex: 1; }
.lpo-check { color: var(--gold); font-size: 18px; }
/* ============================================================
LANDING (LDN) — modern auth/landing redesign 2026
Replaces .auth-* legacy classes; uses .ldn-* namespace.
============================================================ */
.ldn-root {
min-height: 100vh;
width: 100%;
position: relative;
overflow-x: hidden;
color: var(--text);
background: #060211;
display: flex;
flex-direction: column;
}
/* ===== Background layers ===== */
.ldn-bg {
position: absolute; inset: 0;
z-index: 0;
pointer-events: none;
}
.ldn-bg-img {
position: absolute; inset: 0;
background-image: url('../assets/landing-bg.webp'), linear-gradient(180deg, #0e0420 0%, #060211 100%);
background-size: cover;
background-position: center 20%;
filter: saturate(0.85) contrast(1.05);
opacity: 0.7;
}
.ldn-bg-grad {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 90% 60% at 50% 0%, rgba(184,132,255,0.18), transparent 70%),
radial-gradient(ellipse 60% 50% at 90% 30%, rgba(255,170,80,0.12), transparent 70%),
linear-gradient(180deg, rgba(6,2,17,0.4) 0%, rgba(6,2,17,0.95) 60%, rgba(6,2,17,1) 100%);
}
.ldn-bg-vignette {
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
}
.ldn-bg-particles { position: absolute; inset: 0; overflow: hidden; }
.ldn-particle {
position: absolute;
width: 3px; height: 3px;
border-radius: 50%;
background: rgba(233,185,99,0.55);
box-shadow: 0 0 12px rgba(233,185,99,0.7);
bottom: -4px;
left: calc((var(--i) / 24) * 100%);
animation: ldn-rise 10s linear infinite;
animation-delay: var(--d);
opacity: 0;
}
.ldn-particle:nth-child(3n) { background: rgba(184,132,255,0.55); box-shadow: 0 0 12px rgba(184,132,255,0.7); }
.ldn-particle:nth-child(5n) { background: rgba(86,166,255,0.55); box-shadow: 0 0 12px rgba(86,166,255,0.7); }
.ldn-particle:nth-child(7n) { background: rgba(255,140,170,0.55); box-shadow: 0 0 12px rgba(255,140,170,0.7); }
@keyframes ldn-rise {
0% { transform: translateY(0) scale(0.6); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-110vh) scale(1.2); opacity: 0; }
}
/* ===== Topbar ===== */
.ldn-topbar {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 32px;
gap: 18px;
}
.ldn-brand { display: flex; align-items: center; gap: 12px; }
.ldn-brand-logo {
width: 48px; height: 48px;
filter: drop-shadow(0 0 12px rgba(233,185,99,0.4));
}
.ldn-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.ldn-brand-name {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 800;
font-size: 19px;
letter-spacing: 0.18em;
color: var(--gold);
text-shadow: 0 0 14px rgba(233,185,99,0.4);
}
.ldn-brand-tag {
font-size: 10.5px;
letter-spacing: 0.16em;
color: rgba(220,210,180,0.55);
text-transform: uppercase;
}
.ldn-top-actions { display: flex; align-items: center; gap: 12px; }
.ldn-online-pulse {
display: flex; align-items: center; gap: 8px;
padding: 7px 14px;
background: rgba(20,10,35,0.7);
border: 1px solid rgba(95,220,165,0.3);
border-radius: 99px;
font-size: 12.5px;
color: rgba(220,235,225,0.92);
backdrop-filter: blur(6px);
}
.ldn-online-pulse b { color: #5fdca5; font-weight: 700; }
.ldn-pulse-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #5fdca5;
box-shadow: 0 0 10px #5fdca5;
animation: ldn-pulse 2s ease-in-out infinite;
}
@keyframes ldn-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
/* Lang switcher */
.ldn-lang-wrap { position: relative; }
.ldn-lang-btn {
display: flex; align-items: center; gap: 8px;
padding: 7px 12px;
background: rgba(20,10,35,0.8);
border: 1px solid rgba(233,185,99,0.35);
border-radius: 99px;
color: var(--gold);
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.05em;
transition: all .2s;
backdrop-filter: blur(6px);
}
.ldn-lang-btn:hover {
background: rgba(40,20,65,0.9);
border-color: rgba(233,185,99,0.7);
box-shadow: 0 0 14px rgba(233,185,99,0.35);
}
.ldn-lang-btn > i:first-child { font-size: 16px; }
.ldn-lang-caret { font-size: 11px; opacity: 0.7; }
.ldn-lang-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 160px;
background: rgba(20,10,35,0.96);
border: 1px solid rgba(233,185,99,0.35);
border-radius: 12px;
padding: 6px;
box-shadow: 0 12px 32px rgba(0,0,0,0.6);
backdrop-filter: blur(10px);
z-index: 10;
}
.ldn-lang-menu[hidden] { display: none; }
.ldn-lang-opt {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 9px 12px;
background: transparent;
border: 0;
border-radius: 8px;
color: var(--text);
font-size: 13px;
text-align: left;
cursor: pointer;
transition: background .15s;
}
.ldn-lang-opt:hover { background: rgba(233,185,99,0.12); }
.ldn-lang-opt.is-active { color: var(--gold); background: rgba(233,185,99,0.08); }
.ldn-lang-opt > i { margin-left: auto; color: var(--gold); }
.ldn-lang-flag { font-size: 16px; }
/* ===== Hero (split layout) ===== */
.ldn-hero {
position: relative;
z-index: 4;
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(380px, 480px);
gap: 56px;
padding: 28px 56px 24px;
max-width: 1280px;
width: 100%;
margin: 0 auto;
align-items: start;
}
.ldn-pitch { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ldn-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px;
background: rgba(184,132,255,0.1);
border: 1px solid rgba(184,132,255,0.3);
border-radius: 99px;
font-size: 12px;
font-weight: 600;
color: #d4b8ff;
width: fit-content;
letter-spacing: 0.04em;
}
.ldn-eyebrow > i { font-size: 14px; color: #b884ff; }
.ldn-title {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 800;
font-size: clamp(36px, 5.4vw, 64px);
line-height: 1.04;
letter-spacing: -0.01em;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.ldn-title-l1 {
background: linear-gradient(135deg, #fff7e0 0%, #f0c97c 50%, #d99548 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 30px rgba(233,185,99,0.25);
}
.ldn-title-l2 {
color: rgba(255,255,255,0.92);
font-size: 0.7em;
font-weight: 600;
font-style: italic;
opacity: 0.86;
}
.ldn-sub {
font-size: 16px;
line-height: 1.55;
color: rgba(220,210,200,0.78);
max-width: 580px;
margin: 0;
}
/* Live stats inline (3-up pills) */
.ldn-livestats {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 4px;
}
.ldn-livestat {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
background: rgba(20,10,35,0.65);
border: 1px solid rgba(233,185,99,0.22);
border-radius: 14px;
backdrop-filter: blur(6px);
flex: 1;
min-width: 130px;
}
.ldn-livestat > i {
font-size: 22px;
color: var(--gold);
filter: drop-shadow(0 0 8px rgba(233,185,99,0.4));
}
.lls-num {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 800;
font-size: 20px;
color: #fff;
line-height: 1;
}
.lls-lbl {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(220,210,200,0.6);
margin-top: 3px;
}
/* Realm stats grid (2x2 detail) */
.ldn-realm-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 6px;
}
.ldn-rstat {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(15,5,30,0.6);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
}
.ldn-rstat .lrs-icon {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
border-radius: 10px;
background: rgba(233,185,99,0.12);
color: var(--gold);
font-size: 18px;
}
.ldn-rstat.is-gold .lrs-icon { background: rgba(233,185,99,0.18); color: #f0c97c; }
.ldn-rstat.is-eldor .lrs-icon { background: rgba(184,132,255,0.18); color: #b884ff; }
.ldn-rstat.is-top .lrs-icon { background: rgba(255,170,80,0.18); color: #ffaa50; }
.lrs-num {
font-weight: 800;
font-size: 16px;
color: #fff;
line-height: 1;
}
.lrs-lbl {
font-size: 10.5px;
color: rgba(220,210,200,0.55);
margin-top: 3px;
letter-spacing: 0.04em;
}
/* ===== Auth card ===== */
.ldn-auth {
position: relative;
align-self: stretch;
}
.ldn-auth-glow {
position: absolute; inset: -20px;
background: radial-gradient(ellipse at center, rgba(233,185,99,0.18), transparent 65%);
pointer-events: none;
z-index: 0;
filter: blur(20px);
}
.ldn-auth-inner {
position: relative;
z-index: 1;
background: linear-gradient(180deg, rgba(28,15,50,0.92) 0%, rgba(15,7,30,0.95) 100%);
border: 1px solid rgba(233,185,99,0.32);
border-radius: 20px;
padding: 28px 28px 22px;
box-shadow:
0 24px 56px rgba(0,0,0,0.55),
0 0 0 1px rgba(255,255,255,0.04) inset,
0 1px 0 rgba(255,255,255,0.08) inset;
backdrop-filter: blur(8px);
}
.ldn-auth-header {
display: flex; align-items: center; gap: 14px;
margin-bottom: 18px;
}
.ldn-auth-crest {
width: 52px; height: 52px;
filter: drop-shadow(0 0 10px rgba(233,185,99,0.4));
}
.ldn-auth-title {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 700;
font-size: 20px;
color: #fff;
letter-spacing: 0.01em;
line-height: 1.1;
}
.ldn-auth-subtitle {
font-size: 12.5px;
color: rgba(220,210,200,0.6);
margin-top: 3px;
letter-spacing: 0.02em;
}
/* Referral banner */
.ldn-ref-banner {
display: flex; align-items: flex-start; gap: 10px;
padding: 12px;
background: linear-gradient(135deg, rgba(95,220,165,0.12), rgba(86,166,255,0.08));
border: 1px solid rgba(95,220,165,0.35);
border-radius: 12px;
margin-bottom: 14px;
}
.ldn-ref-banner > i {
font-size: 22px;
color: #5fdca5;
flex-shrink: 0;
margin-top: 2px;
}
.lrb-line1 { font-size: 13.5px; color: #fff; }
.lrb-line1 b { color: #5fdca5; }
.lrb-line2 { font-size: 12px; color: rgba(220,235,225,0.7); margin-top: 2px; }
/* Tabs */
.ldn-tabs {
position: relative;
display: flex;
gap: 4px;
background: rgba(8,4,20,0.6);
padding: 4px;
border-radius: 12px;
margin-bottom: 18px;
border: 1px solid rgba(255,255,255,0.05);
}
.ldn-tab {
flex: 1;
position: relative;
z-index: 2;
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 12px;
background: transparent;
border: 0;
border-radius: 9px;
color: rgba(220,210,200,0.6);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: color .25s;
}
.ldn-tab > i { font-size: 14px; }
.ldn-tab.is-active { color: #fff; }
.ldn-tab-indicator {
position: absolute;
top: 4px; bottom: 4px;
left: 4px;
width: calc(50% - 4px);
background: linear-gradient(135deg, rgba(233,185,99,0.22), rgba(184,132,255,0.18));
border: 1px solid rgba(233,185,99,0.4);
border-radius: 9px;
z-index: 1;
transition: transform .35s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.ldn-tab-indicator[data-pos="right"] { transform: translateX(100%); }
/* Form */
.ldn-form { display: flex; flex-direction: column; gap: 12px; }
.ldn-field {
position: relative;
display: flex;
align-items: center;
background: rgba(8,4,20,0.65);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 11px;
padding: 0 14px;
transition: all .2s;
}
.ldn-field:focus-within {
border-color: rgba(233,185,99,0.55);
box-shadow: 0 0 0 3px rgba(233,185,99,0.12), 0 0 18px rgba(233,185,99,0.18);
}
.ldn-field > i:first-child {
color: rgba(220,210,200,0.5);
font-size: 16px;
margin-right: 10px;
transition: color .2s;
}
.ldn-field:focus-within > i:first-child { color: var(--gold); }
.ldn-field > input {
flex: 1;
background: transparent;
border: 0;
padding: 14px 0;
color: #fff;
font-size: 14px;
font-family: inherit;
outline: none;
}
.ldn-field > input::placeholder { color: rgba(180,170,160,0.4); }
.ldn-field-tag {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(220,210,200,0.4);
padding: 3px 8px;
background: rgba(255,255,255,0.05);
border-radius: 6px;
margin-left: 8px;
}
.ldn-pwd-toggle {
background: transparent;
border: 0;
color: rgba(220,210,200,0.45);
cursor: pointer;
padding: 6px;
font-size: 16px;
transition: color .2s;
}
.ldn-pwd-toggle:hover { color: var(--gold); }
.ldn-submit {
position: relative;
margin-top: 6px;
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 15px 18px;
background: linear-gradient(135deg, #d99548 0%, #f0c97c 50%, #d99548 100%);
background-size: 200% 100%;
border: 0;
border-radius: 11px;
color: #1a0c00;
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 700;
font-size: 14.5px;
letter-spacing: 0.06em;
cursor: pointer;
overflow: hidden;
transition: all .35s;
box-shadow: 0 8px 22px rgba(217,149,72,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
}
.ldn-submit:hover {
background-position: 100% 0;
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(217,149,72,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
}
.ldn-submit:active { transform: translateY(0); }
.ldn-submit > i { font-size: 16px; }
.ldn-submit-arrow { transition: transform .25s; }
.ldn-submit:hover .ldn-submit-arrow { transform: translateX(3px); }
.lsb-glow {
position: absolute;
top: 0; left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: lsb-shine 3.5s ease-in-out infinite;
}
@keyframes lsb-shine {
0%, 70% { left: -60%; }
100% { left: 110%; }
}
.ldn-toggle-line {
text-align: center;
font-size: 12.5px;
color: rgba(220,210,200,0.55);
margin-top: 4px;
}
.ldn-toggle-line a {
color: var(--gold);
text-decoration: none;
font-weight: 600;
margin-left: 4px;
}
.ldn-toggle-line a:hover { text-decoration: underline; }
.ldn-trust-row {
display: flex; flex-wrap: wrap; gap: 10px;
justify-content: center;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.ldn-trust {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px;
color: rgba(220,210,200,0.55);
letter-spacing: 0.03em;
}
.ldn-trust > i { color: #5fdca5; font-size: 13px; }
/* ===== Features section ===== */
.ldn-features {
position: relative; z-index: 4;
padding: 32px 56px;
max-width: 1280px;
width: 100%;
margin: 0 auto;
}
.ldn-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.ldn-feat {
position: relative;
padding: 20px 18px;
background: linear-gradient(180deg, rgba(20,10,35,0.55) 0%, rgba(12,5,22,0.7) 100%);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 14px;
transition: all .25s;
overflow: hidden;
}
.ldn-feat::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top left, rgba(233,185,99,0.08), transparent 60%);
opacity: 0;
transition: opacity .25s;
}
.ldn-feat:hover {
transform: translateY(-3px);
border-color: rgba(233,185,99,0.32);
box-shadow: 0 14px 32px rgba(0,0,0,0.4);
}
.ldn-feat:hover::before { opacity: 1; }
.ldn-feat.is-highlight {
border-color: rgba(95,220,165,0.4);
background: linear-gradient(180deg, rgba(20,40,30,0.6) 0%, rgba(10,25,20,0.8) 100%);
}
.lf-icon {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 11px;
background: rgba(233,185,99,0.15);
color: var(--gold);
font-size: 22px;
margin-bottom: 12px;
}
.ldn-feat.is-highlight .lf-icon { background: rgba(95,220,165,0.18); color: #5fdca5; }
.lf-title {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 700;
font-size: 15px;
color: #fff;
margin-bottom: 6px;
letter-spacing: 0.01em;
}
.lf-desc {
font-size: 12.5px;
line-height: 1.45;
color: rgba(220,210,200,0.65);
}
/* ===== Steps strip ===== */
.ldn-steps {
position: relative; z-index: 4;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
padding: 24px 32px;
max-width: 1280px;
margin: 0 auto;
}
.ldn-step {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px;
background: rgba(15,7,30,0.55);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
font-size: 13px;
color: rgba(220,210,200,0.75);
letter-spacing: 0.02em;
}
.ldn-step.is-final {
border-color: rgba(95,220,165,0.4);
color: #d8f0e5;
}
.ls-num {
width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), #d99548);
color: #1a0c00;
font-weight: 800;
font-size: 12px;
}
.ldn-step.is-final .ls-num {
background: linear-gradient(135deg, #5fdca5, #4abc88);
color: #062018;
}
.ls-arrow {
color: rgba(233,185,99,0.4);
font-size: 18px;
}
/* ===== Quote footer ===== */
.ldn-quote {
position: relative; z-index: 4;
text-align: center;
font-style: italic;
font-family: var(--font-cormorant, 'Cormorant Garamond', serif);
font-size: 18px;
color: rgba(233,185,99,0.55);
letter-spacing: 0.05em;
padding: 18px 32px 36px;
max-width: 720px;
margin: 0 auto;
}
/* ============================================================
LDN Responsive
============================================================ */
@media (max-width: 1100px) {
.ldn-hero { grid-template-columns: 1fr; gap: 32px; padding: 24px 32px; }
.ldn-auth { max-width: 480px; width: 100%; margin: 0 auto; }
.ldn-features { padding: 24px 32px; }
.ldn-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.ldn-topbar { padding: 14px 16px; gap: 10px; }
.ldn-brand-logo { width: 38px; height: 38px; }
.ldn-brand-name { font-size: 16px; }
.ldn-brand-tag { font-size: 9.5px; }
.ldn-online-pulse { padding: 5px 10px; font-size: 11px; }
.ldn-online-pulse b { font-size: 12px; }
.ldn-lang-btn { padding: 5px 10px; font-size: 11.5px; }
.ldn-hero { padding: 18px 16px; gap: 22px; }
.ldn-title { font-size: clamp(28px, 9vw, 42px); }
.ldn-sub { font-size: 14.5px; }
.ldn-livestats { gap: 8px; }
.ldn-livestat { padding: 8px 12px; min-width: 100px; }
.ldn-livestat > i { font-size: 18px; }
.lls-num { font-size: 16px; }
.lls-lbl { font-size: 9.5px; }
.ldn-realm-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
.ldn-rstat { padding: 10px; }
.ldn-rstat .lrs-icon { width: 32px; height: 32px; font-size: 15px; }
.lrs-num { font-size: 14px; }
.lrs-lbl { font-size: 9.5px; }
.ldn-auth-inner { padding: 22px 20px 18px; }
.ldn-auth-title { font-size: 17px; }
.ldn-auth-crest { width: 44px; height: 44px; }
.ldn-features { padding: 18px 16px; }
.ldn-features-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.ldn-feat { padding: 14px 12px; }
.lf-icon { width: 36px; height: 36px; font-size: 18px; margin-bottom: 8px; }
.lf-title { font-size: 13px; }
.lf-desc { font-size: 11.5px; }
.ldn-steps { padding: 14px 16px; gap: 8px; }
.ldn-step { padding: 7px 12px; font-size: 11.5px; }
.ls-num { width: 22px; height: 22px; font-size: 11px; }
.ls-arrow { display: none; }
.ldn-quote { font-size: 15px; padding: 14px 16px 28px; }
}
@media (max-width: 420px) {
.ldn-features-grid { grid-template-columns: 1fr; }
.ldn-realm-stats { grid-template-columns: 1fr; }
.ldn-livestats { flex-direction: row; }
.ldn-livestat { flex: 1 1 0; min-width: 0; }
}
/* ================= CHARACTER CREATION ================= */
.creation-scene {
flex: 1;
overflow: auto;
padding: 40px;
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
}
.creation-header { text-align: center; max-width: 720px; }
.creation-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
width: 100%;
max-width: 1100px;
}
.race-list { display: flex; flex-direction: column; gap: 10px; }
.race-card {
display: flex;
gap: 14px;
align-items: center;
padding: 14px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
cursor: pointer;
transition: all 0.2s;
}
.race-card:hover { border-color: var(--primary); transform: translateX(4px); }
.race-card.active {
border-color: var(--gold);
background: linear-gradient(180deg, rgba(44,29,74,0.95) 0%, rgba(33,20,58,0.98) 100%);
box-shadow: var(--sh-glow-gold);
}
.race-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-deep));
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #fff;
border: 2px solid var(--border-gold);
flex-shrink: 0;
overflow: hidden;
box-shadow: 0 0 14px rgba(0,0,0,0.5);
}
.race-icon .race-portrait-img { font-size: 0; }
.race-icon .race-portrait-fa { font-size: 28px; }
.race-card.active .race-icon { border-color: var(--gold); box-shadow: var(--sh-glow-gold); }
.race-info { flex: 1; }
.race-name { font-family: var(--font-title); font-weight: 700; font-size: 16px; letter-spacing: 0.05em; }
.race-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.race-stats { display: flex; gap: 6px; margin-top: 6px; }
.race-stat { font-size: 10px; color: var(--gold); font-family: var(--font-mono); padding: 2px 6px; background: rgba(233,185,99,0.1); border-radius: 4px; }
.character-preview {
background: var(--panel);
border: 1px solid var(--border-gold);
border-radius: var(--r-xl);
padding: 30px;
display: flex;
flex-direction: column;
gap: 20px;
box-shadow: var(--sh-md), 0 0 30px rgba(233,185,99,0.08) inset;
min-height: 400px;
}
.preview-portrait {
width: 220px;
height: 220px;
margin: 0 auto;
border-radius: 50%;
background: radial-gradient(circle, rgba(164,125,255,0.2), transparent 70%), linear-gradient(135deg, #2c1d4a, #0a0612);
border: 3px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 96px;
color: var(--gold);
box-shadow: 0 0 50px rgba(233,185,99,0.4), inset 0 0 40px rgba(0,0,0,0.7);
position: relative;
overflow: hidden;
}
.preview-portrait::after {
content: "";
position: absolute;
inset: -14px;
border-radius: 50%;
border: 1px solid rgba(233,185,99,0.35);
pointer-events: none;
}
.preview-portrait .race-portrait-img { font-size: 0; }
.preview-portrait .race-portrait-fa { font-size: 96px; }
@media (max-width: 900px) { .creation-grid { grid-template-columns: 1fr; } }
/* ================= GAME SHELL ================= */
.game-shell {
display: grid;
grid-template-columns: 240px 1fr 320px;
grid-template-rows: 64px 1fr;
grid-template-areas:
"top top top"
"nav main side";
width: 100%;
height: 100%;
overflow: hidden;
}
.top-bar {
grid-area: top;
display: flex;
align-items: center;
padding: 0 20px;
gap: 16px;
background: linear-gradient(180deg, rgba(27,15,56,0.98) 0%, rgba(11,5,24,0.92) 100%);
border-bottom: 1px solid var(--border-gold);
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
position: relative;
z-index: 10;
}
.top-bar::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0.5;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 220px;
height: 48px;
cursor: pointer;
transition: filter 0.2s;
}
.brand:hover { filter: brightness(1.15); }
.brand img.brand-logo {
height: 48px;
width: auto;
filter: drop-shadow(0 2px 8px rgba(164,125,255,0.4));
}
.brand .brand-text {
font-family: var(--font-title);
font-weight: 900;
font-size: 18px;
color: var(--gold);
letter-spacing: 0.15em;
text-transform: uppercase;
}
.brand i { color: var(--primary); font-size: 22px; }
.top-divider { width: 1px; height: 30px; background: var(--border); margin: 0 4px; }
.player-resources {
display: flex;
gap: 10px;
align-items: center;
}
.resource {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 8px;
background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3));
border: 1px solid var(--border);
border-radius: var(--r-md);
min-width: 90px;
}
.resource i { font-size: 14px; }
.resource-val { font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
.resource.gold i { color: var(--gold); }
.resource.gold .resource-val { color: var(--gold); }
.resource.gems i { color: var(--r-epic); }
.resource.gems .resource-val { color: var(--r-epic); }
.resource.eldor i { color: var(--ember); filter: drop-shadow(0 0 6px rgba(255,132,50,0.5)); }
.resource.eldor .resource-val { color: var(--ember); }
.resource.usdt i { color: var(--mint); }
.resource.usdt .resource-val { color: var(--mint); }
.top-player {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 12px 4px 4px;
background: rgba(0,0,0,0.35);
border: 1px solid var(--border);
border-radius: 30px;
margin-left: auto;
}
.top-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-deep));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
border: 2px solid var(--gold);
font-family: var(--font-title);
overflow: hidden;
flex-shrink: 0;
}
.top-avatar .race-portrait-fa { font-size: 18px; }
.top-player-name { font-family: var(--font-title); font-weight: 600; letter-spacing: 0.05em; font-size: 13px; }
.vip-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 6px;
background: linear-gradient(135deg, var(--gold), var(--gold-deep));
color: #2a1a00;
border-radius: 8px;
font-size: 9px;
font-weight: 900;
letter-spacing: 0.1em;
font-family: var(--font-title);
box-shadow: 0 1px 4px rgba(233,185,99,0.4);
}
.vip-badge i { font-size: 8px; }
/* Notification dot */
.top-action-btn .notif-dot {
position: absolute;
top: 1px;
right: 1px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: var(--blood);
color: #fff;
border-radius: 8px;
border: 1px solid #000;
font-size: 10px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
}
/* Notif list */
.notif-list { display: flex; flex-direction: column; gap: 4px; max-height: 400px; overflow-y: auto; }
.notif-row {
display: flex;
gap: 12px;
padding: 10px 12px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
cursor: pointer;
transition: all 0.15s;
}
.notif-row.unread { background: linear-gradient(180deg, rgba(122,76,240,0.15), rgba(0,0,0,0.3)); border-color: var(--primary); }
.notif-row:hover { border-color: var(--gold); }
.notif-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-deep));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-family: var(--font-title); font-size: 13px; font-weight: 700; color: var(--gold); }
.notif-text { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.notif-time { font-size: 10px; color: var(--text-dim); margin-top: 4px; font-family: var(--font-mono); }
/* Achievements */
.ach-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.ach-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 14px;
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 14px;
align-items: center;
transition: all 0.15s;
}
.ach-card.status-claimed { border-color: var(--mint); background: linear-gradient(180deg, rgba(63,214,146,0.1), rgba(15,8,30,0.95)); }
.ach-card.status-unlocked { border-color: var(--gold); animation: achGlow 2s ease-in-out infinite; }
.ach-card.status-locked { opacity: 0.7; }
@keyframes achGlow {
0%, 100% { box-shadow: 0 0 14px rgba(233,185,99,0.2); }
50% { box-shadow: 0 0 24px rgba(233,185,99,0.45); }
}
.ach-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-deep));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
border: 2px solid var(--border-gold);
}
.ach-icon.unlocked { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #2a1a00; box-shadow: 0 0 14px rgba(233,185,99,0.5); }
.ach-icon.claimed { background: linear-gradient(135deg, var(--mint), #155a30); color: #001f0a; }
.ach-icon.locked { background: rgba(0,0,0,0.5); border-color: var(--border); color: var(--text-dim); filter: grayscale(60%); }
.ach-name { font-family: var(--font-title); font-weight: 700; letter-spacing: 0.04em; }
.ach-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.ach-progress { margin-top: 8px; }
.ach-bar { height: 4px; background: rgba(0,0,0,0.5); border-radius: 2px; overflow: hidden; }
.ach-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--gold)); transition: width 0.4s; }
.ach-prog-text { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.ach-rewards { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.ach-rewards span { display: inline-flex; align-items: center; gap: 3px; }
.ach-rewards i { color: var(--gold); }
.top-player-meta { font-size: 11px; color: var(--text-muted); }
.top-actions { display: flex; gap: 6px; }
.top-action-btn {
width: 36px;
height: 36px;
border-radius: var(--r-md);
background: rgba(0,0,0,0.35);
border: 1px solid var(--border);
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
position: relative;
}
.top-action-btn:hover { color: var(--gold); border-color: var(--gold); }
.top-action-btn .notif-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; background: var(--blood); border-radius: 50%; border: 1px solid #000; }
/* ---- LEFT SIDEBAR / NAV ---- */
.nav-sidebar {
grid-area: nav;
background: linear-gradient(180deg, rgba(15,8,30,0.96) 0%, rgba(5,3,10,1) 100%);
border-right: 1px solid var(--border);
overflow-y: auto;
padding: 12px 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.nav-section-label {
font-family: var(--font-title);
font-size: 10px;
color: var(--text-dim);
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 12px 12px 6px;
font-weight: 700;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: var(--r-md);
color: var(--text-muted);
cursor: pointer;
transition: all 0.18s;
font-size: 13px;
font-weight: 500;
border: 1px solid transparent;
position: relative;
}
.nav-item i { width: 18px; text-align: center; font-size: 14px; }
.nav-item:hover {
background: rgba(164,125,255,0.08);
color: var(--text);
}
.nav-item.active {
background: linear-gradient(90deg, rgba(164,125,255,0.2), rgba(164,125,255,0.05));
color: var(--gold);
border-color: rgba(233,185,99,0.3);
}
.nav-item.active::before {
content: "";
position: absolute;
left: 0;
top: 10%;
bottom: 10%;
width: 3px;
background: linear-gradient(180deg, transparent, var(--gold), transparent);
border-radius: 2px;
}
.nav-item .nav-badge {
margin-left: auto;
font-size: 10px;
padding: 2px 6px;
background: var(--blood);
color: #fff;
border-radius: 10px;
font-weight: 700;
}
.nav-item .nav-badge-gold {
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
}
.nav-item .nav-badge-beta {
background: linear-gradient(180deg, #6cd4ff, #2a8fc8);
color: #061a2a;
box-shadow: 0 0 8px rgba(108,212,255,0.5);
animation: nav-badge-beta-pulse 2.4s ease-in-out infinite;
letter-spacing: 0.06em;
}
/* Badge del countdown del Salón del Gremio en el menu lateral.
Usa fila auto para no empujar al chevron, y se acomoda antes de él. */
.nav-item .nav-cave-badge {
margin-left: auto;
margin-right: 6px;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 10px;
background: linear-gradient(180deg, #b884ff, #6e3acc);
color: #fff;
box-shadow: 0 0 8px rgba(184,132,255,0.5);
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
letter-spacing: 0.02em;
white-space: nowrap;
}
.nav-item .nav-cave-badge i { font-size: 11px; width: auto; }
.nav-item .nav-cave-badge.is-imminent {
background: linear-gradient(180deg, #ff8a5a, #c83838);
box-shadow: 0 0 10px rgba(255,90,90,0.7);
animation: nav-cave-badge-pulse 1s ease-in-out infinite;
}
.nav-item .nav-cave-badge.is-open {
background: linear-gradient(180deg, #5fd684, #2a9b4a);
box-shadow: 0 0 10px rgba(95,214,132,0.6);
animation: nav-cave-badge-pulse 1.6s ease-in-out infinite;
}
@keyframes nav-cave-badge-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
@keyframes nav-badge-beta-pulse {
0%, 100% { box-shadow: 0 0 6px rgba(108,212,255,0.4); }
50% { box-shadow: 0 0 14px rgba(108,212,255,0.8); }
}
.nav-item .nav-badge-event {
background: linear-gradient(180deg, #ffd766, #d4881f);
color: #2a1a00;
box-shadow: 0 0 8px rgba(255,180,60,0.55);
animation: nav-badge-event-pulse 2.4s ease-in-out infinite;
letter-spacing: 0.06em;
}
@keyframes nav-badge-event-pulse {
0%, 100% { box-shadow: 0 0 6px rgba(255,180,60,0.45); }
50% { box-shadow: 0 0 14px rgba(255,200,80,0.85); }
}
/* ---- RIGHT SIDEBAR ---- */
.side-panel {
grid-area: side;
background: linear-gradient(180deg, rgba(15,8,30,0.94) 0%, rgba(7,4,14,1) 100%);
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.side-block {
padding: 14px 16px;
border-bottom: 1px solid var(--border-soft);
}
.side-title {
font-family: var(--font-title);
font-size: 11px;
color: var(--gold);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
}
.side-title i { color: var(--primary); }
.vitals-panel .vital-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.vitals-panel .vital-row i { width: 20px; text-align: center; font-size: 13px; }
.vitals-panel .vital-row .bar { flex: 1; }
.vitals-panel .vital-row .v-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); min-width: 70px; text-align: right; }
/* Chat widget in side panel */
.chat-widget {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.chat-widget-tabs {
display: flex;
padding: 0 12px;
gap: 2px;
border-bottom: 1px solid var(--border-soft);
}
.chat-widget-tab {
padding: 8px 10px;
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.15s;
font-family: var(--font-title);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.chat-widget-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.chat-widget-body {
flex: 1;
overflow-y: auto;
padding: 10px 14px;
font-size: 12px;
line-height: 1.5;
}
.chat-msg { margin-bottom: 6px; word-wrap: break-word; }
.chat-msg .msg-channel { color: var(--text-dim); font-size: 10px; text-transform: uppercase; margin-right: 4px; }
.chat-msg .msg-sender { color: var(--gold); font-weight: 600; }
.chat-msg .msg-guild { color: var(--primary); font-weight: 700; font-size: 11px; margin-right: 4px; }
.chat-msg.system { color: var(--cyan); font-style: italic; }
.chat-widget-input {
display: flex;
gap: 6px;
padding: 10px 12px;
border-top: 1px solid var(--border-soft);
background: rgba(0,0,0,0.3);
}
.chat-widget-input input {
flex: 1;
padding: 7px 10px;
background: rgba(0,0,0,0.5);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--text);
font-size: 12px;
}
.chat-widget-input button {
width: 30px;
background: var(--primary-deep);
color: #fff;
border-radius: var(--r-sm);
font-size: 12px;
}
/* ---- MAIN ---- */
.main-area {
grid-area: main;
overflow-y: auto;
overflow-x: hidden;
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 18px;
}
/* Children del flex column del main-area NO deben shrinkear — sino el portrait se corta */
.main-area > * { flex-shrink: 0; }
.page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
border-bottom: 1px solid var(--border-soft);
padding-bottom: 14px;
margin-bottom: 4px;
}
.page-title {
font-family: var(--font-title);
font-size: 26px;
color: var(--gold);
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 800;
display: flex;
align-items: center;
gap: 12px;
}
.page-title i { color: var(--primary); font-size: 24px; }
.page-sub { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--text-muted); margin-top: 2px; }
/* Mobile: collapse shell */
.mobile-menu-btn { display: none; }
@media (max-width: 1100px) {
.game-shell {
grid-template-columns: 1fr;
grid-template-rows: 56px 1fr auto;
grid-template-areas: "top" "main" "nav";
}
.nav-sidebar {
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
border-right: none;
border-top: 1px solid var(--border);
padding: 8px;
gap: 2px;
}
.nav-section-label { display: none; }
.nav-item {
flex-direction: column;
min-width: 70px;
padding: 8px 6px;
gap: 4px;
font-size: 10px;
}
.nav-item i { font-size: 18px; }
.nav-item.active::before { display: none; }
.side-panel { display: none; }
.top-player-meta { display: none; }
.brand { font-size: 14px; min-width: 0; }
.brand span { display: none; }
.main-area { padding: 16px; }
.page-title { font-size: 20px; }
}
/* ================= CARDS ================= */
.card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 18px;
position: relative;
box-shadow: var(--sh-sm);
}
.card-title {
font-family: var(--font-title);
font-size: 13px;
color: var(--gold);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 14px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-soft);
}
.card-title i { color: var(--primary); }
.card-title .card-action { margin-left: auto; font-size: 12px; color: var(--text-muted); cursor: pointer; text-transform: none; letter-spacing: normal; font-family: var(--font-body); font-weight: 500; }
.card-title .card-action:hover { color: var(--gold); }
/* ================= CHARACTER SHEET ================= */
.sheet-grid {
display: grid;
grid-template-columns: 320px 1fr;
gap: 20px;
}
@media (max-width: 1100px) { .sheet-grid { grid-template-columns: 1fr; } }
.hero-portrait {
background:
radial-gradient(ellipse at center, rgba(164,125,255,0.2), transparent 65%),
linear-gradient(180deg, rgba(44,29,74,0.9), rgba(15,8,30,0.95));
border: 1px solid var(--border-gold);
border-radius: var(--r-xl);
padding: 24px;
text-align: center;
box-shadow: var(--sh-md), 0 0 30px rgba(164,125,255,0.1) inset;
}
.hero-portrait .portrait-circle {
width: 200px;
height: 200px;
margin: 0 auto 14px;
border-radius: 50%;
background: radial-gradient(circle, rgba(233,185,99,0.15), transparent 70%), linear-gradient(135deg, #2c1d4a, #0a0612);
border: 3px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 90px;
color: var(--gold);
box-shadow: 0 0 30px rgba(233,185,99,0.35), inset 0 0 40px rgba(0,0,0,0.7);
position: relative;
overflow: hidden;
}
.hero-portrait .portrait-circle .race-portrait-img { font-size: 0; }
.hero-portrait .portrait-circle .race-portrait-fa { font-size: 90px; }
.hero-portrait .portrait-circle::after {
content: "";
position: absolute;
inset: -10px;
border-radius: 50%;
border: 1px solid rgba(233,185,99,0.35);
pointer-events: none;
}
.hero-name {
font-family: var(--font-title);
font-size: 24px;
color: var(--gold);
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 800;
}
.hero-title-line {
font-family: var(--font-serif);
font-style: italic;
color: var(--text-muted);
font-size: 14px;
margin-top: 2px;
}
.stat-block { display: flex; flex-direction: column; gap: 10px; }
.attr-row {
display: grid;
grid-template-columns: 24px 1fr auto auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
transition: border-color 0.15s;
}
.attr-row:hover { border-color: var(--border); }
.attr-row i { color: var(--gold); font-size: 14px; }
.attr-row .attr-name { font-family: var(--font-title); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.attr-row .attr-val { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--gold); min-width: 28px; text-align: right; }
.attr-row .attr-add {
width: 26px;
height: 26px;
border-radius: var(--r-sm);
background: linear-gradient(180deg, #8d5dff, #5a28d0);
color: #fff;
font-weight: 900;
border: 1px solid var(--primary);
box-shadow: 0 2px 6px rgba(122,76,240,0.4);
}
.attr-row .attr-add:disabled { background: var(--bg-3); box-shadow: none; }
.derived-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.derived-cell {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: rgba(0,0,0,0.25);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
}
.derived-cell i { font-size: 18px; }
.derived-cell .d-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.derived-cell .d-val { font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: var(--gold); }
.dead-banner {
background: linear-gradient(180deg, rgba(138,14,28,0.4), rgba(68,4,10,0.6));
border: 1px solid var(--blood);
border-radius: var(--r-lg);
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(217,58,75,0.2);
}
.dead-banner i { font-size: 42px; color: var(--blood); margin-bottom: 8px; }
/* ================= WORLD / MAP ================= */
.world-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: 20px;
}
@media (max-width: 1200px) { .world-layout { grid-template-columns: 1fr; } }
.world-map {
background:
radial-gradient(ellipse 60% 50% at 50% 40%, rgba(233,185,99,0.06), transparent 70%),
linear-gradient(180deg, #1a1030 0%, #0a0512 100%);
border: 1px solid var(--border-gold);
border-radius: var(--r-lg);
padding: 20px;
position: relative;
min-height: 460px;
overflow: hidden;
}
.world-map::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(233,185,99,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(233,185,99,0.04) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.map-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
position: relative;
z-index: 1;
}
/* 2026-05-30: "Ciudades" hub-card — 1.5x ancha (span 2 columnas en el grid).
Visual distintivo (gold border + tinte cálido) para destacar como agrupador. */
.zone-card.is-cities-group {
grid-column: span 2;
border-color: rgba(232,196,106,0.45);
box-shadow: 0 0 18px -4px rgba(232,196,106,0.25);
position: relative;
}
.zone-card.is-cities-group .zc-name {
color: #f4d896;
text-shadow: 0 0 12px rgba(232,196,106,0.35);
}
.zone-card.is-cities-group .zc-icon {
background: linear-gradient(135deg, rgba(232,196,106,0.18), rgba(232,196,106,0.04));
border-color: rgba(232,196,106,0.6);
color: #f4d896;
}
.zone-card.is-cities-group:hover {
border-color: rgba(232,196,106,0.75);
box-shadow: 0 0 26px -2px rgba(232,196,106,0.45);
}
/* Mobile chico: si las cards son muy chicas, se queda en span 1 para no romper layout */
@media (max-width: 480px) {
.zone-card.is-cities-group { grid-column: span 2; }
}
/* =====================================================================
CITIES GROUP MODAL v3 — Cinematic Codex (2026-05-31)
Rediseño completo. Estructura por card:
[BANNER heráldico] [IMAGEN ciudad] [info: nombre + pill + flavor] [VIAJAR]
Banner: imagen 
con fallback CSS.
Prefix: .cgm-* (Cities Group Modal)
===================================================================== */
.cgm-overlay {
position: fixed; inset: 0; z-index: 200;
background:
radial-gradient(circle at 50% 50%, rgba(20,12,32,0.92) 0%, rgba(5,3,8,0.96) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: grid; place-items: center;
padding: 16px;
overflow-y: auto;
}
.cgm-modal {
--cgm-bg: #0c0818;
--cgm-bg-2: #1a1230;
--cgm-border: rgba(212,180,131,0.30);
--cgm-border-strong: rgba(244,216,150,0.55);
--cgm-gold: #d4b483;
--cgm-gold-hi: #f4d896;
--cgm-gold-grad: linear-gradient(180deg, #ffe79c 0%, #f4c876 40%, #c9923a 72%, #8e5e1d 100%);
--cgm-text: #ece2cd;
--cgm-text-soft: #b8a884;
--cgm-text-dim: #7a6850;
width: min(96vw, 880px);
max-height: 94vh;
display: flex; flex-direction: column;
background:
radial-gradient(120% 70% at 50% 0%, rgba(157,108,240,0.10) 0%, transparent 60%),
linear-gradient(180deg, var(--cgm-bg-2) 0%, var(--cgm-bg) 100%);
border: 1.5px solid var(--cgm-border);
border-radius: 18px;
box-shadow:
0 60px 140px -20px rgba(0,0,0,0.85),
inset 0 1px 0 rgba(255,255,255,0.04);
color: var(--cgm-text);
font-family: 'Inter', system-ui, sans-serif;
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Inner ornate frame (golden inner outline) */
.cgm-modal::before {
content: ''; position: absolute; inset: 8px;
border: 1px solid rgba(212,180,131,0.18);
border-radius: 12px; pointer-events: none;
z-index: 0;
}
.cgm-close {
position: absolute; top: 18px; right: 22px; z-index: 6;
width: 42px; height: 42px;
background: transparent;
border: 1.5px solid color-mix(in srgb, var(--cgm-gold) 45%, transparent);
border-radius: 50%;
color: var(--cgm-gold-hi);
display: grid; place-items: center;
font-size: 18px; cursor: pointer;
transition: all .15s;
}
.cgm-close:hover {
border-color: var(--cgm-gold);
background: rgba(212,180,131,0.10);
}
/* ============== HEADER ============== */
.cgm-header {
position: relative; z-index: 2;
display: flex; align-items: center; gap: 20px;
padding: 24px 32px 22px;
border-bottom: 1px solid rgba(212,180,131,0.15);
}
/* Diamond-framed icon (rotated square 45deg) */
.cgm-header-icon {
width: 64px; height: 64px;
position: relative;
transform: rotate(45deg);
background: linear-gradient(135deg, rgba(212,180,131,0.22), rgba(212,180,131,0.05));
border: 1.5px solid color-mix(in srgb, var(--cgm-gold) 55%, transparent);
border-radius: 6px;
flex-shrink: 0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
0 0 24px -8px rgba(212,180,131,0.40);
}
.cgm-header-icon i {
position: absolute; inset: 0;
display: grid; place-items: center;
transform: rotate(-45deg);
color: var(--cgm-gold-hi);
font-size: 28px;
filter: drop-shadow(0 0 12px rgba(244,216,150,0.45));
}
/* Corner diamonds en cada esquina del icono */
.cgm-header-icon::before,
.cgm-header-icon::after {
content: ''; position: absolute;
width: 5px; height: 5px;
background: var(--cgm-gold-hi);
border-radius: 1px;
box-shadow: 0 0 6px rgba(244,216,150,0.7);
}
.cgm-header-icon::before { top: -3px; left: -3px; }
.cgm-header-icon::after { bottom: -3px; right: -3px; }
.cgm-header-text { flex: 1; min-width: 0; }
.cgm-title {
margin: 0 0 8px;
font-family: 'Cinzel', serif; font-weight: 700;
font-size: 36px; letter-spacing: 5px; text-transform: uppercase;
background: linear-gradient(180deg, #fff7e6 0%, #f4d896 45%, #b08c5a 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 18px rgba(244,216,150,0.20);
line-height: 1;
}
.cgm-subtitle {
display: flex; align-items: center; gap: 12px;
font-family: 'Cinzel', serif; font-size: 12px;
font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
color: var(--cgm-text-soft);
}
.cgm-subtitle i {
font-size: 7px; color: #b884ff;
transform: rotate(45deg);
filter: drop-shadow(0 0 4px rgba(184,132,255,0.7));
}
/* ============== BODY ============== */
.cgm-body {
flex: 1 1 auto; overflow-y: auto;
padding: 18px 32px 24px;
position: relative; z-index: 2;
scrollbar-width: thin;
scrollbar-color: var(--cgm-border) transparent;
}
.cgm-body::-webkit-scrollbar { width: 6px; }
.cgm-body::-webkit-scrollbar-thumb { background: var(--cgm-border); border-radius: 3px; }
.cgm-intro {
margin: 0 0 18px;
text-align: center;
font-size: 13px;
font-style: italic;
color: var(--cgm-text-soft);
line-height: 1.5;
opacity: 0.85;
}
.cgm-list {
display: flex; flex-direction: column; gap: 14px;
}
/* ============== CITY CARD ============== */
.cgm-card {
--tint: var(--cgm-gold);
display: grid;
grid-template-columns: 230px 1fr auto;
align-items: stretch;
gap: 0;
padding: 0 22px 0 0; /* solo padding derecho — imagen flush a izq/arriba/abajo */
background:
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.30)),
linear-gradient(135deg,
color-mix(in srgb, var(--tint) 8%, transparent) 0%,
transparent 40%);
border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent);
border-radius: 14px;
transition: border-color .2s, transform .2s, box-shadow .2s;
position: relative;
overflow: visible; /* banner sobresale arriba del card */
min-height: 150px;
}
.cgm-card:hover {
border-color: color-mix(in srgb, var(--tint) 60%, transparent);
transform: translateY(-1px);
box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--tint) 45%, transparent);
}
.cgm-card.is-current {
border-color: var(--tint);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--tint) 60%, transparent),
0 0 30px -8px color-mix(in srgb, var(--tint) 70%, transparent);
}
.cgm-card.is-current:hover { transform: none; }
/* === Per-city tint === */
.cgm-card.tint-gold { --tint: #ffc857; }
.cgm-card.tint-cyan { --tint: #5fcfd6; }
.cgm-card.tint-ember { --tint: #e8703a; }
/* === City image — flush al borde izq/arriba/abajo === */
.cgm-card-img {
position: relative;
width: 230px;
height: 100%;
/* Border-radius solo en esquinas izquierdas para fundirse con el card */
border-radius: 13px 0 0 13px;
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,0.5);
/* Separador sutil con el contenido a la derecha */
border-right: 1px solid color-mix(in srgb, var(--tint) 30%, transparent);
}
/* === Heraldic banner overlay encima de la imagen (top-left).
Anclado al borde superior del card: el banner empieza casi al ras
con el top y baja ~125px dentro del card. === */
.cgm-banner {
position: absolute;
top: -8px; /* apenas sobresale arriba (efecto colgado) */
left: 14px;
width: 70px;
height: 130px; /* altura fija más compacta */
z-index: 4;
pointer-events: none;
display: grid; place-items: start center;
}
/* Contorno oscuro fino sobre la transparencia + glow tinted detrás +
sombra de profundidad. Stack de 4 drop-shadows hace de "outline" para
que el banner no se opaque cuando se superpone con la imagen clara. */
.cgm-banner-img {
width: 100%; height: 100%;
object-fit: contain;
object-position: top center;
filter:
drop-shadow(0 0 1px rgba(0,0,0,0.95))
drop-shadow(0 0 2px rgba(0,0,0,0.8))
drop-shadow(0 0 3px rgba(0,0,0,0.5))
drop-shadow(0 8px 16px rgba(0,0,0,0.55))
drop-shadow(0 0 14px color-mix(in srgb, var(--tint) 32%, transparent));
}
/* Fallback CSS-only por si la imagen no carga */
.cgm-banner-fallback {
width: 64px; height: 100%;
position: relative;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--tint) 30%, #1a0f24) 0%,
color-mix(in srgb, var(--tint) 12%, #0a0614) 50%,
color-mix(in srgb, var(--tint) 22%, #1a0f24) 100%);
clip-path: polygon(0% 5%, 50% 0%, 100% 5%, 100% 80%, 50% 100%, 0% 80%);
display: grid; place-items: center;
box-shadow: 0 0 24px -8px color-mix(in srgb, var(--tint) 50%, transparent);
}
.cgm-banner-fallback::before {
content: ''; position: absolute; inset: 3px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--tint) 18%, transparent),
color-mix(in srgb, var(--tint) 4%, transparent));
clip-path: inherit;
border: 1px solid color-mix(in srgb, var(--tint) 50%, transparent);
}
.cgm-banner-fallback i {
position: relative; z-index: 1;
font-size: 32px;
color: var(--tint);
filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tint) 50%, transparent));
margin-top: -8px;
}
/* === Info column === */
.cgm-card-info {
min-width: 0;
display: flex; flex-direction: column; justify-content: center;
gap: 10px;
padding: 16px 18px;
}
.cgm-card-name {
margin: 0;
font-family: 'Cinzel', serif; font-weight: 700;
font-size: 26px;
letter-spacing: 0.08em; text-transform: uppercase;
line-height: 1;
background: linear-gradient(180deg,
color-mix(in srgb, var(--tint) 100%, white 20%) 0%,
var(--tint) 60%,
color-mix(in srgb, var(--tint) 60%, black 30%) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 14px color-mix(in srgb, var(--tint) 35%, transparent);
}
.cgm-card-flavor {
font-style: italic;
font-size: 12px;
color: var(--cgm-text-soft);
line-height: 1.5;
opacity: 0.78;
max-width: 360px;
}
.cgm-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cgm-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 13px;
border-radius: 999px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.06);
font-family: 'Inter', system-ui, sans-serif;
}
.cgm-pill i { font-size: 13px; }
.cgm-pill-val {
font-size: 13px;
font-weight: 800;
letter-spacing: 0;
font-family: 'JetBrains Mono', monospace;
}
.cgm-pill-sep {
width: 1px; height: 12px;
background: currentColor;
opacity: 0.35;
}
.cgm-pill-lbl {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
opacity: 0.80;
}
.cgm-pill.is-hp { color: #ff7da9; border-color: rgba(255,125,169,0.50); background: rgba(255,125,169,0.10); }
.cgm-pill.is-mp { color: #6cd4ff; border-color: rgba(108,212,255,0.50); background: rgba(108,212,255,0.10); }
.cgm-pill.is-sta { color: #ffd54a; border-color: rgba(255,213,74,0.50); background: rgba(255,213,74,0.10); }
/* === Travel button — ticket-shape with notched corners === */
.cgm-travel {
position: relative;
align-self: center;
min-width: 170px;
height: 60px;
padding: 0 22px;
border: 0;
background: var(--cgm-gold-grad);
color: #1a120a;
font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px;
letter-spacing: 0.22em; text-transform: uppercase;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
flex-shrink: 0;
/* Ticket shape: notched corners */
clip-path: polygon(
14px 0%, calc(100% - 14px) 0%,
100% 50%, calc(100% - 14px) 100%,
14px 100%, 0% 50%
);
box-shadow:
0 12px 28px -10px rgba(212,180,131,0.55),
inset 0 2px 0 rgba(255,255,255,0.45);
transition: filter .15s, transform .15s;
}
.cgm-travel-ic {
display: inline-flex; align-items: center; justify-content: center;
font-size: 19px;
color: #1a120a;
filter: drop-shadow(0 1px 1px rgba(255,255,255,0.4));
flex-shrink: 0;
}
.cgm-travel-lbl { font-size: 15px; line-height: 1; }
.cgm-travel:not(:disabled):hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
.cgm-travel:disabled { opacity: 0.6; cursor: not-allowed; }
/* "Estás aquí" CTA — outline tinted same ticket shape */
.cgm-here-cta {
position: relative;
align-self: center;
min-width: 170px;
height: 60px;
padding: 0 22px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--tint) 12%, transparent),
color-mix(in srgb, var(--tint) 4%, transparent));
color: var(--tint);
font-family: 'Cinzel', serif;
font-size: 13px; font-weight: 700;
letter-spacing: 0.20em; text-transform: uppercase;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
flex-shrink: 0;
clip-path: polygon(
14px 0%, calc(100% - 14px) 0%,
100% 50%, calc(100% - 14px) 100%,
14px 100%, 0% 50%
);
/* Border via outer pseudo (since clip-path kills border) */
border: 0;
}
.cgm-here-cta::before {
content: ''; position: absolute; inset: 0;
border: 1.5px solid color-mix(in srgb, var(--tint) 65%, transparent);
clip-path: inherit;
pointer-events: none;
}
.cgm-here-cta i { font-size: 16px; color: var(--tint); }
/* ============== MOBILE ============== */
/* ≤720px: layout side-by-side (imagen izq + info/botón apilados der) — más compacto */
@media (max-width: 720px) {
.cgm-modal { width: 100%; max-height: 94vh; border-radius: 12px; }
.cgm-header { padding: 14px 16px 10px; gap: 10px; }
.cgm-header-icon { width: 38px; height: 38px; }
.cgm-header-icon i { font-size: 18px; }
.cgm-header-icon::before, .cgm-header-icon::after { width: 4px; height: 4px; }
.cgm-title { font-size: 18px; letter-spacing: 2px; margin: 0 0 4px; }
.cgm-subtitle { font-size: 9px; letter-spacing: 0.18em; gap: 6px; }
.cgm-close { width: 32px; height: 32px; top: 12px; right: 14px; font-size: 14px; }
.cgm-body { padding: 10px 12px 14px; }
.cgm-intro { font-size: 11px; margin: 0 0 10px; }
.cgm-list { gap: 10px; }
.cgm-card {
grid-template-columns: 110px 1fr;
grid-template-areas:
"image info"
"image btn";
grid-template-rows: 1fr auto;
gap: 0;
padding: 0 10px 10px 0;
min-height: 0;
border-radius: 10px;
}
.cgm-card-img {
grid-area: image;
width: 110px; height: 100%;
min-height: 100px;
border-radius: 9px 0 0 9px;
}
.cgm-banner {
top: -4px; left: 6px;
width: 44px;
height: 78px;
}
.cgm-card-info { grid-area: info; padding: 8px 10px 4px; gap: 5px; }
.cgm-card-name { font-size: 15px; letter-spacing: 1px; }
.cgm-card-flavor { font-size: 10.5px; max-width: none; line-height: 1.35; }
.cgm-pills { gap: 5px; }
.cgm-pill { padding: 3px 8px; gap: 5px; }
.cgm-pill i { font-size: 10px; }
.cgm-pill-val { font-size: 11px; }
.cgm-pill-sep { height: 9px; }
.cgm-pill-lbl { font-size: 9.5px; letter-spacing: 0.06em; }
.cgm-travel, .cgm-here-cta {
grid-area: btn;
/* Botón compacto auto-width alineado a la derecha (no ocupa ancho completo) */
justify-self: end;
width: auto;
min-width: 96px;
max-width: 140px;
height: 30px;
padding: 0 14px;
margin-top: 0;
margin-right: 4px;
font-size: 10px;
letter-spacing: 0.12em;
gap: 5px;
/* Reducir notch del clip-path para que se vea bien al ser chico */
clip-path: polygon(
8px 0%, calc(100% - 8px) 0%,
100% 50%, calc(100% - 8px) 100%,
8px 100%, 0% 50%
);
}
.cgm-travel-ic { font-size: 12px; }
.cgm-travel-lbl { font-size: 10px; }
.cgm-here-cta i { font-size: 12px; }
}
/* ≤420px: aún más compacto, sigue side-by-side para no desperdiciar verticales */
@media (max-width: 420px) {
.cgm-header { padding: 12px 14px 8px; gap: 9px; }
.cgm-header-icon { width: 34px; height: 34px; }
.cgm-header-icon i { font-size: 16px; }
.cgm-title { font-size: 16px; letter-spacing: 1.5px; }
.cgm-subtitle { font-size: 8.5px; gap: 5px; }
.cgm-card { grid-template-columns: 96px 1fr; }
.cgm-card-img { width: 96px; min-height: 92px; }
.cgm-banner { top: -4px; left: 5px; width: 38px; height: 68px; }
.cgm-card-name { font-size: 14px; letter-spacing: 0.7px; }
.cgm-card-flavor { display: none; } /* texto flavor oculto en muy chico */
.cgm-travel, .cgm-here-cta {
height: 28px; font-size: 9.5px; padding: 0 11px;
min-width: 84px; max-width: 124px;
letter-spacing: 0.10em;
}
.cgm-travel-ic { font-size: 11px; }
.cgm-travel-lbl { font-size: 9.5px; }
.cgm-here-cta i { font-size: 11px; }
}
.zone-card {
background: linear-gradient(180deg, rgba(33,20,58,0.95), rgba(15,8,30,0.98));
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 14px;
cursor: pointer;
transition: all 0.2s;
position: relative;
overflow: hidden;
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.zone-card.has-bg .z-icon {
position: absolute;
top: 14px;
right: 14px;
margin-bottom: 0;
}
.zone-card.has-bg .z-name { text-shadow: 0 2px 6px rgba(0,0,0,0.9); }
.zone-card.has-bg .z-sub { color: rgba(234,224,255,0.8); text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.zone-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--sh-md); }
.zone-card.current { border-color: var(--gold); box-shadow: var(--sh-glow-gold); }
.zone-card.locked { opacity: 0.45; cursor: not-allowed; filter: grayscale(60%); }
.zone-card .z-icon {
width: 48px;
height: 48px;
border-radius: var(--r-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #fff;
margin-bottom: 10px;
box-shadow: var(--sh-sm);
position: relative;
}
.z-icon.city { background: linear-gradient(135deg, #4cc4ff, #1a5a8e); }
.z-icon.farm { background: linear-gradient(135deg, #5fd684, #1a6a3a); }
.z-icon.pvp { background: linear-gradient(135deg, #ff4e5f, #7a0e1c); }
.z-icon.dungeon { background: linear-gradient(135deg, #2a2d3a, #060812); }
.z-icon.territory { background: linear-gradient(135deg, #e9b963, #7a5210); }
.z-icon.wild { background: linear-gradient(135deg, #94d2bd, #2a5048); }
.z-icon.event { background: linear-gradient(135deg, #c277ff, #4a1fa8); }
.zone-card .z-name { font-family: var(--font-title); font-weight: 700; letter-spacing: 0.05em; font-size: 14px; }
.zone-card .z-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.zone-card .z-tags { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.zone-detail {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
}
.zone-detail-bg {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.65;
}
.zone-detail > *:not(.zone-detail-bg) { position: relative; z-index: 1; }
.zone-detail .z-header { display: flex; gap: 14px; align-items: center; }
.zone-detail .z-header .z-icon { width: 60px; height: 60px; font-size: 26px; }
.zone-detail .z-big-name { font-family: var(--font-title); font-size: 20px; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; }
.zone-detail .z-desc { font-family: var(--font-serif); font-style: italic; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
/* ================= COMBAT ================= */
.combat-arena {
background: linear-gradient(180deg, rgba(15,8,30,0.96), rgba(5,3,10,1));
border: 1px solid var(--border-gold);
border-radius: var(--r-lg);
padding: 24px;
position: relative;
overflow: hidden;
}
.combat-arena::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(217,58,75,0.15), transparent 70%);
pointer-events: none;
}
.combat-parties { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 20px; align-items: center; position: relative; z-index: 1; }
.combatant { text-align: center; padding: 14px; background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: var(--r-lg); }
.combatant-sprite {
width: 130px;
height: 130px;
margin: 0 auto 10px;
border-radius: 50%;
background: radial-gradient(circle, rgba(164,125,255,0.2), transparent 70%), linear-gradient(135deg, #2c1d4a, #0a0612);
border: 2px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 56px;
color: var(--gold);
box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
overflow: hidden;
}
.combatant-sprite .race-portrait-img { font-size: 0; }
.combatant-sprite .race-portrait-fa { font-size: 56px; }
.combatant.enemy .combatant-sprite { border-color: var(--blood); color: var(--blood); background: radial-gradient(circle, rgba(217,58,75,0.2), transparent 70%), linear-gradient(135deg, #4a151d, #0a0305); }
.combat-vs {
font-family: var(--font-title);
font-size: 36px;
color: var(--gold);
text-align: center;
font-weight: 900;
letter-spacing: 0.08em;
text-shadow: 0 0 20px rgba(233,185,99,0.5);
}
.combat-log {
margin-top: 20px;
background: rgba(0,0,0,0.55);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px 18px;
max-height: 260px;
overflow-y: auto;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.7;
position: relative;
z-index: 1;
}
.combat-log .log-turn { color: var(--text-muted); }
.combat-log .log-hit { color: var(--gold); }
.combat-log .log-crit { color: var(--blood); font-weight: 700; }
.combat-log .log-miss { color: var(--text-dim); font-style: italic; }
.combat-log .log-heal { color: var(--mint); }
.combat-log .log-loot { color: var(--r-epic); }
.combat-log .log-result { font-family: var(--font-title); font-size: 14px; letter-spacing: 0.1em; padding-top: 8px; border-top: 1px solid var(--border-soft); margin-top: 8px; }
.monster-list { display: flex; flex-direction: column; gap: 8px; }
.monster-row {
display: grid;
grid-template-columns: 48px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-radius: var(--r-md);
transition: all 0.15s;
}
.monster-row:hover { border-color: var(--blood); background: rgba(30,10,20,0.4); }
.monster-icon {
width: 48px;
height: 48px;
border-radius: var(--r-md);
background: linear-gradient(135deg, #4a151d, #0a0305);
display: flex;
align-items: center;
justify-content: center;
color: var(--blood);
font-size: 22px;
border: 1px solid var(--border);
}
.monster-icon.boss { background: linear-gradient(135deg, #7a4e1f, #2a1a00); color: var(--gold); border-color: var(--gold); box-shadow: 0 0 16px rgba(233,185,99,0.3); }
.monster-info .m-name { font-family: var(--font-title); font-weight: 600; font-size: 14px; letter-spacing: 0.05em; }
.monster-info .m-meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.player-list { display: flex; flex-direction: column; gap: 8px; }
.player-row {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-radius: var(--r-md);
}
.player-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-deep));
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-family: var(--font-title);
color: #fff;
border: 1px solid var(--border-gold);
overflow: hidden;
flex-shrink: 0;
}
/* ================= TURN-BASED COMBAT ================= */
.combatant-bars { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.combatant-bars .bar { height: 10px; }
.active-buffs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; justify-content: center; }
.active-buff {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: linear-gradient(180deg, rgba(63,214,146,0.18), rgba(22,122,72,0.1));
border: 1px solid var(--mint);
border-radius: 12px;
color: var(--mint);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
}
.active-buff i { font-size: 9px; }
.combat-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin-top: 18px;
}
.combat-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 12px;
background: linear-gradient(180deg, rgba(33,20,58,0.92), rgba(15,8,30,0.98));
border: 1px solid var(--border);
border-radius: var(--r-md);
cursor: pointer;
transition: all 0.18s;
color: var(--text);
}
.combat-btn:not(.disabled):hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.combat-btn.disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(40%); }
.combat-btn.primary { border-color: var(--blood); background: linear-gradient(180deg, rgba(58,12,20,0.6), rgba(15,8,30,0.95)); }
.combat-btn.primary:not(.disabled):hover { box-shadow: 0 4px 18px rgba(217,58,75,0.3); }
.combat-btn.skill { border-color: var(--primary); }
.combat-btn.skill:not(.disabled):hover { border-color: var(--primary); box-shadow: 0 4px 18px rgba(164,125,255,0.3); }
.combat-btn.ultimate { border-color: var(--gold); background: linear-gradient(180deg, rgba(58,40,12,0.6), rgba(15,8,30,0.95)); }
.combat-btn.ultimate:not(.disabled):hover { box-shadow: 0 4px 22px rgba(233,185,99,0.4); }
.combat-btn.flee { border-color: var(--text-dim); }
.combat-btn > i { font-size: 24px; color: var(--gold); }
.combat-btn.skill > i, .combat-btn.skill .cb-icon { color: var(--primary); }
.combat-btn.ultimate > i, .combat-btn.ultimate .cb-icon { color: var(--gold); }
.cb-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.cb-icon .ability-img {
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.cb-name { font-family: var(--font-title); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-align: center; }
.cb-meta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: 10px; font-family: var(--font-mono); }
.combat-result {
margin-top: 18px;
padding: 26px 22px;
text-align: center;
background: linear-gradient(180deg, rgba(33,20,58,0.95), rgba(15,8,30,0.98));
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-md);
}
.combat-result.mint { border-color: var(--mint); box-shadow: 0 0 30px rgba(63,214,146,0.2), var(--sh-md); }
.combat-result.blood { border-color: var(--blood); box-shadow: 0 0 30px rgba(217,58,75,0.2), var(--sh-md); }
.combat-result.cyan { border-color: var(--cyan); }
.cr-icon { font-size: 48px; margin-bottom: 10px; }
.combat-result.mint .cr-icon { color: var(--mint); }
.combat-result.blood .cr-icon { color: var(--blood); }
.combat-result.cyan .cr-icon { color: var(--cyan); }
.cr-title { font-family: var(--font-title); font-size: 28px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; margin-bottom: 14px; }
.cr-rewards { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-bottom: 10px; }
.cr-reward { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cr-reward i { font-size: 22px; }
.cr-reward b { font-family: var(--font-mono); font-size: 18px; color: var(--gold); }
.cr-reward span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.cr-levelup {
margin-top: 10px;
padding: 10px;
background: linear-gradient(135deg, rgba(233,185,99,0.2), rgba(122,76,240,0.15));
border: 1px solid var(--gold);
border-radius: var(--r-md);
font-family: var(--font-title);
color: var(--gold);
letter-spacing: 0.1em;
text-transform: uppercase;
animation: levelupPulse 1.5s ease-in-out infinite;
}
@keyframes levelupPulse {
0%, 100% { box-shadow: 0 0 14px rgba(233,185,99,0.3); }
50% { box-shadow: 0 0 28px rgba(233,185,99,0.55); }
}
.cr-loot-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
margin-top: 12px;
}
.cr-loot-item {
font-family: var(--font-mono);
font-size: 11px;
padding: 4px 10px;
background: rgba(76,196,255,0.1);
border: 1px solid rgba(76,196,255,0.3);
border-radius: 12px;
color: var(--cyan);
}
/* ================= INVENTORY ================= */
/* 2026-05-15: Desktop V2 — 2 columnas. Personaje (avatar + stats + cinturón) /
Centro (tabs + equipo + items + filtros). Click en item abre el modal viejo.
Fondo: imagen de inventario (la que había antes) full-bleed con overlay oscuro.
NOTA: NO usar overflow:hidden aquí — rompe `position: sticky` del personaje.
2026-05-15: min-height fija a viewport para que no se vea el "cachito al final
sin completar". El gradient bottom blendea al color base del body (#05030a). */
.inv-desktop-v2 {
position: relative;
display: grid;
grid-template-columns: 260px 1fr;
grid-template-rows: auto auto; /* header (auto) + content (auto, no estira) */
column-gap: 16px;
row-gap: 14px;
align-items: start;
padding: clamp(14px, 1.4vw, 22px) clamp(20px, 2.4vw, 40px) 80px;
margin: -24px -28px 0;
border-radius: 0;
min-height: calc(100vh - 60px);
background:
linear-gradient(180deg, rgba(5,3,10,0.45) 0%, rgba(5,3,10,0.72) 55%, #05030a 100%),
url('../assets/bg/inventory.webp') center top / cover no-repeat,
#05030a;
}
.inv-desktop-v2 > * { max-width: 100%; min-width: 0; }
/* 2026-05-15: en pantallas grandes, escalamos columnas + slots para aprovechar
el ancho. No usar max-width artificial — preferimos que todo se vea grande.
NOTA: usamos selectores con .inv-desktop-v2 como ancestro para ganar
especificidad sobre las reglas base que están MÁS abajo en el archivo. */
@media (min-width: 1500px) {
.inv-desktop-v2 { grid-template-columns: 300px 1fr; }
.inv-desktop-v2 .inv-v2-avatar { width: 160px; height: 160px; }
.inv-desktop-v2 .inv-v2-stat { font-size: 13.5px; padding: 6px 8px; }
.inv-desktop-v2 .inv-v2-stat-l { font-size: 12px; }
.inv-desktop-v2 .inv-v2-stat-v { font-size: 13.5px; }
/* Items del grid: solo un cachito más grandes que en pantalla chica (no muy diferente) */
.inv-desktop-v2 .inv-v2-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; padding: 12px; }
.inv-desktop-v2 .inv-v2-grid .inv-cell { font-size: 26px; border-radius: 10px; }
/* Slots del equipo siguen más grandes para mostrar paperdoll prominente */
.inv-desktop-v2 .inv-v2-equip-grid { gap: 10px; }
.inv-desktop-v2 .inv-v2-slot { font-size: 34px; }
.inv-desktop-v2 .inv-v2-page-header .page-title { font-size: 24px; }
.inv-desktop-v2 .inv-v2-page-header .page-title > i { font-size: 26px; }
}
@media (min-width: 1900px) {
.inv-desktop-v2 { grid-template-columns: 340px 1fr; column-gap: 22px; }
.inv-desktop-v2 .inv-v2-avatar { width: 180px; height: 180px; }
/* Inventario apenas más grande que en 1500px — no enorme */
.inv-desktop-v2 .inv-v2-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 9px; padding: 14px; }
.inv-desktop-v2 .inv-v2-grid .inv-cell { font-size: 28px; }
/* Slots del equipo SÍ se hacen más grandes */
.inv-desktop-v2 .inv-v2-slot { font-size: 38px; }
.inv-desktop-v2 .inv-v2-equip-grid { gap: 12px; }
.inv-desktop-v2 .inv-v2-page-header .page-title { font-size: 28px; }
.inv-desktop-v2 .inv-v2-page-header .page-title > i { font-size: 30px; }
.inv-desktop-v2 .inv-v2-page-header .page-sub { font-size: 14px; margin-left: 40px; }
.inv-desktop-v2 .inv-v2-tab { padding: 10px 20px; font-size: 13.5px; }
}
@media (max-width: 900px) {
.inv-desktop-v2 { grid-template-columns: 1fr; margin: -24px -16px 0; padding: 14px; }
}
.inv-v2-section-head {
display: flex;
align-items: center;
gap: 8px;
padding: 0 4px 8px;
font-family: var(--font-title);
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold);
}
.inv-v2-section-head > i { font-size: 14px; }
.inv-v2-section-head-race { color: #c39dff; }
.inv-v2-section-head-race > i { color: #b884ff; }
/* Header de página (título + descripción) — abarca las 2 columnas del grid.
2026-05-15: decoración inferior con líneas doradas que separan el header del
contenido (sin dejar el gigantesco gap). */
.inv-v2-page-header {
grid-column: 1 / -1;
padding: 4px 0 12px;
border-bottom: 1px solid rgba(255, 200, 87, 0.15);
position: relative;
}
.inv-v2-page-header::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 200, 87, 0) 10%,
rgba(255, 200, 87, 0.6) 50%,
rgba(255, 200, 87, 0) 90%,
transparent 100%);
pointer-events: none;
}
.inv-v2-page-header .page-title {
font-family: var(--font-title);
font-size: 22px;
font-weight: 800;
color: var(--gold);
display: flex;
align-items: center;
gap: 10px;
line-height: 1.1;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
letter-spacing: 0.04em;
}
.inv-v2-page-header .page-title > i {
font-size: 24px;
filter: drop-shadow(0 0 6px rgba(233,185,99,0.4));
}
.inv-v2-page-header .page-sub {
font-size: 12.5px;
color: rgba(255,255,255,0.6);
margin-top: 3px;
margin-left: 34px;
font-style: italic;
line-height: 1.2;
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
/* ===== LEFT: PERSONAJE ===== */
.inv-v2-personaje {
background: linear-gradient(180deg, rgba(33,20,58,0.95), rgba(15,8,30,0.98));
border: 1px solid rgba(255,200,87,0.18);
border-radius: var(--r-lg);
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
position: sticky;
top: 16px;
align-self: start;
}
.inv-v2-avatar {
width: 140px;
height: 140px;
margin: 4px auto 6px;
border-radius: 50%;
border: 3px solid rgba(255,200,87,0.45);
overflow: hidden;
display: grid;
place-items: center;
background: linear-gradient(135deg, rgba(184,132,255,0.25), rgba(255,200,87,0.15));
box-shadow: 0 6px 20px rgba(0,0,0,0.55), inset 0 0 20px rgba(255,200,87,0.1);
}
.inv-v2-avatar .race-portrait-img {
width: 100%; height: 100%;
background-size: cover;
background-position: center;
border-radius: 50%;
}
.inv-v2-avatar .race-portrait-fa { font-size: 60px; }
.inv-v2-lv-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-title);
font-weight: 800;
padding: 0 4px;
}
.inv-v2-lv-num { font-size: 16px; color: #fff; }
.inv-v2-lv-pct { font-size: 12px; color: var(--gold); }
.inv-v2-xp-bar {
height: 6px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 999px;
overflow: hidden;
}
.inv-v2-xp-fill {
height: 100%;
background: linear-gradient(90deg, #b884ff, #ffc857);
border-radius: inherit;
transition: width 0.4s ease;
}
.inv-v2-stats {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
}
.inv-v2-stat {
display: grid;
grid-template-columns: 18px 1fr auto;
align-items: center;
gap: 8px;
padding: 5px 6px;
background: rgba(0,0,0,0.25);
border-radius: 6px;
font-size: 12.5px;
}
.inv-v2-stat > i { font-size: 14px; color: rgba(255,255,255,0.55); text-align: center; }
.inv-v2-stat-l {
font-family: var(--font-title);
font-weight: 700;
font-size: 11px;
color: rgba(255,255,255,0.7);
letter-spacing: 0.05em;
}
.inv-v2-stat-v {
font-family: var(--font-mono);
font-weight: 800;
color: #fff;
font-size: 12.5px;
}
/* ===== CENTER: MAIN ===== */
.inv-v2-main {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.inv-v2-tabs {
display: flex;
gap: 8px;
padding: 8px;
background: linear-gradient(180deg, rgba(33,20,58,0.55), rgba(15,8,30,0.7));
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
}
.inv-v2-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
color: rgba(255,255,255,0.65);
font-family: var(--font-title);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 0.15s ease;
}
.inv-v2-tab > i { font-size: 14px; }
.inv-v2-tab > b {
margin-left: 4px;
padding: 2px 8px;
background: rgba(255,255,255,0.1);
border-radius: 999px;
font-size: 11px;
color: #fff;
}
.inv-v2-tab:hover { color: #fff; border-color: rgba(255,255,255,0.18); }
.inv-v2-tab.active {
background: linear-gradient(180deg, rgba(233,185,99,0.30), rgba(233,185,99,0.10));
border-color: rgba(233,185,99,0.6);
color: var(--gold);
}
.inv-v2-tab.active > b { background: rgba(233,185,99,0.28); color: var(--gold); }
.inv-v2-tab-overflow.active {
background: linear-gradient(180deg, rgba(255,138,138,0.25), rgba(255,138,138,0.08));
border-color: rgba(255,138,138,0.55);
color: #ff8a8a;
}
.inv-v2-tab-overflow.active > b { background: rgba(255,138,138,0.28); color: #ff8a8a; }
/* Equipment sections */
.inv-v2-equip {
background: linear-gradient(180deg, rgba(33,20,58,0.55), rgba(15,8,30,0.7));
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
padding: 14px 16px;
}
/* 2026-05-15: equipo normal y de raza en 2 columnas side-by-side.
Slots adaptables al ancho disponible (auto-fill + minmax). */
.inv-v2-equip-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 1100px) {
.inv-v2-equip-cols { grid-template-columns: 1fr; }
}
.inv-v2-equip-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: 8px;
justify-content: start;
}
.inv-v2-slot {
aspect-ratio: 1 / 1;
padding: 8px;
border-radius: 10px;
background: rgba(0,0,0,0.45);
border: 1.5px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
position: relative;
cursor: pointer;
transition: transform 0.12s, border-color 0.15s, background 0.15s;
overflow: hidden;
min-width: 0;
}
.inv-v2-slot:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.18); }
.inv-v2-slot.filled {
background: linear-gradient(180deg, rgba(20,12,40,0.92), rgba(10,6,20,0.95));
}
.inv-v2-slot.rb-common.filled { border-color: #b4b4c8; box-shadow: 0 0 0 1px rgba(180,180,200,0.2), 0 0 12px rgba(180,180,200,0.18); }
.inv-v2-slot.rb-uncommon.filled { border-color: #5fd684; box-shadow: 0 0 0 1px rgba(95,214,132,0.2), 0 0 12px rgba(95,214,132,0.2); }
.inv-v2-slot.rb-rare.filled { border-color: #5aa6ff; box-shadow: 0 0 0 1px rgba(90,166,255,0.2), 0 0 12px rgba(90,166,255,0.2); }
.inv-v2-slot.rb-epic.filled { border-color: #b884ff; box-shadow: 0 0 0 1px rgba(184,132,255,0.25), 0 0 14px rgba(184,132,255,0.25); }
.inv-v2-slot.rb-legendary.filled { border-color: #ffaa50; box-shadow: 0 0 0 1px rgba(255,170,80,0.3), 0 0 16px rgba(255,170,80,0.3); }
.inv-v2-slot.rb-mythic.filled { border-color: #ff5a78; box-shadow: 0 0 0 1px rgba(255,90,120,0.3), 0 0 16px rgba(255,90,120,0.3); }
.inv-v2-slot-empty {
font-size: 28px;
color: rgba(255,255,255,0.22);
}
.inv-v2-slot-label {
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-title);
font-size: 8.5px;
font-weight: 800;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
}
.inv-v2-slot.filled .inv-v2-slot-label { color: rgba(255,255,255,0.7); }
.inv-v2-slot .race-slot-icon {
width: 100%; height: 100%;
display: grid; place-items: center;
color: #c39dff;
font-size: 28px;
}
/* Cinturón de pociones en la columna izquierda (debajo de stats personaje) */
.inv-v2-potion-belt {
margin: 8px 0 0;
width: 100%;
padding: 10px 12px;
font-size: 11.5px;
}
.inv-v2-potion-belt > i:first-child { font-size: 18px; }
.inv-v2-potion-belt .potion-belt-soon { font-size: 9.5px; padding: 2px 7px; }
/* Items grid en main */
.inv-v2-grid {
background: linear-gradient(180deg, rgba(15,8,30,0.6), rgba(10,5,24,0.8));
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
padding: 12px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: 8px;
}
/* 2026-05-15: barra de filtros NUEVA — single line, chips pill, sobre el grid de items */
.inv-v2-filter-bar {
display: flex;
justify-content: flex-end;
padding: 2px 4px 4px;
border-bottom: 1px solid rgba(255,255,255,0.05);
margin-bottom: 2px;
}
.inv-v2-filter-bar .pf-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
}
.inv-v2-filter-bar .pf-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: transparent;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
color: rgba(255,255,255,0.65);
font-family: var(--font-title);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.inv-v2-filter-bar .pf-chip > i { font-size: 9px; opacity: 0.9; }
.inv-v2-filter-bar .pf-chip:hover { background: rgba(255,255,255,0.04); color: #fff; }
/* Active: el chip queda con fondo oscuro pleno y el texto en blanco */
.inv-v2-filter-bar .pf-chip.active {
background: rgba(15,8,28,0.95);
border-color: rgba(255,255,255,0.25);
color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
/* Color del dot/icono por rareza — siempre visible (no solo cuando activo) */
.inv-v2-filter-bar .pf-chip.pf-chip-all > i { color: #fff; }
.inv-v2-filter-bar .pf-chip.rb-common { color: #d6d6dc; }
.inv-v2-filter-bar .pf-chip.rb-common > i { color: #b4b4c8; }
.inv-v2-filter-bar .pf-chip.rb-uncommon { color: #7ee59d; }
.inv-v2-filter-bar .pf-chip.rb-uncommon > i { color: #5fd684; }
.inv-v2-filter-bar .pf-chip.rb-rare { color: #7dbfff; }
.inv-v2-filter-bar .pf-chip.rb-rare > i { color: #5aa6ff; }
.inv-v2-filter-bar .pf-chip.rb-epic { color: #c39dff; }
.inv-v2-filter-bar .pf-chip.rb-epic > i { color: #b884ff; font-size: 11px; }
.inv-v2-filter-bar .pf-chip.rb-legendary { color: #ffc857; }
.inv-v2-filter-bar .pf-chip.rb-legendary > i { color: #ffaa50; font-size: 10px; }
.inv-v2-filter-bar .pf-chip.rb-mythic { color: #ff8898; }
.inv-v2-filter-bar .pf-chip.rb-mythic > i { color: #ff5a78; font-size: 10px; }
/* Border tinted en hover por rareza */
.inv-v2-filter-bar .pf-chip.rb-common:hover { border-color: rgba(180,180,200,0.5); }
.inv-v2-filter-bar .pf-chip.rb-uncommon:hover { border-color: rgba(95,214,132,0.5); }
.inv-v2-filter-bar .pf-chip.rb-rare:hover { border-color: rgba(90,166,255,0.5); }
.inv-v2-filter-bar .pf-chip.rb-epic:hover { border-color: rgba(184,132,255,0.5); }
.inv-v2-filter-bar .pf-chip.rb-legendary:hover { border-color: rgba(255,170,80,0.55); }
.inv-v2-filter-bar .pf-chip.rb-mythic:hover { border-color: rgba(255,90,120,0.55); }
/* === Layout viejo (.inv-layout) sigue presente como fallback === */
.inv-layout {
display: grid;
grid-template-columns: 340px 1fr;
gap: 20px;
}
@media (max-width: 1100px) { .inv-layout { grid-template-columns: 1fr; } }
.paperdoll {
background: linear-gradient(180deg, rgba(33,20,58,0.95), rgba(15,8,30,0.98));
border: 1px solid var(--border-gold);
border-radius: var(--r-lg);
padding: 16px;
position: relative;
min-height: 0;
}
.paperdoll-figure {
width: 110px;
height: 110px;
margin: 6px auto 12px;
background:
radial-gradient(circle at center, rgba(164,125,255,0.20), rgba(20,12,40,0.85) 75%);
border: 1.5px solid rgba(255,200,87,0.40);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
font-size: 44px;
overflow: hidden;
box-shadow:
0 0 0 3px rgba(10,6,22,0.8),
0 4px 18px rgba(164,125,255,0.25),
inset 0 0 18px rgba(0,0,0,0.40);
}
.paperdoll-figure .race-portrait-img {
font-size: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.paperdoll-figure .race-portrait-fa { font-size: 50px; }
.equip-slots {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* gap horizontal 8px, vertical 24px para que se lean los labels (que están bottom:-16px) */
column-gap: 8px;
row-gap: 24px;
margin-top: 16px;
margin-bottom: 8px;
}
.equip-slot {
aspect-ratio: 1;
background: rgba(0,0,0,0.5);
border: 2px solid var(--border);
border-radius: var(--r-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--text-dim);
cursor: pointer;
position: relative;
transition: all 0.2s;
padding: 6px;
}
.equip-slot .item-image {
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.equip-slot:hover { border-color: var(--gold); color: var(--gold); }
.equip-slot.filled { background: linear-gradient(180deg, rgba(20,12,40,0.9), rgba(10,6,20,0.95)); }
.equip-slot .slot-label {
position: absolute;
bottom: -16px;
left: 0; right: 0;
font-size: 9px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: center;
font-family: var(--font-title);
}
/* === RACE EQUIPMENT (2026-05-08): hint card sobre stats acumulados === */
.equip-sets-hint {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
margin: 14px 0 0;
padding: 8px 12px;
background: linear-gradient(180deg, rgba(184,132,255,0.10), rgba(122,76,240,0.04));
border: 1px solid rgba(184,132,255,0.3);
border-radius: var(--r-sm);
color: var(--text-muted);
font-family: var(--font-body);
font-size: 11.5px;
line-height: 1.35;
letter-spacing: 0.01em;
}
.equip-sets-hint > i {
flex: 0 0 auto;
color: #c39dff;
font-size: 16px;
filter: drop-shadow(0 0 4px rgba(184,132,255,0.4));
}
.equip-sets-hint > span { flex: 1; }
/* 2026-05-15: Potion Belt teaser badge — reemplaza el cartel viejo de sets */
.potion-belt-badge {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin: 14px 0 0;
padding: 11px 14px;
background: linear-gradient(135deg, rgba(95,214,132,0.14), rgba(78,195,247,0.10) 60%, rgba(255,200,87,0.08));
border: 1px solid rgba(95,214,132,0.45);
border-left: 4px solid #5fd684;
border-radius: 10px;
color: #d9f7e3;
font-family: var(--font-title);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.03em;
cursor: pointer;
text-align: left;
position: relative;
overflow: hidden;
transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
animation: potion-belt-pulse 2.5s ease-in-out infinite;
}
.potion-belt-badge:hover {
transform: translateY(-1px);
border-color: rgba(95,214,132,0.75);
box-shadow: 0 4px 16px rgba(95,214,132,0.25);
}
.potion-belt-badge > i:first-child {
font-size: 22px;
color: #5fd684;
filter: drop-shadow(0 0 6px rgba(95,214,132,0.55));
flex-shrink: 0;
}
.potion-belt-badge > span:first-of-type { flex: 1; }
.potion-belt-soon {
padding: 3px 9px;
background: linear-gradient(135deg, #ffc857, #e9a82b);
color: #1f1206;
font-size: 9.5px;
font-weight: 900;
letter-spacing: 0.07em;
border-radius: 999px;
white-space: nowrap;
}
.potion-belt-badge > i:last-child {
color: rgba(255,255,255,0.55);
font-size: 14px;
flex-shrink: 0;
}
@keyframes potion-belt-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(95,214,132,0); }
50% { box-shadow: 0 0 12px 0 rgba(95,214,132,0.18); }
}
/* Modal teaser del Cinturón de Pociones */
.potion-belt-modal {
max-width: 440px;
overflow: hidden;
}
.pbt-hero {
position: relative;
height: 130px;
display: grid;
place-items: center;
background: radial-gradient(ellipse at center, rgba(95,214,132,0.18) 0%, rgba(20,14,38,0.0) 70%),
linear-gradient(180deg, rgba(28,19,52,0.95), rgba(10,5,24,0.95));
border-bottom: 1px solid rgba(95,214,132,0.3);
}
.pbt-hero-glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 60%, rgba(95,214,132,0.25), transparent 60%);
animation: pbt-glow 3s ease-in-out infinite;
}
@keyframes pbt-glow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.pbt-hero-icon {
position: relative;
font-size: 72px;
color: #5fd684;
filter: drop-shadow(0 0 18px rgba(95,214,132,0.7));
/* 2026-05-15: animación pbt-float removida — icono fijo. */
}
.pbt-date-badge {
position: absolute;
top: 10px;
right: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: linear-gradient(135deg, #ffc857, #e9a82b);
color: #1f1206;
font-family: var(--font-title);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.08em;
border-radius: 999px;
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.pbt-body { padding: 18px 22px 14px; }
.pbt-tag {
display: inline-block;
padding: 3px 10px;
background: rgba(95,214,132,0.18);
border: 1px solid rgba(95,214,132,0.5);
color: #5fd684;
font-family: var(--font-title);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.1em;
border-radius: 999px;
margin-bottom: 8px;
}
.pbt-title {
margin: 0 0 10px;
font-family: var(--font-title);
font-size: 24px;
font-weight: 900;
color: #fff;
letter-spacing: 0.02em;
}
.pbt-desc {
margin: 0 0 14px;
font-size: 13px;
line-height: 1.5;
color: rgba(255,255,255,0.85);
}
.pbt-features {
display: flex;
flex-direction: column;
gap: 6px;
}
.pbt-feat {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: rgba(95,214,132,0.06);
border: 1px solid rgba(95,214,132,0.22);
border-radius: 8px;
font-size: 12.5px;
color: rgba(255,255,255,0.8);
}
.pbt-feat i { color: #5fd684; font-size: 14px; flex-shrink: 0; }
/* Wrapper de un set (Normal o Race) */
.equip-set {
margin-top: 16px;
padding-top: 12px;
border-top: 1px dashed var(--border-soft);
transition: opacity 0.2s, filter 0.2s;
}
.equip-set:first-of-type {
border-top: none;
padding-top: 0;
}
.equip-set.is-inactive {
opacity: 0.45;
filter: grayscale(40%);
}
.equip-set-label {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-title);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
margin-bottom: 12px;
}
.equip-set.is-active .equip-set-label { color: var(--gold); }
.equip-set-race.is-active .equip-set-label { color: #c39dff; }
.equip-set-label i { font-size: 13px; }
.equip-set-status { color: var(--text-dim); font-weight: 600; letter-spacing: 0.08em; }
.equip-set.is-active .equip-set-status { color: var(--mint); }
/* ============================================================================
POTION BELT — modal real (2026-05-19)
============================================================================ */
.pbt-desc-mini {
font-size: 12.5px;
color: rgba(255,255,255,0.65);
text-align: center;
line-height: 1.4;
margin: 0 0 14px;
}
.pbt-level-badge {
display: inline-block;
background: linear-gradient(135deg, rgba(233,185,99,0.22), rgba(233,185,99,0.06));
border: 1px solid rgba(233,185,99,0.5);
color: var(--gold);
padding: 5px 11px;
border-radius: 99px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 auto 14px;
display: block;
width: fit-content;
}
.pbt-locked {
text-align: center;
padding: 30px 16px;
color: rgba(255,255,255,0.5);
border: 1px dashed rgba(255,255,255,0.15);
border-radius: 12px;
margin: 0 0 14px;
}
.pbt-locked i { font-size: 36px; opacity: 0.6; }
.pbt-locked p { margin: 8px 0 0; font-size: 13px; }
.pbt-slots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 14px;
}
.pbt-slot {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
padding: 12px 8px;
text-align: center;
position: relative;
min-height: 130px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
}
.pbt-slot.is-filled {
background: linear-gradient(180deg, rgba(196, 102, 232, 0.18), rgba(0,0,0,0.5));
border-color: rgba(196, 102, 232, 0.5);
}
.pbt-slot.is-empty { opacity: 0.7; }
.pbt-slot-num {
position: absolute;
top: 5px;
left: 7px;
font-family: var(--font-mono);
font-size: 10px;
color: rgba(255,255,255,0.4);
font-weight: 700;
}
.pbt-slot-icon { font-size: 32px; color: #d484ff; }
.pbt-slot-empty-icon { font-size: 28px; color: rgba(255,255,255,0.25); }
.pbt-slot-name {
font-size: 11px;
font-weight: 700;
color: #fff;
line-height: 1.2;
}
.pbt-slot.is-empty .pbt-slot-name { color: rgba(255,255,255,0.4); }
.pbt-slot-qty {
font-family: var(--font-mono);
font-size: 13px;
color: var(--gold);
font-weight: 800;
}
.pbt-slot-unequip,
.pbt-slot-equip {
padding: 4px 8px !important;
font-size: 10px !important;
min-height: 24px !important;
margin-top: 2px;
}
/* Upgrade card */
.pbt-upgrade {
background: linear-gradient(135deg, rgba(233,185,99,0.10), rgba(0,0,0,0.5));
border: 1px solid rgba(233,185,99,0.3);
border-radius: 12px;
padding: 14px;
margin-bottom: 10px;
}
.pbt-upgrade-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
margin-bottom: 8px;
color: var(--gold);
}
.pbt-upgrade-cost {
display: flex;
gap: 12px;
justify-content: center;
margin-bottom: 12px;
}
.pbt-cost {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
color: #fff;
}
.pbt-cost i { color: var(--gold); font-size: 14px; }
/* Sub-modal: picker de poción de la mochila */
.pbtp-modal { max-width: 460px; padding: 0; }
.pbtp-head {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 18px 14px;
border-bottom: 1px solid var(--border-soft);
font-family: var(--font-title);
font-weight: 800;
font-size: 15px;
color: #fff;
}
.pbtp-head i { font-size: 22px; color: #d484ff; }
.pbtp-list {
padding: 8px;
max-height: 50vh;
overflow-y: auto;
}
.pbtp-empty {
text-align: center;
padding: 30px 16px;
color: rgba(255,255,255,0.5);
}
.pbtp-empty i { font-size: 36px; opacity: 0.6; }
.pbtp-empty p { margin: 8px 0 0; font-size: 13px; }
.pbtp-row {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border-soft);
border-radius: 10px;
background: rgba(0,0,0,0.3);
color: #fff;
cursor: pointer;
margin-bottom: 5px;
text-align: left;
transition: all 0.15s;
}
.pbtp-row:hover {
border-color: rgba(196,102,232,0.5);
background: rgba(196,102,232,0.10);
}
.pbtp-row > i { font-size: 22px; color: #d484ff; flex: 0 0 auto; }
.pbtp-row-info { flex: 1; min-width: 0; }
.pbtp-row-name { font-weight: 700; font-size: 13px; }
.pbtp-row-meta { font-size: 11px; }
.pbtp-row > i:last-child { font-size: 16px; color: rgba(255,255,255,0.3); }
@media (max-width: 480px) {
.pbt-slots { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pbt-slot { min-height: 110px; padding: 10px 5px; }
.pbt-slot-icon { font-size: 26px; }
}
/* ===== 2026-05-11: Filtros rápidos DEBAJO del grid de mochila ===== */
.inv-bag-quick-filters {
margin-top: 14px;
padding: 12px 14px;
background: rgba(0,0,0,0.30);
border: 1px solid rgba(184,132,255,0.18);
border-radius: var(--r-md, 12px);
}
.inv-side-filters,
.paperdoll-filters {
/* legacy classes — sin uso, quedan por compat */
display: none;
}
.pf-title {
display: flex;
align-items: center;
gap: 8px;
font-family: 'Cinzel', serif;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
margin-bottom: 10px;
}
.pf-title i { font-size: 13px; color: var(--gold); }
.pf-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pf-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: rgba(0,0,0,0.40);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 99px;
color: rgba(255,255,255,0.65);
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pf-chip:hover { color: #fff; background: rgba(255,255,255,0.06); }
.pf-chip i { font-size: 8px; }
.pf-chip.pf-chip-all i { font-size: 10px; }
.pf-chip.rb-common i { color: #b8c0cc; }
.pf-chip.rb-uncommon i { color: #5fd684; }
.pf-chip.rb-rare i { color: #6cd4ff; }
.pf-chip.rb-epic i { color: #b884ff; }
.pf-chip.rb-legendary i { color: #ffc857; }
.pf-chip.rb-mythic i { color: #ff5a8e; }
.pf-chip.active {
background: linear-gradient(180deg, rgba(255,200,87,0.20), rgba(196,138,33,0.10));
border-color: rgba(255,200,87,0.55);
color: #fff;
}
/* Filtros aplicados al grid de inventario */
.inv-grid.is-filtered-common .inv-cell:not(.rb-common),
.inv-grid.is-filtered-uncommon .inv-cell:not(.rb-uncommon),
.inv-grid.is-filtered-rare .inv-cell:not(.rb-rare),
.inv-grid.is-filtered-epic .inv-cell:not(.rb-epic),
.inv-grid.is-filtered-legendary .inv-cell:not(.rb-legendary),
.inv-grid.is-filtered-mythic .inv-cell:not(.rb-mythic) {
opacity: 0.18;
filter: grayscale(0.7);
pointer-events: none;
}
@media (max-width: 1100px) {
.paperdoll-filters { display: none; }
.inv-side-filters { display: none; } /* en mobile usa los filtros del bottom */
}
/* Slots del set de raza — 8 slots en grid 4×2 (igual al set normal) */
.equip-slot-race.filled {
background: linear-gradient(180deg, rgba(60,30,90,0.65), rgba(20,10,40,0.95));
border-color: rgba(184,132,255,0.5);
}
.equip-set.is-active .equip-slot-race.filled {
border-color: rgba(184,132,255,0.9);
box-shadow: 0 0 12px rgba(184,132,255,0.25);
}
/* ============================================================
2026-05-24: Modal anuncio nuevas habilidades V2 de raza
============================================================ */
.rsv2-overlay {
position: fixed; inset: 0; z-index: 1200;
background: rgba(8,4,20,0.82);
backdrop-filter: blur(6px);
display: grid; place-items: center;
padding: 16px;
animation: rspFadeIn .25s ease both;
}
.modal.rsv2-modal {
background: linear-gradient(160deg, #1f0f3e 0%, #0f0820 60%, #08041a 100%) !important;
border: 2px solid rgba(255,200,87,0.5) !important;
border-radius: 18px !important;
width: min(520px, 96vw) !important;
max-width: min(520px, 96vw) !important;
padding: 26px 24px 22px !important;
position: relative;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,0.75), 0 0 60px rgba(255,200,87,0.25);
animation: rspSlideIn .4s cubic-bezier(.16,1,.3,1) both;
}
.rsv2-close {
position: absolute; top: 12px; right: 12px;
width: 32px; height: 32px;
background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px; color: #e5e2f5; cursor: pointer;
display: grid; place-items: center; font-size: 16px;
transition: all .15s ease;
}
.rsv2-close:hover { background: rgba(255,255,255,0.1); transform: scale(1.05); }
.rsv2-roadmap-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px;
background: linear-gradient(180deg, #ffd66f, #c98815);
color: #1a0f30;
border-radius: 14px;
font-size: 11px; font-weight: 800; letter-spacing: 1px;
margin-bottom: 14px;
box-shadow: 0 0 16px rgba(255,200,87,0.5);
}
.rsv2-title {
font-family: var(--font-title, 'Cinzel', serif);
font-size: 24px; font-weight: 800;
color: #f3eff8;
line-height: 1.2;
margin-bottom: 8px;
text-shadow: 0 2px 8px rgba(255,200,87,0.3);
}
.rsv2-sub {
font-size: 13px; color: #b8b3c8;
line-height: 1.5;
margin-bottom: 20px;
}
.rsv2-skill-card {
display: flex; gap: 14px;
padding: 16px;
background: linear-gradient(180deg, rgba(184,132,255,0.12), rgba(0,0,0,0.4));
border: 1.5px solid rgba(184,132,255,0.5);
border-radius: 12px;
margin-bottom: 18px;
box-shadow: inset 0 0 24px rgba(184,132,255,0.1);
}
.rsv2-skill-icon {
width: 84px; height: 84px;
flex-shrink: 0;
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,6,20,0.95));
border: 2px solid #c39dff;
border-radius: 12px;
padding: 6px;
display: grid; place-items: center;
box-shadow: 0 0 20px rgba(184,132,255,0.4);
}
.rsv2-skill-icon img {
width: 100%; height: 100%; object-fit: contain;
}
.rsv2-skill-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rsv2-skill-name {
font-family: var(--font-title, 'Cinzel', serif);
font-size: 18px; font-weight: 700;
color: #ffd66f;
text-shadow: 0 0 8px rgba(255,200,87,0.3);
}
.rsv2-skill-desc {
font-size: 12.5px; color: #d5d0e6;
line-height: 1.5;
}
.rsv2-skill-desc b { color: #ffd66f; font-weight: 700; }
.rsv2-skill-meta {
display: flex; flex-wrap: wrap; gap: 5px;
margin-top: 4px;
}
.rsv2-meta-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
font-size: 11px; font-weight: 600; color: #b8b3c8;
}
.rsv2-meta-pill i { font-size: 11px; color: #c39dff; }
.rsv2-footer {
display: flex; gap: 8px;
}
.rsv2-footer .btn { flex: 1; padding: 12px; font-size: 13px; font-weight: 700; }
.rsv2-footer .btn-gold { flex: 2; }
@media (max-width: 480px) {
.modal.rsv2-modal { padding: 20px 16px 16px !important; }
.rsv2-title { font-size: 20px; }
.rsv2-skill-card { padding: 12px; gap: 10px; flex-direction: column; align-items: center; text-align: center; }
.rsv2-skill-icon { width: 72px; height: 72px; }
.rsv2-skill-meta { justify-content: center; }
}
/* ============================================================
2026-05-24: NUEVO modal Race Slot Picker V2 (rsp-*) — compacto, cards
horizontales con stats en mini-grid. Reemplaza .race-slot-picker-modal.
============================================================ */
.rsp-overlay {
position: fixed; inset: 0; z-index: 1100;
background: rgba(8,4,20,0.78);
backdrop-filter: blur(4px);
display: grid; place-items: center;
padding: 12px;
animation: rspFadeIn .22s ease both;
}
@keyframes rspFadeIn { from { opacity: 0 } to { opacity: 1 } }
/* IMPORTANT: pisamos el .modal { max-width:480px; padding:28px } global de main.css */
.modal.rsp-modal {
background: linear-gradient(180deg, #1a0f30 0%, #0f0820 60%, #08041a 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
width: min(600px, 94vw) !important;
max-width: min(600px, 94vw) !important;
max-height: 92vh;
padding: 0 !important;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(184,132,255,0.12);
animation: rspSlideIn .32s cubic-bezier(.16,1,.3,1) both;
}
@keyframes rspSlideIn { from { transform: translateY(20px) scale(.97); opacity: 0 } to { transform: none; opacity: 1 } }
.rsp-close {
position: absolute; top: 10px; right: 10px; z-index: 10;
width: 32px; height: 32px;
background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px; color: #e5e2f5; cursor: pointer;
display: grid; place-items: center; font-size: 16px;
transition: all .15s ease;
}
.rsp-close:hover { background: rgba(255,255,255,0.08); transform: scale(1.05); }
.rsp-header {
display: flex; gap: 12px; align-items: center;
padding: 14px 16px;
background: linear-gradient(180deg, rgba(184,132,255,0.1), transparent);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rsp-header-icon {
width: 44px; height: 44px; flex-shrink: 0;
background: linear-gradient(135deg, rgba(184,132,255,0.25), rgba(95,180,255,0.15));
border: 1px solid rgba(184,132,255,0.4);
border-radius: 10px;
display: grid; place-items: center;
color: #c39dff;
filter: drop-shadow(0 0 8px rgba(184,132,255,0.35));
}
.rsp-header-icon iconify-icon { font-size: 24px; }
.rsp-header-text { flex: 1; min-width: 0; padding-right: 36px; }
.rsp-title {
font-family: var(--font-title, 'Cinzel', serif);
font-size: 16px; font-weight: 700; letter-spacing: .5px;
color: #f3eff8;
}
.rsp-desc {
font-size: 11.5px; color: #8d86a8;
margin-top: 2px; line-height: 1.35;
}
.rsp-body {
padding: 12px 14px;
overflow-y: auto;
flex: 1;
display: flex; flex-direction: column; gap: 14px;
}
.rsp-section {}
.rsp-section-head {
display: flex; align-items: center; gap: 7px;
font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
text-transform: uppercase; color: #8d86a8;
padding: 0 4px 8px;
}
.rsp-section-head i { font-size: 13px; color: #c39dff; }
.rsp-section-head b { color: #c39dff; font-weight: 700; }
.rsp-list { display: flex; flex-direction: column; gap: 8px; }
/* Card layout V3: header (img + name + toggle + action) + stats collapsable abajo */
.rsp-card {
display: flex; flex-direction: column;
background: rgba(0,0,0,0.4);
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: 10px;
overflow: hidden;
transition: border-color .15s ease, box-shadow .15s ease;
}
.rsp-card.is-equipped {
background: linear-gradient(90deg, rgba(255,200,87,0.06), rgba(0,0,0,0.4));
border-color: rgba(255,200,87,0.45);
}
.rsp-card.rb-common { border-color: rgba(120,120,140,0.4); }
.rsp-card.rb-uncommon { border-color: rgba(95,214,132,0.45); }
.rsp-card.rb-rare { border-color: rgba(95,180,255,0.5); box-shadow: 0 0 10px rgba(95,180,255,0.12); }
.rsp-card.rb-epic { border-color: rgba(184,132,255,0.55); box-shadow: 0 0 12px rgba(184,132,255,0.18); }
.rsp-card.rb-legendary { border-color: rgba(255,200,87,0.6); box-shadow: 0 0 14px rgba(255,200,87,0.2); }
.rsp-card.rb-mythic { border-color: rgba(255,90,140,0.6); box-shadow: 0 0 14px rgba(255,90,140,0.2); }
.rsp-card-head {
display: flex; align-items: center; gap: 10px;
padding: 10px;
}
.rsp-card-img {
width: 50px; height: 50px; flex-shrink: 0;
border-radius: 8px;
background: linear-gradient(180deg, rgba(20,12,40,0.6), rgba(10,6,20,0.85));
border: 1.5px solid rgba(255,255,255,0.08);
padding: 4px;
display: grid; place-items: center;
}
.rsp-card-img.rb-uncommon { border-color: #5fd684; }
.rsp-card-img.rb-rare { border-color: #5fb4ff; }
.rsp-card-img.rb-epic { border-color: #b884ff; }
.rsp-card-img.rb-legendary { border-color: #ffc857; }
.rsp-card-img.rb-mythic { border-color: #ff5a8c; }
.rsp-card-img iconify-icon { font-size: 26px; color: #c39dff; }
.rsp-card-name-wrap {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.rsp-card-name {
font-family: var(--font-title, 'Cinzel', serif);
font-size: 14px; font-weight: 700; line-height: 1.2;
color: #f3eff8;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsp-card-name.r-common { color: #cbc7d6; }
.rsp-card-name.r-uncommon { color: #7df0a3; }
.rsp-card-name.r-rare { color: #6ec0ff; }
.rsp-card-name.r-epic { color: #c79dff; }
.rsp-card-name.r-legendary { color: #ffd66f; }
.rsp-card-name.r-mythic { color: #ff7aa3; }
.rsp-card-rarity {
font-size: 10.5px; font-weight: 600;
color: #8d86a8;
text-transform: uppercase; letter-spacing: 0.4px;
}
.rsp-card-rarity .rsp-stats-count {
color: #c39dff; font-weight: 700;
}
.rsp-card-rarity.r-uncommon { color: #5fd684; }
.rsp-card-rarity.r-rare { color: #5fb4ff; }
.rsp-card-rarity.r-epic { color: #b884ff; }
.rsp-card-rarity.r-legendary { color: #ffc857; }
.rsp-card-rarity.r-mythic { color: #ff5a8c; }
/* Toggle button: chevron — abre stats abajo */
button.rsp-toggle {
flex-shrink: 0;
width: 32px; height: 32px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: #c39dff; cursor: pointer;
display: grid; place-items: center;
font-size: 14px;
transition: all .15s ease;
}
button.rsp-toggle:hover {
background: rgba(184,132,255,0.15);
border-color: rgba(184,132,255,0.4);
}
button.rsp-toggle i { transition: transform .25s ease; }
.rsp-card.is-open button.rsp-toggle i { transform: rotate(180deg); }
.rsp-card.is-open button.rsp-toggle {
background: rgba(184,132,255,0.2);
border-color: rgba(184,132,255,0.45);
}
/* Action button: vertical right side — !important para que no lo pisen estilos generales de button */
.rsp-card-action {
flex-shrink: 0;
display: flex; align-items: center;
}
button.rsp-action {
display: flex !important; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
min-width: 120px; padding: 10px 14px;
border-radius: 9px;
font-size: 12px; font-weight: 700; letter-spacing: .4px;
text-transform: uppercase; cursor: pointer;
border: 1px solid transparent;
transition: all .15s ease;
font-family: var(--font-base, 'Inter', system-ui, sans-serif);
line-height: 1;
}
button.rsp-action i { font-size: 16px; }
button.rsp-action span { font-size: 12px; }
button.rsp-action-equip {
background: linear-gradient(180deg, #ffc857, #d99a20) !important;
color: #1a0f30 !important;
border-color: #b88515 !important;
box-shadow: 0 2px 8px rgba(255,200,87,0.3);
}
button.rsp-action-equip:hover:not(:disabled) {
background: linear-gradient(180deg, #ffd66f, #ffc857) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(255,200,87,0.45);
}
button.rsp-action-equip:disabled {
background: rgba(80,80,100,0.4) !important;
color: #6b6580 !important; cursor: not-allowed;
box-shadow: none; border-color: rgba(255,255,255,0.05) !important;
}
button.rsp-action-unequip {
background: linear-gradient(180deg, #4a3270, #2a1850) !important;
color: #e5d8ff !important;
border-color: #6a4ca0 !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
button.rsp-action-unequip:hover {
background: linear-gradient(180deg, #ff5a6e, #c43c52) !important;
border-color: #ff8090 !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(255,90,110,0.4);
}
/* "Equipado" indicator (no clickeable) */
.rsp-action-current {
display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
min-width: 120px; padding: 10px 14px;
border-radius: 9px;
font-size: 12px; font-weight: 700; letter-spacing: .4px;
text-transform: uppercase;
background: rgba(95,214,132,0.15);
border: 1px solid rgba(95,214,132,0.45);
color: #7df0a3;
font-family: var(--font-base, 'Inter', system-ui, sans-serif);
line-height: 1;
}
.rsp-action-current i { font-size: 16px; }
.rsp-action-current span { font-size: 12px; }
/* Stats container — collapsable */
.rsp-card-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 6px;
padding: 10px;
padding-top: 0;
margin-top: 0;
border-top: 1px solid rgba(255,255,255,0.06);
animation: rspStatsIn .22s ease both;
}
.rsp-card-stats[hidden] { display: none; }
@keyframes rspStatsIn { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
.rsp-card.is-open .rsp-card-stats { padding-top: 10px; margin-top: 0; }
/* Stat chip: icon + value + key label */
.rsp-stat {
display: flex; align-items: center; gap: 6px;
padding: 6px 8px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 6px;
min-width: 0;
}
.rsp-stat i { font-size: 14px; flex-shrink: 0; }
.rsp-stat-val {
font-family: var(--font-title, 'Cinzel', serif);
font-weight: 700;
font-size: 13px;
color: #f3eff8;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsp-stat-key {
font-size: 10px; font-weight: 600;
color: #8d86a8; letter-spacing: 0.5px;
margin-left: auto;
text-transform: uppercase;
}
.rsp-stat-gold {
grid-column: 1 / -1;
background: linear-gradient(90deg, rgba(255,200,87,0.16), rgba(255,200,87,0.04));
border-color: rgba(255,200,87,0.42);
box-shadow: inset 0 0 0 1px rgba(255,200,87,0.08);
padding: 8px 10px;
}
.rsp-stat-gold .rsp-stat-val { color: #ffd66f; }
.rsp-stat-gold .rsp-stat-key { color: #b89544; }
.rsp-stat-gold i { font-size: 16px; }
/* Empty states */
.rsp-empty {
text-align: center;
padding: 18px 14px;
background: rgba(0,0,0,0.3);
border: 1px dashed rgba(255,255,255,0.1);
border-radius: 10px;
}
.rsp-empty-title { color: #b8b3c8; font-size: 13px; font-weight: 600; }
.rsp-empty-hint { color: #8d86a8; font-size: 11px; margin-top: 4px; }
.rsp-empty-small {
display: flex; align-items: center; gap: 10px;
padding: 12px;
background: rgba(0,0,0,0.3);
border: 1px dashed rgba(255,255,255,0.08);
border-radius: 10px;
color: #8d86a8;
font-size: 13px;
}
.rsp-empty-small iconify-icon { font-size: 22px; color: #6b6580; }
/* Mobile: cards más compactas, stats siguen 2-col */
@media (max-width: 480px) {
.modal.rsp-modal { width: 96vw !important; max-width: 96vw !important; max-height: 88vh; border-radius: 14px; }
.rsp-header { padding: 12px; gap: 10px; }
.rsp-header-icon { width: 40px; height: 40px; }
.rsp-title { font-size: 14.5px; }
.rsp-desc { font-size: 11px; }
.rsp-body { padding: 10px 12px; gap: 12px; }
.rsp-card-head { padding: 9px; gap: 8px; }
.rsp-card-img { width: 46px; height: 46px; }
.rsp-card-img iconify-icon { font-size: 22px; }
.rsp-card-name { font-size: 12.5px; }
.rsp-card-rarity { font-size: 9.5px; }
button.rsp-toggle { width: 28px; height: 28px; font-size: 12px; }
button.rsp-action { min-width: 92px; padding: 9px 10px; font-size: 11px; }
button.rsp-action i { font-size: 14px; }
button.rsp-action span { font-size: 11px; }
.rsp-card-stats { padding: 8px; gap: 5px; }
.rsp-stat { padding: 5px 7px; }
.rsp-stat i { font-size: 13px; }
.rsp-stat-val { font-size: 12px; }
.rsp-stat-key { font-size: 9px; }
}
/* ============================================================
2026-05-24: NUEVO modal item de raza V3 — compacto mobile-first.
Reemplaza .race-item-modal anterior (más grande, stats verticales).
============================================================ */
.race-item-modal-v3 {
background: linear-gradient(180deg, #1a0f30 0%, #0f0820 60%, #08041a 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
width: min(420px, 95vw);
max-height: 92vh;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
}
.race-item-modal-v3.r-uncommon { box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(95,214,132,0.4); }
.race-item-modal-v3.r-rare { box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(95,180,255,0.4); }
.race-item-modal-v3.r-epic { box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(184,132,255,0.5); }
.race-item-modal-v3.r-legendary { box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,200,87,0.55); }
.race-item-modal-v3.r-mythic { box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,90,140,0.55); }
.rim-close {
position: absolute; top: 10px; right: 10px; z-index: 10;
width: 32px; height: 32px;
background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px; color: #e5e2f5; cursor: pointer;
display: grid; place-items: center; font-size: 16px;
transition: all .15s ease;
}
.rim-close:hover { background: rgba(255,255,255,0.08); transform: scale(1.05); }
.rim-hero {
display: flex; gap: 12px; padding: 16px 16px 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
border-bottom: 1px solid rgba(255,255,255,0.06);
position: relative;
}
.rim-hero-bg {
position: absolute; inset: 0;
background: radial-gradient(circle at top right, rgba(184,132,255,0.18), transparent 60%);
pointer-events: none;
}
.rim-hero-img {
width: 72px; height: 72px; flex-shrink: 0;
border-radius: 12px;
background: linear-gradient(180deg, rgba(20,12,40,0.6), rgba(10,6,20,0.85));
border: 1.5px solid rgba(255,255,255,0.08);
display: grid; place-items: center;
padding: 6px;
position: relative; z-index: 1;
}
.rim-hero-img.rb-uncommon { border-color: #5fd684; box-shadow: 0 0 18px rgba(95,214,132,0.35); }
.rim-hero-img.rb-rare { border-color: #5fb4ff; box-shadow: 0 0 18px rgba(95,180,255,0.4); }
.rim-hero-img.rb-epic { border-color: #b884ff; box-shadow: 0 0 18px rgba(184,132,255,0.5); }
.rim-hero-img.rb-legendary { border-color: #ffc857; box-shadow: 0 0 22px rgba(255,200,87,0.55); }
.rim-hero-img.rb-mythic { border-color: #ff5a8c; box-shadow: 0 0 22px rgba(255,90,140,0.55); }
.rim-hero-img iconify-icon { font-size: 40px; color: #c39dff; }
.rim-hero-info {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 8px;
position: relative; z-index: 1;
padding-right: 36px; /* espacio para el close button */
}
.rim-name {
font-family: var(--font-title, 'Cinzel', serif);
font-size: 17px; font-weight: 700; line-height: 1.2;
color: #f3eff8;
word-wrap: break-word;
}
.rim-name.r-common { color: #cbc7d6; }
.rim-name.r-uncommon { color: #7df0a3; }
.rim-name.r-rare { color: #6ec0ff; }
.rim-name.r-epic { color: #c79dff; }
.rim-name.r-legendary { color: #ffd66f; }
.rim-name.r-mythic { color: #ff7aa3; }
.rim-meta {
display: flex; flex-wrap: wrap; gap: 5px;
}
.rim-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 12px;
background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08);
font-size: 11px; font-weight: 600;
color: #d5d0e6;
white-space: nowrap;
}
.rim-pill i { font-size: 11px; }
.rim-pill-rarity.r-uncommon { background: rgba(95,214,132,0.18); border-color: rgba(95,214,132,0.5); color: #7df0a3; }
.rim-pill-rarity.r-rare { background: rgba(95,180,255,0.18); border-color: rgba(95,180,255,0.5); color: #6ec0ff; }
.rim-pill-rarity.r-epic { background: rgba(184,132,255,0.2); border-color: rgba(184,132,255,0.55); color: #c79dff; }
.rim-pill-rarity.r-legendary { background: rgba(255,200,87,0.2); border-color: rgba(255,200,87,0.55); color: #ffd66f; }
.rim-pill-rarity.r-mythic { background: rgba(255,90,140,0.2); border-color: rgba(255,90,140,0.55); color: #ff7aa3; }
.rim-pill-race { background: rgba(184,132,255,0.15); border-color: rgba(184,132,255,0.4); color: #c39dff; }
.rim-pill-locked { background: rgba(255,90,90,0.15); border-color: rgba(255,90,90,0.45); color: #ff8e8e; }
.rim-pill-equipped { background: rgba(95,214,132,0.2); border-color: rgba(95,214,132,0.55); color: #7df0a3; }
.rim-body {
padding: 12px 16px;
overflow-y: auto;
flex: 1;
display: flex; flex-direction: column; gap: 12px;
}
.rim-warn {
display: flex; gap: 8px; align-items: center;
padding: 10px 12px;
background: rgba(255,90,90,0.12);
border: 1px solid rgba(255,90,90,0.4);
border-radius: 10px;
color: #ff9b9b;
font-size: 12.5px;
}
.rim-warn i { font-size: 18px; flex-shrink: 0; }
.rim-desc {
font-size: 12.5px; line-height: 1.5; color: #b8b3c8;
font-style: italic;
padding: 0 4px;
}
.rim-stats-head {
font-family: var(--font-title, 'Cinzel', serif);
font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
text-transform: uppercase; color: #8d86a8;
padding-bottom: 4px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rim-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.rim-stat {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
min-width: 0;
}
.rim-stat i {
font-size: 18px;
color: #c39dff;
flex-shrink: 0;
}
.rim-stat.is-atk i { color: #ff7a8c; }
.rim-stat.is-def i { color: #6ec0ff; }
.rim-stat.is-hp i { color: #ff5fa0; }
.rim-stat.is-mp i { color: #5fb4ff; }
.rim-stat-vals { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.rim-stat-val {
font-family: var(--font-title, 'Cinzel', serif);
font-size: 14px; font-weight: 700; color: #f3eff8;
}
.rim-stat-lab {
font-size: 9.5px; font-weight: 600; letter-spacing: 0.5px;
color: #8d86a8; text-transform: uppercase;
margin-top: 1px;
}
.rim-goldgen {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: linear-gradient(90deg, rgba(255,200,87,0.12), rgba(255,200,87,0.04));
border: 1px solid rgba(255,200,87,0.4);
border-radius: 10px;
}
.rim-goldgen i {
font-size: 22px; color: var(--gold, #ffc857);
filter: drop-shadow(0 0 6px rgba(255,200,87,0.5));
}
.rim-goldgen-amt {
font-family: var(--font-title, 'Cinzel', serif);
font-size: 17px; font-weight: 700;
color: #ffd66f;
}
.rim-goldgen-unit {
font-size: 11px; color: #b8b3c8; margin-left: auto;
}
.rim-footer {
padding: 12px 16px 14px;
border-top: 1px solid rgba(255,255,255,0.06);
background: rgba(0,0,0,0.3);
display: flex; flex-direction: column; gap: 8px;
}
.rim-btn {
width: 100%;
padding: 11px;
font-size: 13px; font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.rim-btn-primary { font-size: 14px; padding: 13px; }
/* Mobile <= 400px: stats una sola columna porque labels largos */
@media (max-width: 400px) {
.race-item-modal-v3 { width: 96vw; max-height: 90vh; border-radius: 12px; }
.rim-hero { padding: 12px; gap: 10px; }
.rim-hero-img { width: 60px; height: 60px; padding: 4px; }
.rim-name { font-size: 15.5px; }
.rim-pill { font-size: 10.5px; padding: 2.5px 7px; }
.rim-body { padding: 10px 12px; gap: 10px; }
.rim-stats-grid { gap: 5px; }
.rim-stat { padding: 7px 9px; gap: 7px; }
.rim-stat-val { font-size: 13px; }
.rim-footer { padding: 10px 12px; }
}
.race-slot-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #c39dff;
filter: drop-shadow(0 0 6px rgba(184,132,255,0.4));
}
/* 2026-05-23: cuando race-slot-icon contiene imagen real (pack Wuxia helmet/armor),
forzar tamaño completo para que se vea (flex/grid no la expanden sola). */
.race-slot-icon .item-image,
.race-cell-icon .item-image,
.inv-v2-slot .race-slot-icon .item-image,
.inv-m-slot .race-slot-icon .item-image {
width: 100% !important;
height: 100% !important;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.inv-bag {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 18px;
}
.inv-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: 6px;
}
.inv-cell {
aspect-ratio: 1;
background: rgba(0,0,0,0.5);
border: 2px solid var(--border-soft);
border-radius: var(--r-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: var(--text-dim);
cursor: pointer;
position: relative;
transition: all 0.15s;
padding: 4px;
}
/* 2026-05-15: background-size: contain — sin esto la imagen se rendea a su
tamaño natural (256px+) y se recorta cuando el cell es chico (mobile). */
.inv-cell .item-image {
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.inv-cell:not(.empty):hover { transform: scale(1.05); border-color: var(--gold); }
.inv-cell.empty { cursor: default; border-style: dashed; background: rgba(0,0,0,0.2); }
/* Slot "+" para expandir inventario */
.inv-cell.inv-cell-expand {
cursor: pointer;
border: 2px dashed rgba(245,210,125,0.5);
background: linear-gradient(135deg, rgba(245,210,125,0.08), rgba(200,149,68,0.04));
display: flex; align-items: center; justify-content: center;
color: #f5d27d;
font-size: 28px;
transition: all 0.15s;
}
.inv-cell.inv-cell-expand:hover {
background: linear-gradient(135deg, rgba(245,210,125,0.18), rgba(200,149,68,0.08));
border-color: #f5d27d;
transform: scale(1.05);
box-shadow: 0 4px 14px rgba(245,210,125,0.3);
}
.inv-cell.inv-cell-expand i {
filter: drop-shadow(0 0 8px rgba(245,210,125,0.6));
}
/* === Race Items en la mochila (2026-05-08) === */
.inv-cell.is-race-item {
background: linear-gradient(135deg, rgba(184,132,255,0.16), rgba(122,76,240,0.08));
border-color: rgba(184,132,255,0.5);
position: relative;
}
.inv-cell.is-race-item:hover {
border-color: #c39dff;
box-shadow: 0 0 12px rgba(184,132,255,0.3);
}
.inv-cell .race-cell-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #c39dff;
filter: drop-shadow(0 0 6px rgba(184,132,255,0.5));
pointer-events: none; /* el click pasa al .inv-cell */
}
.inv-cell.is-race-item .race-mark,
.inv-cell.is-race-item .equipped-mark,
.inv-cell.is-race-item i {
pointer-events: none;
}
/* === Race Item Modal — extras (2026-05-08) ===
Reusa .item-modal-* del item-modal regular. Solo extiende para race-specific. */
.item-modal-image.race-modal-image > i,
.item-modal-image.race-modal-image > iconify-icon { color: #c39dff !important; filter: drop-shadow(0 0 12px rgba(184,132,255,0.6)) drop-shadow(0 4px 10px rgba(0,0,0,0.5)) !important; }
.item-modal-image.race-modal-image.rb-common > i,
.item-modal-image.race-modal-image.rb-common > iconify-icon { color: #c4c4d0 !important; filter: drop-shadow(0 0 10px rgba(180,180,200,0.4)) drop-shadow(0 4px 10px rgba(0,0,0,0.5)) !important; }
.item-modal-image.race-modal-image.rb-uncommon > i,
.item-modal-image.race-modal-image.rb-uncommon > iconify-icon { color: #5fd684 !important; filter: drop-shadow(0 0 12px rgba(95,214,132,0.5)) drop-shadow(0 4px 10px rgba(0,0,0,0.5)) !important; }
.item-modal-image.race-modal-image.rb-rare > i,
.item-modal-image.race-modal-image.rb-rare > iconify-icon { color: #5aa6ff !important; filter: drop-shadow(0 0 12px rgba(80,160,255,0.5)) drop-shadow(0 4px 10px rgba(0,0,0,0.5)) !important; }
.item-modal-image.race-modal-image.rb-epic > i,
.item-modal-image.race-modal-image.rb-epic > iconify-icon { color: #b884ff !important; filter: drop-shadow(0 0 14px rgba(170,100,255,0.6)) drop-shadow(0 4px 10px rgba(0,0,0,0.5)) !important; }
.item-modal-image.race-modal-image.rb-legendary > i,
.item-modal-image.race-modal-image.rb-legendary > iconify-icon { color: #ffaa50 !important; filter: drop-shadow(0 0 16px rgba(255,170,80,0.7)) drop-shadow(0 4px 10px rgba(0,0,0,0.5)) !important; }
.item-modal-image.race-modal-image.rb-mythic > i,
.item-modal-image.race-modal-image.rb-mythic > iconify-icon { color: #ff6378 !important; filter: drop-shadow(0 0 18px rgba(255,99,120,0.75)) drop-shadow(0 4px 10px rgba(0,0,0,0.5)) !important; }
.item-meta-pill.item-meta-race {
color: #c39dff;
border-color: rgba(184,132,255,0.5);
background: rgba(184,132,255,0.12);
}
.item-meta-pill.item-meta-race-locked {
color: #ff8a8a;
border-color: rgba(255,120,120,0.55);
background: rgba(255,90,90,0.12);
}
.item-meta-pill.item-meta-equipped {
color: #5fd684;
border-color: rgba(95,214,132,0.5);
background: rgba(95,214,132,0.12);
}
/* Aviso "es de otra raza" en race item modal */
.race-locked-warn {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
margin: 0 0 12px;
border-radius: 10px;
background: linear-gradient(180deg, rgba(255,80,90,0.12), rgba(255,80,90,0.06));
border: 1px solid rgba(255,120,120,0.4);
color: #ffd2d2;
font-family: var(--font-body);
font-size: 12.5px;
line-height: 1.45;
}
.race-locked-warn > i {
flex: 0 0 auto;
color: #ff8a8a;
font-size: 18px;
margin-top: 1px;
filter: drop-shadow(0 0 6px rgba(255,90,90,0.5));
}
.race-locked-warn > span { flex: 1; }
/* Item modal section title (header dentro del body) */
.item-modal-section-title {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-title);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
margin: 16px 0 8px;
}
.item-modal-section-title i { font-size: 13px; }
.item-modal-desc {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
text-align: center;
margin-bottom: 12px;
padding: 0 4px;
}
/* Footer del modal de raza — replica padding del item-modal-body */
.item-modal-footer {
padding: 14px 22px 18px;
border-top: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
.race-modal-action-row {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.race-modal-action-row .btn {
flex: 1;
min-height: 44px;
}
/* Modal de venta en bazar para items de raza */
.race-sell-modal {
max-width: 460px;
width: 100%;
}
.race-sell-modal .rsm-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 18px 12px;
border-bottom: 1px solid var(--border-soft);
}
.race-sell-modal .rsm-title {
font-family: var(--font-title);
font-size: 15px;
font-weight: 800;
color: var(--gold);
letter-spacing: 0.04em;
}
.race-sell-modal .rsm-body { padding: 16px 18px; }
.race-sell-modal .rsm-item-name {
font-family: var(--font-title);
font-size: 16px;
font-weight: 700;
margin-bottom: 12px;
text-align: center;
}
.race-sell-modal .rsm-price-info {
background: rgba(0,0,0,0.4);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 10px 14px;
margin-bottom: 12px;
font-size: 13px;
}
.race-sell-modal .rsm-pi-row {
display: flex; justify-content: space-between; align-items: center;
padding: 4px 0;
font-family: var(--font-mono);
}
.race-sell-modal .rsm-pi-row span { color: var(--text-muted); }
.race-sell-modal .rsm-pi-row b { color: var(--text); font-weight: 700; }
.race-sell-modal .rsm-input-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: rgba(0,0,0,0.5);
border: 2px solid rgba(233,185,99,0.3);
border-radius: var(--r-md);
margin-bottom: 10px;
}
.race-sell-modal .rsm-input-row i {
font-size: 18px; color: var(--gold);
}
.race-sell-modal .rsm-input-row input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
color: var(--text);
font-family: var(--font-mono);
font-size: 16px;
font-weight: 700;
}
.race-sell-modal .rsm-input-row input:focus { outline: 0; }
.race-sell-modal .rsm-input-row:focus-within {
border-color: var(--gold);
}
.race-sell-modal .rsm-race-warn {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
background: rgba(184,132,255,0.08);
border: 1px solid rgba(184,132,255,0.3);
border-radius: var(--r-md);
color: #c39dff;
font-size: 12px;
}
.race-sell-modal .rsm-race-warn i { font-size: 14px; }
.race-sell-modal .rsm-footer {
display: flex; gap: 10px;
padding: 14px 18px;
border-top: 1px solid var(--border-soft);
}
.race-sell-modal .rsm-footer .btn { flex: 1; }
/* Race item modal hereda estilos del item-modal regular */
.race-item-modal .im-icon-wrap i {
font-size: 38px;
color: #c39dff;
filter: drop-shadow(0 0 8px rgba(184,132,255,0.5));
}
.inv-cell .race-mark {
position: absolute;
bottom: 3px;
left: 3px;
font-family: 'Cinzel', serif;
font-size: 8.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 1px 5px;
background: linear-gradient(135deg, rgba(184,132,255,0.85), rgba(122,76,240,0.85));
color: #fff;
border-radius: 4px;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
pointer-events: none;
z-index: 2;
}
/* 2026-05-08: items de otra raza en mochila — tinte rojizo + badge "Otra" */
.inv-cell.is-race-item.is-other-race {
background: linear-gradient(135deg, rgba(255,90,90,0.16), rgba(180,40,60,0.08));
border-color: rgba(255,120,120,0.55);
filter: saturate(0.85);
}
.inv-cell.is-race-item.is-other-race:hover {
border-color: #ff8a8a;
box-shadow: 0 0 12px rgba(255,120,120,0.35);
}
.inv-cell.is-race-item.is-other-race .race-cell-icon {
color: #ff9d9d;
filter: drop-shadow(0 0 6px rgba(255,120,120,0.45));
}
.inv-cell .race-mark.is-other-race {
background: linear-gradient(135deg, rgba(255,90,90,0.9), rgba(180,40,60,0.9));
}
/* Modal de expansión */
.inv-expand-modal {
max-width: 380px;
text-align: center;
}
.inv-expand-modal .exp-icon {
font-size: 44px;
color: #f5d27d;
filter: drop-shadow(0 0 14px rgba(245,210,125,0.5));
margin-bottom: 8px;
}
.inv-expand-modal .exp-title {
font-family: 'Cinzel', serif;
font-size: 20px;
font-weight: 800;
color: #f4e4be;
margin-bottom: 4px;
letter-spacing: 0.04em;
}
.inv-expand-modal .exp-sub {
font-size: 12.5px;
color: #a59bbf;
margin-bottom: 14px;
}
.inv-expand-modal .exp-benefit {
display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 9px 12px;
background: rgba(95,214,132,0.12);
border: 1px solid rgba(95,214,132,0.45);
border-radius: 9px;
color: #5fd684;
font-size: 12.5px;
font-weight: 700;
margin-bottom: 14px;
}
.inv-expand-modal .exp-benefit i { font-size: 15px; }
.inv-expand-modal .exp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.inv-expand-modal .exp-cell {
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 12px 8px;
text-align: center;
}
.inv-expand-modal .exp-cell > i {
font-size: 22px;
color: #f5d27d;
margin-bottom: 4px;
}
.inv-expand-modal .exp-cell-lbl {
font-size: 10.5px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 3px;
}
.inv-expand-modal .exp-cell-val {
font-family: var(--font-mono, monospace);
font-size: 14px;
color: #c0b8d8;
}
.inv-expand-modal .exp-cell-val b { color: #5fd684; font-size: 16px; }
.inv-expand-modal .exp-cost-row {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px;
background: rgba(108,212,255,0.06);
border: 1px solid rgba(108,212,255,0.25);
border-radius: 10px;
margin-bottom: 14px;
}
.inv-expand-modal .exp-cost {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono, monospace);
font-size: 22px;
font-weight: 800;
color: #e6f7ff;
}
.inv-expand-modal .exp-cost i { color: #6cd4ff; font-size: 19px; }
.inv-expand-modal .exp-have {
font-size: 11.5px;
color: #a59bbf;
display: inline-flex; align-items: center; gap: 4px;
}
.inv-expand-modal .exp-have b { color: #e6f7ff; }
.inv-expand-modal .exp-have i { color: #6cd4ff; }
.inv-expand-modal .exp-actions {
display: flex; gap: 8px;
}
.inv-expand-modal .exp-actions .btn {
flex: 1;
min-height: 44px;
font-size: 13px;
letter-spacing: 0.04em;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.inv-cell .qty {
position: absolute;
bottom: 2px;
right: 4px;
font-size: 11px;
font-weight: 800;
color: #fff;
text-shadow: 0 0 3px #000, 0 0 3px #000;
font-family: var(--font-mono);
}
.inv-cell .equipped-mark {
position: absolute;
top: 2px;
left: 3px;
font-size: 9px;
color: var(--gold);
}
/* 2026-05-24 FORJA: badge de nivel para items mejorados */
.inv-cell .forge-lvl-mark {
position: absolute;
bottom: 2px;
left: 3px;
font-size: 9px;
font-weight: 800;
color: #1a0f02;
background: linear-gradient(180deg, #f5b342, #c97a13);
padding: 1px 4px;
border-radius: 4px;
letter-spacing: .3px;
box-shadow: 0 1px 3px rgba(0,0,0,.4);
pointer-events: none;
}
.inv-cell.is-forged { box-shadow: 0 0 0 1px rgba(212,175,55,.3), inset 0 0 8px rgba(212,175,55,.08); }
/* Lv badge base (lvl 1 sin mejoras) — gris sutil */
.inv-cell .forge-lvl-mark.is-base {
background: rgba(0,0,0,.6);
color: rgba(255,255,255,.7);
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
/* Slots equipados (paperdoll) — mismo badge */
.inv-v2-slot { position: relative; }
.inv-v2-slot .forge-lvl-mark {
position: absolute;
bottom: 22px;
left: 4px;
font-size: 9px;
font-weight: 800;
color: #1a0f02;
background: linear-gradient(180deg, #f5b342, #c97a13);
padding: 1px 5px;
border-radius: 4px;
letter-spacing: .3px;
box-shadow: 0 1px 3px rgba(0,0,0,.4);
pointer-events: none;
z-index: 3;
}
.inv-v2-slot.is-forged { box-shadow: 0 0 0 1px rgba(212,175,55,.4), inset 0 0 10px rgba(212,175,55,.1); }
/* Bazar P2P: pill de nivel del item */
.mi-forge-pill {
background: rgba(255,255,255,.05);
color: rgba(255,255,255,.7);
font-weight: 600;
}
.mi-forge-pill i { color: rgba(212,175,55,.6); }
.mi-forge-pill.is-forged {
background: linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.08));
color: #f5b342;
border-color: rgba(212,175,55,.4);
}
.mi-forge-pill.is-forged i { color: #f5b342; }
/* 2026-05-24: animación de flash al cambiar stats del panel PERSONAJE */
.inv-v2-stat-v {
transition: color .25s ease, text-shadow .25s ease, transform .25s ease;
display: inline-block;
font-variant-numeric: tabular-nums;
}
.inv-v2-stat-v.stat-flash-up {
color: #5cf28a !important;
text-shadow: 0 0 8px rgba(92,242,138,.55);
transform: scale(1.12);
}
.inv-v2-stat-v.stat-flash-down {
color: #ff6b6b !important;
text-shadow: 0 0 8px rgba(255,107,107,.55);
transform: scale(.95);
}
.inv-cell .lock-mark {
position: absolute;
top: 2px;
right: 3px;
font-size: 11px;
color: var(--cyan);
background: rgba(0,0,0,0.65);
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--cyan);
}
.inv-cell.is-locked::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
border-radius: inherit;
pointer-events: none;
z-index: 1;
}
.inv-cell.is-locked .item-image,
.inv-cell.is-locked > i { opacity: 0.6; }
/* Item tooltip card */
.item-tooltip {
background: linear-gradient(180deg, #1b0f38 0%, #0b0518 100%);
border: 1px solid var(--border-gold);
border-radius: var(--r-lg);
padding: 14px;
font-size: 12px;
max-width: 280px;
box-shadow: var(--sh-lg);
}
.item-tooltip .it-name { font-family: var(--font-title); font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.item-tooltip .it-type { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.1em; text-transform: uppercase; }
.item-tooltip .it-stat { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); }
.item-tooltip .it-desc { font-family: var(--font-serif); font-style: italic; color: var(--text-muted); margin-top: 8px; font-size: 12px; line-height: 1.5; }
/* ================= SKILLS (rediseño) ================= */
.skill-stats-summary {
display: flex;
gap: 4px;
background: rgba(0,0,0,0.35);
padding: 4px;
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
}
.ssum-cell {
padding: 6px 14px;
text-align: center;
border-right: 1px solid var(--border-soft);
}
.ssum-cell:last-child { border-right: none; }
.ssum-val {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.ssum-lbl {
font-family: var(--font-title);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 4px;
}
/* Tree tabs */
.skill-tree-tabs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 8px;
margin-bottom: 18px;
}
.skill-tree-tab {
--tree-color: var(--primary);
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
cursor: pointer;
text-align: left;
transition: all 0.18s;
position: relative;
overflow: hidden;
}
.skill-tree-tab:hover {
border-color: var(--tree-color);
transform: translateY(-1px);
}
.skill-tree-tab.active {
background: linear-gradient(135deg, rgba(0,0,0,0.4), color-mix(in srgb, var(--tree-color) 18%, transparent));
border-color: var(--tree-color);
box-shadow: 0 0 18px color-mix(in srgb, var(--tree-color) 25%, transparent);
}
.skill-tree-tab.active::before {
content: "";
position: absolute;
top: 0; bottom: 0;
left: 0;
width: 3px;
background: var(--tree-color);
}
.stt-icon {
width: 40px;
height: 40px;
border-radius: var(--r-md);
background: linear-gradient(135deg, color-mix(in srgb, var(--tree-color) 60%, #000), color-mix(in srgb, var(--tree-color) 30%, #000));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
box-shadow: 0 2px 8px color-mix(in srgb, var(--tree-color) 30%, transparent);
}
.stt-body { flex: 1; min-width: 0; }
.stt-name {
font-family: var(--font-title);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text);
}
.stt-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-top: 1px;
}
.stt-bar {
height: 3px;
background: rgba(0,0,0,0.5);
border-radius: 2px;
overflow: hidden;
margin-top: 5px;
}
.stt-fill {
height: 100%;
background: var(--tree-color);
transition: width 0.4s;
}
/* Tree header inside the content area */
.skill-tree-header {
--tree-color: var(--primary);
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: linear-gradient(135deg, color-mix(in srgb, var(--tree-color) 18%, transparent), rgba(15,8,30,0.7));
border: 1px solid var(--tree-color);
border-radius: var(--r-lg);
margin-bottom: 14px;
flex-wrap: wrap;
}
.sth-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, color-mix(in srgb, var(--tree-color) 70%, #000), color-mix(in srgb, var(--tree-color) 30%, #000));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
border: 2px solid var(--tree-color);
box-shadow: 0 0 16px color-mix(in srgb, var(--tree-color) 40%, transparent);
}
.sth-title {
font-family: var(--font-title);
font-size: 22px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tree-color);
}
.sth-desc {
font-family: var(--font-serif);
font-style: italic;
color: var(--text-muted);
font-size: 14px;
margin-top: 2px;
}
.skill-filter {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
/* Skill grid + cards */
.skill-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
}
.skill-node-pro {
--tree-color: var(--primary);
background: linear-gradient(180deg, rgba(33,20,58,0.92) 0%, rgba(15,8,30,0.98) 100%);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
transition: all 0.18s;
overflow: hidden;
}
.skill-node-pro:hover { transform: translateY(-2px); border-color: var(--tree-color); box-shadow: var(--sh-md); }
.skill-node-pro.status-locked { opacity: 0.55; filter: grayscale(40%); }
.skill-node-pro.status-locked:hover { transform: none; }
.skill-node-pro.status-learned { border-color: var(--tree-color); box-shadow: inset 0 0 18px color-mix(in srgb, var(--tree-color) 12%, transparent); }
.skill-node-pro.status-maxed { border-color: var(--gold); background: linear-gradient(180deg, rgba(58,40,12,0.92) 0%, rgba(15,8,30,0.98) 100%); box-shadow: 0 0 18px rgba(233,185,99,0.18); }
.skill-node-pro.status-available { border-color: color-mix(in srgb, var(--tree-color) 40%, var(--border)); }
.skn-status {
position: absolute;
top: 10px;
right: 12px;
font-family: var(--font-title);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 700;
padding: 3px 8px;
border-radius: 10px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--border);
color: var(--text-muted);
}
.status-learned .skn-status { color: var(--tree-color); border-color: var(--tree-color); }
.status-maxed .skn-status { color: var(--gold); border-color: var(--gold); background: rgba(233,185,99,0.12); }
.status-available .skn-status { color: var(--mint); border-color: var(--mint); }
.status-locked .skn-status { color: var(--blood); }
.skn-header {
display: flex;
gap: 12px;
align-items: flex-start;
padding-right: 70px;
}
.skn-icon {
width: 56px;
height: 56px;
border-radius: var(--r-md);
background: linear-gradient(135deg, color-mix(in srgb, var(--tree-color) 60%, #000), color-mix(in srgb, var(--tree-color) 30%, #000));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
border: 1px solid color-mix(in srgb, var(--tree-color) 50%, var(--border));
box-shadow: 0 2px 10px color-mix(in srgb, var(--tree-color) 30%, transparent);
}
.skn-icon.ultimate {
background: linear-gradient(135deg, var(--gold), var(--gold-deep));
color: #2a1a00;
border-color: var(--gold);
box-shadow: 0 2px 14px rgba(233,185,99,0.4);
}
.skn-icon.passive {
background: linear-gradient(135deg, var(--mint), #155a30);
color: #001f0a;
border-color: var(--mint);
box-shadow: 0 2px 12px rgba(63,214,146,0.35);
}
.skn-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: inherit;
}
.skn-icon { padding: 0; overflow: hidden; }
.skill-node-pro:has(.skn-img) .skn-icon {
background: rgba(0,0,0,0.4);
border-color: var(--tree-color);
}
.skn-title-block { flex: 1; min-width: 0; }
.skn-name {
font-family: var(--font-title);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.05em;
color: var(--text);
}
.skn-level {
display: flex;
align-items: baseline;
gap: 3px;
margin-top: 2px;
font-family: var(--font-mono);
}
.skn-level-num { font-size: 18px; font-weight: 800; color: var(--gold); line-height: 1; }
.skn-level-sep { color: var(--text-dim); font-size: 14px; }
.skn-level-max { color: var(--text-muted); font-size: 13px; }
.skn-dots {
display: flex;
gap: 3px;
margin-top: 5px;
}
.lv-dot {
width: 14px;
height: 4px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
transition: background 0.2s;
}
.lv-dot.active { background: linear-gradient(90deg, var(--tree-color), color-mix(in srgb, var(--tree-color) 60%, var(--gold))); box-shadow: 0 0 6px color-mix(in srgb, var(--tree-color) 50%, transparent); }
.status-maxed .lv-dot.active { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); box-shadow: 0 0 6px rgba(233,185,99,0.5); }
.skn-desc {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
min-height: 38px;
}
.skn-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.skn-tag {
font-family: var(--font-mono);
font-size: 10px;
padding: 2px 8px;
border-radius: 10px;
background: rgba(255,255,255,0.05);
color: var(--text-muted);
border: 1px solid var(--border-soft);
letter-spacing: 0.05em;
}
.tag-active { color: var(--cyan); border-color: rgba(76,196,255,0.3); background: rgba(76,196,255,0.08); }
.tag-passive { color: var(--mint); border-color: rgba(63,214,146,0.3); background: rgba(63,214,146,0.08); }
.tag-ultimate { color: var(--gold); border-color: rgba(233,185,99,0.4); background: rgba(233,185,99,0.1); font-weight: 700; }
.tag-mp { color: var(--cyan); }
.tag-cd { color: var(--ember); }
.tag-req { color: var(--text-muted); }
.tag-req.locked { color: var(--blood); border-color: rgba(217,58,75,0.4); }
/* 2026-06-02m: badge "A distancia" — skills AGI-scaling (afines al Hunter tree).
Color naranja amarillento para diferenciar del active (cyan) y ultimate (gold). */
.tag-ranged { color: #f59e0b; border-color: rgba(245,158,11,0.42); background: rgba(245,158,11,0.10); font-weight: 600; }
.tag-ranged i { color: #fbbf24; }
.skn-action { margin-top: auto; }
/* Legacy skills layout (kept for compatibility) */
.skills-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
@media (max-width: 900px) { .skills-layout { grid-template-columns: 1fr; } }
/* ================= GUILD ================= */
.guild-hero {
background:
radial-gradient(ellipse 60% 80% at 50% 20%, rgba(164,125,255,0.2), transparent 70%),
linear-gradient(180deg, rgba(44,29,74,0.95), rgba(15,8,30,0.98));
border: 1px solid var(--border-gold);
border-radius: var(--r-lg);
padding: 30px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: var(--sh-md), 0 0 40px rgba(164,125,255,0.1) inset;
}
.guild-crest {
width: 100px; height: 100px;
margin: 0 auto 14px;
border-radius: 50%;
background: radial-gradient(circle, rgba(233,185,99,0.2), transparent 70%), linear-gradient(135deg, #8a6520, #2a1a00);
border: 3px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 44px;
color: var(--gold);
box-shadow: 0 0 30px rgba(233,185,99,0.35), inset 0 0 20px rgba(0,0,0,0.6);
}
.guild-name {
font-family: var(--font-title);
font-size: 32px;
color: var(--gold);
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 900;
}
.guild-tag-big {
font-family: var(--font-mono);
font-size: 16px;
color: var(--primary);
font-weight: 700;
letter-spacing: 0.15em;
}
.guild-motto { font-family: var(--font-serif); font-style: italic; color: var(--text-muted); margin-top: 8px; font-size: 14px; }
.guild-stats { display: flex; justify-content: center; gap: 30px; margin-top: 18px; }
.guild-stat { text-align: center; }
.guild-stat .gs-val { font-family: var(--font-mono); font-size: 22px; color: var(--gold); font-weight: 700; }
.guild-stat .gs-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-title); }
.member-list { display: flex; flex-direction: column; gap: 6px; }
.member-row {
display: grid;
grid-template-columns: 40px 1fr auto auto;
align-items: center;
gap: 14px;
padding: 10px 14px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
}
.member-status { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); margin-left: 6px; }
.member-status.online { background: var(--mint); box-shadow: 0 0 6px var(--mint); }
.role-pill {
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.role-pill.leader { background: rgba(233,185,99,0.18); color: var(--gold); border: 1px solid rgba(233,185,99,0.35); }
.role-pill.officer { background: rgba(76,196,255,0.15); color: var(--cyan); border: 1px solid rgba(76,196,255,0.35); }
.role-pill.member { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid rgba(255,255,255,0.1); }
.role-pill.spy { background: rgba(194,119,255,0.15); color: var(--r-epic); border: 1px solid rgba(194,119,255,0.35); }
/* ================= MARKET ================= */
.market-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.market-filter-row { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-chip {
padding: 6px 14px;
border-radius: 20px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
color: var(--text-muted);
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: all 0.15s;
}
.filter-chip:hover { border-color: var(--primary); color: var(--text); }
.filter-chip.active { background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #2a1a00; border-color: var(--gold); }
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
/* === "Ver 20 más" — pagina sin re-fetch === */
/* ===================================================================
ICONO GLOBAL DE GEMAS — reemplaza Phosphor/FontAwesome con imagen
Aplica a CUALQUIER , ,
en todo el juego (header, bazar, misiones, etc).
=================================================================== */
.ph-fill.ph-diamond::before,
.ph.ph-diamond::before,
.ph-bold.ph-diamond::before,
.fa-solid.fa-gem::before,
.fa-gem::before {
content: '' !important;
display: inline-block !important;
width: 1em;
height: 1em;
background-image: url('/assets/icons/gem.webp');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
vertical-align: -0.1em;
/* Bigger glow on epic contexts */
filter: drop-shadow(0 0 4px rgba(157,108,255,0.4));
}
/* Tamaño extra grande cuando el font-size es >= 24px (uso decorativo) */
i.ph-diamond,
i.fa-gem {
font-style: normal;
}
/* === Featured Race Weapon Banner — promo del arma épica nueva (2026-05-13) === */
.featured-race-banner {
position: relative;
background:
radial-gradient(ellipse at top right, rgba(255,170,80,0.18) 0%, transparent 60%),
linear-gradient(135deg, rgba(45,18,8,0.92) 0%, rgba(28,10,30,0.95) 50%, rgba(20,8,40,0.95) 100%);
border: 2px solid;
border-image: linear-gradient(135deg, #ff8a3d 0%, #ffaa50 35%, #ffd24a 70%, #b884ff 100%) 1;
border-radius: 14px;
padding: 16px 18px;
margin-bottom: 22px;
box-shadow:
0 10px 30px rgba(255, 138, 61, 0.28),
inset 0 0 60px rgba(255, 170, 80, 0.04);
overflow: hidden;
}
.featured-race-banner.is-owned {
filter: saturate(0.85);
opacity: 0.85;
}
.featured-race-banner::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 95% 30%, rgba(255,170,80,0.18), transparent 40%),
radial-gradient(circle at 5% 70%, rgba(184,132,255,0.12), transparent 40%);
pointer-events: none;
border-radius: 12px;
}
.frw-tag-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 14px;
position: relative;
z-index: 1;
}
.frw-promo-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
background: linear-gradient(135deg, #ff5a3d, #ffaa50);
color: #1a0a02;
font-family: var(--font-title, 'Cinzel'), serif;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 99px;
box-shadow: 0 4px 14px rgba(255, 90, 61, 0.45);
}
.frw-promo-tag i { font-size: 13px; }
.frw-disc-tag {
background: linear-gradient(135deg, #5fd684, #2f7d44);
color: #062409;
font-family: var(--font-title, 'Cinzel'), serif;
font-size: 14px;
font-weight: 900;
padding: 4px 12px;
border-radius: 99px;
letter-spacing: 0.06em;
box-shadow: 0 2px 10px rgba(95, 214, 132, 0.45);
}
.frw-info-tag {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: auto;
background: rgba(255, 200, 87, 0.08);
color: #ffd24a;
font-size: 11px;
font-weight: 700;
padding: 4px 12px;
border-radius: 99px;
border: 1px solid rgba(255, 200, 87, 0.4);
cursor: help;
}
.frw-info-tag i { font-size: 12px; }
/* 2026-05-14: countdown tag para la promo de arma de raza */
.frw-timer-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, rgba(232, 90, 106, 0.18), rgba(232, 90, 106, 0.06));
color: #ff9aa6;
font-size: 11px;
font-weight: 700;
padding: 4px 12px;
border-radius: 99px;
border: 1px solid rgba(232, 90, 106, 0.45);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.frw-timer-tag i { font-size: 13px; color: #ff9aa6; }
.frw-timer-tag b {
color: #fff;
font-size: 12px;
letter-spacing: 0.04em;
font-weight: 800;
margin-left: 2px;
}
.frw-body {
display: grid;
grid-template-columns: 130px 1fr 220px;
gap: 20px;
align-items: center;
position: relative;
z-index: 1;
}
.frw-icon-col {
position: relative;
width: 130px;
height: 130px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 80px;
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
border: 2px solid;
}
/* 2026-06-04: imagen tier-based del casco/amuleto/etc dentro del banner */
.frw-icon-col .frw-icon-img {
width: 86%;
height: 86%;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55));
}
.frw-icon-col.rb-epic {
border-color: rgba(184, 132, 255, 0.65);
color: #c8a3ff;
box-shadow: 0 0 22px rgba(184, 132, 255, 0.35), inset 0 0 20px rgba(184, 132, 255, 0.12);
}
.frw-rarity-pill {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-title, 'Cinzel'), serif;
font-size: 9.5px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 99px;
white-space: nowrap;
background: rgba(0,0,0,0.85);
border: 1.5px solid;
}
.frw-rarity-pill.r-epic { color: #b884ff; border-color: rgba(184, 132, 255, 0.7); }
.frw-info-col {
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.frw-name {
font-family: var(--font-title, 'Cinzel'), serif;
font-size: 22px;
font-weight: 900;
line-height: 1.15;
letter-spacing: 0.02em;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.frw-name.r-epic { color: #d0acff; }
.frw-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.frw-meta-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 99px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
font-size: 11px;
color: var(--text-soft, #c0c0d0);
font-weight: 600;
}
.frw-meta-pill i { font-size: 11px; opacity: 0.85; }
.frw-stats-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
}
.frw-stat {
display: inline-flex;
align-items: baseline;
gap: 5px;
padding: 4px 10px;
border-radius: 7px;
background: color-mix(in srgb, var(--sc, #e9b963) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--sc, #e9b963) 42%, transparent);
}
.frw-stat-lbl {
font-family: var(--font-title, 'Cinzel'), serif;
font-size: 10px;
font-weight: 800;
color: var(--sc, #e9b963);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.frw-stat-val {
font-family: var(--font-mono, 'JetBrains Mono'), monospace;
font-size: 12px;
font-weight: 800;
color: var(--text, #e0d8c8);
}
.frw-goldgen {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
font-size: 12px;
color: var(--text-muted, #aaa);
}
.frw-goldgen i { color: var(--gold, #e9b963); font-size: 14px; }
.frw-goldgen b { color: var(--gold, #e9b963); font-family: var(--font-mono, 'JetBrains Mono'), monospace; }
.frw-buy-col {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
text-align: center;
}
.frw-price-block {
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,170,80,0.32);
border-radius: 10px;
padding: 10px 12px;
}
.frw-price-old {
font-size: 12px;
color: var(--text-muted, #888);
opacity: 0.8;
}
.frw-price-old i {
font-size: 11px;
margin-right: 3px;
color: #b884ff;
opacity: 0.7;
}
.frw-savings i {
font-size: 11px;
color: #5fd684;
margin-right: 3px;
}
.frw-buy-btn i.ph-diamond {
font-size: 14px;
margin-right: 1px;
}
.frw-price-new {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--gold, #e9b963);
font-family: var(--font-mono, 'JetBrains Mono'), monospace;
font-size: 24px;
font-weight: 900;
letter-spacing: 0.01em;
margin: 2px 0 3px;
text-shadow: 0 2px 10px rgba(212, 175, 55, 0.35);
}
.frw-price-new i { font-size: 22px; }
.frw-savings {
font-size: 10.5px;
color: #5fd684;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.frw-buy-btn {
width: 100%;
font-weight: 800 !important;
letter-spacing: 0.04em;
padding: 10px 14px !important;
}
.frw-buy-btn.is-cant-afford {
opacity: 0.65;
}
/* Responsive */
@media (max-width: 900px) {
.frw-body { grid-template-columns: 110px 1fr; gap: 14px; }
.frw-buy-col { grid-column: 1 / -1; flex-direction: row; align-items: center; margin-top: 4px; }
.frw-price-block { flex: 1; }
.frw-buy-btn { flex: 1; min-width: 0; }
.frw-icon-col { width: 110px; height: 110px; font-size: 64px; }
.frw-name { font-size: 18px; }
}
@media (max-width: 560px) {
.featured-race-banner { padding: 14px 12px; }
.frw-body { grid-template-columns: 90px 1fr; gap: 12px; }
.frw-icon-col { width: 90px; height: 90px; font-size: 52px; }
.frw-name { font-size: 16px; }
.frw-stats-row .frw-stat { font-size: 11px; padding: 3px 8px; }
.frw-info-tag { margin-left: 0; }
.frw-buy-col { flex-direction: column; }
}
/* === Daily Deals — 3 items equipables al 50% que rotan diariamente === */
/* ============================================================
2026-05-24: Daily Deals V2 — usuario elige 1 item raza + 1 general.
Layout 2 columnas (race | general). 3 estados por cell: empty/picked/purchased.
============================================================ */
.daily-deals-v2-wrap {
background: linear-gradient(180deg, rgba(255,200,87,0.06), rgba(0,0,0,0.4));
border: 1.5px solid rgba(255,200,87,0.35);
border-radius: 14px;
padding: 16px;
box-shadow: 0 6px 24px rgba(255,200,87,0.1);
}
.dd2-header {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.dd2-h-title {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-title, 'Cinzel', serif);
font-size: 18px; font-weight: 700; color: #ffd66f;
}
.dd2-h-title i { font-size: 20px; color: #ff8a3d; filter: drop-shadow(0 0 6px rgba(255,138,61,0.5)); }
.dd2-h-badge {
background: linear-gradient(180deg, #ff5a3d, #c43c2c);
color: #fff; font-size: 11px; font-weight: 800;
padding: 3px 8px; border-radius: 12px;
letter-spacing: .5px;
}
.dd2-sunday-badge {
display: inline-flex; align-items: center; gap: 4px;
background: linear-gradient(180deg, #ffd66f, #c98815);
color: #1a0f30;
font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
padding: 3px 8px; border-radius: 12px;
border: 1px solid rgba(255,255,255,0.4);
box-shadow: 0 0 12px rgba(255,200,87,0.5);
animation: ddSundayPulse 2s ease-in-out infinite;
text-transform: uppercase;
}
.dd2-sunday-badge i { font-size: 11px; }
@keyframes ddSundayPulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(255,200,87,0.5); }
50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255,200,87,0.8); }
}
.daily-deals-v2-wrap.is-sunday-special {
border-color: rgba(255,200,87,0.55);
background: linear-gradient(180deg, rgba(255,200,87,0.1), rgba(0,0,0,0.4));
box-shadow: 0 6px 28px rgba(255,200,87,0.18);
}
.dd2-h-timer { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #b8b3c8; }
.dd2-h-timer b { color: #ffd66f; }
.dd2-h-sub { font-size: 12px; color: #8d86a8; margin-bottom: 14px; line-height: 1.4; }
/* 2026-05-24: banner explicativo de descuentos por día */
.dd2-discount-banner {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
margin-bottom: 12px;
background: linear-gradient(90deg, rgba(95,180,255,0.08), rgba(0,0,0,0.35));
border: 1px solid rgba(95,180,255,0.3);
border-radius: 10px;
}
.dd2-discount-banner.is-sunday {
background: linear-gradient(90deg, rgba(255,200,87,0.15), rgba(255,138,61,0.08), rgba(0,0,0,0.35));
border-color: rgba(255,200,87,0.5);
box-shadow: 0 0 16px rgba(255,200,87,0.18);
}
.dd2-discount-banner > i {
font-size: 28px; color: #5fb4ff;
flex-shrink: 0;
filter: drop-shadow(0 0 6px rgba(95,180,255,0.4));
}
.dd2-discount-banner.is-sunday > i {
color: #ffd66f;
filter: drop-shadow(0 0 8px rgba(255,200,87,0.6));
}
.dd2-db-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dd2-db-row {
display: flex; align-items: center; gap: 8px;
font-size: 12.5px; color: #b8b3c8;
}
.dd2-db-day {
font-weight: 600;
min-width: 80px;
color: #8d86a8;
}
.dd2-db-day.is-active {
color: #f3eff8;
text-shadow: 0 0 8px currentColor;
}
.dd2-db-arrow { color: #5a5070; font-size: 13px; }
.dd2-db-pct {
font-family: var(--font-title, 'Cinzel', serif);
font-weight: 700;
color: #6ec0ff;
letter-spacing: .3px;
}
.dd2-db-pct-hi {
color: #ffd66f;
font-size: 13.5px;
}
.dd2-db-now {
flex-shrink: 0;
padding: 6px 12px;
border-radius: 18px;
background: linear-gradient(180deg, #ffd66f, #c98815);
color: #1a0f30;
font-weight: 800; font-size: 12px;
letter-spacing: .5px;
border: 1px solid rgba(255,255,255,0.4);
box-shadow: 0 0 14px rgba(255,200,87,0.5);
}
.dd2-db-now.is-normal {
background: rgba(95,180,255,0.18);
color: #6ec0ff;
border-color: rgba(95,180,255,0.45);
box-shadow: none;
font-weight: 700;
}
@media (max-width: 480px) {
.dd2-discount-banner { padding: 10px 12px; gap: 10px; }
.dd2-discount-banner > i { font-size: 22px; }
.dd2-db-row { font-size: 11.5px; gap: 6px; }
.dd2-db-day { min-width: 70px; }
.dd2-db-pct-hi { font-size: 12.5px; }
.dd2-db-now { padding: 5px 9px; font-size: 10.5px; }
}
.dd2-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 700px) { .dd2-grid { grid-template-columns: 1fr; } }
.dd2-cell {
background: rgba(0,0,0,0.45);
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 14px;
display: flex; flex-direction: column; gap: 12px;
min-height: 240px;
position: relative;
}
.dd2-cell.r-uncommon { border-color: rgba(95,214,132,0.5); }
.dd2-cell.r-rare { border-color: rgba(95,180,255,0.55); box-shadow: 0 0 16px rgba(95,180,255,0.18); }
.dd2-cell.r-epic { border-color: rgba(184,132,255,0.6); box-shadow: 0 0 18px rgba(184,132,255,0.22); }
.dd2-cell.r-legendary { border-color: rgba(255,200,87,0.65); box-shadow: 0 0 20px rgba(255,200,87,0.25); }
.dd2-cell.r-mythic { border-color: rgba(255,90,140,0.65); box-shadow: 0 0 20px rgba(255,90,140,0.25); }
.dd2-cell.is-purchased { opacity: 0.7; }
.dd2-cell-head {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dd2-cell-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #d5d0e6; text-transform: uppercase; letter-spacing: .8px; }
.dd2-cell-title i { color: #ff8a3d; font-size: 16px; }
.dd2-disc-badge {
background: linear-gradient(180deg, #ff5a3d, #c43c2c);
color: #fff; font-size: 11px; font-weight: 800;
padding: 2px 7px; border-radius: 10px;
}
.dd2-empty-body {
flex: 1; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 12px; padding: 12px;
}
.dd2-empty-ic { font-size: 48px; color: #6b6580; opacity: 0.6; }
.dd2-empty-text { font-size: 14px; color: #b8b3c8; text-align: center; }
.dd2-pick-btn { min-width: 160px; font-size: 13px; }
.dd2-picked-body { flex: 1; display: flex; gap: 12px; }
.dd2-item-img {
width: 80px; height: 80px; flex-shrink: 0;
background: linear-gradient(180deg, rgba(20,12,40,0.6), rgba(10,6,20,0.85));
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 8px;
display: grid; place-items: center;
position: relative;
}
.dd2-item-img.rb-uncommon { border-color: #5fd684; }
.dd2-item-img.rb-rare { border-color: #5fb4ff; }
.dd2-item-img.rb-epic { border-color: #b884ff; }
.dd2-item-img.rb-legendary { border-color: #ffc857; }
.dd2-item-img.rb-mythic { border-color: #ff5a8c; }
.dd2-item-img iconify-icon { font-size: 36px; color: #c39dff; }
.dd2-eye {
position: absolute; top: -6px; right: -6px;
width: 24px; height: 24px; border-radius: 50%;
background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.15);
color: #c39dff; cursor: pointer; display: grid; place-items: center;
font-size: 12px;
}
.dd2-eye:hover { background: rgba(184,132,255,0.2); border-color: #c39dff; }
.dd2-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dd2-item-name {
font-family: var(--font-title, 'Cinzel', serif);
font-size: 15px; font-weight: 700; line-height: 1.2;
color: #f3eff8;
}
.dd2-item-name.r-uncommon { color: #7df0a3; }
.dd2-item-name.r-rare { color: #6ec0ff; }
.dd2-item-name.r-epic { color: #c79dff; }
.dd2-item-name.r-legendary { color: #ffd66f; }
.dd2-item-name.r-mythic { color: #ff7aa3; }
.dd2-item-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.dd2-tag {
background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.08);
padding: 2px 7px; border-radius: 8px;
font-size: 10.5px; font-weight: 600; color: #b8b3c8;
}
.dd2-tag.r-uncommon { background: rgba(95,214,132,0.18); border-color: rgba(95,214,132,0.5); color: #7df0a3; }
.dd2-tag.r-rare { background: rgba(95,180,255,0.18); border-color: rgba(95,180,255,0.5); color: #6ec0ff; }
.dd2-tag.r-epic { background: rgba(184,132,255,0.2); border-color: rgba(184,132,255,0.55); color: #c79dff; }
.dd2-tag.r-legendary { background: rgba(255,200,87,0.2); border-color: rgba(255,200,87,0.55); color: #ffd66f; }
.dd2-tag.r-mythic { background: rgba(255,90,140,0.2); border-color: rgba(255,90,140,0.55); color: #ff7aa3; }
.dd2-price-row { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.dd2-price-orig {
font-size: 11px; color: #8d86a8;
text-decoration: line-through;
display: inline-flex; align-items: center; gap: 3px;
}
.dd2-price-orig i { font-size: 11px; color: #5fb4ff; opacity: .6; }
.dd2-price-now {
font-size: 15px; font-weight: 700; color: #ffd66f;
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-title, 'Cinzel', serif);
}
.dd2-price-now i { font-size: 13px; color: #5fb4ff; }
.dd2-buy-btn { padding: 11px; font-size: 13px; font-weight: 700; letter-spacing: .5px; }
@media (max-width: 480px) {
.daily-deals-v2-wrap { padding: 12px; }
.dd2-cell { padding: 12px; gap: 10px; min-height: auto; }
.dd2-item-img { width: 64px; height: 64px; }
.dd2-item-img iconify-icon { font-size: 28px; }
.dd2-item-name { font-size: 13.5px; }
}
/* Modal de selección de daily deal */
.dd-pick-modal .rsp-body { padding: 0; }
.dd-pick-filters {
display: flex; gap: 4px; padding: 12px 16px; flex-wrap: wrap;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dd-pick-filt {
padding: 5px 10px; border-radius: 8px;
background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08);
color: #b8b3c8; font-size: 11px; font-weight: 600; cursor: pointer;
text-transform: uppercase; letter-spacing: .3px;
transition: all .15s ease;
}
.dd-pick-filt:hover { background: rgba(184,132,255,0.15); border-color: rgba(184,132,255,0.4); }
.dd-pick-filt.is-on {
background: linear-gradient(180deg, #ffc857, #d99a20);
color: #1a0f30; border-color: #b88515;
}
.dd-pick-list {
max-height: 50vh; overflow-y: auto;
padding: 12px 16px;
display: flex; flex-direction: column; gap: 8px;
}
.dd-pick-item {
display: flex; align-items: center; gap: 10px;
padding: 10px;
background: rgba(0,0,0,0.4);
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: 10px;
cursor: pointer;
transition: all .15s ease;
}
.dd-pick-item:hover { background: rgba(184,132,255,0.08); border-color: rgba(184,132,255,0.4); }
.dd-pick-item.is-selected {
background: rgba(255,200,87,0.1);
border-color: #ffc857;
box-shadow: 0 0 16px rgba(255,200,87,0.25);
}
.dd-pick-item.rb-uncommon { border-color: rgba(95,214,132,0.4); }
.dd-pick-item.rb-rare { border-color: rgba(95,180,255,0.45); }
.dd-pick-item.rb-epic { border-color: rgba(184,132,255,0.5); }
.dd-pick-item.rb-legendary { border-color: rgba(255,200,87,0.55); }
.dd-pick-item.rb-mythic { border-color: rgba(255,90,140,0.55); }
.dd-pick-img {
width: 52px; height: 52px; flex-shrink: 0;
background: linear-gradient(180deg, rgba(20,12,40,0.6), rgba(10,6,20,0.85));
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: 8px;
padding: 4px;
display: grid; place-items: center;
}
.dd-pick-img.rb-uncommon { border-color: #5fd684; }
.dd-pick-img.rb-rare { border-color: #5fb4ff; }
.dd-pick-img.rb-epic { border-color: #b884ff; }
.dd-pick-img.rb-legendary { border-color: #ffc857; }
.dd-pick-img.rb-mythic { border-color: #ff5a8c; }
.dd-pick-img iconify-icon { font-size: 26px; color: #c39dff; }
.dd-pick-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dd-pick-name {
font-family: var(--font-title, 'Cinzel', serif);
font-size: 14px; font-weight: 700; line-height: 1.2;
color: #f3eff8;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-pick-name.r-uncommon { color: #7df0a3; }
.dd-pick-name.r-rare { color: #6ec0ff; }
.dd-pick-name.r-epic { color: #c79dff; }
.dd-pick-name.r-legendary { color: #ffd66f; }
.dd-pick-name.r-mythic { color: #ff7aa3; }
.dd-pick-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.dd-pick-price { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.dd-pick-price-orig { color: #8d86a8; text-decoration: line-through; display: inline-flex; align-items: center; gap: 3px; }
.dd-pick-price-orig i { color: #5fb4ff; opacity: .5; font-size: 10px; }
.dd-pick-price-now { color: #ffd66f; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.dd-pick-price-now i { color: #5fb4ff; font-size: 11px; }
.dd-pick-radio { font-size: 24px; color: #6b6580; flex-shrink: 0; }
.dd-pick-item.is-selected .dd-pick-radio { color: #ffc857; }
/* 2026-05-24: ojito de stats — abre item detail modal */
.dd-pick-eye {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.05);
color: #9d8aff;
font-size: 18px;
cursor: pointer;
display: grid;
place-items: center;
transition: background 0.15s, color 0.15s, transform 0.15s, border-color 0.15s;
}
.dd-pick-eye:hover {
background: rgba(157,138,255,0.18);
color: #c2b3ff;
border-color: rgba(157,138,255,0.4);
transform: scale(1.08);
}
.dd-pick-eye:active { transform: scale(0.95); }
.daily-deals-card {
background: linear-gradient(180deg, rgba(212,175,55,0.10), rgba(12,6,22,0.95));
border: 1px solid rgba(212,175,55,0.4);
border-radius: 14px;
padding: 18px;
margin-bottom: 22px;
box-shadow: 0 6px 26px rgba(212,175,55,0.15);
}
.dd-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 4px;
}
.dd-title {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-cinzel, serif);
font-size: 22px;
font-weight: 800;
color: var(--gold);
letter-spacing: 0.5px;
}
.dd-title i { color: #ff7a3a; }
.dd-badge {
background: linear-gradient(135deg, #e85a6a, #b8344a);
color: white;
padding: 4px 10px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
box-shadow: 0 3px 10px rgba(232,90,106,0.4);
}
.dd-timer {
display: flex;
align-items: center;
gap: 6px;
color: var(--text-muted);
font-size: 13px;
}
.dd-timer i { color: #ffc857; }
.dd-timer b { color: var(--gold); }
.dd-sub {
color: var(--text-muted);
font-size: 13px;
margin-bottom: 14px;
}
.dd-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
.dd-item {
position: relative;
background: linear-gradient(180deg, rgba(28,16,45,0.95), rgba(12,6,22,0.99));
border: 1.5px solid rgba(212,175,55,0.25);
border-radius: 12px;
padding: 12px;
display: flex;
flex-direction: column;
transition: transform 0.15s, box-shadow 0.15s;
}
.dd-item:not(.is-purchased):hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(212,175,55,0.25);
}
.dd-item.r-uncommon { border-color: rgba(95,180,255,0.5); }
.dd-item.r-rare { border-color: rgba(95,180,255,0.75); box-shadow: 0 4px 14px rgba(95,180,255,0.2); }
.dd-item.r-epic { border-color: rgba(184,132,255,0.75); box-shadow: 0 4px 16px rgba(184,132,255,0.25); }
.dd-item.r-legendary { border-color: rgba(255,200,87,0.85); box-shadow: 0 4px 18px rgba(255,200,87,0.3); }
.dd-item.r-mythic { border-color: rgba(232,90,106,0.85); box-shadow: 0 4px 20px rgba(232,90,106,0.35); }
.dd-item.is-purchased { opacity: 0.55; filter: saturate(0.6); }
.dd-disc-pill {
position: absolute;
top: 8px;
left: 8px;
background: linear-gradient(135deg, #e85a6a, #b8344a);
color: white;
padding: 3px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.5px;
z-index: 2;
box-shadow: 0 2px 8px rgba(232,90,106,0.4);
}
/* Race deal badge (2026-05-08) */
.dd-race-tag {
position: absolute;
top: 8px;
right: 8px;
background: linear-gradient(135deg, rgba(184,132,255,0.9), rgba(122,76,240,0.9));
color: #fff;
padding: 2px 8px;
border-radius: 999px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
z-index: 2;
box-shadow: 0 2px 6px rgba(184,132,255,0.4);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.dd-item.is-race-deal {
background: linear-gradient(180deg, rgba(38,22,65,0.95), rgba(18,8,32,0.99));
border-color: rgba(184,132,255,0.5);
}
.dd-item.is-race-deal:not(.is-purchased):hover {
box-shadow: 0 8px 22px rgba(184,132,255,0.3);
}
.dd-img-wrap {
position: relative;
height: 96px;
background: radial-gradient(ellipse at center, rgba(212,175,55,0.18), transparent 70%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.dd-img-wrap.r-rare { background: radial-gradient(ellipse at center, rgba(95,180,255,0.22), transparent 70%); }
.dd-img-wrap.r-epic { background: radial-gradient(ellipse at center, rgba(184,132,255,0.25), transparent 70%); }
.dd-img-wrap.r-legendary { background: radial-gradient(ellipse at center, rgba(255,200,87,0.3), transparent 70%); }
.dd-img-wrap.r-mythic { background: radial-gradient(ellipse at center, rgba(232,90,106,0.3), transparent 70%); }
.dd-img {
width: 64px;
height: 64px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.dd-eye {
position: absolute;
top: 6px;
right: 6px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.15);
color: white;
width: 26px;
height: 26px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.dd-eye:hover { background: rgba(212,175,55,0.4); }
.dd-info { flex: 1; }
.dd-name {
font-weight: 700;
font-size: 15px;
margin-bottom: 4px;
line-height: 1.2;
}
.dd-meta {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 6px;
}
.dd-tag {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: var(--text-muted);
padding: 2px 7px;
border-radius: 6px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.dd-desc {
color: var(--text-muted);
font-size: 11px;
line-height: 1.35;
margin-bottom: 8px;
max-height: 50px;
overflow: hidden;
}
.dd-price-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 8px 0;
}
.dd-price-orig {
color: var(--text-muted);
text-decoration: line-through;
display: flex;
align-items: center;
gap: 3px;
font-size: 13px;
}
.dd-price-now {
color: var(--gold);
font-weight: 800;
display: flex;
align-items: center;
gap: 4px;
font-size: 17px;
font-family: var(--font-mono, monospace);
}
.dd-buy-btn { font-weight: 700; letter-spacing: 0.4px; }
@media (max-width: 720px) {
.dd-grid { grid-template-columns: 1fr; }
}
/* === Ofertas (Offers screen) — Hero card design with chests + discount badges === */
.offers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 18px;
}
/* 2026-05-07: secciones (Generales / Por raza) */
.offers-section { margin-top: 24px; }
.offers-section:first-of-type { margin-top: 16px; }
.offers-section-title {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Cinzel', serif;
font-size: 16px;
font-weight: 700;
color: var(--gold);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 10px 14px;
margin-bottom: 12px;
background: linear-gradient(90deg, rgba(212,175,55,0.10), rgba(212,175,55,0.02) 60%, transparent);
border-left: 3px solid var(--gold);
border-radius: 4px;
}
.offers-section-title > i { font-size: 20px; color: var(--gold); }
.offers-section-count {
margin-left: auto;
padding: 2px 9px;
background: rgba(212,175,55,0.18);
border: 1px solid rgba(212,175,55,0.40);
border-radius: 999px;
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--gold);
font-weight: 700;
letter-spacing: 0;
text-transform: none;
}
.offers-section-mine {
padding: 2px 8px;
background: linear-gradient(90deg, rgba(95,214,132,0.20), rgba(95,214,132,0.05));
border: 1px solid rgba(95,214,132,0.55);
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 10px;
color: #5fd684;
font-weight: 700;
letter-spacing: 0.04em;
}
/* Skill point row en el contenido del pack */
.offer-item-row.offer-item-sp {
background: linear-gradient(90deg, rgba(157,108,255,0.16), rgba(157,108,255,0.04));
border-color: rgba(157,108,255,0.45);
}
.offer-item-row.offer-item-sp .offer-item-ico { color: #c2a8ff !important; }
.offer-item-row.offer-item-sp .offer-item-name { color: #c2a8ff; font-weight: 700; }
.offer-item-row.offer-item-sp .offer-item-qty { color: #c2a8ff; }
.offer-card {
position: relative;
background: linear-gradient(180deg, rgba(28,16,45,0.95), rgba(12,6,22,0.99));
border: 2px solid rgba(255,255,255,0.08);
border-radius: 18px;
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.offer-card:not(.is-sold-out):hover {
transform: translateY(-3px) scale(1.01);
}
.offer-card.r-uncommon { border-color: rgba(95,180,255,0.5); box-shadow: 0 6px 20px rgba(95,180,255,0.15); }
.offer-card.r-rare { border-color: rgba(95,180,255,0.7); box-shadow: 0 6px 24px rgba(95,180,255,0.22); }
.offer-card.r-epic { border-color: rgba(157,108,255,0.7); box-shadow: 0 8px 30px rgba(157,108,255,0.28); }
.offer-card.r-legendary {
border-color: rgba(255,200,87,0.85);
box-shadow: 0 10px 40px rgba(255,200,87,0.35);
animation: legendary-pulse 2.5s ease-in-out infinite;
}
.offer-card.r-mythic {
border-color: rgba(255,80,180,0.8);
box-shadow: 0 10px 40px rgba(255,80,180,0.38);
animation: mythic-pulse 2.5s ease-in-out infinite;
}
@keyframes legendary-pulse {
0%,100% { box-shadow: 0 10px 40px rgba(255,200,87,0.35); }
50% { box-shadow: 0 10px 50px rgba(255,200,87,0.55); }
}
@keyframes mythic-pulse {
0%,100% { box-shadow: 0 10px 40px rgba(255,80,180,0.38); }
50% { box-shadow: 0 10px 50px rgba(255,80,180,0.6); }
}
.offer-card.is-sold-out { opacity: 0.55; filter: grayscale(0.5); }
/* Discount badge — esquina superior derecha, gigante e impactante */
.offer-discount-badge {
position: absolute;
top: 12px;
right: -8px;
z-index: 10;
background: linear-gradient(135deg, #e85a6a, #c43040);
color: #fff;
padding: 8px 14px;
border-radius: 8px 0 0 8px;
text-align: center;
box-shadow: 0 4px 14px rgba(232,90,106,0.5), 0 0 0 2px rgba(255,255,255,0.1) inset;
transform: rotate(2deg);
animation: discount-shake 4s ease-in-out infinite;
}
.offer-discount-badge::after {
content: '';
position: absolute;
top: 100%;
right: 0;
border-style: solid;
border-width: 0 0 8px 8px;
border-color: transparent transparent transparent #6a1818;
}
@keyframes discount-shake {
0%,100% { transform: rotate(2deg) scale(1); }
50% { transform: rotate(2deg) scale(1.06); }
}
.odb-num {
display: block;
font-family: 'Cinzel', serif;
font-size: 22px;
font-weight: 900;
line-height: 1;
letter-spacing: 0.02em;
text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.odb-lbl {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
margin-top: 2px;
opacity: 0.95;
}
/* Remaining purchases tag — esquina superior izquierda */
.offer-remaining-tag {
position: absolute;
top: 14px;
left: 14px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
background: rgba(95,214,132,0.2);
border: 1px solid rgba(95,214,132,0.5);
border-radius: 99px;
font-size: 10.5px;
font-weight: 700;
color: #5fd684;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.offer-remaining-tag i { font-size: 10px; }
/* 2026-05-08: pack bloqueado por raza — ribbon esquina superior izquierda */
.offer-race-lock-tag {
position: absolute;
top: 14px;
left: 14px;
z-index: 6;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
background: rgba(255,90,90,0.18);
border: 1px solid rgba(255,120,120,0.6);
border-radius: 99px;
font-size: 10.5px;
font-weight: 800;
color: #ff8a8a;
text-transform: uppercase;
letter-spacing: 0.06em;
box-shadow: 0 4px 14px rgba(255,80,90,0.18);
}
.offer-race-lock-tag i { font-size: 11px; }
.offer-card.is-other-race {
opacity: 0.78;
filter: saturate(0.85);
}
.offer-card.is-other-race .offer-hero { filter: grayscale(0.4); }
.offer-card.is-other-race .offer-buy-btn { cursor: not-allowed; }
/* Hero (cofre) section */
.offer-hero {
position: relative;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, rgba(212,175,55,0.18) 0%, rgba(40,20,60,0.4) 60%, transparent 100%);
overflow: hidden;
}
.offer-hero-glow {
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 70%;
border-radius: 50%;
background: radial-gradient(circle, rgba(212,175,55,0.45) 0%, transparent 70%);
transform: translate(-50%, -50%);
filter: blur(20px);
pointer-events: none;
animation: hero-glow-pulse 3s ease-in-out infinite;
}
.offer-card.r-epic .offer-hero-glow { background: radial-gradient(circle, rgba(157,108,255,0.6) 0%, transparent 70%); }
.offer-card.r-legendary .offer-hero-glow { background: radial-gradient(circle, rgba(255,200,87,0.7) 0%, transparent 70%); }
.offer-card.r-mythic .offer-hero-glow { background: radial-gradient(circle, rgba(255,80,180,0.7) 0%, transparent 70%); }
@keyframes hero-glow-pulse {
0%,100% { opacity: 0.6; transform: translate(-50%,-50%) scale(0.95); }
50% { opacity: 1.0; transform: translate(-50%,-50%) scale(1.05); }
}
.offer-chest-img {
position: relative;
z-index: 2;
width: 130px;
height: 130px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
animation: chest-bob 3.5s ease-in-out infinite;
}
@keyframes chest-bob {
0%,100% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
}
/* Rarity tag — chip flotante debajo del cofre */
.offer-rarity-tag {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
padding: 3px 12px;
border-radius: 99px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.offer-rarity-tag.r-uncommon { background: rgba(95,180,255,0.22); color: #5fb4ff; border: 1px solid rgba(95,180,255,0.5); }
.offer-rarity-tag.r-rare { background: rgba(95,180,255,0.22); color: #5fb4ff; border: 1px solid rgba(95,180,255,0.5); }
.offer-rarity-tag.r-epic { background: rgba(157,108,255,0.28); color: #c2a8ff; border: 1px solid rgba(157,108,255,0.55); }
.offer-rarity-tag.r-legendary { background: rgba(255,200,87,0.28); color: var(--gold); border: 1px solid rgba(255,200,87,0.6); }
.offer-rarity-tag.r-mythic { background: rgba(255,80,180,0.28); color: #ff5fb4; border: 1px solid rgba(255,80,180,0.55); }
/* Body */
.offer-body {
padding: 14px 16px 12px;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.offer-name {
font-family: 'Cinzel', serif;
font-weight: 800;
font-size: 19px;
color: #f5e6c8;
letter-spacing: 0.05em;
text-align: center;
line-height: 1.15;
}
.offer-purchases {
font-size: 11px;
color: rgba(255,255,255,0.5);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.offer-desc {
font-size: 12.5px;
color: rgba(255,255,255,0.72);
line-height: 1.45;
text-align: center;
}
.offer-highlights {
display: flex;
flex-direction: column;
gap: 4px;
padding: 9px 11px;
background: linear-gradient(135deg, rgba(255,200,87,0.1), rgba(255,200,87,0.04));
border: 1px solid rgba(255,200,87,0.4);
border-radius: 8px;
}
.offer-highlight {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 700;
color: var(--gold);
}
.offer-highlight i { font-size: 11px; }
.offer-contents-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 4px;
}
.offer-contents-title i { color: var(--gold); font-size: 13px; }
.offer-items-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.offer-item-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 7px;
font-size: 12px;
}
.offer-item-row.r-common { border-left: 3px solid #b0b0b0; }
.offer-item-row.r-uncommon { border-left: 3px solid #5fb4ff; }
.offer-item-row.r-rare { border-left: 3px solid #5fb4ff; }
.offer-item-row.r-epic { border-left: 3px solid #c2a8ff; }
.offer-item-row.r-legendary { border-left: 3px solid #ffc857; }
.offer-item-row.r-mythic { border-left: 3px solid #ff5fb4; }
.offer-item-ico { color: rgba(255,255,255,0.4); font-size: 14px; }
.offer-item-name { flex: 1; color: rgba(255,255,255,0.88); font-weight: 600; }
.offer-item-qty {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--gold);
font-weight: 800;
min-width: 28px;
text-align: right;
}
/* Price row */
.offer-price-row {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 12px 16px 4px;
}
.offer-price-orig {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
color: rgba(255,255,255,0.4);
text-decoration: line-through;
text-decoration-color: rgba(232,90,106,0.7);
text-decoration-thickness: 2px;
}
.offer-price-orig i { font-size: 13px; opacity: 0.6; }
.offer-price-now {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'Cinzel', serif;
font-size: 24px;
font-weight: 800;
color: var(--gold);
text-shadow: 0 2px 8px rgba(212,175,55,0.4);
}
.offer-price-now i { font-size: 20px; }
/* Buy button */
.offer-buy-btn {
margin: 8px 16px 16px;
font-family: 'Cinzel', serif !important;
font-weight: 800 !important;
letter-spacing: 0.05em !important;
font-size: 13px !important;
padding: 13px 10px !important;
text-transform: uppercase;
position: relative;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: flex !important;
align-items: center;
justify-content: center;
gap: 6px;
width: calc(100% - 32px);
box-sizing: border-box;
min-width: 0;
}
.offer-buy-btn span,
.offer-buy-btn:not(:has(span)) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.offer-buy-btn:not(:disabled).btn-gold {
background: linear-gradient(135deg, #ffc857, #d4af37) !important;
border: 1px solid #ffe49a !important;
color: #1a0a0a !important;
box-shadow: 0 4px 14px rgba(212,175,55,0.45) !important;
}
.offer-buy-btn:not(:disabled).btn-gold:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(212,175,55,0.6) !important;
}
.offer-buy-btn:not(:disabled).btn-gold::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: btn-shine 3s ease-in-out infinite;
}
@keyframes btn-shine {
0%,80%,100% { left: -100%; }
90% { left: 100%; }
}
.offer-buy-btn i { font-size: 14px; }
/* Item eye button (ver detalles) */
.offer-item-eye {
flex-shrink: 0;
background: rgba(212,175,55,0.15);
border: 1px solid rgba(212,175,55,0.4);
color: var(--gold);
border-radius: 6px;
padding: 4px 7px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.offer-item-eye:hover {
background: rgba(212,175,55,0.3);
border-color: var(--gold);
transform: scale(1.1);
}
.offer-item-eye i { font-size: 12px; }
/* Item detail modal — stats grid + special bonuses */
.oid-stats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 6px;
margin-top: 10px;
}
.oid-stat {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 7px;
font-size: 12px;
}
.oid-stat i { font-size: 13px; flex-shrink: 0; }
.oid-stat-lbl {
font-size: 10.5px;
color: rgba(255,255,255,0.55);
font-weight: 700;
letter-spacing: 0.05em;
flex: 1;
}
.oid-stat-val {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 800;
}
.oid-special {
margin-top: 12px;
padding: 10px 12px;
background: linear-gradient(135deg, rgba(255,200,87,0.12), rgba(255,200,87,0.04));
border: 1px solid rgba(255,200,87,0.45);
border-radius: 8px;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: rgba(255,255,255,0.9);
}
.oid-special i { font-size: 18px; color: var(--gold); }
.oid-special b { color: var(--gold); }
@media (max-width: 540px) {
.offer-hero { height: 130px; }
.offer-chest-img { width: 100px; height: 100px; }
.offer-name { font-size: 16px; }
.offer-price-now { font-size: 20px; }
.odb-num { font-size: 18px; }
.offer-buy-btn {
font-size: 12px !important;
padding: 12px 8px !important;
letter-spacing: 0.04em !important;
margin: 8px 12px 12px;
width: calc(100% - 24px);
}
.offer-buy-btn i { font-size: 12px; }
.offer-item-eye { padding: 3px 6px; }
}
@media (max-width: 380px) {
.offer-buy-btn {
font-size: 11px !important;
padding: 11px 6px !important;
}
}
/* === Heal/lifesteal log: indicador de cap por HP máx === */
.cap-log-cap {
display: inline-block;
margin-left: 4px;
padding: 1px 6px;
background: rgba(255,200,87,0.18);
border: 1px solid rgba(255,200,87,0.4);
border-radius: 99px;
font-size: 10px;
color: #ffc857;
font-weight: 600;
letter-spacing: 0.04em;
}
/* === Welcome promotional modal (al entrar al juego) === */
.welcome-overlay {
background: rgba(0,0,0,0.7) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.welcome-modal {
position: relative;
background: linear-gradient(180deg, rgba(40,20,55,0.97), rgba(20,10,30,0.99));
border: 2px solid rgba(255,200,87,0.55);
border-radius: 20px;
padding: 22px 24px 20px;
width: 100%;
max-width: 420px;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 50px rgba(255,200,87,0.25);
overflow: hidden;
}
.welcome-modal::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(255,200,87,0.15) 0%, transparent 50%),
radial-gradient(circle at 50% 100%, rgba(157,108,255,0.15) 0%, transparent 50%);
pointer-events: none;
}
.welcome-modal > * { position: relative; z-index: 1; }
.welcome-tag {
display: inline-block;
background: linear-gradient(135deg, #e85a6a, #c43040);
color: #fff;
font-family: 'Cinzel', serif;
font-weight: 800;
font-size: 11px;
letter-spacing: 0.18em;
padding: 5px 14px;
border-radius: 99px;
margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(232,90,106,0.45);
animation: welcome-tag-pulse 2.5s ease-in-out infinite;
}
@keyframes welcome-tag-pulse {
0%,100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
.welcome-icon-wrap {
position: relative;
width: 130px;
height: 130px;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
}
.welcome-icon-glow {
position: absolute;
inset: -10px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,200,87,0.6) 0%, transparent 70%);
filter: blur(20px);
animation: welcome-glow-pulse 2.5s ease-in-out infinite;
}
@keyframes welcome-glow-pulse {
0%,100% { opacity: 0.7; transform: scale(0.95); }
50% { opacity: 1.0; transform: scale(1.08); }
}
.welcome-icon {
position: relative;
width: 130px;
height: 130px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
/* 2026-05-15: animación welcome-bob removida — imagen del modal fija. */
}
.welcome-title {
font-family: 'Cinzel', serif;
font-size: 26px;
font-weight: 900;
letter-spacing: 0.04em;
color: #f5e6c8;
margin-bottom: 4px;
text-shadow: 0 2px 12px rgba(255,200,87,0.4);
}
.welcome-subtitle {
font-family: 'Cinzel', serif;
font-size: 16px;
font-weight: 700;
color: var(--gold);
margin-bottom: 14px;
}
.welcome-body {
font-size: 13px;
color: rgba(255,255,255,0.78);
line-height: 1.5;
margin-bottom: 16px;
padding: 0 6px;
}
.welcome-features {
display: flex;
flex-direction: column;
gap: 7px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,200,87,0.25);
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 16px;
text-align: left;
}
.welcome-feat {
display: flex;
align-items: center;
gap: 10px;
font-size: 12.5px;
color: rgba(255,255,255,0.85);
font-weight: 600;
}
.welcome-feat i { font-size: 16px; flex-shrink: 0; }
/* Note explicativa con tono advertencia (info importante sobre items que NO expiran) */
.welcome-note {
margin: 14px 0 8px;
padding: 10px 12px;
background: rgba(108,212,255,0.08);
border: 1px solid rgba(108,212,255,0.30);
border-radius: 10px;
font-size: 11.5px;
line-height: 1.45;
color: var(--text);
text-align: left;
}
.welcome-note b { color: #6cd4ff; }
/* CTA de 2 botones lado a lado */
.welcome-cta-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 4px;
}
.welcome-cta-half {
font-family: 'Cinzel', serif !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
font-size: 12px !important;
padding: 12px 8px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
.welcome-cta-half i { font-size: 14px; }
@media (max-width: 480px) {
.welcome-cta-row { grid-template-columns: 1fr; }
.welcome-cta-half { font-size: 11.5px !important; }
}
.welcome-cta {
font-family: 'Cinzel', serif !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
font-size: 14px !important;
padding: 14px !important;
background: linear-gradient(135deg, #ffc857, #d4af37) !important;
border: 1px solid #ffe49a !important;
color: #1a0a0a !important;
box-shadow: 0 4px 16px rgba(212,175,55,0.5) !important;
position: relative;
overflow: hidden;
}
.welcome-cta::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: welcome-cta-shine 2.5s ease-in-out infinite;
}
@keyframes welcome-cta-shine {
0%,80%,100% { left: -100%; }
90% { left: 100%; }
}
.welcome-cta i { font-size: 14px; margin-right: 6px; }
.welcome-later {
background: transparent;
border: none;
color: rgba(255,255,255,0.55);
font-size: 12px;
margin-top: 10px;
padding: 6px 12px;
cursor: pointer;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: color 0.15s;
}
.welcome-later:hover { color: rgba(255,255,255,0.85); }
@media (max-width: 540px) {
.welcome-modal { padding: 20px 18px 16px; max-width: calc(100vw - 32px); }
.welcome-icon-wrap, .welcome-icon { width: 110px; height: 110px; }
.welcome-title { font-size: 22px; }
.welcome-subtitle { font-size: 14px; }
}
/* ===== Telegram welcome modal — invita a unirse al canal y al chat ===== */
.tg-overlay {
position: fixed;
inset: 0;
background: rgba(8,4,18,0.85);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 16px;
}
.tg-modal {
position: relative;
background: linear-gradient(180deg, #1c1334 0%, #0a0518 100%);
border: 1.5px solid rgba(40,158,229,0.45);
border-radius: 18px;
padding: 26px 24px 20px;
max-width: 440px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(40,158,229,0.25), 0 0 0 1px rgba(255,255,255,0.04) inset;
overflow: hidden;
}
.tg-modal::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top, rgba(40,158,229,0.18), transparent 65%);
pointer-events: none;
}
.tg-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(40,158,229,0.2);
color: #4ec3f7;
border: 1px solid rgba(40,158,229,0.4);
border-radius: 999px;
padding: 4px 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.tg-icon-wrap {
position: relative;
width: 96px;
height: 96px;
margin: 14px auto 6px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.tg-icon-glow {
position: absolute;
inset: -12px;
background: radial-gradient(circle, rgba(40,158,229,0.4), transparent 70%);
filter: blur(14px);
animation: tg-pulse 2.5s ease-in-out infinite;
}
@keyframes tg-pulse {
0%, 100% { opacity: 0.6; transform: scale(0.92); }
50% { opacity: 1; transform: scale(1.06); }
}
.tg-main-icon {
position: relative;
font-size: 80px;
color: #4ec3f7;
filter: drop-shadow(0 6px 14px rgba(40,158,229,0.55));
}
.tg-title {
font-family: var(--font-title);
font-weight: 800;
font-size: 24px;
letter-spacing: 0.04em;
color: #fff;
margin-top: 6px;
position: relative;
z-index: 1;
}
.tg-subtitle {
font-size: 14px;
color: #4ec3f7;
font-weight: 600;
margin-top: 4px;
letter-spacing: 0.03em;
position: relative;
z-index: 1;
}
.tg-body {
font-size: 12.5px;
color: rgba(255,255,255,0.7);
margin-top: 8px;
line-height: 1.5;
padding: 0 4px;
position: relative;
z-index: 1;
}
.tg-channels {
display: flex;
flex-direction: column;
gap: 10px;
margin: 18px 0 14px;
position: relative;
z-index: 1;
}
.tg-channel-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(0,0,0,0.5);
border: 1.5px solid rgba(40,158,229,0.3);
border-radius: 12px;
text-decoration: none;
color: var(--text);
transition: all 0.2s;
cursor: pointer;
text-align: left;
}
.tg-channel-card:hover {
border-color: #4ec3f7;
background: rgba(40,158,229,0.08);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(40,158,229,0.25);
}
.tg-card-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(40,158,229,0.18);
border: 1.5px solid rgba(40,158,229,0.45);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 22px;
color: #4ec3f7;
}
.tg-chat .tg-card-icon {
background: rgba(255,200,87,0.15);
border-color: rgba(255,200,87,0.4);
color: #ffc857;
}
.tg-card-info { flex: 1; min-width: 0; }
.tg-card-title {
font-family: var(--font-title);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.04em;
color: #fff;
}
.tg-card-sub {
font-size: 11px;
color: rgba(255,255,255,0.6);
margin-top: 2px;
line-height: 1.3;
}
.tg-card-handle {
font-family: var(--font-mono);
font-size: 11px;
color: #4ec3f7;
margin-top: 2px;
}
.tg-chat .tg-card-handle { color: #ffc857; }
.tg-card-cta {
display: inline-flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, #1e90c4, #4ec3f7);
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
flex-shrink: 0;
box-shadow: 0 3px 8px rgba(40,158,229,0.4);
}
.tg-chat .tg-card-cta {
background: linear-gradient(135deg, #c4951e, #ffc857);
box-shadow: 0 3px 8px rgba(255,200,87,0.4);
}
.tg-later {
background: transparent;
border: none;
color: rgba(255,255,255,0.55);
font-size: 12px;
margin-top: 8px;
padding: 6px 12px;
cursor: pointer;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: color 0.15s;
}
.tg-later:hover { color: rgba(255,255,255,0.85); }
@media (max-width: 540px) {
.tg-modal { padding: 22px 16px 14px; max-width: calc(100vw - 32px); }
.tg-icon-wrap { width: 80px; height: 80px; }
.tg-main-icon { font-size: 64px; }
.tg-title { font-size: 20px; }
.tg-subtitle { font-size: 13px; }
.tg-body { font-size: 12px; }
.tg-card-icon { width: 38px; height: 38px; font-size: 18px; }
.tg-card-title { font-size: 13px; }
.tg-card-sub { font-size: 10.5px; }
.tg-card-cta { font-size: 10px; padding: 5px 10px; }
}
/* === Players online summary en zone modal === */
.zm-players-summary {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(95,214,132,0.1), rgba(95,214,132,0.03));
border: 1px solid rgba(95,214,132,0.3);
border-radius: 10px;
margin-top: 10px;
}
.zmp-count {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.zmp-count > i {
font-size: 22px;
color: #5fd684;
}
.zmp-count-num {
font-family: 'Cinzel', serif;
font-size: 22px;
font-weight: 800;
color: #5fd684;
}
.zmp-count-label {
font-size: 12.5px;
color: rgba(255,255,255,0.7);
flex: 1;
min-width: 0;
}
.zmp-view-btn {
flex-shrink: 0;
padding: 7px 14px !important;
font-size: 13px !important;
background: rgba(95,214,132,0.18) !important;
border-color: rgba(95,214,132,0.45) !important;
color: #5fd684 !important;
}
.zmp-view-btn:hover {
background: rgba(95,214,132,0.28) !important;
border-color: #5fd684 !important;
}
/* Modal de lista de jugadores en zona */
.zone-players-modal {
background: linear-gradient(180deg, rgba(20,30,25,0.97), rgba(10,18,12,0.99));
border: 1px solid rgba(95,214,132,0.45);
border-radius: 14px;
padding: 22px 18px 16px;
width: 100%;
max-width: 440px;
position: relative;
max-height: 80vh;
overflow-y: auto;
}
.zp-title {
font-family: 'Cinzel', serif;
font-size: 18px;
font-weight: 700;
color: #f5e6c8;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 8px;
}
.zp-title > i { color: #5fd684; font-size: 20px; }
.zp-sub {
font-size: 11.5px;
color: rgba(255,255,255,0.55);
margin-bottom: 14px;
}
.zp-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.zp-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
}
.zp-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(95,214,132,0.15);
border: 1px solid rgba(95,214,132,0.4);
display: flex; align-items: center; justify-content: center;
color: #5fd684;
font-size: 18px;
}
.zp-info { flex: 1; min-width: 0; }
.zp-name {
font-size: 13.5px;
font-weight: 700;
color: #f5e6c8;
margin-bottom: 1px;
}
.zp-meta {
font-size: 11px;
color: rgba(255,255,255,0.55);
font-family: 'JetBrains Mono', monospace;
}
.zp-online-dot {
width: 9px; height: 9px;
border-radius: 50%;
background: #5fd684;
box-shadow: 0 0 6px #5fd684;
animation: pulse-online 2s infinite ease-in-out;
}
/* 2026-05-19: badge "En PvP" — reemplaza el dot verde cuando el player está en duelo */
.zp-pvp-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: 99px;
background: linear-gradient(90deg, rgba(232,90,106,0.20), rgba(232,90,106,0.08));
border: 1px solid rgba(232,90,106,0.55);
color: #ff8898;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
.zp-pvp-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #ff4d5e;
box-shadow: 0 0 6px #ff4d5e;
animation: pulse-pvp 1s infinite ease-in-out;
}
@keyframes pulse-pvp {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(1.25); }
}
.zp-row.is-in-pvp {
background: linear-gradient(90deg, rgba(232,90,106,0.06), transparent);
border-color: rgba(232,90,106,0.18);
}
/* === Tabs Mochila / Almacén (inventory) === */
.inv-tabs-row {
display: flex;
gap: 6px;
margin-bottom: 10px;
padding: 4px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
}
.inv-tab-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 10px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: rgba(255,255,255,0.55);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.inv-tab-btn:hover { color: rgba(255,255,255,0.85); }
.inv-tab-btn.active {
background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.06));
border-color: rgba(212,175,55,0.45);
color: var(--gold);
box-shadow: 0 2px 8px rgba(212,175,55,0.18);
}
/* 2026-05-12: tab "Fuera de almacén" con borde rojo de aviso */
.inv-tab-btn.inv-tab-overflow {
border-color: rgba(255, 90, 124, 0.45);
color: #ff8a9c;
animation: invOverflowPulse 2.4s ease-in-out infinite;
}
.inv-tab-btn.inv-tab-overflow:hover { color: #ffaab8; }
.inv-tab-btn.inv-tab-overflow.active {
background: linear-gradient(135deg, rgba(255, 90, 124, 0.22), rgba(255, 90, 124, 0.08));
border-color: rgba(255, 90, 124, 0.65);
color: #ff5a78;
box-shadow: 0 2px 10px rgba(255, 90, 124, 0.25);
}
@keyframes invOverflowPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 124, 0); }
50% { box-shadow: 0 0 0 4px rgba(255, 90, 124, 0.15); }
}
.inv-overflow-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 6px 0 10px;
padding: 10px 14px;
background: rgba(255, 90, 124, 0.08);
border: 1px solid rgba(255, 90, 124, 0.35);
border-radius: 10px;
font-size: 12px;
color: rgba(232, 227, 245, 0.85);
}
.inv-overflow-note i { color: #ff5a78; font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.inv-tab-btn i { font-size: 15px; }
.inv-tab-count {
background: rgba(0,0,0,0.4);
padding: 1px 7px;
border-radius: 99px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
}
.inv-tab-btn.active .inv-tab-count {
background: var(--gold);
color: #1a0a0a;
}
/* === Tienda Oficial de Pociones (sección en bazar) === */
.shop-potions-card {
background: linear-gradient(135deg, rgba(157,108,255,0.08), rgba(95,214,132,0.05), rgba(255,200,87,0.04));
border: 1px solid rgba(157,108,255,0.35);
border-radius: 12px;
padding: 14px 14px 12px;
margin: 12px 0 16px;
position: relative;
overflow: hidden;
}
.shop-potions-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 0% 0%, rgba(157,108,255,0.18), transparent 50%);
pointer-events: none;
}
.shop-potions-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
position: relative;
z-index: 1;
}
.shop-potions-header > i { font-size: 26px; }
.shop-potions-title {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 14px;
color: #f5e6c8;
letter-spacing: 0.04em;
}
.shop-potions-sub {
font-size: 11px;
color: rgba(255,255,255,0.55);
}
.shop-potions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 8px;
position: relative;
z-index: 1;
}
.shop-potion-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.shop-potion-card.r-common { border-color: rgba(180,180,180,0.35); }
.shop-potion-card.r-rare { border-color: rgba(95,180,255,0.45); box-shadow: 0 0 8px rgba(95,180,255,0.15); }
.shop-potion-card.r-epic { border-color: rgba(157,108,255,0.55); box-shadow: 0 0 12px rgba(157,108,255,0.25); }
.shop-potion-icon {
width: 44px; height: 44px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(95,214,132,0.2), rgba(95,214,132,0.05));
border: 1px solid rgba(95,214,132,0.4);
color: #5fd684;
font-size: 22px;
flex-shrink: 0;
overflow: hidden;
}
.shop-potion-img {
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: drop-shadow(0 0 6px rgba(95,214,132,0.4));
}
.shop-potion-info { flex: 1; min-width: 0; }
.shop-potion-name {
font-size: 13px;
font-weight: 600;
color: #f5e6c8;
margin-bottom: 3px;
line-height: 1.2;
}
.shop-potion-effect {
font-size: 11px;
color: #5fd684;
display: inline-flex;
align-items: center;
gap: 3px;
font-family: 'JetBrains Mono', monospace;
font-weight: 600;
}
.shop-potion-effect i { font-size: 10px; }
.shop-potion-buys {
display: flex;
flex-direction: column;
gap: 4px;
flex-shrink: 0;
}
.shop-potion-buy {
flex-shrink: 0;
padding: 8px 12px !important;
font-size: 13px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 4px;
font-family: 'JetBrains Mono', monospace !important;
min-width: 88px;
}
.shop-potion-buy i { font-size: 12px; }
.shop-potion-buy:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Botón de compra con oro (estilo distinto al gems) */
.btn.btn-gold-coin {
background: linear-gradient(180deg, #d4a040, #8c6020);
color: #2a1a00;
border: 1px solid rgba(0,0,0,0.3);
cursor: pointer;
}
.btn.btn-gold-coin:hover { filter: brightness(1.12); }
.btn.btn-gold-coin:disabled { filter: grayscale(0.5) brightness(0.7); }
.market-load-more-wrap {
margin-top: 16px;
padding: 0 4px;
}
.market-load-more-btn {
display: flex !important;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 16px !important;
font-size: 14px;
font-weight: 600;
background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(212,175,55,0.03)) !important;
border: 1px dashed rgba(212,175,55,0.4) !important;
transition: all 0.18s ease;
}
.market-load-more-btn:hover {
background: linear-gradient(135deg, rgba(212,175,55,0.14), rgba(212,175,55,0.06)) !important;
border-color: rgba(212,175,55,0.65) !important;
border-style: solid !important;
}
.market-load-more-btn i { font-size: 16px; color: var(--gold); }
.market-load-more-count {
margin-left: 8px;
padding: 2px 9px;
background: rgba(212,175,55,0.18);
border: 1px solid rgba(212,175,55,0.35);
border-radius: 999px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 700;
color: var(--gold);
}
/* ============================================================
MARKET — Sección colapsable de vendidos/cancelados (2026-05-13)
Aparece debajo del grid de activos en la pestaña "Mis ventas"
para no amontonar el historial con los listados activos.
============================================================ */
.market-history-section {
margin-top: 18px;
background: linear-gradient(180deg, rgba(20,12,38,0.55), rgba(12,6,24,0.7));
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
overflow: hidden;
}
.market-history-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px;
cursor: pointer;
list-style: none;
user-select: none;
transition: background 0.15s;
}
.market-history-summary::-webkit-details-marker { display: none; }
.market-history-summary:hover {
background: rgba(255,255,255,0.025);
}
.mhs-left {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.mhs-left > i {
font-size: 18px;
color: var(--text-muted, #9a9aaa);
}
.mhs-title {
font-family: var(--font-title, 'Cinzel'), serif;
font-size: 13px;
font-weight: 700;
color: var(--text, #e0d8c8);
letter-spacing: 0.04em;
}
.mhs-count {
font-family: var(--font-mono, 'JetBrains Mono'), monospace;
font-size: 11px;
color: var(--text-dim, #8a8a98);
background: rgba(0,0,0,0.35);
padding: 3px 9px;
border-radius: 99px;
border: 1px solid rgba(255,255,255,0.05);
}
.mhs-caret {
font-size: 16px;
color: var(--text-muted);
transition: transform 0.22s ease;
}
.market-history-section[open] .mhs-caret {
transform: rotate(180deg);
}
.market-history-grid {
padding: 4px 14px 14px;
opacity: 0.85;
}
/* Listados vendidos/cancelados se ven con leve grisado para que se entienda
visualmente que ya no están activos */
.market-history-grid .market-card {
filter: saturate(0.78) brightness(0.92);
}
.market-history-grid .market-card:hover {
filter: saturate(1) brightness(1);
}
/* ============================================================
MIS PUBLICACIONES v2 — Cards finas, mismo layout que comprar pero con
acciones reorganizadas en fila horizontal (2026-05-13).
Heredan toda la base de .market-card; solo override de price-block y
agregado de status pill + fila de acciones compacta.
============================================================ */
.market-card.my-listing-card-v2 { position: relative; }
.market-card.my-listing-card-v2.is-sold,
.market-card.my-listing-card-v2.is-cancelled {
filter: saturate(0.72) brightness(0.88);
opacity: 0.92;
}
.market-card.my-listing-card-v2.is-sold:hover,
.market-card.my-listing-card-v2.is-cancelled:hover {
filter: saturate(1) brightness(1);
opacity: 1;
}
/* Status pill compacto que reemplaza la línea "Tú" */
.my-listing-card-v2 .myl-status {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9.5px;
font-weight: 700;
padding: 2px 7px;
border-radius: 99px;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid;
font-family: var(--font-title, 'Cinzel'), serif;
}
.my-listing-card-v2 .myl-status i { font-size: 11px; }
.my-listing-card-v2 .myl-status-active {
color: #5fd684;
background: rgba(95,214,132,0.10);
border-color: rgba(95,214,132,0.42);
}
.my-listing-card-v2 .myl-status-active .myl-status-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #5fd684;
box-shadow: 0 0 6px rgba(95,214,132,0.7);
animation: myl-pulse 1.8s ease-in-out infinite;
}
@keyframes myl-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.85); }
}
.my-listing-card-v2 .myl-status-sold {
color: #ffc857;
background: rgba(255,200,87,0.10);
border-color: rgba(255,200,87,0.42);
}
.my-listing-card-v2 .myl-status-cancelled {
color: #ff7a8a;
background: rgba(255,122,138,0.10);
border-color: rgba(255,122,138,0.42);
}
/* Fila horizontal de acciones, debajo del precio */
.my-listing-card-v2 .myl-actions-row {
display: flex;
gap: 5px;
margin-top: 6px;
justify-content: flex-end;
}
.my-listing-card-v2 .myl-act-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 7px;
border: 1px solid;
background: transparent;
cursor: pointer;
font-family: inherit;
font-size: 13px;
transition: all 0.14s ease;
padding: 0;
}
.my-listing-card-v2 .myl-act-btn:active { transform: scale(0.92); }
.my-listing-card-v2 .myl-act-edit {
color: var(--gold, #e9b963);
border-color: rgba(212,175,55,0.4);
background: rgba(212,175,55,0.06);
}
.my-listing-card-v2 .myl-act-edit:hover {
background: rgba(212,175,55,0.18);
border-color: rgba(212,175,55,0.7);
box-shadow: 0 0 10px rgba(212,175,55,0.22);
}
.my-listing-card-v2 .myl-act-cancel {
color: #ff7a8a;
border-color: rgba(255,122,138,0.38);
background: rgba(255,122,138,0.06);
}
.my-listing-card-v2 .myl-act-cancel:hover {
background: rgba(255,122,138,0.18);
border-color: rgba(255,122,138,0.7);
color: #ffacb6;
box-shadow: 0 0 10px rgba(255,122,138,0.22);
}
/* ============================================================
MARKET RECENT SALES — historial público últimas 100, scroll interno.
2026-05-07: card transparente para todos los players, refresca al cambiar de tab.
============================================================ */
.mrs-card {
margin-top: 16px;
padding: 14px 0 0;
background: linear-gradient(180deg, rgba(28,16,46,0.7), rgba(15,8,25,0.85));
border: 1px solid rgba(157,108,255,0.25);
border-radius: 12px;
}
.mrs-header {
padding: 0 16px 12px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mrs-title {
display: flex;
align-items: center;
gap: 8px;
font-family: 'Cinzel', serif;
font-size: 15px;
font-weight: 700;
color: var(--gold);
letter-spacing: 0.04em;
}
.mrs-title i {
font-size: 18px;
color: #c2a8ff;
}
.mrs-sub {
margin-top: 3px;
font-size: 12px;
color: var(--text-muted);
}
.mrs-list {
max-height: 600px;
overflow-y: auto;
padding: 8px 12px 12px;
scrollbar-gutter: stable;
}
.mrs-list::-webkit-scrollbar { width: 6px; }
.mrs-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 3px; }
.mrs-list::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(157,108,255,0.45), rgba(123,97,255,0.45));
border-radius: 3px;
}
.mrs-loading,
.mrs-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 28px 8px;
color: var(--text-muted);
font-size: 13px;
}
.mrs-loading i { color: var(--gold); }
.mrs-row {
display: grid;
grid-template-columns: 38px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid transparent;
transition: background 0.15s ease;
}
.mrs-row + .mrs-row { margin-top: 4px; }
.mrs-row:hover {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.06);
}
.mrs-icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
color: var(--text-muted);
font-size: 18px;
overflow: hidden;
}
.mrs-icon-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Color del borde según rareza */
.mrs-icon.r-common { border-color: rgba(180,180,180,0.35); }
.mrs-icon.r-uncommon { border-color: rgba(95,214,132,0.45); background: rgba(95,214,132,0.08); }
.mrs-icon.r-rare { border-color: rgba(86,180,255,0.45); background: rgba(86,180,255,0.08); }
.mrs-icon.r-epic { border-color: rgba(180,108,255,0.5); background: rgba(180,108,255,0.10); }
.mrs-icon.r-legendary { border-color: rgba(255,170,60,0.5); background: rgba(255,170,60,0.10); }
.mrs-icon.r-mythic { border-color: rgba(255,80,170,0.5); background: rgba(255,80,170,0.12); }
.mrs-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mrs-name {
font-size: 13px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mrs-row.r-uncommon .mrs-name { color: #6fdc8c; }
.mrs-row.r-rare .mrs-name { color: #6cb6ff; }
.mrs-row.r-epic .mrs-name { color: #c8a4ff; }
.mrs-row.r-legendary .mrs-name { color: #ffb84d; }
.mrs-row.r-mythic .mrs-name { color: #ff6fb5; }
.mrs-qty {
font-family: var(--font-mono, monospace);
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
margin-left: 4px;
}
.mrs-meta {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mrs-seller, .mrs-buyer {
max-width: 90px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
}
.mrs-seller { color: rgba(255,200,150,0.85); }
.mrs-buyer { color: rgba(150,210,255,0.85); }
.mrs-arrow { font-size: 11px; opacity: 0.55; }
.mrs-dot { opacity: 0.4; padding: 0 2px; }
.mrs-time { font-style: italic; opacity: 0.75; }
.mrs-price {
display: flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono, monospace);
font-size: 13px;
font-weight: 700;
color: #c2a8ff;
white-space: nowrap;
}
.mrs-price i { font-size: 14px; color: #9d6cff; }
@media (max-width: 720px) {
.mrs-list { max-height: 320px; padding: 8px 8px 10px; }
.mrs-row { padding: 7px 8px; gap: 8px; grid-template-columns: 32px 1fr auto; }
.mrs-icon { width: 32px; height: 32px; font-size: 15px; }
.mrs-name { font-size: 12px; }
.mrs-meta { font-size: 10.5px; }
.mrs-seller, .mrs-buyer { max-width: 70px; }
.mrs-price { font-size: 12px; }
}
.market-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 14px;
display: flex;
gap: 12px;
align-items: center;
position: relative;
}
/* Race item card en bazar (2026-05-08) */
.market-card.is-race-card {
background: linear-gradient(135deg, rgba(184,132,255,0.12), rgba(122,76,240,0.05));
border-color: rgba(184,132,255,0.5);
padding-top: 18px;
}
/* Slot pill (sólo race items, en lugar de qty) */
.mi-meta-pill.mi-slot-pill {
color: #c39dff;
border-color: rgba(184,132,255,0.45);
background: rgba(184,132,255,0.10);
}
.mi-meta-pill.mi-slot-pill i { font-size: 11px; }
/* === Edit Price Modal (2026-05-08) === */
.edit-price-modal {
max-width: 440px;
width: 100%;
padding: 0;
}
.edit-price-modal .epm-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--border-soft);
}
.edit-price-modal .epm-title-block { flex: 1; min-width: 0; }
.edit-price-modal .epm-title {
font-family: var(--font-title);
font-size: 16px;
font-weight: 800;
color: var(--gold);
letter-spacing: 0.04em;
line-height: 1.2;
}
.edit-price-modal .epm-sub {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 4px;
}
.edit-price-modal .sp-close {
width: 28px; height: 28px;
background: transparent;
border: 0;
color: var(--text-muted);
font-size: 22px;
line-height: 1;
cursor: pointer;
border-radius: 50%;
flex-shrink: 0;
}
.edit-price-modal .sp-close:hover {
color: var(--text);
background: rgba(255,255,255,0.05);
}
.edit-price-modal .epm-body {
padding: 16px 20px;
}
.edit-price-modal .epm-item-row,
.edit-price-modal .epm-current-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
margin-bottom: 8px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
font-size: 13px;
}
.edit-price-modal .epm-item-label,
.edit-price-modal .epm-current-label {
color: var(--text-muted);
font-family: var(--font-title);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.edit-price-modal .epm-item-name {
color: var(--text);
font-weight: 700;
text-align: right;
font-size: 13px;
}
.edit-price-modal .epm-current-price {
color: var(--gold);
font-family: var(--font-mono);
font-weight: 800;
font-size: 14px;
}
.edit-price-modal .epm-field-label {
display: block;
font-family: var(--font-title);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin: 14px 0 6px;
}
.edit-price-modal .epm-input-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(0,0,0,0.5);
border: 2px solid rgba(233,185,99,0.4);
border-radius: var(--r-md);
}
.edit-price-modal .epm-input-row:focus-within {
border-color: var(--gold);
box-shadow: 0 0 12px rgba(233,185,99,0.25);
}
.edit-price-modal .epm-input-row i {
font-size: 18px;
color: var(--gold);
}
.edit-price-modal .epm-input-row input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
color: var(--text);
font-family: var(--font-mono);
font-size: 18px;
font-weight: 800;
letter-spacing: 0.02em;
}
.edit-price-modal .epm-hint {
font-size: 11px;
color: var(--text-muted);
margin: 8px 0 0;
text-align: center;
}
.edit-price-modal .epm-footer {
display: flex;
gap: 10px;
padding: 14px 20px 18px;
border-top: 1px solid var(--border-soft);
}
.edit-price-modal .epm-footer .btn { flex: 1; min-height: 42px; }
.market-card.is-race-card .market-item-ic {
border-color: rgba(184,132,255,0.5);
color: #c39dff;
}
.market-race-badge {
position: absolute;
top: 6px;
right: 6px;
font-family: 'Cinzel', serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 2px 7px;
background: linear-gradient(135deg, rgba(184,132,255,0.9), rgba(122,76,240,0.9));
color: #fff;
border-radius: 99px;
box-shadow: 0 2px 6px rgba(184,132,255,0.4);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
z-index: 2;
pointer-events: none;
}
.market-item-ic {
width: 54px; height: 54px;
border-radius: var(--r-md);
background: rgba(0,0,0,0.45);
border: 2px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 24px;
color: var(--gold);
padding: 4px;
}
.market-item-ic .item-image {
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.market-item-ic-stub {
font-size: 24px;
color: var(--gold);
flex-shrink: 0;
}
.market-card .mi-name { font-family: var(--font-title); font-weight: 600; font-size: 13px; }
.market-card .mi-seller { font-size: 10px; color: var(--text-muted); }
.market-card .mi-price { font-family: var(--font-mono); font-weight: 700; color: var(--gold); font-size: 14px; }
.market-card { cursor: pointer; transition: all 0.15s; }
.market-card:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--sh-md); }
.market-buy-panel {
background: rgba(0,0,0,0.35);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.mb-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.mb-row span:first-child { color: var(--text-muted); }
.mb-total { padding-top: 10px; border-top: 1px solid var(--border); margin-top: 4px; font-size: 16px; }
.mb-mini { font-size: 11px; color: var(--text-dim); }
.qty-selector {
display: flex;
gap: 4px;
align-items: center;
margin: 8px 0;
}
.qty-btn {
padding: 6px 10px;
background: rgba(0,0,0,0.45);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--gold);
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
cursor: pointer;
transition: all 0.15s;
}
.qty-btn:hover { border-color: var(--gold); background: rgba(233,185,99,0.1); }
.qty-btn.qty-max { background: linear-gradient(180deg, var(--gold-deep), var(--gold)); color: #2a1a00; }
.qty-input {
flex: 1;
padding: 7px 10px;
background: rgba(0,0,0,0.5);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--gold);
font-family: var(--font-mono);
font-weight: 800;
font-size: 14px;
text-align: center;
min-width: 60px;
}
/* ================= QUESTS (rediseño) ================= */
.quest-tabs {
display: flex;
gap: 6px;
background: rgba(0,0,0,0.35);
padding: 4px;
border-radius: var(--r-md);
border: 1px solid var(--border-soft);
margin-bottom: 14px;
flex-wrap: wrap;
}
.quest-tab {
flex: 1;
min-width: 140px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-sm);
color: var(--text-muted);
font-family: var(--font-title);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.15s;
}
.quest-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.quest-tab.active { background: linear-gradient(180deg, rgba(122,76,240,0.2), rgba(74,31,168,0.3)); border-color: var(--gold); color: var(--gold); }
.quest-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: rgba(0,0,0,0.5);
color: var(--gold);
border-radius: 11px;
font-size: 11px;
font-family: var(--font-mono);
}
.quest-tab-count.highlight {
background: linear-gradient(135deg, var(--gold), var(--gold-deep));
color: #2a1a00;
animation: questPulse 1.5s ease-in-out infinite;
}
@keyframes questPulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 6px rgba(233,185,99,0.4); }
50% { transform: scale(1.1); box-shadow: 0 0 12px rgba(233,185,99,0.7); }
}
.quest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.quest-card-pro {
background: linear-gradient(180deg, rgba(33,20,58,0.92) 0%, rgba(15,8,30,0.98) 100%);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
overflow: hidden;
transition: transform 0.15s, box-shadow 0.15s;
}
.quest-card-pro:hover { transform: translateY(-2px); }
.quest-card-pro.t-main::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
.quest-card-pro.t-daily::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cyan); }
.quest-card-pro.t-weekly::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--r-epic); }
.quest-card-pro.t-side::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
.quest-card-pro.t-event::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blood); }
.quest-card-pro.is-complete {
background:
radial-gradient(ellipse 70% 100% at 0% 50%, rgba(233,185,99,0.18) 0%, transparent 60%),
linear-gradient(180deg, rgba(48,32,12,0.92) 0%, rgba(15,8,30,0.98) 100%);
border-color: var(--gold);
box-shadow: 0 0 22px rgba(233,185,99,0.2);
animation: questGlow 3s ease-in-out infinite;
}
@keyframes questGlow {
0%, 100% { box-shadow: 0 0 22px rgba(233,185,99,0.2); }
50% { box-shadow: 0 0 36px rgba(233,185,99,0.35); }
}
.quest-card-pro.is-expired { opacity: 0.6; filter: grayscale(40%); }
.qc-ribbon {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
align-self: flex-start;
padding: 4px 10px;
border-radius: 12px;
border: 1px solid;
}
.qc-ribbon.t-main { color: var(--gold); border-color: rgba(233,185,99,0.4); background: rgba(233,185,99,0.1); }
.qc-ribbon.t-daily { color: var(--cyan); border-color: rgba(76,196,255,0.4); background: rgba(76,196,255,0.1); }
.qc-ribbon.t-weekly { color: var(--r-epic); border-color: rgba(194,119,255,0.4); background: rgba(194,119,255,0.1); }
.qc-ribbon.t-side { color: var(--primary); border-color: rgba(164,125,255,0.4); background: rgba(164,125,255,0.1); }
.qc-ribbon.t-event { color: var(--blood); border-color: rgba(217,58,75,0.4); background: rgba(217,58,75,0.1); }
.qc-name {
font-family: var(--font-title);
font-size: 17px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text);
}
.qc-desc {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
}
.qc-overall {
background: rgba(0,0,0,0.35);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 8px 12px;
}
.qc-overall-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 5px;
font-family: var(--font-title);
}
.qc-bar {
height: 6px;
background: rgba(0,0,0,0.6);
border-radius: 3px;
overflow: hidden;
}
.qc-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--cyan));
transition: width 0.4s;
}
.qc-bar-fill.is-full { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.qc-objectives {
display: flex;
flex-direction: column;
gap: 6px;
}
.qc-obj-title {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
font-weight: 700;
margin-bottom: 2px;
}
.qc-obj-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text);
}
.qc-obj-row i { color: var(--gold); width: 16px; text-align: center; }
.qc-obj-row-pro {
display: grid;
grid-template-columns: 18px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 10px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border-soft);
border-radius: var(--r-sm);
font-size: 13px;
transition: all 0.15s;
}
.qc-obj-row-pro.done {
background: linear-gradient(90deg, rgba(63,214,146,0.1), rgba(63,214,146,0.05));
border-color: rgba(63,214,146,0.4);
}
.qc-obj-text { color: var(--text); }
.qc-obj-progress { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.qc-rewards {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 8px 12px;
background: rgba(0,0,0,0.25);
border-radius: var(--r-sm);
border-top: 1px solid var(--border-soft);
}
.qc-reward {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--text-muted);
font-family: var(--font-mono);
}
.qc-reward i { color: var(--gold); }
.qc-reward b { color: var(--gold); }
.qc-meta {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.qc-deadline {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(76,196,255,0.08);
border: 1px solid rgba(76,196,255,0.3);
border-radius: var(--r-sm);
color: var(--cyan);
font-size: 12px;
align-self: flex-start;
}
.qc-deadline.expired {
background: rgba(217,58,75,0.1);
border-color: rgba(217,58,75,0.4);
color: var(--blood);
}
.qc-deadline i { color: inherit; }
.qc-action { margin-top: auto; }
/* Old quest-card (kept for safety) */
.quest-card {
background: var(--panel);
border: 1px solid var(--border);
border-left: 3px solid var(--primary);
border-radius: var(--r-lg);
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.quest-card {
background: var(--panel);
border: 1px solid var(--border);
border-left: 3px solid var(--primary);
border-radius: var(--r-lg);
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.quest-card.t-main { border-left-color: var(--gold); }
.quest-card.t-daily { border-left-color: var(--cyan); }
.quest-card.t-weekly { border-left-color: var(--r-epic); }
.quest-card.t-event { border-left-color: var(--blood); }
.quest-type-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); font-family: var(--font-title); }
.quest-name { font-family: var(--font-title); font-size: 16px; letter-spacing: 0.05em; font-weight: 700; }
.quest-desc { font-family: var(--font-serif); font-style: italic; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.quest-rewards { display: flex; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--gold); padding-top: 8px; border-top: 1px dashed var(--border); }
/* ================= STORE (NEW) ================= */
.store-tabs {
display: flex;
gap: 6px;
background: rgba(0,0,0,0.35);
padding: 4px;
border-radius: var(--r-lg);
border: 1px solid var(--border-soft);
margin-bottom: 18px;
flex-wrap: wrap;
}
.store-tab {
flex: 1;
min-width: 140px;
padding: 12px 18px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-md);
color: var(--text-muted);
font-family: var(--font-title);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.18s;
}
.store-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.store-tab.active {
background: linear-gradient(180deg, rgba(122,76,240,0.25) 0%, rgba(74,31,168,0.35) 100%);
border-color: var(--gold);
color: var(--gold);
box-shadow: 0 4px 14px rgba(233,185,99,0.2);
}
.store-tab i { font-size: 16px; }
.store-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: rgba(0,0,0,0.5);
color: var(--gold);
border-radius: 11px;
font-size: 11px;
font-family: var(--font-mono);
margin-left: 4px;
}
.store-grid { display: grid; gap: 16px; }
/* ===== Premium grid ===== */
.premium-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.premium-pack {
background: linear-gradient(180deg, rgba(33,20,58,0.95) 0%, rgba(15,8,30,0.98) 100%);
border: 1px solid var(--border-gold);
border-radius: var(--r-lg);
padding: 22px 20px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: var(--sh-md);
position: relative;
overflow: hidden;
transition: transform 0.18s, box-shadow 0.18s;
}
.premium-pack:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0,0,0,0.5), var(--sh-glow-gold);
}
.premium-pack::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 50%, var(--gold-deep) 100%);
}
.premium-pack.tier-apprentice::before { background: linear-gradient(90deg, #4a4654, #b5b0c0, #4a4654); }
.premium-pack.tier-adventurer::before { background: linear-gradient(90deg, #1a6a3a, var(--mint), #1a6a3a); }
.premium-pack.tier-veteran::before { background: linear-gradient(90deg, #1a5a8e, var(--cyan), #1a5a8e); }
.premium-pack.tier-hero::before { background: linear-gradient(90deg, #4a1fa8, var(--r-epic), #4a1fa8); }
.premium-pack.tier-elite::before { background: linear-gradient(90deg, #7a5210, var(--gold), #7a5210); height: 5px; }
.premium-pack.tier-whale::before { background: linear-gradient(90deg, #c89a3e, #f5cc6e, #c89a3e); height: 6px; box-shadow: 0 0 12px var(--gold); }
.premium-pack.tier-emperor::before { background: linear-gradient(90deg, var(--blood), var(--gold), var(--blood)); height: 6px; box-shadow: 0 0 16px var(--gold); }
.premium-pack.tier-god::before {
background: linear-gradient(90deg, var(--r-mythic), var(--gold), var(--r-mythic));
height: 8px;
box-shadow: 0 0 24px rgba(255,95,138,0.6);
animation: godRibbon 3s ease-in-out infinite;
}
@keyframes godRibbon {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.3); }
}
.pack-ribbon {
position: absolute;
top: 18px;
right: -32px;
background: linear-gradient(90deg, var(--gold), var(--gold-deep));
color: #2a1a00;
font-family: var(--font-title);
font-size: 10px;
font-weight: 800;
padding: 4px 36px;
letter-spacing: 0.15em;
transform: rotate(35deg);
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
z-index: 1;
}
.pack-tier-label {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--gold);
text-align: center;
font-weight: 700;
}
.pack-icon-wrap {
width: 80px;
height: 80px;
margin: 6px auto 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(233,185,99,0.3), transparent 70%), linear-gradient(135deg, var(--gold), var(--gold-deep));
color: #2a1a00;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
box-shadow: 0 4px 20px rgba(233,185,99,0.35), inset 0 2px 6px rgba(255,255,255,0.3);
}
.tier-god .pack-icon-wrap, .tier-emperor .pack-icon-wrap {
background: radial-gradient(circle, rgba(255,95,138,0.3), transparent 70%), linear-gradient(135deg, var(--r-mythic), var(--blood));
color: #fff;
box-shadow: 0 4px 30px rgba(255,95,138,0.5), inset 0 2px 6px rgba(255,255,255,0.2);
}
.pack-name {
font-family: var(--font-title);
font-size: 17px;
font-weight: 700;
text-align: center;
color: var(--gold);
letter-spacing: 0.05em;
}
.pack-desc {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--text-muted);
text-align: center;
line-height: 1.5;
min-height: 38px;
}
.pack-contents {
background: rgba(0,0,0,0.4);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.pc-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--text);
}
.pc-row i { width: 18px; text-align: center; font-size: 14px; }
.pc-value { padding-top: 6px; border-top: 1px dashed var(--border); margin-top: 4px; color: var(--gold); font-weight: 700; }
.pack-price-block {
text-align: center;
padding: 12px;
background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3));
border: 1px solid var(--border);
border-radius: var(--r-md);
}
.pack-price-big {
font-family: var(--font-mono);
font-size: 28px;
font-weight: 800;
color: var(--mint);
line-height: 1;
}
.pack-price-currency {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--text-muted);
margin-top: 4px;
}
.tier-god .pack-price-big, .tier-emperor .pack-price-big { color: var(--r-mythic); }
/* ===== Resource grid (Gold/Gems) ===== */
.resource-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.resource-pack {
background: linear-gradient(180deg, rgba(33,20,58,0.9), rgba(15,8,30,0.98));
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 18px 14px;
text-align: center;
position: relative;
transition: all 0.18s;
}
.resource-pack:hover {
border-color: var(--gold);
transform: translateY(-2px);
}
.resource-pack.is-featured {
border-color: var(--gold);
box-shadow: 0 0 20px rgba(233,185,99,0.15);
}
.resource-pack-icon {
width: 64px;
height: 64px;
margin: 0 auto 10px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}
.resource-pack-icon.gold {
background: radial-gradient(circle, rgba(233,185,99,0.4), transparent 70%), linear-gradient(135deg, var(--gold), var(--gold-deep));
color: #2a1a00;
box-shadow: 0 4px 18px rgba(233,185,99,0.3);
}
.resource-pack-icon.gems {
background: radial-gradient(circle, rgba(194,119,255,0.4), transparent 70%), linear-gradient(135deg, var(--r-epic), var(--primary-deep));
color: #fff;
box-shadow: 0 4px 18px rgba(194,119,255,0.3);
}
.resource-pack-amount {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 800;
color: var(--gold);
line-height: 1.1;
}
.resource-pack-name {
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
letter-spacing: 0.05em;
}
.bonus-badge {
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(135deg, var(--mint), #167a48);
color: #fff;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 800;
padding: 3px 8px;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
/* ===== Utility grid ===== */
.utility-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.utility-pack {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 14px 16px;
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 14px;
align-items: center;
transition: all 0.15s;
}
.utility-pack:hover { border-color: var(--primary); }
.utility-pack.is-featured { border-color: var(--gold); box-shadow: inset 0 0 20px rgba(233,185,99,0.08); }
.utility-pack-icon {
width: 56px;
height: 56px;
border-radius: var(--r-md);
background: linear-gradient(135deg, var(--primary), var(--primary-deep));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
border: 1px solid var(--border-gold);
}
.utility-pack-name { font-family: var(--font-title); font-weight: 700; font-size: 14px; }
.utility-pack-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.utility-pack-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; min-width: 110px; }
.utility-pack-price {
font-family: var(--font-mono);
font-weight: 800;
color: var(--r-epic);
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
}
/* Legacy pack-card (kept just in case) */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.pack-card {
background: var(--panel);
border: 1px solid var(--border-gold);
border-radius: var(--r-lg);
padding: 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* ================= RANKING ================= */
.rank-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.rank-list { display: flex; flex-direction: column; gap: 4px; }
.rank-row {
display: grid;
grid-template-columns: 40px 40px 1fr auto;
align-items: center;
gap: 14px;
padding: 10px 16px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
transition: all 0.15s;
}
.rank-row:hover { border-color: var(--border); background: rgba(0,0,0,0.4); }
.rank-pos {
font-family: var(--font-title);
font-weight: 900;
font-size: 16px;
color: var(--text-muted);
text-align: center;
}
.rank-row.top-1 { border-color: var(--gold); background: linear-gradient(90deg, rgba(233,185,99,0.12), transparent); }
.rank-row.top-1 .rank-pos { color: var(--gold); }
.rank-row.top-2 { border-color: #b5b0c0; }
.rank-row.top-2 .rank-pos { color: #b5b0c0; }
.rank-row.top-3 { border-color: #b37c4a; }
.rank-row.top-3 .rank-pos { color: #b37c4a; }
.rank-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-deep));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
font-weight: 700;
border: 2px solid var(--border-gold);
}
/* ================= EVENTS ================= */
.event-banner {
background:
radial-gradient(ellipse at 80% 50%, rgba(233,185,99,0.25), transparent 60%),
linear-gradient(135deg, rgba(138,14,28,0.85) 0%, rgba(44,29,74,0.92) 100%);
border: 1px solid var(--border-gold);
border-radius: var(--r-lg);
padding: 22px;
position: relative;
overflow: hidden;
}
.event-banner h3 { font-family: var(--font-title); font-size: 22px; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; }
.event-banner .e-sub { font-family: var(--font-serif); font-style: italic; color: var(--text-muted); margin-top: 4px; font-size: 14px; }
.event-banner .e-timer { font-family: var(--font-mono); color: var(--gold); margin-top: 10px; font-size: 14px; font-weight: 700; }
/* ================= CHAT FULL ================= */
.chat-full {
display: grid;
grid-template-columns: 200px 1fr;
gap: 16px;
height: calc(100vh - 140px);
}
@media (max-width: 900px) { .chat-full { grid-template-columns: 1fr; height: auto; } }
.chat-channels { display: flex; flex-direction: column; gap: 4px; }
.chat-channel-btn {
padding: 10px 14px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-md);
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 13px;
transition: all 0.15s;
}
.chat-channel-btn:hover { border-color: var(--primary); color: var(--text); }
.chat-channel-btn.active { border-color: var(--gold); background: linear-gradient(90deg, rgba(233,185,99,0.15), transparent); color: var(--gold); }
.chat-main {
display: flex;
flex-direction: column;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
min-height: 400px;
}
.chat-main-body { flex: 1; overflow-y: auto; padding: 16px 20px; font-size: 13px; line-height: 1.7; }
.chat-main-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-soft); background: rgba(0,0,0,0.3); }
.chat-main-input input { flex: 1; padding: 10px 14px; background: rgba(0,0,0,0.5); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font-size: 13px; }
/* ================= ADMIN ================= */
.admin-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 28px;
border-bottom: 1px solid var(--border-gold);
background: linear-gradient(180deg, rgba(27,15,56,0.98) 0%, rgba(11,5,24,0.92) 100%);
}
.admin-grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.admin-stat {
padding: 14px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
text-align: center;
}
.admin-stat i { font-size: 20px; color: var(--primary); margin-bottom: 6px; }
.admin-stat .v { font-family: var(--font-mono); font-weight: 700; font-size: 22px; color: var(--gold); }
.admin-stat .l { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-title); }
.admin-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.admin-tab-btn {
padding: 10px 16px;
color: var(--text-muted);
cursor: pointer;
font-weight: 600;
font-size: 13px;
border-bottom: 2px solid transparent;
transition: all 0.15s;
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.admin-tab-btn:hover { color: var(--text); }
.admin-tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.data-table {
width: 100%;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
border-collapse: collapse;
font-size: 12px;
}
.data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); }
.data-table th { background: rgba(0,0,0,0.3); color: var(--gold); font-family: var(--font-title); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; }
.data-table tr:hover td { background: rgba(164,125,255,0.04); }
.data-table tr:last-child td { border-bottom: none; }
/* ================= CLAIM CARD (character sheet — compact vertical) ================= */
.claim-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px 20px;
background: linear-gradient(135deg, rgba(33,20,58,0.92) 0%, rgba(15,8,30,0.98) 100%);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-md), inset 0 0 30px rgba(0,0,0,0.3);
position: relative;
overflow: visible;
}
.claim-card.ready {
background:
radial-gradient(ellipse 70% 100% at 0% 50%, rgba(233,185,99,0.22) 0%, transparent 60%),
linear-gradient(135deg, rgba(48,32,12,0.92) 0%, rgba(15,8,30,0.98) 100%);
border-color: var(--gold);
box-shadow: 0 0 28px rgba(233,185,99,0.22), inset 0 0 30px rgba(0,0,0,0.3);
animation: bannerGlow 3.5s ease-in-out infinite;
}
.claim-card::before {
content: "";
position: absolute;
top: 0; bottom: 0;
left: 0;
width: 3px;
background: linear-gradient(180deg, transparent, var(--gold), transparent);
opacity: 0.6;
}
@keyframes bannerGlow {
0%, 100% { box-shadow: 0 0 28px rgba(233,185,99,0.22), inset 0 0 30px rgba(0,0,0,0.3); }
50% { box-shadow: 0 0 44px rgba(233,185,99,0.4), inset 0 0 30px rgba(0,0,0,0.3); }
}
/* Header with icon + title */
.claim-card-icon-wrap {
position: absolute;
top: 14px;
right: 16px;
}
.claim-card-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: radial-gradient(circle, rgba(233,185,99,0.4) 0%, transparent 70%), linear-gradient(135deg, var(--gold), var(--gold-deep));
color: #2a1a00;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 0 14px rgba(233,185,99,0.35), inset 0 2px 4px rgba(255,255,255,0.3), 0 2px 8px rgba(0,0,0,0.5);
position: relative;
}
.claim-card-icon::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid rgba(233,185,99,0.4);
pointer-events: none;
}
.claim-card.ready .claim-card-icon { animation: coinSpin 5s linear infinite; }
@keyframes coinSpin {
0%, 75%, 100% { transform: rotateY(0); }
85% { transform: rotateY(180deg); }
92% { transform: rotateY(360deg); }
}
.claim-card.waiting .claim-card-icon { opacity: 0.85; filter: saturate(0.85); }
/* Body */
.claim-card-body {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.claim-card-header {
display: flex;
flex-direction: column;
gap: 4px;
padding-right: 56px;
}
.claim-card-title {
font-family: var(--font-title);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.claim-card-title i { font-size: 12px; }
.claim-card.waiting .claim-card-title { color: var(--text-muted); }
.claim-card.waiting .claim-card-title i { color: var(--text-dim); }
.claim-card-rate {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
align-self: flex-start;
}
.claim-card-amount-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.claim-card-amount {
display: flex;
align-items: baseline;
gap: 6px;
}
.claim-amount-num {
font-family: var(--font-mono);
font-size: 28px;
font-weight: 800;
color: var(--gold);
line-height: 1;
}
.claim-amount-lbl {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.claim-card-elapsed {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: var(--cyan);
background: rgba(76,196,255,0.1);
padding: 3px 8px;
border-radius: 10px;
border: 1px solid rgba(76,196,255,0.25);
}
.claim-card-progress {
height: 8px;
background: rgba(0,0,0,0.55);
border-radius: 4px;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.6);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.claim-card-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 50%, #ffd980 100%);
transition: width 0.4s;
position: relative;
}
.claim-card-fill::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%);
}
.claim-card.waiting .claim-card-fill { background: linear-gradient(90deg, #5a3a8c, #a47dff); }
.claim-card-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-top: 2px;
padding-top: 10px;
border-top: 1px dashed var(--border-soft);
}
.cm-stat {
display: flex;
flex-direction: column;
gap: 2px;
font-family: var(--font-body);
font-size: 10px;
color: var(--text-muted);
text-align: center;
padding: 4px 6px;
background: rgba(0,0,0,0.25);
border-radius: var(--r-sm);
border: 1px solid var(--border-soft);
}
.cm-stat i { color: var(--gold); font-size: 11px; }
.cm-stat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; }
.cm-stat b { color: var(--gold); font-family: var(--font-mono); font-weight: 700; font-size: 12px; }
.claim-card.waiting .cm-stat b { color: var(--text); }
/* Action */
.claim-card-action {
display: flex;
align-items: stretch;
justify-content: center;
}
.claim-card-action .btn { width: 100%; padding: 12px 18px; font-size: 13px; }
.claim-timer-box {
text-align: center;
padding: 10px 12px;
background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 100%);
border: 1px solid var(--border);
border-radius: var(--r-md);
width: 100%;
}
.claim-timer-label {
font-family: var(--font-title);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 2px;
}
.claim-timer-clock {
font-size: 20px;
font-weight: 700;
color: var(--cyan);
line-height: 1.1;
letter-spacing: 0.05em;
}
.claim-timer-hint {
margin-top: 2px;
font-size: 9px;
letter-spacing: 0.1em;
}
/* ================= DEPOSIT ================= */
.deposit-layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 20px;
}
@media (max-width: 1100px) { .deposit-layout { grid-template-columns: 1fr; } }
.deposit-preview {
background: linear-gradient(180deg, rgba(122,76,240,0.1), rgba(0,0,0,0.4));
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
padding: 14px 18px;
margin-top: 14px;
}
.dep-preview-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
padding: 6px 0;
color: var(--text-muted);
}
.dep-preview-row + .dep-preview-row { border-top: 1px dashed var(--border-soft); }
.dep-preview-row.dep-total {
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid var(--border) !important;
font-size: 17px;
color: var(--text);
}
.bonus-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 6px;
}
.bonus-cell {
text-align: center;
padding: 10px 6px;
background: rgba(0,0,0,0.35);
border: 1px solid var(--border);
border-radius: var(--r-md);
transition: all 0.15s;
}
.bonus-cell.active {
background: linear-gradient(180deg, rgba(63,214,146,0.18), rgba(22,122,72,0.1));
border-color: var(--mint);
box-shadow: 0 0 12px rgba(63,214,146,0.2);
}
.bonus-from { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.bonus-pct { font-family: var(--font-title); font-size: 16px; color: var(--mint); font-weight: 800; margin-top: 2px; }
.bonus-cell:not(.active) .bonus-pct { color: var(--text-dim); }
.invoice-summary {
background: rgba(0,0,0,0.4);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px 18px;
margin-bottom: 14px;
}
.inv-row {
display: flex;
justify-content: space-between;
padding: 5px 0;
font-size: 13px;
}
.inv-row + .inv-row { border-top: 1px dashed var(--border-soft); }
.invoice-address {
background: linear-gradient(180deg, rgba(63,214,146,0.1), rgba(0,0,0,0.4));
border: 1px solid var(--mint);
border-radius: var(--r-md);
padding: 14px 18px;
}
.ia-label { font-size: 13px; color: var(--text); margin-bottom: 8px; }
.ia-addr {
display: flex;
align-items: center;
gap: 8px;
background: rgba(0,0,0,0.5);
padding: 10px 14px;
border-radius: var(--r-sm);
border: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 12px;
color: var(--mint);
word-break: break-all;
}
.ia-addr code { flex: 1; word-break: break-all; }
/* ================= WITHDRAW ================= */
.withdraw-layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 20px;
}
@media (max-width: 1100px) { .withdraw-layout { grid-template-columns: 1fr; } }
.network-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.network-btn {
padding: 14px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--border);
border-radius: var(--r-md);
color: var(--text);
cursor: pointer;
text-align: center;
transition: all 0.18s;
font-family: var(--font-title);
}
.network-btn:hover { border-color: var(--mint); }
.network-btn.active {
background: linear-gradient(180deg, rgba(63,214,146,0.15), rgba(22,122,72,0.1));
border-color: var(--mint);
box-shadow: 0 0 12px rgba(63,214,146,0.2);
}
.network-name {
font-size: 14px;
font-weight: 800;
letter-spacing: 0.1em;
color: var(--mint);
}
.network-fee {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
margin-top: 4px;
}
.withdraw-summary {
margin-top: 16px;
background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.25));
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px 18px;
}
.ws-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
font-size: 13px;
color: var(--text-muted);
}
.ws-row + .ws-row { border-top: 1px dashed var(--border-soft); }
.ws-total {
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid var(--border) !important;
font-size: 15px;
color: var(--text);
}
.text-ember { color: var(--ember); }
.withdraw-history { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; }
.wh-row {
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-left: 3px solid var(--text-muted);
border-radius: var(--r-md);
padding: 10px 12px;
}
.wh-row.status-pending { border-left-color: var(--cyan); }
.wh-row.status-approved { border-left-color: var(--mint); }
.wh-row.status-sent { border-left-color: var(--mint); background: rgba(63,214,146,0.05); }
.wh-row.status-rejected { border-left-color: var(--blood); opacity: 0.8; }
.wh-row.status-cancelled { border-left-color: var(--text-dim); opacity: 0.7; }
.wh-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.wh-amount { font-size: 14px; font-weight: 700; color: var(--ember); }
.wh-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-muted); }
.wh-meta i { color: var(--mint); }
.wh-wallet { margin-top: 4px; }
.wh-time { margin-top: 2px; }
/* ================= ALTAR ================= */
.altar-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 1100px) { .altar-layout { grid-template-columns: 1fr; } }
.altar-pyre {
background:
radial-gradient(ellipse 60% 80% at 50% 50%, rgba(217,58,75,0.2) 0%, transparent 70%),
linear-gradient(180deg, rgba(58,12,20,0.5) 0%, rgba(15,8,30,0.95) 100%);
border: 1px solid var(--border-gold);
border-radius: var(--r-lg);
padding: 30px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.altar-flame {
position: relative;
width: 160px;
height: 160px;
margin: 0 auto 24px;
display: flex;
align-items: center;
justify-content: center;
}
.altar-flame i {
font-size: 90px;
color: var(--ember);
filter: drop-shadow(0 0 30px rgba(255,132,50,0.7));
animation: flameFlicker 1.5s ease-in-out infinite alternate;
z-index: 2;
position: relative;
}
@keyframes flameFlicker {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 30px rgba(255,132,50,0.7)); }
50% { transform: scale(1.08); filter: drop-shadow(0 0 50px rgba(255,132,50,0.9)) drop-shadow(0 0 20px rgba(217,58,75,0.6)); }
}
.altar-rings {
position: absolute;
inset: 0;
border: 2px solid rgba(255,132,50,0.3);
border-radius: 50%;
animation: altarPulse 3s ease-in-out infinite;
}
.altar-rings::before, .altar-rings::after {
content: "";
position: absolute;
inset: -16px;
border: 1px solid rgba(255,132,50,0.2);
border-radius: 50%;
animation: altarPulse 3s ease-in-out infinite 0.5s;
}
.altar-rings::after { inset: -32px; border-color: rgba(255,132,50,0.1); animation-delay: 1s; }
@keyframes altarPulse {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.05); opacity: 1; }
}
.altar-rate {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
font-family: var(--font-title);
letter-spacing: 0.08em;
}
.altar-rate-num {
font-size: 28px;
font-weight: 800;
color: var(--gold);
}
.altar-rate-num i { color: var(--ember); }
.altar-rate-arrow { color: var(--text-muted); font-size: 22px; }
.quick-amounts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.quick-amt {
padding: 6px 14px;
border-radius: var(--r-md);
background: rgba(0,0,0,0.4);
border: 1px solid var(--border);
color: var(--gold);
font-family: var(--font-mono);
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
font-size: 12px;
}
.quick-amt:hover { border-color: var(--gold); background: rgba(233,185,99,0.1); }
.forge-preview {
margin-top: 14px;
padding: 14px 18px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
}
/* ================= CLAIM PANEL ================= */
.claim-button {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px 6px 10px;
background: linear-gradient(180deg, #f5cc6e 0%, #b37c1f 100%);
color: #2a1a00;
border: 1px solid #f5cc6e;
border-radius: var(--r-md);
font-weight: 700;
font-size: 12px;
cursor: pointer;
box-shadow: 0 3px 12px rgba(233,185,99,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
transition: all 0.18s;
position: relative;
overflow: hidden;
font-family: var(--font-title);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.claim-button::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
transform: translateX(-100%);
animation: claimShine 3s infinite;
}
@keyframes claimShine { 0% { transform: translateX(-100%); } 40%,100% { transform: translateX(120%); } }
.claim-button:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(233,185,99,0.6), inset 0 1px 0 rgba(255,255,255,0.4); }
.claim-button.disabled { opacity: 0.6; filter: grayscale(30%); cursor: not-allowed; background: linear-gradient(180deg, #6a5a3a 0%, #3a2d1a 100%); color: #d9c89a; border-color: #6a5a3a; box-shadow: none; }
.claim-button.disabled::before { display: none; }
.claim-button i { font-size: 14px; }
.claim-button .claim-amount { font-family: var(--font-mono); font-size: 13px; font-weight: 800; }
.claim-modal-body { text-align: center; padding: 10px 0; }
.claim-big-icon {
width: 88px;
height: 88px;
margin: 0 auto 14px;
border-radius: 50%;
background: radial-gradient(circle, rgba(233,185,99,0.3), transparent 70%), linear-gradient(135deg, var(--gold), var(--gold-deep));
color: #2a1a00;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
box-shadow: 0 0 30px rgba(233,185,99,0.5);
}
.claim-rate-table { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px; background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: var(--r-md); margin-top: 14px; font-size: 13px; }
.claim-rate-table .lbl { color: var(--text-muted); }
.claim-rate-table .val { font-family: var(--font-mono); color: var(--gold); font-weight: 700; text-align: right; }
.claim-rate-table .row-total { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; font-weight: 800; }
.claim-rate-table .row-total .lbl { color: var(--gold); font-family: var(--font-title); letter-spacing: 0.08em; text-transform: uppercase; }
/* ================= GUIDE ================= */
.guide-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 20px;
}
@media (max-width: 900px) { .guide-layout { grid-template-columns: 1fr; } }
.guide-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 20px; align-self: flex-start; }
.guide-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-md);
color: var(--text-muted);
cursor: pointer;
font-family: var(--font-title);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 12px;
font-weight: 600;
transition: all 0.15s;
}
.guide-nav-item:hover { border-color: var(--primary); color: var(--text); }
.guide-nav-item.active { background: linear-gradient(90deg, rgba(233,185,99,0.15), transparent); border-color: var(--gold); color: var(--gold); }
.guide-content {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 28px;
line-height: 1.7;
}
.guide-content h2 {
font-family: var(--font-title);
color: var(--gold);
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 22px;
margin-bottom: 6px;
}
.guide-content h3 {
font-family: var(--font-title);
color: var(--primary);
letter-spacing: 0.05em;
font-size: 16px;
margin-top: 18px;
margin-bottom: 8px;
}
.guide-content p { font-family: var(--font-body); font-size: 14px; color: var(--text); margin-bottom: 10px; }
.guide-content p.lead { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--text-muted); margin-bottom: 16px; }
.guide-content ul { padding-left: 22px; margin-bottom: 12px; }
.guide-content li { margin-bottom: 6px; font-size: 14px; }
.guide-content code {
font-family: var(--font-mono);
background: rgba(0,0,0,0.4);
color: var(--cyan);
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
border: 1px solid var(--border);
}
.guide-content b { color: var(--gold); }
.guide-tip {
display: flex;
gap: 12px;
padding: 14px;
background: linear-gradient(180deg, rgba(76,196,255,0.08), rgba(76,196,255,0.03));
border-left: 3px solid var(--cyan);
border-radius: var(--r-md);
margin: 14px 0;
}
.guide-tip i { color: var(--cyan); font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.guide-warn {
display: flex;
gap: 12px;
padding: 14px;
background: linear-gradient(180deg, rgba(217,58,75,0.08), rgba(217,58,75,0.03));
border-left: 3px solid var(--blood);
border-radius: var(--r-md);
margin: 14px 0;
}
.guide-warn i { color: var(--blood); font-size: 20px; flex-shrink: 0; margin-top: 2px; }
/* Guide checklist (numbered steps) */
.guide-checklist {
list-style: none;
counter-reset: gc;
padding: 0;
margin: 14px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.guide-checklist li {
counter-increment: gc;
position: relative;
padding: 10px 14px 10px 50px;
background: linear-gradient(90deg, rgba(233,185,99,0.08), rgba(233,185,99,0.02));
border-left: 3px solid rgba(233,185,99,0.4);
border-radius: var(--r-sm);
font-size: 13.5px;
line-height: 1.5;
}
.guide-checklist li::before {
content: counter(gc);
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
background: linear-gradient(135deg, var(--gold), #c89a3e);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #1a0a30;
font-family: var(--font-title);
font-weight: 900;
font-size: 13px;
box-shadow: 0 2px 8px rgba(233,185,99,0.4);
}
.guide-gold {
display: flex;
gap: 12px;
padding: 14px;
background: linear-gradient(180deg, rgba(233,185,99,0.12), rgba(233,185,99,0.04));
border-left: 3px solid var(--gold);
border-radius: var(--r-md);
margin: 14px 0;
}
.guide-gold i { color: var(--gold); font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.roi-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
margin: 10px 0;
}
.roi-table th, .roi-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); }
.roi-table th { font-family: var(--font-title); color: var(--gold); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(0,0,0,0.3); }
.roi-table td { font-family: var(--font-mono); }
/* ================= BOOT SCREEN ================= */
.boot-screen {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
padding: 60px;
}
/* ================= BOX OPENING MODAL ================= */
/* Host dedicado: aislado de modal-host/toast-host. z-index alto para que
nada (toasts, modales, notificaciones, alerts) pueda pisar la animación. */
#box-host { position: relative; z-index: 11000; }
.box-opening-overlay { z-index: 11000; }
.box-opening-modal { max-width: 540px; padding: 24px; }
.box-opening-stage {
height: 240px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
overflow: hidden;
border-radius: var(--r-lg);
background:
radial-gradient(ellipse at center, rgba(233,185,99,0.18) 0%, transparent 60%),
linear-gradient(180deg, rgba(33,20,58,0.6) 0%, rgba(0,0,0,0.5) 100%);
border: 1px solid var(--border-gold);
box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
}
.box-img {
width: 180px;
height: 180px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: drop-shadow(0 6px 20px rgba(0,0,0,0.8));
position: relative;
z-index: 2;
animation: boxShake 0.7s 0.2s ease-in-out 2;
}
.box-glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(233,185,99,0.5), transparent 50%);
opacity: 0;
z-index: 1;
animation: boxGlow 1.5s ease-in-out forwards;
}
.box-rays {
position: absolute;
inset: 0;
background:
repeating-conic-gradient(from 0deg at 50% 50%,
rgba(233,185,99,0.5) 0deg, transparent 5deg,
transparent 15deg, rgba(233,185,99,0.5) 20deg);
opacity: 0;
z-index: 0;
animation: boxRays 1.4s 1.2s ease-out forwards;
}
@keyframes boxShake {
0%, 100% { transform: rotate(0); }
25% { transform: rotate(-4deg) translateY(-3px); }
75% { transform: rotate(4deg) translateY(-3px); }
}
@keyframes boxGlow {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes boxRays {
0% { opacity: 0; transform: scale(0.5) rotate(0); }
100% { opacity: 0.85; transform: scale(2.2) rotate(180deg); }
}
.box-opening-stage.exploding .box-img {
animation: boxExplode 0.6s ease-in forwards;
}
@keyframes boxExplode {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 1; filter: drop-shadow(0 0 50px rgba(255,255,255,1)); }
100% { transform: scale(1.2); opacity: 0; }
}
.box-opening-title {
text-align: center;
font-family: var(--font-title);
font-size: 20px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
font-weight: 800;
}
/* 2026-05-08: stage post-explosión — se encoge a un banner compacto.
El badge de "BOTÍN" aparece cuando la imagen del cofre ya explotó. */
.box-loot-badge {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
font-family: var(--font-title);
font-weight: 800;
letter-spacing: 0.18em;
color: var(--gold);
opacity: 0;
pointer-events: none;
z-index: 3;
transition: opacity 0.5s ease 0.2s;
}
.box-loot-badge i { font-size: 32px; filter: drop-shadow(0 0 14px rgba(233,185,99,0.7)); }
.box-loot-badge span { font-size: 14px; }
.box-opening-stage.is-revealed {
height: 96px;
transition: height 0.5s ease;
}
.box-opening-stage.is-revealed .box-rays { opacity: 0.18 !important; transform: scale(1.1) rotate(180deg); transition: opacity 0.6s, transform 0.6s; }
.box-opening-stage.is-revealed .box-glow { opacity: 0.35; transition: opacity 0.4s; }
.box-opening-stage.is-revealed .box-img { display: none; }
.box-opening-stage.is-revealed .box-loot-badge { opacity: 1; }
.box-opening-stage.is-revealed .box-loot-badge i { font-size: 24px; }
.box-opening-stage.is-revealed .box-loot-badge span { font-size: 12px; }
/* === GRID DE DROPS — 2 columnas con cards compactas === */
.box-drops-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
max-height: 380px;
overflow-y: auto;
transition: opacity 0.5s;
padding: 4px;
}
@media (max-width: 480px) {
.box-drops-grid { grid-template-columns: 1fr; }
}
.box-drop-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 8px 10px;
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1px solid var(--border);
border-radius: var(--r-md);
opacity: 0;
transform: translateY(12px) scale(0.96);
animation: bdcReveal 0.42s cubic-bezier(0.4, 1.4, 0.6, 1) forwards;
overflow: hidden;
}
.box-drop-card::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: currentColor;
opacity: 0.65;
}
.box-drop-card.rb-common::before { background: var(--r-common); }
.box-drop-card.rb-uncommon::before { background: var(--r-uncommon); }
.box-drop-card.rb-rare::before { background: var(--r-rare); }
.box-drop-card.rb-epic::before { background: var(--r-epic); }
.box-drop-card.rb-legendary::before { background: var(--r-legendary); box-shadow: 0 0 14px var(--r-legendary); }
.box-drop-card.rb-mythic::before { background: var(--r-mythic); box-shadow: 0 0 16px var(--r-mythic); }
.box-drop-card.rb-legendary { border-color: rgba(255,179,71,0.6); box-shadow: 0 0 14px rgba(255,179,71,0.18); }
.box-drop-card.rb-epic { border-color: rgba(194,119,255,0.55); box-shadow: 0 0 12px rgba(194,119,255,0.14); }
.box-drop-card.rb-mythic { border-color: rgba(255,99,120,0.65); box-shadow: 0 0 18px rgba(255,99,120,0.22); }
@keyframes bdcReveal {
to { opacity: 1; transform: translateY(0) scale(1); }
}
.bdc-icon {
position: relative;
width: 64px;
height: 64px;
border-radius: var(--r-md);
background: radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.55) 70%);
border: 2px solid currentColor;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
padding: 4px;
flex-shrink: 0;
}
.bdc-icon.rb-common { color: var(--r-common); }
.bdc-icon.rb-uncommon { color: var(--r-uncommon); }
.bdc-icon.rb-rare { color: var(--r-rare); }
.bdc-icon.rb-epic { color: var(--r-epic); box-shadow: 0 0 10px rgba(194,119,255,0.35); }
.bdc-icon.rb-legendary { color: var(--r-legendary); box-shadow: 0 0 14px rgba(255,179,71,0.45); }
.bdc-icon.rb-mythic { color: var(--r-mythic); box-shadow: 0 0 16px rgba(255,99,120,0.55); }
.bdc-icon .item-image { width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; }
.bdc-icon > i:not(.bdc-rarity-deco) { color: currentColor; }
.bdc-qty {
position: absolute;
bottom: -4px;
right: -4px;
min-width: 22px;
height: 18px;
padding: 0 6px;
border-radius: 99px;
background: linear-gradient(180deg, rgba(233,185,99,0.95), rgba(166,123,40,0.95));
color: #1a0f30;
font-family: var(--font-mono, monospace);
font-weight: 800;
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid rgba(0,0,0,0.6);
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.bdc-rarity-deco {
position: absolute;
top: -6px;
left: -6px;
font-size: 12px;
color: currentColor;
opacity: 0.7;
filter: drop-shadow(0 0 4px currentColor);
}
.bdc-name {
font-family: var(--font-title);
font-weight: 700;
font-size: 12.5px;
letter-spacing: 0.02em;
text-align: center;
line-height: 1.2;
width: 100%;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.bdc-rarity {
font-family: var(--font-title);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.85;
}
/* VIP nav item special styling */
.nav-item.nav-item-vip {
background: linear-gradient(90deg, rgba(233,185,99,0.18), rgba(233,185,99,0.05));
border-color: rgba(233,185,99,0.4);
position: relative;
overflow: hidden;
}
.nav-item.nav-item-vip i { color: var(--gold); }
.nav-item.nav-item-vip span { color: var(--gold); font-weight: 700; }
.nav-item.nav-item-vip::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
transform: translateX(-100%);
animation: vipShine 4s infinite;
pointer-events: none;
}
.nav-item.nav-item-vip.active {
background: linear-gradient(90deg, rgba(233,185,99,0.35), rgba(233,185,99,0.1));
border-color: var(--gold);
box-shadow: 0 0 14px rgba(233,185,99,0.3);
}
@keyframes vipShine {
0%, 60%, 100% { transform: translateX(-100%); }
80% { transform: translateX(120%); }
}
/* VIP screen */
.vip-hero {
background:
radial-gradient(ellipse 70% 80% at 50% 20%, rgba(233,185,99,0.25), transparent 60%),
linear-gradient(180deg, rgba(48,32,12,0.92), rgba(15,8,30,0.98));
border: 2px solid var(--gold);
border-radius: var(--r-lg);
padding: 36px 30px;
text-align: center;
position: relative;
overflow: hidden;
margin-bottom: 18px;
box-shadow: 0 0 40px rgba(233,185,99,0.18);
}
.vip-crown {
width: 110px;
height: 110px;
margin: 0 auto 14px;
border-radius: 50%;
background: radial-gradient(circle, rgba(233,185,99,0.5), transparent 70%), linear-gradient(135deg, var(--gold), var(--gold-deep));
color: #2a1a00;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
box-shadow: 0 0 36px rgba(233,185,99,0.5);
animation: vipCrownPulse 2.5s ease-in-out infinite;
}
@keyframes vipCrownPulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 36px rgba(233,185,99,0.5); }
50% { transform: scale(1.05); box-shadow: 0 0 60px rgba(233,185,99,0.8); }
}
.vip-title {
font-family: var(--font-title);
font-size: 32px;
letter-spacing: 0.15em;
font-weight: 900;
color: var(--gold);
text-shadow: 0 0 30px rgba(233,185,99,0.4);
}
.vip-subtitle {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--text-muted);
margin-top: 6px;
}
.vip-price {
margin-top: 18px;
display: flex;
align-items: baseline;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.vip-price i { color: var(--r-epic); font-size: 22px; }
.vip-price-num { font-family: var(--font-mono); font-size: 36px; font-weight: 900; color: var(--gold); }
.vip-price-unit { font-size: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.vip-price-usd { font-family: var(--font-mono); font-size: 14px; color: var(--mint); margin-left: 12px; padding: 3px 10px; background: rgba(63,214,146,0.1); border: 1px solid rgba(63,214,146,0.3); border-radius: 12px; }
.vip-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.vip-benefit-card {
background: linear-gradient(180deg, rgba(33,20,58,0.92), rgba(15,8,30,0.98));
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 16px;
display: flex;
gap: 14px;
align-items: flex-start;
transition: all 0.18s;
}
.vip-benefit-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 0 14px rgba(233,185,99,0.15); }
.vip-benefit-card.vip-mythic { border-color: var(--r-mythic); background: linear-gradient(180deg, rgba(58,12,40,0.85), rgba(15,8,30,0.98)); }
.vip-benefit-icon {
width: 48px;
height: 48px;
border-radius: var(--r-md);
background: linear-gradient(135deg, var(--gold), var(--gold-deep));
color: #2a1a00;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.vip-mythic .vip-benefit-icon { background: linear-gradient(135deg, var(--r-mythic), var(--blood)); color: #fff; box-shadow: 0 0 14px rgba(255,95,138,0.5); }
.vip-benefit-title {
font-family: var(--font-title);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.04em;
color: var(--gold);
margin-bottom: 4px;
}
.vip-mythic .vip-benefit-title { color: var(--r-mythic); }
.vip-benefit-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
/* ROI analysis */
.vip-roi-card {
background: var(--panel);
border: 1px solid var(--border-gold);
border-radius: var(--r-lg);
padding: 18px 22px;
margin-bottom: 18px;
}
.vip-roi-title {
font-family: var(--font-title);
color: var(--gold);
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 13px;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.vip-roi-rows { display: flex; flex-direction: column; gap: 4px; }
.vip-roi-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
font-size: 13px;
border-bottom: 1px dashed var(--border-soft);
}
.vip-roi-row:last-child { border-bottom: none; }
.vip-roi-row.vip-roi-total { padding-top: 10px; border-top: 1px solid var(--border); font-size: 14px; }
.vip-roi-row.vip-roi-grand { padding-top: 12px; border-top: 2px solid var(--gold); font-size: 16px; }
/* Action button */
.vip-action-bar {
display: flex;
justify-content: center;
padding: 20px;
background: linear-gradient(180deg, rgba(33,20,58,0.5), rgba(0,0,0,0.4));
border-radius: var(--r-lg);
border: 1px solid var(--border-gold);
flex-wrap: wrap;
gap: 12px;
}
.vip-action-bar .btn-lg { padding: 16px 32px; font-size: 16px; }
/* Active VIP banner */
.vip-active-banner {
background:
radial-gradient(ellipse 70% 100% at 0% 50%, rgba(63,214,146,0.18), transparent 60%),
linear-gradient(135deg, rgba(33,90,48,0.85), rgba(15,8,30,0.95));
border: 1px solid var(--mint);
border-radius: var(--r-lg);
padding: 18px 22px;
margin-bottom: 18px;
box-shadow: 0 0 18px rgba(63,214,146,0.18);
}
.vip-active-header { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.vip-active-crown {
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), var(--gold-deep));
color: #2a1a00;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
box-shadow: 0 0 20px rgba(233,185,99,0.5);
}
.vip-active-title {
font-family: var(--font-title);
font-size: 18px;
letter-spacing: 0.15em;
color: var(--gold);
font-weight: 800;
}
.vip-active-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.vip-active-counter { margin-left: auto; text-align: center; }
.vip-counter-num {
font-family: var(--font-mono);
font-size: 32px;
font-weight: 800;
color: var(--mint);
line-height: 1;
}
.vip-counter-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.vip-progress-bar {
height: 6px;
background: rgba(0,0,0,0.5);
border-radius: 3px;
overflow: hidden;
margin-bottom: 12px;
}
.vip-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--mint), var(--gold));
transition: width 0.4s;
}
.vip-active-perks { display: flex; gap: 8px; flex-wrap: wrap; }
.vip-perk {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--border);
border-radius: 12px;
font-size: 11px;
color: var(--text-muted);
}
.vip-perk.active { color: var(--mint); border-color: var(--mint); background: rgba(63,214,146,0.1); }
.vip-perk i { font-size: 9px; }
/* Global buffs in sidebar */
.global-buff {
padding: 8px 10px;
background: linear-gradient(180deg, rgba(233,185,99,0.15), rgba(122,76,240,0.08));
border: 1px solid var(--gold);
border-radius: var(--r-md);
margin-bottom: 6px;
}
.gb-name { font-family: var(--font-title); font-weight: 700; font-size: 12px; color: var(--gold); }
.gb-magnitude { font-family: var(--font-mono); font-size: 14px; font-weight: 800; color: var(--mint); }
.gb-time { margin-top: 2px; }
/* ================= REFERRAL ================= */
.ref-hero {
display: grid;
grid-template-columns: 1fr 380px;
gap: 16px;
margin-bottom: 18px;
}
@media (max-width: 1100px) { .ref-hero { grid-template-columns: 1fr; } }
.ref-hero-left {
background: linear-gradient(135deg, rgba(122,76,240,0.18) 0%, rgba(233,185,99,0.10) 100%);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 22px;
position: relative;
overflow: hidden;
}
.ref-hero-left::before {
content: ''; position: absolute; top: -50%; right: -10%; width: 320px; height: 320px;
background: radial-gradient(circle, rgba(233,185,99,0.18), transparent 70%);
pointer-events: none;
}
.ref-hero-eyebrow {
font-family: var(--font-title);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 11px;
color: var(--gold);
margin-bottom: 12px;
display: flex; align-items: center; gap: 8px;
}
.ref-link-row {
display: flex; gap: 8px; margin-bottom: 14px;
position: relative; z-index: 1;
}
.ref-link-input {
flex: 1;
background: rgba(0,0,0,0.45) !important;
border-color: var(--gold) !important;
font-family: var(--font-mono) !important;
font-size: 13px !important;
}
.ref-code-row {
display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
position: relative; z-index: 1;
}
.ref-code-label {
font-family: var(--font-title);
text-transform: uppercase; font-size: 11px; letter-spacing: 0.12em;
color: var(--text-muted);
}
.ref-code-pill {
background: rgba(0,0,0,0.5);
border: 1px solid var(--gold);
color: var(--gold);
padding: 6px 14px;
border-radius: 99px;
font-family: var(--font-mono);
font-weight: 700;
letter-spacing: 0.1em;
}
.ref-share-row {
display: flex; gap: 8px; flex-wrap: wrap;
position: relative; z-index: 1;
}
.ref-hero-right { display: flex; }
.ref-rewards-card {
flex: 1;
background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(122,76,240,0.15) 100%);
border: 1px solid var(--gold);
border-radius: var(--r-lg);
padding: 20px;
}
.ref-rewards-title {
font-family: var(--font-title);
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 13px;
color: var(--gold);
margin-bottom: 16px;
display: flex; align-items: center; gap: 8px;
}
.ref-reward-line {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 0;
border-bottom: 1px dashed var(--border-soft);
}
.ref-reward-line:last-child { border-bottom: none; padding-bottom: 0; }
.ref-reward-line > i { font-size: 24px; margin-top: 4px; }
.ref-reward-amount {
font-family: var(--font-title);
font-weight: 800;
font-size: 18px;
color: var(--text);
letter-spacing: 0.05em;
}
.ref-reward-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ref-stats-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-bottom: 18px;
}
@media (max-width: 1100px) { .ref-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.ref-stat-card {
background: rgba(0,0,0,0.35);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 16px;
text-align: center;
transition: transform 0.15s;
}
.ref-stat-card:hover { transform: translateY(-2px); border-color: var(--border); }
.ref-stat-icon { font-size: 22px; color: var(--text-muted); margin-bottom: 6px; }
.ref-stat-num {
font-family: var(--font-mono);
font-size: 26px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.02em;
}
.ref-stat-label {
font-family: var(--font-title);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 10px;
color: var(--text-muted);
margin-top: 4px;
}
.ref-stat-active .ref-stat-icon, .ref-stat-active .ref-stat-num { color: var(--mint); }
.ref-stat-pending .ref-stat-icon, .ref-stat-pending .ref-stat-num { color: var(--text-muted); }
.ref-stat-gold .ref-stat-icon, .ref-stat-gold .ref-stat-num { color: var(--gold); }
.ref-stat-gems .ref-stat-icon, .ref-stat-gems .ref-stat-num { color: var(--accent); }
.ref-by-card {
background: linear-gradient(90deg, rgba(233,185,99,0.10), transparent);
border-left: 3px solid var(--gold);
margin-bottom: 18px;
}
/* Overview tab */
.ref-overview { display: flex; flex-direction: column; }
.ref-step-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 1100px) { .ref-step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ref-step-grid { grid-template-columns: 1fr; } }
.ref-step {
background: rgba(0,0,0,0.4);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 22px 18px 18px;
position: relative;
text-align: center;
transition: transform 0.18s, border-color 0.18s;
}
.ref-step:hover { transform: translateY(-3px); border-color: var(--gold); }
.ref-step-num {
position: absolute;
top: -14px; left: 50%; transform: translateX(-50%);
width: 28px; height: 28px;
border-radius: 50%;
background: var(--gold);
color: var(--bg-dark);
font-family: var(--font-title);
font-weight: 800;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--bg-dark);
box-shadow: 0 0 12px rgba(233,185,99,0.5);
}
.ref-step-icon {
font-size: 32px;
color: var(--accent);
margin: 8px 0 12px;
}
.ref-step-title {
font-family: var(--font-title);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.06em;
color: var(--text);
margin-bottom: 8px;
}
.ref-step-desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
font-family: var(--font-serif);
}
.ref-example-card {
border-color: var(--mint) !important;
border-left: 3px solid var(--mint) !important;
}
.ref-example-title {
font-family: var(--font-title);
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 12px;
color: var(--mint);
margin-bottom: 12px;
display: flex; align-items: center; gap: 8px;
}
.ref-example-grid { display: flex; flex-direction: column; gap: 8px; }
.ref-example-row {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 0;
border-bottom: 1px dashed var(--border-soft);
font-size: 14px;
}
.ref-example-row:last-child { border-bottom: none; }
/* List tab */
.ref-list { display: flex; flex-direction: column; gap: 8px; }
.ref-list-item {
display: grid;
grid-template-columns: 48px 1fr auto auto;
gap: 14px;
align-items: center;
background: rgba(0,0,0,0.35);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 12px 16px;
transition: border-color 0.15s, background 0.15s;
}
.ref-list-item.is-active {
border-color: var(--mint);
background: linear-gradient(90deg, rgba(63,214,146,0.06), transparent);
}
.ref-list-item:hover { border-color: var(--border); }
.ref-list-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(122,76,240,0.2);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
color: var(--accent);
}
.ref-list-name { font-family: var(--font-title); font-weight: 700; font-size: 14px; }
.ref-list-meta { display: flex; gap: 10px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.ref-list-date i { margin-right: 4px; }
.ref-list-status { min-width: 100px; text-align: right; }
.ref-list-earned { min-width: 110px; text-align: right; font-family: var(--font-mono); }
/* Earnings tab */
.ref-earn-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.ref-earn-table th {
text-align: left;
padding: 10px 8px;
border-bottom: 2px solid var(--border);
font-family: var(--font-title);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 11px;
color: var(--text-muted);
}
.ref-earn-table td {
padding: 10px 8px;
border-bottom: 1px dashed var(--border-soft);
}
.ref-earn-table tr:hover td { background: rgba(255,255,255,0.02); }
/* Auth screen ref banner */
.auth-ref-banner {
background: linear-gradient(90deg, rgba(63,214,146,0.15), rgba(122,76,240,0.10));
border: 1px solid var(--mint);
border-radius: var(--r-md);
padding: 10px 14px;
margin-bottom: 12px;
font-size: 13px;
color: var(--text);
display: flex; align-items: center; gap: 10px;
}
.auth-ref-banner i { color: var(--mint); font-size: 16px; }
.auth-ref-banner b { color: var(--gold); }
/* ============================================================================
ITEM MODAL — diseño nuevo con hero + stats grid + actions ordenadas
============================================================================ */
.item-modal-overlay {
padding: 16px;
align-items: center;
}
.item-modal {
max-width: 420px;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 92vh;
border: 1px solid var(--border-gold);
}
/* 2026-05-24 v4 — PC ≥980px: layout HORIZONTAL 2 cols.
IZQ: identidad del item (imagen + nombre + pills + stats compactas).
DER: info de venta (comparison, buffs, ROI, tip, desc, breakdown, price).
ABAJO: actions full-width. */
@media (min-width: 980px) {
.item-modal.r-common, .item-modal.r-uncommon, .item-modal.r-rare,
.item-modal.r-epic, .item-modal.r-legendary, .item-modal.r-mythic,
.item-modal {
max-width: 900px;
display: grid;
grid-template-columns: 320px 1fr;
grid-template-rows: auto auto auto 1fr auto;
grid-template-areas:
"hero body"
"title body"
"stats body"
"left-fill body"
"acts acts";
max-height: 88vh;
}
/* HERO (imagen) */
.item-modal .item-modal-hero {
grid-area: hero;
padding: 24px 20px 6px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.item-modal .item-modal-image {
max-width: 180px;
width: 100%;
margin: 0 auto;
aspect-ratio: 1/1;
}
/* TITLE BLOCK (nombre + pills) — centrado bajo la imagen */
.item-modal .item-modal-title-block {
grid-area: title;
padding: 4px 22px 14px;
text-align: center;
border-top: none;
border-bottom: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
}
.item-modal .item-modal-name {
font-size: 20px;
line-height: 1.15;
margin: 0;
word-break: break-word;
}
.item-modal .item-modal-meta {
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: center;
margin: 0;
}
/* STATS + "Si lo equipas" — bajo el título, en la columna izquierda */
.item-modal .item-modal-stats {
grid-area: stats;
padding: 6px 16px 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.item-modal .item-modal-stats .item-stats-grid {
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
margin: 0 !important;
}
.item-modal .item-modal-stats .item-stat-cell {
padding: 8px 10px;
font-size: 12.5px;
}
.item-modal .item-modal-stats .item-stat-cell > i {
font-size: 15px;
}
/* Compare card dentro del stats wrapper */
.item-modal .item-modal-stats .item-compare-card {
margin: 0 !important;
}
.item-modal .item-modal-stats .item-compare-card .item-compare-header {
padding: 9px 12px;
font-size: 12.5px;
}
.item-modal .item-modal-stats .item-compare-card .item-compare-grid {
padding: 10px 12px 12px;
}
.item-modal .item-modal-stats .item-compare-row {
font-size: 11.5px;
}
/* FILL: relleno visual en el espacio sobrante de la columna izquierda. */
.item-modal::before {
content: '';
grid-area: left-fill;
background: radial-gradient(circle at 50% 0%,
color-mix(in srgb, currentColor 5%, transparent) 0%,
transparent 65%);
pointer-events: none;
min-height: 0;
}
/* BODY (info de venta) */
.item-modal .item-modal-body {
grid-area: body;
overflow-y: auto;
max-height: calc(88vh - 84px); /* descontar actions */
border-left: 1px solid rgba(255,255,255,.06);
padding: 22px 22px 18px;
background: linear-gradient(180deg, rgba(0,0,0,0.12), transparent 40%);
}
/* ACTIONS (full-width) */
.item-modal .item-modal-actions {
grid-area: acts;
border-top: 1px solid rgba(255,255,255,.08);
background: rgba(0,0,0,.32);
padding: 12px 16px;
display: flex;
flex-direction: row;
gap: 10px;
}
.item-modal .item-modal-actions .item-action-primary,
.item-modal .item-modal-actions .btn-gold {
flex: 1;
min-width: 0;
}
.item-modal .item-modal-actions .btn-ghost {
flex: 0 0 auto;
min-width: 130px;
}
/* Si tiene 4+ stats, podemos comprimir a 2 filas de 2 (default) o expandir si pocas */
/* Comparison "Si lo equipas": que ocupe todo el ancho */
.item-modal .item-compare-card { margin-bottom: 12px; }
/* ROI card: alineado horizontal */
.item-modal .item-roi-card {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
/* Tip card: más compacto */
.item-modal .item-tip-card { margin-bottom: 12px; }
/* Descripción flavor: más espacio respiro */
.item-modal .item-modal-desc {
margin: 14px 0;
font-style: italic;
opacity: .75;
text-align: center;
font-size: 13px;
}
/* Breakdown "Items a la venta": más compacto */
.item-modal .market-breakdown-card { margin-top: 8px; margin-bottom: 12px; }
/* Price summary: card más definida */
.item-modal .market-price-summary {
margin-top: 6px;
padding: 12px 14px;
background: rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
}
.item-modal .market-price-summary .mps-row {
padding: 4px 0;
}
.item-modal .market-price-summary .mps-row + .mps-row {
border-top: 1px solid rgba(255,255,255,0.04);
}
}
/* PC más grande (>=1200): ancho del modal un poco más generoso */
@media (min-width: 1200px) {
.item-modal.r-common, .item-modal.r-uncommon, .item-modal.r-rare,
.item-modal.r-epic, .item-modal.r-legendary, .item-modal.r-mythic,
.item-modal {
max-width: 960px;
grid-template-columns: 340px 1fr;
}
.item-modal .item-modal-image { max-width: 215px; }
/* El modal de inventario v2 mantiene su ancho compacto incluso en pantallas grandes */
.item-modal.inv-bag-modal-v2 { max-width: 460px !important; grid-template-columns: none !important; }
}
/* ====================================================================
INVENTARIO V2 — modal exclusivo para items en mochila / almacén
2026-05-24
Resetea cualquier layout grid del bazar (que comparte `.item-modal`)
y vuelve a un layout vertical limpio + sticky actions abajo.
Items equipados siguen usando el `.item-modal` original.
==================================================================== */
.item-modal.inv-bag-modal-v2 {
max-width: 460px !important;
width: 100%;
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
grid-template-areas: none !important;
max-height: 90vh;
overflow: hidden;
}
/* Cancela el ::before "left-fill" del bazar */
.item-modal.inv-bag-modal-v2::before { display: none !important; }
/* Áreas hijo: anulamos grid-area */
.item-modal.inv-bag-modal-v2 .item-modal-hero,
.item-modal.inv-bag-modal-v2 .item-modal-title-block,
.item-modal.inv-bag-modal-v2 .item-modal-body,
.item-modal.inv-bag-modal-v2 .item-modal-actions {
grid-area: auto !important;
}
/* HERO compacto */
.item-modal.inv-bag-modal-v2 .item-modal-hero {
padding: 20px 18px 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-bottom: none;
}
.item-modal.inv-bag-modal-v2 .item-modal-image {
max-width: 150px;
width: 100%;
margin: 0 auto;
aspect-ratio: 1/1;
}
/* TITLE BLOCK centrado */
.item-modal.inv-bag-modal-v2 .item-modal-title-block {
padding: 6px 22px 14px;
border-bottom: 1px solid rgba(255,255,255,0.05);
border-left: none !important;
flex-shrink: 0;
text-align: center;
}
.item-modal.inv-bag-modal-v2 .item-modal-name {
font-size: 20px;
margin-bottom: 9px;
}
.item-modal.inv-bag-modal-v2 .item-modal-meta {
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: center;
}
/* BODY scrolleable interno (sin grid border) */
.item-modal.inv-bag-modal-v2 .item-modal-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
border-left: none !important;
padding: 14px 18px 16px;
background: transparent !important;
max-height: none;
-webkit-overflow-scrolling: touch;
}
/* Stats grid centrado y compacto */
.item-modal.inv-bag-modal-v2 .item-stats-grid {
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: 12px;
}
/* Compare card "Si lo equipas" — espacio claro */
.item-modal.inv-bag-modal-v2 .item-compare-card {
margin-bottom: 12px;
}
/* Buffs / ROI / Description — separación consistente */
.item-modal.inv-bag-modal-v2 .item-buffs-card,
.item-modal.inv-bag-modal-v2 .item-roi-card,
.item-modal.inv-bag-modal-v2 .item-tip-card,
.item-modal.inv-bag-modal-v2 .item-expiry-banner {
margin-bottom: 12px;
}
.item-modal.inv-bag-modal-v2 .item-modal-desc {
margin-top: 6px;
font-style: italic;
opacity: .7;
font-size: 13px;
line-height: 1.5;
text-align: center;
padding: 8px 0 0;
border-top: 1px dashed rgba(255,255,255,0.06);
}
/* ACTIONS — sticky abajo, columna, primario destacado */
.item-modal.inv-bag-modal-v2 .item-modal-actions {
display: flex !important;
flex-direction: column !important;
gap: 8px;
padding: 12px 16px calc(14px + var(--m-safe-bottom, 0px));
background: rgba(0,0,0,0.35);
border-top: 1px solid rgba(255,255,255,0.08);
flex-shrink: 0;
}
.item-modal.inv-bag-modal-v2 .item-modal-actions .item-action-primary {
width: 100%;
min-height: 46px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
}
.item-modal.inv-bag-modal-v2 .item-modal-actions .item-action-row,
.item-modal.inv-bag-modal-v2 .item-modal-actions .item-action-row-drop {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.item-modal.inv-bag-modal-v2 .item-modal-actions .item-action-secondary,
.item-modal.inv-bag-modal-v2 .item-modal-actions .item-action-danger {
flex: 1 1 0;
min-width: 0;
min-height: 42px;
}
/* Mobile-specific: que el modal use el ancho completo y se ancle abajo */
@media (max-width: 600px) {
.item-modal.inv-bag-modal-v2 {
max-width: 100% !important;
width: 100%;
max-height: 92vh;
border-radius: 18px 18px 0 0;
}
.item-modal.inv-bag-modal-v2 .item-modal-hero { padding: 16px 14px 4px; }
.item-modal.inv-bag-modal-v2 .item-modal-image { max-width: 130px; }
.item-modal.inv-bag-modal-v2 .item-modal-name { font-size: 18px; }
.item-modal.inv-bag-modal-v2 .item-modal-body { padding: 12px 14px 14px; }
}
/* 2026-05-21 REVERTIDO previous: ahora 2026-05-24 sí lo aplicamos a 980px+ */
.item-modal.r-common { border-color: rgba(180,180,180,0.5); }
.item-modal.r-uncommon { border-color: rgba(80,200,120,0.5); }
.item-modal.r-rare { border-color: rgba(80,160,255,0.5); }
.item-modal.r-epic { border-color: rgba(170,100,255,0.5); }
.item-modal.r-legendary { border-color: rgba(255,170,80,0.6); }
.item-modal.r-mythic { border-color: rgba(255,80,120,0.6); }
/* Botón cerrar flotante esquina superior derecha */
.item-modal-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.15);
color: var(--text-muted);
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s, transform 0.1s;
-webkit-appearance: none;
appearance: none;
}
.item-modal-close:hover,
.item-modal-close:active {
background: rgba(0,0,0,0.85);
color: var(--text);
transform: scale(0.92);
}
/* Hero: imagen del item con halo según rarity */
.item-modal-hero {
position: relative;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.item-modal-hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at center,
rgba(233,185,99,0.35) 0%,
rgba(122,76,240,0.18) 40%,
transparent 75%);
pointer-events: none;
}
.item-modal.r-common .item-modal-hero-bg { background: radial-gradient(ellipse 60% 80% at center, rgba(180,180,180,0.25), transparent 75%); }
.item-modal.r-uncommon .item-modal-hero-bg { background: radial-gradient(ellipse 60% 80% at center, rgba(80,200,120,0.30), transparent 75%); }
.item-modal.r-rare .item-modal-hero-bg { background: radial-gradient(ellipse 60% 80% at center, rgba(80,160,255,0.30), transparent 75%); }
.item-modal.r-epic .item-modal-hero-bg { background: radial-gradient(ellipse 60% 80% at center, rgba(170,100,255,0.35), transparent 75%); }
.item-modal.r-legendary .item-modal-hero-bg { background: radial-gradient(ellipse 60% 80% at center, rgba(255,170,80,0.40), transparent 75%); }
.item-modal.r-mythic .item-modal-hero-bg { background: radial-gradient(ellipse 60% 80% at center, rgba(255,80,120,0.40) 0%, rgba(170,100,255,0.25) 50%, transparent 75%); }
.item-modal-image {
position: relative;
width: 130px;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
}
.item-modal-img-real {
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: drop-shadow(0 6px 14px rgba(0,0,0,0.7));
/* 2026-05-15: animación itemFloat removida — imagen fija (sin movimiento). */
}
.item-modal-image > i,
.item-modal-image > iconify-icon {
font-size: 80px;
color: var(--gold);
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
@keyframes itemFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Title block */
.item-modal-title-block {
padding: 0 24px 14px;
border-bottom: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
.item-modal-name {
font-family: var(--font-title);
font-size: 22px;
font-weight: 800;
letter-spacing: 0.06em;
text-align: center;
margin-bottom: 12px;
text-transform: uppercase;
text-shadow: 0 0 18px currentColor;
}
.item-modal-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
}
.item-meta-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
letter-spacing: 0.04em;
}
.item-meta-pill.r-common { color: rgba(220,220,220,0.95); border-color: rgba(220,220,220,0.4); }
.item-meta-pill.r-uncommon { color: #50c878; border-color: rgba(80,200,120,0.5); }
.item-meta-pill.r-rare { color: #5aa6ff; border-color: rgba(80,160,255,0.5); }
.item-meta-pill.r-epic { color: #b884ff; border-color: rgba(170,100,255,0.5); }
.item-meta-pill.r-legendary { color: #ffaa50; border-color: rgba(255,170,80,0.5); }
.item-meta-pill.r-mythic { color: #ff5a78; border-color: rgba(255,80,120,0.55); }
.item-meta-gold { color: var(--gold); border-color: rgba(233,185,99,0.4); }
.item-meta-lock { color: var(--cyan); border-color: rgba(86,200,255,0.4); }
.item-meta-qty { color: var(--text); background: rgba(233,185,99,0.1); border-color: rgba(233,185,99,0.3); }
.item-meta-purchased { color: #5fdca5; background: rgba(95,220,165,0.1); border-color: rgba(95,220,165,0.45); }
.item-meta-pill i { font-size: 11px; }
/* 2026-05-10: pill de raza para items race_equip en el bazar — color temático por raza */
.item-meta-pill.is-race { font-weight: 800; }
.item-meta-pill.is-race.race-human { color: #7da6d6; border-color: rgba(125,166,214,0.6); background: rgba(125,166,214,0.10); }
.item-meta-pill.is-race.race-elf { color: #7fd49a; border-color: rgba(127,212,154,0.6); background: rgba(127,212,154,0.10); }
.item-meta-pill.is-race.race-ogre { color: #c5d97f; border-color: rgba(197,217,127,0.6); background: rgba(197,217,127,0.10); }
.item-meta-pill.is-race.race-fae { color: #c89cff; border-color: rgba(200,156,255,0.6); background: rgba(200,156,255,0.10); }
.item-meta-pill.is-race.race-drakkar { color: #ff8d6a; border-color: rgba(255,141,106,0.6); background: rgba(255,141,106,0.10); }
.item-meta-pill.is-race.race-undead { color: #b0b0c8; border-color: rgba(176,176,200,0.55); background: rgba(176,176,200,0.10); }
/* Stats wrapper (mobile default: bajo el title, antes del body) */
.item-modal-stats {
padding: 0 22px 6px;
flex-shrink: 0;
}
/* Body scrollable */
.item-modal-body {
flex: 1;
overflow-y: auto;
padding: 16px 22px;
-webkit-overflow-scrolling: touch;
}
.item-modal-body::-webkit-scrollbar { width: 4px; }
.item-modal-body::-webkit-scrollbar-thumb { background: rgba(233,185,99,0.25); border-radius: 4px; }
/* Stats grid (2 columnas) */
.item-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: 14px;
}
.item-stat-cell {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 11px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
}
.item-stat-cell > i {
font-size: 16px;
color: var(--gold);
flex-shrink: 0;
}
.item-stat-val {
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 700;
color: var(--text);
}
/* Effect / ROI / Crafting cards */
.item-effect-card,
.item-roi-card,
.item-craft-card {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 13px;
border-radius: var(--r-md);
margin-bottom: 10px;
font-size: 12.5px;
line-height: 1.45;
}
.item-effect-card {
background: linear-gradient(90deg, rgba(122,76,240,0.18), rgba(122,76,240,0.04));
border-left: 3px solid var(--primary);
}
.item-effect-card > i { font-size: 22px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.item-effect-label { font-family: var(--font-title); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary); margin-bottom: 2px; }
.item-effect-text { color: var(--text); }
/* 2026-05-10: PvP rules welcome modal (timer 10s antes de poder cerrar) */
.pvp-rules-modal {
max-width: 520px;
background: linear-gradient(180deg, rgba(20,12,38,0.98), rgba(10,5,22,0.99));
border: 2px solid rgba(255,90,100,0.45);
border-radius: 14px;
box-shadow: 0 16px 50px rgba(0,0,0,0.7), 0 0 32px rgba(255,90,100,0.18);
overflow: hidden;
}
.pvp-rules-head {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px 14px;
background: linear-gradient(135deg, rgba(255,90,100,0.18), rgba(20,12,38,0.6));
border-bottom: 1px solid rgba(255,90,100,0.28);
}
.pvp-rules-icon {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,90,100,0.22);
border-radius: 50%;
flex-shrink: 0;
}
.pvp-rules-icon i {
font-size: 28px;
color: #ff8088;
filter: drop-shadow(0 0 8px rgba(255,90,100,0.5));
}
.pvp-rules-title {
font-family: var(--font-cinzel, serif);
font-size: 22px;
font-weight: 900;
color: var(--gold, #e9b963);
text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.pvp-rules-sub {
font-size: 12px;
color: rgba(244,236,216,0.65);
letter-spacing: 0.04em;
margin-top: 2px;
}
.pvp-rules-body { padding: 16px 20px; }
.pvp-rules-list {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.pvp-rules-list li {
display: flex;
gap: 12px;
padding: 10px 12px;
background: rgba(15,8,28,0.55);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
font-size: 13.5px;
line-height: 1.45;
color: var(--text, #f4ecd8);
}
.pvp-rules-list li i {
font-size: 18px;
color: #ff8088;
flex-shrink: 0;
margin-top: 2px;
filter: drop-shadow(0 0 5px rgba(255,90,100,0.4));
}
.pvp-rules-list li b { color: var(--gold, #e9b963); }
.pvp-rules-footer {
padding: 14px 20px 18px;
border-top: 1px solid rgba(255,90,100,0.18);
}
#pvp-rules-ok:disabled {
opacity: 0.65;
cursor: not-allowed;
background: rgba(80,80,90,0.4) !important;
color: rgba(244,236,216,0.6) !important;
}
#pvp-rules-timer {
font-family: var(--font-mono, monospace);
font-weight: 900;
color: #ff8088;
margin-left: 4px;
}
@media (max-width: 600px) {
.pvp-rules-modal { max-width: 95vw; }
.pvp-rules-title { font-size: 18px; }
.pvp-rules-list li { font-size: 12.5px; padding: 9px 10px; }
}
/* 2026-05-19: Modal Arena de Sangre — variante roja */
.blood-arena-modal {
border-color: rgba(232,90,106,0.55) !important;
box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 60px rgba(232,90,106,0.25) !important;
}
.blood-arena-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 99px;
background: linear-gradient(90deg, rgba(232,90,106,0.30), rgba(155,40,55,0.30));
border: 1px solid rgba(232,90,106,0.55);
color: #ff8898;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 6px auto 8px;
animation: blood-arena-pulse 1.8s ease-in-out infinite;
}
.blood-arena-badge i { color: #ff4d5e; font-size: 11px; }
@keyframes blood-arena-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(232,90,106,0); }
50% { box-shadow: 0 0 18px 2px rgba(232,90,106,0.5); }
}
/* 2026-05-10: card de buffs del item — más prominente, uno por línea con icono. */
.item-buffs-card {
background: linear-gradient(135deg, rgba(122,76,240,0.18), rgba(122,76,240,0.04));
border: 1px solid rgba(122,76,240,0.45);
border-left: 3px solid var(--primary, #b884ff);
border-radius: 10px;
padding: 12px 14px;
margin: 12px 0;
box-shadow: 0 4px 14px rgba(122,76,240,0.15);
}
.item-buffs-header {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title, sans-serif);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary, #b884ff);
margin-bottom: 10px;
text-shadow: 0 0 10px rgba(184,132,255,0.4);
}
.item-buffs-header i { font-size: 14px; filter: drop-shadow(0 0 6px rgba(184,132,255,0.6)); }
.item-buffs-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.item-buff-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: rgba(15,8,28,0.6);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
}
.item-buff-row.is-active {
background: linear-gradient(90deg, rgba(95,214,132,0.12), rgba(15,8,28,0.6));
border-color: rgba(95,214,132,0.35);
}
.item-buff-row.is-cosmetic {
opacity: 0.6;
background: rgba(15,8,28,0.4);
}
.item-buff-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(184,132,255,0.15);
border-radius: 50%;
flex-shrink: 0;
}
.item-buff-icon i {
font-size: 16px;
color: #d9b9ff;
}
.item-buff-row.is-active .item-buff-icon {
background: rgba(95,214,132,0.18);
}
.item-buff-row.is-active .item-buff-icon i {
color: #5fd684;
filter: drop-shadow(0 0 6px rgba(95,214,132,0.5));
}
.item-buff-meta {
flex: 1;
min-width: 0;
}
.item-buff-name {
font-family: var(--font-body, sans-serif);
font-size: 13px;
font-weight: 600;
color: var(--text, #f4ecd8);
}
.item-buff-tag-cos {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(244,236,216,0.4);
margin-top: 1px;
}
.item-buff-val {
font-family: var(--font-mono, monospace);
font-size: 14px;
font-weight: 800;
color: var(--primary, #b884ff);
flex-shrink: 0;
padding: 2px 8px;
background: rgba(184,132,255,0.12);
border-radius: 6px;
}
.item-buff-row.is-active .item-buff-val {
color: #5fd684;
background: rgba(95,214,132,0.15);
text-shadow: 0 0 8px rgba(95,214,132,0.4);
}
.item-roi-card {
background: linear-gradient(90deg, rgba(233,185,99,0.18), rgba(233,185,99,0.04));
border-left: 3px solid var(--gold);
}
.item-roi-card > i { font-size: 22px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.item-roi-label { font-family: var(--font-title); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.item-roi-text { color: var(--text); font-family: var(--font-mono); }
.item-craft-card {
background: linear-gradient(90deg, rgba(86,200,255,0.15), rgba(86,200,255,0.04));
border-left: 3px solid var(--cyan);
}
.item-craft-card > i { font-size: 22px; color: var(--cyan); flex-shrink: 0; margin-top: 2px; }
.item-craft-label { font-family: var(--font-title); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cyan); margin-bottom: 2px; }
.item-craft-text { color: var(--text-muted); font-size: 11.5px; }
/* Description */
.item-modal-desc {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
line-height: 1.6;
color: var(--text-muted);
padding: 10px 0 4px;
border-top: 1px dashed rgba(255,255,255,0.08);
margin-top: 6px;
}
/* Actions footer */
.item-modal-actions {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 18px 18px;
border-top: 1px solid rgba(255,255,255,0.06);
background: rgba(0,0,0,0.35);
flex-shrink: 0;
}
.item-action-primary {
width: 100%;
min-height: 48px;
font-size: 14px;
letter-spacing: 0.08em;
}
.item-action-row,
.item-action-row-drop {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.item-action-row-drop { margin-top: 0; }
.item-action-secondary,
.item-action-danger {
flex: 1 1 0;
min-width: 0;
min-height: 42px;
padding: 8px 10px;
font-size: 12px;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
/* Tirar siempre full-width en su propia fila */
.item-action-row-drop .item-action-danger { flex: 1 1 100%; }
.item-action-secondary i,
.item-action-danger i { flex-shrink: 0; }
.item-action-secondary { color: var(--text); }
.item-action-secondary:hover { color: var(--gold); }
/* Selector cantidad para abrir varios cofres */
.box-open-multi { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.box-open-qty-row {
display: flex; align-items: center; gap: 6px;
background: rgba(15,8,30,0.7);
border: 1px solid rgba(233,185,99,0.3);
border-radius: 10px;
padding: 5px;
flex-wrap: wrap;
}
.box-qty-btn {
width: 32px; height: 32px;
border-radius: 7px;
background: rgba(40,28,82,0.7);
border: 1px solid rgba(233,185,99,0.3);
color: #f4e4be;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.box-qty-btn:hover { background: rgba(233,185,99,0.2); }
.box-qty-input {
width: 50px;
background: transparent;
border: none;
color: #f4e4be;
font-family: var(--font-mono, monospace);
font-size: 16px;
font-weight: 800;
text-align: center;
flex-shrink: 0;
}
.box-qty-input::-webkit-inner-spin-button,
.box-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.box-qty-quick {
flex: 1 1 auto;
min-width: 36px;
height: 32px;
border-radius: 7px;
background: rgba(40,28,82,0.5);
border: 1px solid rgba(233,185,99,0.25);
color: #c0b8d8;
font-family: 'Cinzel', serif;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
transition: all 0.12s;
}
.box-qty-quick:hover {
background: rgba(233,185,99,0.18);
color: #f4e4be;
border-color: rgba(233,185,99,0.55);
}
@media (max-width: 480px) {
.item-action-row,
.item-action-row-drop { gap: 6px; }
.item-action-secondary,
.item-action-danger { font-size: 11.5px; padding: 8px 8px; }
}
/* ============================================================================
BAZAAR PUBLISH MODAL — listar item en bazar
============================================================================ */
.bazaar-modal-overlay {
padding: 16px;
align-items: center;
}
.bazaar-modal {
max-width: 460px;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 92vh;
border: 1px solid var(--border-gold);
}
/* Header con icono */
.bazaar-modal-header {
display: flex;
align-items: center;
gap: 14px;
padding: 22px 24px 18px;
background:
radial-gradient(ellipse 80% 100% at 0% 0%, rgba(233,185,99,0.18), transparent 70%),
rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
.bazaar-modal-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(233,185,99,0.3), rgba(233,185,99,0.1));
border: 1px solid rgba(233,185,99,0.4);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
font-size: 22px;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(233,185,99,0.2);
}
.bazaar-modal-title {
font-family: var(--font-title);
font-size: 18px;
font-weight: 800;
color: var(--gold);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.2;
}
.bazaar-modal-sub {
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
/* Item summary card */
.bazaar-item-summary {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 24px;
background: rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(255,255,255,0.05);
flex-shrink: 0;
}
.bazaar-item-image {
width: 64px;
height: 64px;
border-radius: var(--r-md);
background: rgba(0,0,0,0.55);
border: 1.5px solid rgba(255,255,255,0.08);
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.bazaar-item-image.r-common { border-color: rgba(180,180,180,0.4); }
.bazaar-item-image.r-uncommon { border-color: rgba(80,200,120,0.5); }
.bazaar-item-image.r-rare { border-color: rgba(80,160,255,0.5); }
.bazaar-item-image.r-epic { border-color: rgba(170,100,255,0.5); }
.bazaar-item-image.r-legendary { border-color: rgba(255,170,80,0.5); }
.bazaar-item-image.r-mythic { border-color: rgba(255,80,120,0.55); }
.bazaar-item-image .item-modal-img-real { width: 100%; height: 100%; }
.bazaar-item-image > i,
.bazaar-item-image > iconify-icon { font-size: 32px; color: var(--gold); }
.bazaar-item-info { flex: 1; min-width: 0; }
.bazaar-item-name {
font-family: var(--font-title);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.04em;
margin-bottom: 6px;
text-shadow: 0 0 10px currentColor;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bazaar-item-meta {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
/* Body scrollable */
.bazaar-modal-body {
flex: 1;
overflow-y: auto;
padding: 18px 22px;
display: flex;
flex-direction: column;
gap: 14px;
-webkit-overflow-scrolling: touch;
}
.bazaar-modal-body::-webkit-scrollbar { width: 4px; }
.bazaar-modal-body::-webkit-scrollbar-thumb { background: rgba(233,185,99,0.25); border-radius: 4px; }
/* Field group */
.bazaar-field { display: flex; flex-direction: column; gap: 8px; }
.bazaar-field-label {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
.bazaar-field-label > span:first-child { color: var(--gold); display: inline-flex; align-items: center; gap: 6px; }
.bazaar-field-label i { font-size: 13px; }
.bazaar-field-hint {
text-transform: none;
letter-spacing: 0;
font-size: 11px;
color: var(--text-dim);
font-weight: 500;
font-family: var(--font-mono);
}
/* Cantidad — stepper */
.bazaar-qty-row {
display: grid;
grid-template-columns: 48px 1fr 48px;
gap: 0;
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-md);
overflow: hidden;
background: rgba(0,0,0,0.4);
}
.bazaar-stepper {
background: rgba(255,255,255,0.04);
border: none;
color: var(--gold);
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, transform 0.1s;
-webkit-appearance: none;
appearance: none;
}
.bazaar-stepper:hover { background: rgba(233,185,99,0.15); }
.bazaar-stepper:active { transform: scale(0.92); background: rgba(233,185,99,0.25); }
.bazaar-qty-input {
background: transparent;
border: none;
color: var(--text);
font-family: var(--font-mono);
font-size: 18px;
font-weight: 700;
text-align: center;
outline: none;
-moz-appearance: textfield;
min-height: 44px;
}
.bazaar-qty-input::-webkit-outer-spin-button,
.bazaar-qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Precio */
.bazaar-price-row {
position: relative;
display: flex;
align-items: center;
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-md);
background: rgba(0,0,0,0.4);
transition: border-color 0.15s;
}
.bazaar-price-row:focus-within {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(233,185,99,0.15);
}
.bazaar-price-input {
flex: 1;
background: transparent;
border: none;
color: var(--text);
font-family: var(--font-mono);
font-size: 18px;
font-weight: 700;
padding: 12px 14px;
outline: none;
-moz-appearance: textfield;
min-height: 44px;
}
.bazaar-price-input::-webkit-outer-spin-button,
.bazaar-price-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.bazaar-price-input.invalid { color: var(--blood); }
.bazaar-price-currency {
padding: 0 14px;
color: var(--gold);
font-size: 18px;
border-left: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
height: 100%;
align-self: stretch;
}
.bazaar-price-warning {
display: flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
color: var(--blood);
background: rgba(225,80,90,0.1);
border: 1px solid rgba(225,80,90,0.3);
border-radius: var(--r-md);
padding: 8px 12px;
margin-top: 4px;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.2s, max-height 0.2s, margin 0.2s;
}
.bazaar-price-warning.show {
opacity: 1;
max-height: 60px;
margin-top: 4px;
}
.bazaar-price-warning i { font-size: 14px; }
/* Resumen económico */
.bazaar-summary-card {
background: linear-gradient(180deg, rgba(233,185,99,0.08), rgba(233,185,99,0.02));
border: 1px solid rgba(233,185,99,0.25);
border-radius: var(--r-md);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.bazaar-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
}
.bazaar-summary-label {
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 6px;
}
.bazaar-summary-label i { font-size: 13px; }
.bazaar-summary-val {
font-family: var(--font-mono);
font-weight: 700;
color: var(--text);
}
.bazaar-summary-tax .bazaar-summary-val { color: var(--blood); }
.bazaar-summary-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(233,185,99,0.4), transparent);
margin: 2px 0;
}
.bazaar-summary-net .bazaar-summary-label {
color: var(--gold);
font-family: var(--font-title);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
}
.bazaar-summary-net .bazaar-summary-val {
color: var(--gold);
font-size: 17px;
text-shadow: 0 0 12px rgba(233,185,99,0.5);
}
/* Info tip de expiración */
.bazaar-info-tip {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(86,200,255,0.08);
border-left: 3px solid var(--cyan);
border-radius: var(--r-md);
font-size: 12px;
color: var(--text);
}
.bazaar-info-tip i { color: var(--cyan); font-size: 18px; flex-shrink: 0; }
.bazaar-info-tip b { color: var(--cyan); }
/* Actions footer */
.bazaar-modal-actions {
display: flex;
gap: 8px;
padding: 14px 22px 18px;
border-top: 1px solid rgba(255,255,255,0.06);
background: rgba(0,0,0,0.35);
flex-shrink: 0;
}
.bazaar-modal-actions .btn {
flex: 1 1 0;
min-width: 0; /* permite que el botón se achique sin overflow */
min-height: 46px;
padding: 10px 12px;
font-size: 13px;
letter-spacing: 0.04em; /* antes 0.08 — muy ancho para "Publicar" */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.bazaar-modal-actions .btn i { flex-shrink: 0; }
.bazaar-modal-actions .btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
@media (max-width: 420px) {
.bazaar-modal-actions { padding: 12px 14px 14px; gap: 6px; }
.bazaar-modal-actions .btn { font-size: 12px; padding: 9px 8px; letter-spacing: 0.02em; }
}
/* ============================================================================
HERO STATS CARD (panel en el inventory)
============================================================================ */
.hero-stats-card {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1px solid rgba(233,185,99,0.25);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.hero-stats-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(233,185,99,0.08), transparent 60%);
pointer-events: none;
}
.hero-stats-title {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.hero-stats-title i { font-size: 14px; }
.hero-stats-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
position: relative;
}
.hs-cell {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
padding: 10px 6px 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
transition: border-color 0.15s, transform 0.15s;
}
.hs-cell:hover { border-color: rgba(233,185,99,0.4); transform: translateY(-2px); }
.hs-cell > i { font-size: 18px; color: var(--gold); }
.hs-val {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.hs-label {
font-family: var(--font-title);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
/* ============================================================================
ITEM COMPARE CARD (dentro del modal del item)
============================================================================ */
.item-compare-card {
background: linear-gradient(180deg, rgba(86,200,255,0.10), rgba(86,200,255,0.02));
border: 1px solid rgba(86,200,255,0.3);
border-radius: var(--r-md);
padding: 12px 14px;
margin-bottom: 12px;
}
/* 2026-05-21: collapsible (boton toggle + caret + animacion) */
.item-compare-card.is-collapsible {
padding: 0;
overflow: hidden;
}
.item-compare-card.is-collapsible .item-compare-toggle {
width: 100%;
background: transparent;
border: none;
color: var(--cyan);
padding: 12px 14px;
cursor: pointer;
text-align: left;
margin-bottom: 0;
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 700;
transition: background 0.15s ease;
}
.item-compare-card.is-collapsible .item-compare-toggle:hover {
background: rgba(86,200,255,0.08);
}
.item-compare-card.is-collapsible .item-compare-caret {
margin-left: auto;
font-size: 14px;
transition: transform 0.22s ease;
}
.item-compare-card.is-collapsible.is-collapsed .item-compare-caret {
transform: rotate(-90deg);
}
.item-compare-card.is-collapsible .item-compare-grid {
padding: 0 14px 12px;
max-height: 600px;
overflow: hidden;
transition: max-height 0.28s ease, padding 0.2s ease, opacity 0.2s ease;
opacity: 1;
}
.item-compare-card.is-collapsible.is-collapsed .item-compare-grid {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
}
.item-compare-header {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--cyan);
margin-bottom: 10px;
font-weight: 700;
}
.item-compare-header i { font-size: 16px; }
.item-compare-grid {
display: flex;
flex-direction: column;
gap: 5px;
}
.item-compare-row {
display: grid;
grid-template-columns: 18px 56px 1fr auto 1fr 60px;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: rgba(0,0,0,0.35);
border-radius: 8px;
font-family: var(--font-mono);
font-size: 12px;
border-left: 3px solid transparent;
}
.item-compare-row.is-up { border-left-color: var(--mint); }
.item-compare-row.is-down { border-left-color: var(--blood); }
.item-compare-row > i:first-child {
font-size: 14px;
color: var(--gold);
text-align: center;
}
.item-compare-row .ic-label {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--text-muted);
font-weight: 700;
}
.item-compare-row .ic-cur {
text-align: right;
color: var(--text-muted);
font-weight: 600;
}
.item-compare-row .ic-arrow {
font-size: 11px;
color: var(--text-dim);
text-align: center;
}
.item-compare-row .ic-nxt {
color: var(--text);
font-weight: 800;
}
.item-compare-row .ic-delta {
text-align: right;
font-size: 11.5px;
font-weight: 800;
padding: 2px 6px;
border-radius: 99px;
background: rgba(0,0,0,0.5);
}
.item-compare-row.is-up .ic-delta { color: var(--mint); background: rgba(63,214,146,0.15); }
.item-compare-row.is-down .ic-delta { color: var(--blood); background: rgba(225,80,90,0.15); }
/* ============================================================================
HERO BANNER (CharacterSheet)
============================================================================ */
.hero-banner {
position: relative;
background: linear-gradient(180deg, rgba(33,20,58,0.95), rgba(15,8,30,0.98));
border: 1px solid var(--border-gold);
border-radius: var(--r-xl);
padding: 28px 28px 22px;
margin-bottom: 16px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.hero-banner-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 50% 0%, rgba(233,185,99,0.18), transparent 65%),
radial-gradient(ellipse 100% 60% at 100% 100%, rgba(122,76,240,0.15), transparent 70%);
pointer-events: none;
}
.hero-banner-content {
position: relative;
display: flex;
align-items: center;
gap: 24px;
}
.hero-banner-portrait {
position: relative;
flex-shrink: 0;
}
.hero-banner-portrait .portrait-ring {
width: 130px;
height: 130px;
border-radius: 50%;
border: 3px solid var(--gold);
overflow: hidden;
box-shadow:
0 0 30px rgba(233,185,99,0.4),
inset 0 0 20px rgba(0,0,0,0.5);
background: rgba(0,0,0,0.5);
}
.hero-banner-portrait .portrait-ring > * {
width: 100%;
height: 100%;
}
/* Cuando hay foto custom, la imagen llena el círculo */
.hero-banner-portrait .portrait-ring.has-custom-avatar {
background: #000;
}
.hero-banner-portrait .char-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Botón flotante para editar foto */
.char-avatar-edit-btn {
position: absolute;
bottom: 4px;
right: 4px;
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
border: 2px solid #16092b;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
transition: transform 0.15s, filter 0.15s;
z-index: 3;
}
.char-avatar-edit-btn:hover { filter: brightness(1.15); transform: scale(1.08); }
.char-avatar-edit-btn:active { transform: scale(0.94); }
.char-avatar-edit-btn i { font-size: 15px; }
/* Modal de avatar */
.av-preview-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.av-preview {
width: 140px;
height: 140px;
border-radius: 50%;
background: #000;
border: 3px solid var(--gold);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(233,185,99,0.3), inset 0 0 14px rgba(0,0,0,0.4);
}
.av-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-preview i { font-size: 56px; color: rgba(255,255,255,0.3); }
.av-hint {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
font-weight: 700;
}
.av-cost-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
padding: 8px 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(233,185,99,0.2);
border-radius: 8px;
}
.av-cost-row i { font-size: 13px; }
.av-cost-row .ml-2 { margin-left: auto; }
.hero-vip-crown {
position: absolute;
top: -8px;
right: -8px;
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(180deg, #f0c674, #b97f2e);
display: flex;
align-items: center;
justify-content: center;
color: #2a1a00;
font-size: 18px;
border: 3px solid #16092b;
box-shadow: 0 4px 12px rgba(233,185,99,0.5);
}
.hero-level-badge {
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
font-family: var(--font-title);
font-size: 12px;
font-weight: 800;
padding: 4px 14px;
border-radius: 99px;
letter-spacing: 0.08em;
border: 2px solid #16092b;
box-shadow: 0 4px 10px rgba(233,185,99,0.4);
white-space: nowrap;
}
.hero-banner-info { flex: 1; min-width: 0; }
.hero-banner-name {
font-family: var(--font-title);
font-size: 32px;
font-weight: 900;
letter-spacing: 0.06em;
color: var(--text);
text-transform: uppercase;
text-shadow: 0 0 24px rgba(233,185,99,0.4);
line-height: 1.1;
margin-bottom: 12px;
}
.hero-banner-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hb-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 99px;
padding: 5px 14px;
font-family: var(--font-title);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.hb-pill i { font-size: 12px; }
.hb-pill-clan { color: var(--cyan); border-color: rgba(86,200,255,0.4); background: rgba(86,200,255,0.1); }
.hb-pill-vip {
color: #2a1a00;
background: linear-gradient(180deg, #f0c674, #b97f2e);
border-color: var(--gold);
box-shadow: 0 2px 8px rgba(233,185,99,0.4);
}
.hb-pill-dead { color: var(--blood); border-color: rgba(225,80,90,0.5); background: rgba(225,80,90,0.1); }
/* XP bar dentro del banner */
.hero-banner-xp {
position: relative;
margin-top: 22px;
padding-top: 18px;
border-top: 1px dashed rgba(233,185,99,0.2);
}
.hb-xp-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.hb-xp-label {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 6px;
}
.hb-xp-label i { font-size: 13px; }
.hb-xp-value {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.hb-xp-bar {
position: relative;
height: 14px;
background: rgba(0,0,0,0.6);
border: 1px solid rgba(233,185,99,0.25);
border-radius: 99px;
overflow: hidden;
margin-bottom: 6px;
}
.hb-xp-fill {
height: 100%;
background: linear-gradient(90deg, #b97f2e 0%, #f0c674 50%, #ffe8b3 100%);
box-shadow: 0 0 14px rgba(233,185,99,0.6);
border-radius: 99px;
transition: none; /* GSAP toma control */
}
.hb-xp-pct {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 800;
color: var(--text);
text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.hb-xp-next {
text-align: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
}
/* ============================================================================
STATS HUB — una card unificada con secciones
============================================================================ */
.stats-hub {
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,6,22,0.95));
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 0;
/* overflow: visible — antes era hidden, bloqueaba el scroll del main-area en algunos browsers */
overflow: visible;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
/* Primera/última sección redondean los bordes para mantener efecto del card */
.stats-hub .stats-section:first-child {
border-top-left-radius: var(--r-xl);
border-top-right-radius: var(--r-xl);
}
.stats-hub .stats-section:last-child {
border-bottom-left-radius: var(--r-xl);
border-bottom-right-radius: var(--r-xl);
}
.stats-section {
padding: 18px 22px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.stats-section:last-child { border-bottom: none; }
.stats-section-header {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-title);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
margin-bottom: 14px;
}
.stats-section-header > i {
font-size: 16px;
color: var(--gold);
filter: drop-shadow(0 0 6px rgba(233,185,99,0.4));
}
.stats-section-header > span { flex: 1; }
.stats-section-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 800;
padding: 3px 10px;
border-radius: 99px;
letter-spacing: 0.05em;
text-transform: none;
box-shadow: 0 2px 8px rgba(233,185,99,0.4);
animation: pulseBadge 2s ease-in-out infinite;
}
.stats-section-badge i { font-size: 11px; }
@keyframes pulseBadge {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
/* Vitales — barras horizontales inline */
.vitals-bars {
display: flex;
flex-direction: column;
gap: 10px;
}
.vital-line {
display: grid;
grid-template-columns: 28px 80px 1fr 100px auto;
align-items: center;
gap: 12px;
}
.vital-line-icon {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.vital-line-icon.hp { background: rgba(225,80,90,0.15); color: #f8838e; }
.vital-line-icon.mp { background: rgba(86,200,255,0.15); color: #4cc4ff; }
.vital-line-icon.sta { background: rgba(233,185,99,0.15); color: var(--gold); }
.vital-line-name {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
.vital-line-bar {
height: 12px;
background: rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 99px;
overflow: hidden;
}
.vital-line-fill {
height: 100%;
border-radius: 99px;
transition: none;
}
.vital-line-fill.hp { background: linear-gradient(90deg, #b9303a, #f8838e); box-shadow: 0 0 8px rgba(225,80,90,0.4); }
.vital-line-fill.mp { background: linear-gradient(90deg, #1f7fc7, #4cc4ff); box-shadow: 0 0 8px rgba(86,200,255,0.4); }
.vital-line-fill.sta { background: linear-gradient(90deg, #b97f2e, #f0c674); box-shadow: 0 0 8px rgba(233,185,99,0.4); }
.vital-line-val {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
text-align: right;
color: var(--text);
}
/* Timer de regen al COSTADO DERECHO de cada barra (HP/MP/Stamina) */
.vital-line-timer {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-left: 4px;
font-size: 11px;
color: var(--text-muted, #aaa);
font-family: var(--font-mono, monospace);
white-space: nowrap;
}
.vital-line-timer .vlt-eta-wrap {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--text);
font-weight: 700;
}
.vital-line-timer .vlt-eta-wrap i { font-size: 12px; color: var(--text-muted); }
.vital-line-timer .vlt-eta {
font-variant-numeric: tabular-nums;
min-width: 50px;
display: inline-block;
}
.vital-line-timer .vlt-full {
display: inline-flex;
align-items: center;
gap: 4px;
color: #5fd684;
font-weight: 800;
}
.vital-line-timer .vlt-full i { font-size: 12px; }
.vital-line-timer .vlt-bonus {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border-radius: 99px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.04);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.vital-line-timer .vlt-bonus i { font-size: 10px; }
.vital-line-timer .vlt-bonus.is-hp {
background: rgba(225,80,90,0.10);
border-color: rgba(225,80,90,0.45);
color: #f8838e;
}
.vital-line-timer .vlt-bonus.is-mp {
background: rgba(86,200,255,0.10);
border-color: rgba(86,200,255,0.45);
color: #4cc4ff;
}
.vital-line-timer .vlt-bonus.is-stamina {
background: rgba(233,185,99,0.10);
border-color: rgba(233,185,99,0.45);
color: var(--gold, #e9b963);
}
.vital-line-timer .vlt-bonus.is-neutral {
color: var(--text-muted, #aaa);
}
.vital-line-timer .vlt-bonus.is-wild {
background: rgba(95,214,132,0.06);
border-color: rgba(95,214,132,0.25);
color: #8fc8a4;
}
/* 2026-05-19: pill del bonus del Árbol de Skills — violeta para diferenciarlo
de los pills de zona/wild. Aparece al lado del pill de ciudad cuando el char
tiene puntos asignados en stamina_regen/hp_regen/mp_regen. */
.vital-line-timer .vlt-bonus.is-tree {
background: rgba(155, 109, 255, 0.12);
border-color: rgba(155, 109, 255, 0.45);
color: #c8a8ff;
}
/* En mobile: el timer se va a su propia fila debajo (grid colapsa a 4 col) */
@media (max-width: 720px) {
.vital-line {
grid-template-columns: 28px 80px 1fr 100px; /* sin la 5ta col */
}
.vital-line-timer {
grid-column: 3 / -1; /* desde el bar hasta el final */
justify-content: flex-end;
margin-top: 2px;
margin-left: 0;
}
}
@media (max-width: 480px) {
.vital-line-timer { gap: 6px; }
.vital-line-timer .vlt-bonus { font-size: 9px; }
}
/* Combat stats grid (también usado para Historial) */
.combat-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.cs-cell {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
padding: 14px 8px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
transition: transform 0.15s, border-color 0.15s;
}
.cs-cell:hover {
border-color: rgba(233,185,99,0.4);
transform: translateY(-2px);
}
.cs-cell > i {
font-size: 22px;
color: var(--gold);
margin-bottom: 4px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.cs-val {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.cs-label {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 2px;
}
/* Atributos primarios */
.attrs-block {
display: flex;
flex-direction: column;
gap: 6px;
}
.attr-row-pro {
display: grid;
grid-template-columns: 36px 1fr auto 44px;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, background 0.15s;
}
.attr-row-pro.is-actionable {
border-color: rgba(233,185,99,0.25);
background: linear-gradient(90deg, rgba(233,185,99,0.06), rgba(233,185,99,0.01));
}
.attr-row-pro .attr-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--gold);
border-radius: 50%;
background: rgba(233,185,99,0.12);
}
.attr-row-pro .attr-name {
font-family: var(--font-title);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text);
}
.attr-row-pro .attr-val-big {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 800;
color: var(--gold);
text-align: right;
text-shadow: 0 0 8px rgba(233,185,99,0.3);
min-width: 36px;
display: flex;
align-items: baseline;
gap: 4px;
justify-content: flex-end;
flex-wrap: nowrap;
}
.attr-row-pro .attr-val-base { color: var(--gold); }
.attr-row-pro .attr-val-bonus {
font-size: 13px;
font-weight: 700;
color: #58d68d;
text-shadow: 0 0 6px rgba(88,214,141,0.45);
}
.attr-row-pro .attr-val-bonus.is-neg { color: #e74c3c; text-shadow: 0 0 6px rgba(231,76,60,0.45); }
/* Botón + */
.attr-plus {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid var(--gold);
background: linear-gradient(180deg, rgba(233,185,99,0.22), rgba(233,185,99,0.06));
color: var(--gold);
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
-webkit-appearance: none;
appearance: none;
transition: transform 0.12s, background 0.15s, box-shadow 0.15s;
}
.attr-plus:hover:not(:disabled) {
background: linear-gradient(180deg, var(--gold), #b97f2e);
color: #2a1a00;
box-shadow: 0 4px 12px rgba(233,185,99,0.5);
transform: scale(1.06);
}
.attr-plus:active:not(:disabled) { transform: scale(0.92); }
.attr-plus:disabled {
opacity: 0.18;
cursor: not-allowed;
border-color: rgba(255,255,255,0.08);
background: rgba(0,0,0,0.3);
color: var(--text-dim);
display: none; /* ocultar completamente cuando no hay puntos */
}
.attr-row-pro:not(.is-actionable) {
grid-template-columns: 36px 1fr auto; /* sin botón */
}
/* Botón "Reset" en el header de Atributos primarios */
.attr-respec-btn {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
font-family: var(--font-title);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text);
background: transparent;
border: 1px solid rgba(232,90,106,0.5);
border-radius: 999px;
cursor: pointer;
transition: transform 0.15s, background 0.15s, color 0.15s;
}
.attr-respec-btn:hover {
background: rgba(232,90,106,0.15);
color: #ffaeb6;
transform: translateY(-1px);
}
.attr-respec-btn i { font-size: 12px; color: #e85a6a; }
.attr-respec-btn + .attr-buy-btn { margin-left: 8px !important; }
/* Botón "Comprar puntos" en el header de Atributos primarios */
.attr-buy-btn {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
font-family: var(--font-title);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #2a1a00;
background: linear-gradient(180deg, #f5d27d, #c89544);
border: 1px solid #f8e1a0;
border-radius: 999px;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 8px rgba(233,185,99,0.3);
}
.attr-buy-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(233,185,99,0.5);
}
.attr-buy-btn:active { transform: translateY(0); }
.attr-buy-btn i { font-size: 12px; }
/* ─────────────────────────────────────────────────────────────────────
Mobile: el header de Atributos primarios tiene icono + título +
badge "X puntos por gastar" + Reset + Comprar. En anchos chicos no
entra todo en una fila → wrap a dos líneas (título arriba,
badge+botones abajo, distribuidos parejos).
───────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
.stats-section-header:has(.attr-respec-btn),
.stats-section-header:has(.attr-buy-btn) {
flex-wrap: wrap;
row-gap: 8px;
}
.stats-section-header:has(.attr-respec-btn) > span,
.stats-section-header:has(.attr-buy-btn) > span {
flex: 1 1 calc(100% - 28px);
min-width: 0;
}
.stats-section-header .stats-section-badge {
flex: 1 1 auto;
margin-left: 0;
text-align: center;
justify-content: center;
font-size: 10px;
padding: 4px 10px;
}
.stats-section-header .attr-respec-btn,
.stats-section-header .attr-buy-btn {
margin-left: 0 !important;
flex: 0 0 auto;
padding: 5px 11px;
font-size: 10.5px;
}
.stats-section-header .attr-respec-btn + .attr-buy-btn { margin-left: 0 !important; }
}
@media (max-width: 380px) {
.stats-section-header .attr-respec-btn span,
.stats-section-header .attr-buy-btn span { display: none; }
.stats-section-header .attr-respec-btn,
.stats-section-header .attr-buy-btn { padding: 6px 10px; }
.stats-section-header .stats-section-badge {
flex: 1 1 100%;
order: 99;
}
}
/* ============================================================================
CRAFTING TABLE V2 — Mesa estilo Minecraft (6 slots + materiales + recetas)
============================================================================ */
.ctab-layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: 14px;
align-items: start;
}
@media (max-width: 900px) { .ctab-layout { grid-template-columns: 1fr; } }
.ctab-main {
display: grid;
grid-template-columns: auto 32px 1fr;
gap: 14px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 18px;
align-items: center;
}
@media (max-width: 600px) { .ctab-main { grid-template-columns: 1fr; gap: 10px; } }
.ctab-grid {
display: grid;
/* auto-fit: tantas columnas como entren con min 76px. Recetas con 3-8
ingredientes se acomodan en 1-2 filas sin cortar nada. */
grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
gap: 6px;
width: 100%;
max-width: 360px;
}
@media (max-width: 600px) { .ctab-grid { max-width: 100%; } }
.ctab-slot {
aspect-ratio: 1 / 1;
background: rgba(0,0,0,0.6);
border: 2px solid rgba(255,255,255,0.06);
border-radius: var(--r-sm);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4px;
position: relative;
transition: border-color 0.15s, background 0.15s;
}
.ctab-slot-qty {
position: absolute;
top: 2px;
right: 4px;
font-size: 11px;
font-weight: 800;
color: var(--gold);
text-shadow: 0 0 4px rgba(0,0,0,0.9);
font-family: var(--font-mono);
}
.ctab-slot-have {
position: absolute;
bottom: 18px;
left: 4px;
font-size: 9px;
font-family: var(--font-mono);
padding: 1px 4px;
border-radius: 99px;
background: rgba(0,0,0,0.6);
}
.ctab-slot-have.is-ok { color: var(--green); }
.ctab-slot-have.is-missing { color: var(--blood); }
.ctab-slot.is-empty {
background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 6px, transparent 6px 12px);
}
.ctab-slot.is-ok {
border-color: var(--green);
background: rgba(95,214,132,0.1);
}
.ctab-slot.is-missing {
border-color: var(--blood);
background: rgba(232,90,106,0.1);
}
.ctab-slot-icon {
font-size: 28px;
filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
}
.ctab-slot-name {
font-size: 10px;
color: var(--text-muted);
text-align: center;
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.ctab-arrow {
font-size: 28px;
color: var(--gold);
text-align: center;
}
@media (max-width: 600px) {
.ctab-arrow { transform: rotate(90deg); margin: 8px auto; }
}
.ctab-output {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.ctab-out-card {
background: rgba(0,0,0,0.6);
border: 2px solid var(--gold);
border-radius: var(--r-md);
padding: 12px 16px;
text-align: center;
min-width: 140px;
position: relative;
}
.ctab-out-icon { font-size: 36px; margin-bottom: 4px; }
.ctab-out-name {
font-family: var(--font-title);
font-size: 13px;
font-weight: 700;
}
.ctab-out-qty {
position: absolute;
bottom: 4px;
right: 6px;
font-family: var(--font-mono);
font-weight: 800;
color: var(--text);
background: rgba(0,0,0,0.7);
padding: 1px 6px;
border-radius: 4px;
font-size: 12px;
}
.ctab-cost {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 5px;
}
.ctab-cost i { color: var(--gold); }
.ctab-lvl-warn { color: var(--blood); margin-left: 8px; font-size: 12px; }
.ctab-craft-btn {
width: 100%;
margin-top: 6px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-family: var(--font-title);
font-weight: 800;
}
.ctab-side {
background: rgba(0,0,0,0.4);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 12px 14px;
}
.ctab-side-title {
font-family: var(--font-title);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.ctab-mats {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 360px;
overflow-y: auto;
}
.ctab-mat {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
background: rgba(0,0,0,0.45);
border: 1px solid var(--border);
border-radius: var(--r-sm);
}
.ctab-mat-icon {
font-size: 18px;
width: 26px;
text-align: center;
}
.ctab-mat-info { flex: 1; min-width: 0; }
.ctab-mat-name {
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ctab-mat-qty {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
/* Lista inferior de recetas */
.ctab-recipes {
margin-top: 14px;
padding: 14px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-radius: var(--r-md);
}
.ctab-recipes-title {
font-family: var(--font-title);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.ctab-recipes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px;
}
.ctab-recipe {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: rgba(0,0,0,0.5);
border: 1px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
transition: all 0.15s;
position: relative;
}
.ctab-recipe:hover {
border-color: var(--border-strong);
background: rgba(0,0,0,0.7);
}
.ctab-recipe.is-selected {
border-color: var(--gold);
background: rgba(233,185,99,0.1);
box-shadow: 0 0 12px rgba(233,185,99,0.3);
}
.ctab-recipe.is-locked {
opacity: 0.5;
filter: grayscale(0.7);
}
.ctab-recipe.is-craftable .ctab-recipe-tick {
color: var(--green);
}
.ctab-recipe-icon {
font-size: 20px;
width: 28px;
text-align: center;
}
/* 2026-05-15: cuando _iconFor() devuelve una .item-image (con la imagen PNG)
en vez de un iconify-icon, hay que darle dimensiones — los font-size del
contenedor solo afectan iconos vectoriales. */
.ctab-slot-icon .item-image,
.ctab-mat-icon .item-image,
.ctab-recipe-icon .item-image,
.ctab-recipe-mat .item-image {
display: inline-block;
width: 1em;
height: 1em;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
vertical-align: middle;
}
.ctab-out-icon .item-image {
display: inline-block;
width: 56px;
height: 56px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
.ctab-slot-icon .item-image { width: 32px; height: 32px; }
.ctab-mat-icon .item-image { width: 24px; height: 24px; }
.ctab-recipe-icon .item-image { width: 26px; height: 26px; }
.ctab-recipe-mat .item-image { width: 18px; height: 18px; }
.ctab-recipe-info { flex: 1; min-width: 0; }
.ctab-recipe-name {
font-family: var(--font-title);
font-size: 13px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ctab-recipe-meta {
font-size: 11px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 8px;
margin-top: 2px;
font-family: var(--font-mono);
}
.ctab-recipe-meta i { color: var(--gold); }
.ctab-recipe-gold.is-missing { color: #e85a6a; }
.ctab-recipe-gold.is-missing i { color: #e85a6a; }
/* 2026-05-08: chips de materiales en cada recipe card */
.ctab-recipe-mats {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 5px;
}
.ctab-recipe-mat {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10.5px;
font-family: var(--font-mono);
font-weight: 600;
padding: 2px 6px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text-muted);
}
.ctab-recipe-mat i { font-size: 11px; }
.ctab-recipe-mat.is-ok {
background: rgba(95, 214, 132, 0.12);
border-color: rgba(95, 214, 132, 0.35);
color: #a8e8b9;
}
.ctab-recipe-mat.is-ok i { color: #5fd684; }
.ctab-recipe-mat.is-missing {
background: rgba(232, 90, 106, 0.10);
border-color: rgba(232, 90, 106, 0.30);
color: #f4a8b1;
}
.ctab-recipe-mat.is-missing i { color: #e85a6a; }
/* 2026-05-08: Modal "Costos por nivel" */
.ct-cost-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: 13px;
margin-bottom: 14px;
}
.ct-cost-table th, .ct-cost-table td {
padding: 8px 12px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ct-cost-table th {
background: rgba(255,255,255,0.04);
color: var(--text-muted);
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ct-cost-table td i { color: var(--gold); margin-right: 4px; }
.ct-cost-table tr.is-current {
background: linear-gradient(90deg, rgba(233,185,99,0.18), rgba(233,185,99,0.06));
font-weight: 700;
}
.ct-cost-table tr.is-current td:first-child::before {
content: '▶ ';
color: var(--gold);
}
.ct-cost-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.ct-cost-note h4 {
font-size: 13px;
margin: 0 0 6px;
color: var(--gold);
}
.ct-cost-stam-list {
list-style: none;
padding: 0;
margin: 8px 0 0;
font-size: 12px;
font-family: var(--font-mono);
}
.ct-cost-stam-list li { padding: 3px 0; }
.ct-cost-example {
margin-top: 12px;
padding: 10px 12px;
background: rgba(78,195,247,0.10);
border: 1px solid rgba(78,195,247,0.25);
border-radius: 8px;
font-size: 12.5px;
color: var(--text-muted);
}
.ct-cost-example i { color: #4cc4ff; margin-right: 6px; }
.ctab-recipe-tick {
font-size: 18px;
position: absolute;
top: 6px;
right: 8px;
}
/* ============================================================================
ITEMS ÚNICOS (rolled items) — pills y marca en el grid
============================================================================ */
.item-meta-pill.item-meta-unique {
background: linear-gradient(180deg, rgba(255, 210, 74, 0.25), rgba(255, 175, 60, 0.18));
border: 1px solid #ffd24a;
color: #ffd24a;
font-weight: 800;
letter-spacing: 0.12em;
text-shadow: 0 0 6px rgba(255, 210, 74, 0.5);
animation: cc-pulse-soft 2s ease-in-out infinite;
}
/* Item roto (vencido) */
.item-meta-pill.item-meta-broken {
background: rgba(225,80,90,0.15);
border: 1px solid rgba(225,80,90,0.55);
color: #ff5c7c;
font-weight: 800;
letter-spacing: 0.12em;
}
/* Banner descriptivo de expiración (en el body del modal) */
.item-expiry-banner {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
margin-bottom: 12px;
border-radius: 10px;
background: rgba(108,212,255,0.08);
border: 1px solid rgba(108,212,255,0.40);
}
.item-expiry-banner i {
font-size: 22px;
color: #6cd4ff;
flex-shrink: 0;
filter: drop-shadow(0 0 4px rgba(108,212,255,0.4));
}
.item-expiry-banner .item-expiry-text {
font-size: 12.5px;
line-height: 1.4;
color: var(--text);
}
.item-expiry-banner .item-expiry-text b {
color: #6cd4ff;
}
.item-expiry-banner.is-urgent {
background: rgba(255,170,80,0.10);
border-color: rgba(255,170,80,0.55);
animation: cc-pulse-soft 1.8s ease-in-out infinite;
}
.item-expiry-banner.is-urgent i { color: #ffaa50; }
.item-expiry-banner.is-urgent .item-expiry-text b { color: #ffaa50; }
.item-expiry-banner.is-broken {
background: rgba(225,80,90,0.10);
border-color: rgba(225,80,90,0.55);
}
.item-expiry-banner.is-broken i { color: #ff5c7c; }
.item-expiry-banner.is-broken .item-expiry-text b { color: #ff5c7c; }
/* Botón "Ver Loot" — pill clickeable */
.cmc-pill.cmc-pill-loot-btn {
background: rgba(233,185,99,0.15);
border: 1px solid rgba(233,185,99,0.4);
color: var(--gold);
cursor: pointer;
font-family: var(--font-body);
font-weight: 600;
padding: 4px 10px;
display: inline-flex;
align-items: center;
gap: 5px;
transition: all 0.15s;
}
.cmc-pill.cmc-pill-loot-btn:hover {
background: rgba(233,185,99,0.3);
border-color: var(--gold);
transform: translateY(-1px);
}
.cmc-pill.cmc-pill-loot-btn .cmc-loot-count {
background: rgba(0,0,0,0.45);
border-radius: 999px;
padding: 1px 7px;
font-size: 11px;
font-family: var(--font-mono);
font-weight: 700;
margin-left: 2px;
}
/* Modal de loot */
.loot-modal {
max-width: 480px;
width: 92vw;
max-height: 85vh;
display: flex;
flex-direction: column;
padding: 18px 20px 16px;
background: linear-gradient(180deg, rgba(33,20,58,0.98), rgba(15,8,30,0.98));
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
position: relative;
}
.loot-modal-header {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
margin-bottom: 12px;
}
.loot-modal-title {
font-family: var(--font-title);
font-size: 18px;
font-weight: 800;
color: var(--text);
}
.loot-modal-sub {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.loot-modal-body {
flex: 1;
overflow-y: auto;
padding-right: 4px;
margin-bottom: 10px;
}
.loot-section-title {
font-family: var(--font-title);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin: 12px 0 6px;
display: flex;
align-items: center;
gap: 6px;
}
.loot-section-title:first-child { margin-top: 0; }
.loot-rows {
display: flex;
flex-direction: column;
gap: 4px;
}
.loot-row {
display: grid;
grid-template-columns: 32px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--border);
border-radius: var(--r-sm);
transition: border-color 0.15s;
}
.loot-row:hover { border-color: var(--border-strong); }
.loot-row-icon {
font-size: 22px;
color: var(--gold);
}
.loot-row-name {
font-size: 13.5px;
font-weight: 600;
}
.loot-row-desc {
font-size: 11px;
margin-top: 1px;
text-transform: capitalize;
}
.loot-row-cap {
display: inline-block;
margin-left: 2px;
padding: 1px 6px;
border-radius: 99px;
background: rgba(108,212,255,0.10);
border: 1px solid rgba(108,212,255,0.40);
color: #6cd4ff;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: none;
}
.loot-row-cap.is-maxed {
background: rgba(225,80,90,0.10);
border-color: rgba(225,80,90,0.40);
color: #f8838e;
}
/* 2026-05-25: estado "ya conseguiste todos" — verde brillante, reemplaza el % */
.loot-row-cap-done {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 99px;
background: linear-gradient(180deg, rgba(95,214,132,0.18), rgba(95,214,132,0.08));
border: 1px solid rgba(95,214,132,0.55);
color: #8ee5a8;
font-family: 'Cinzel', serif;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 0 12px rgba(95,214,132,0.18);
}
.loot-row-cap-done i {
font-size: 13px;
color: #5fd684;
filter: drop-shadow(0 0 4px rgba(95,214,132,0.7));
}
/* La row entera atenúa un poco cuando el cap está completo, para señalizar
que ya no rinde frutos sin perder la información visible. */
.loot-row.is-cap-completed { opacity: 0.78; }
.loot-row.is-cap-completed .loot-row-name { opacity: 0.85; }
.loot-row-chance.is-completed { display: flex; align-items: center; justify-content: flex-end; }
/* 2026-05-15: row grisada cuando el char está overlevel +16 y el loot está bloqueado.
El loot regular siempre se grisa. SP/uniques solo si llegaron al cap. */
.loot-row.is-overlevel-locked {
opacity: 0.42;
filter: grayscale(0.7);
pointer-events: none;
}
.loot-row.is-overlevel-locked .loot-row-name { color: rgba(255,255,255,0.55) !important; }
.loot-row.is-overlevel-locked .loot-row-desc { color: rgba(255,255,255,0.35) !important; }
.loot-row.is-overlevel-locked .loot-row-icon { color: rgba(180,180,180,0.5) !important; }
/* 2026-05-16: "Ver cofre" botón dentro de loot-row para cofres */
.loot-row.is-chest { border-color: rgba(168,85,247,0.25); }
.loot-row-chest-btn {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 5px;
padding: 3px 8px;
font-size: 11px;
font-weight: 600;
background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(124,58,237,0.22));
border: 1px solid rgba(168,85,247,0.45);
border-radius: 99px;
color: #d8b4fe;
cursor: pointer;
font-family: inherit;
transition: all 0.15s;
letter-spacing: 0.02em;
}
.loot-row-chest-btn:hover {
background: linear-gradient(135deg, rgba(168,85,247,0.28), rgba(124,58,237,0.32));
border-color: rgba(192,132,252,0.7);
color: #fff;
transform: translateY(-1px);
}
.loot-row-chest-btn i { font-size: 11px; }
/* ===== Chest contents modal ===== */
.chest-modal-overlay {
z-index: 10010; /* arriba del loot-modal */
}
.chest-modal {
max-width: 540px;
padding: 18px;
background: linear-gradient(160deg, #1a1226 0%, #0e0817 100%);
border: 1px solid rgba(168,85,247,0.35);
border-radius: 16px;
max-height: 88vh;
display: flex;
flex-direction: column;
}
.chest-modal-loading {
padding: 40px 20px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
}
.chest-modal-header {
display: flex;
gap: 14px;
align-items: center;
padding-bottom: 14px;
margin-bottom: 12px;
border-bottom: 1px solid rgba(168,85,247,0.18);
}
.chest-modal-icon {
width: 64px; height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.4);
border: 2px solid;
border-radius: 12px;
font-size: 38px;
flex-shrink: 0;
}
.chest-modal-icon iconify-icon.gi { width: 1em; height: 1em; }
.chest-modal-info { flex: 1; min-width: 0; }
.chest-modal-title {
font-family: var(--font-title);
font-size: 19px;
font-weight: 800;
letter-spacing: 0.04em;
}
.chest-modal-sub {
display: flex;
gap: 10px;
align-items: center;
margin-top: 6px;
font-size: 11px;
}
.chest-rolls-badge {
display: inline-block;
padding: 3px 10px;
background: rgba(168,85,247,0.15);
border: 1px solid rgba(168,85,247,0.4);
border-radius: 99px;
color: #c4b5fd;
font-weight: 700;
letter-spacing: 0.03em;
}
.chest-modal-body {
overflow-y: auto;
flex: 1;
padding-right: 4px;
}
.chest-note {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 9px 12px;
background: rgba(168,85,247,0.06);
border-left: 3px solid rgba(168,85,247,0.5);
border-radius: 4px;
font-size: 12px;
color: var(--text-muted);
margin-bottom: 14px;
line-height: 1.45;
}
.chest-note i { color: #a855f7; margin-top: 2px; }
.chest-group {
margin-bottom: 14px;
}
.chest-group-title {
font-family: var(--font-title);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 6px;
padding-left: 4px;
}
.chest-group-title.r-common { color: #b9bcc4; }
.chest-group-title.r-uncommon { color: #5fd684; }
.chest-group-title.r-rare { color: #6cd4ff; }
.chest-group-title.r-epic { color: #b884ff; }
.chest-group-title.r-legendary { color: #ffd24a; }
.chest-group-title.r-mythic { color: #ff5c7c; }
.chest-group-rows {
display: flex;
flex-direction: column;
gap: 4px;
}
/* 2026-05-19: agrupado por rareza en el modal de loot del mob/boss
(mismo estilo que .chest-group-title arriba) */
.loot-rarity-group {
margin-bottom: 10px;
}
.loot-rarity-title {
font-family: var(--font-title);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 6px 0 4px;
padding-left: 4px;
}
.loot-rarity-title.r-common { color: #b9bcc4; }
.loot-rarity-title.r-uncommon { color: #5fd684; }
.loot-rarity-title.r-rare { color: #6cd4ff; }
.loot-rarity-title.r-epic { color: #b884ff; }
.loot-rarity-title.r-legendary { color: #ffd24a; }
.loot-rarity-title.r-mythic { color: #ff5c7c; }
.chest-row {
display: grid;
grid-template-columns: 30px 1fr auto;
align-items: center;
gap: 10px;
padding: 6px 10px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 6px;
}
.chest-row-icon { font-size: 22px; }
.chest-row-info { min-width: 0; }
.chest-row-name {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chest-row-meta {
font-size: 10px;
color: var(--text-muted);
margin-top: 1px;
}
.chest-row-pct {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
}
.chest-row-pct.r-common { color: #b9bcc4; }
.chest-row-pct.r-uncommon { color: #5fd684; }
.chest-row-pct.r-rare { color: #6cd4ff; }
.chest-row-pct.r-epic { color: #b884ff; }
.chest-row-pct.r-legendary { color: #ffd24a; }
.chest-row-pct.r-mythic { color: #ff5c7c; }
/* 2026-05-18: entrada "Item Único Rolled" en cofres common/uncommon — destaca
con borde brillante, ícono de sparkle y subtítulo extra explicando que es
un item con stats random y expiración 20 días. */
.chest-row.chest-row-rolled {
background: linear-gradient(120deg, rgba(255,210,74,0.06), rgba(255,255,255,0.02));
border-color: rgba(255,210,74,0.32);
box-shadow: 0 0 12px rgba(255,210,74,0.08) inset;
}
.chest-row.chest-row-rolled.r-uncommon {
background: linear-gradient(120deg, rgba(95,214,132,0.10), rgba(255,255,255,0.02));
border-color: rgba(95,214,132,0.4);
box-shadow: 0 0 12px rgba(95,214,132,0.10) inset;
}
.chest-rolled-icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
filter: drop-shadow(0 0 6px currentColor);
}
.chest-rolled-icon.r-common { color: #d6d6d6; }
.chest-rolled-icon.r-uncommon { color: #5fd684; }
.chest-rolled-meta {
color: #ffe28a !important;
font-weight: 600;
font-style: italic;
}
.chest-row.chest-row-rolled.r-uncommon .chest-rolled-meta { color: #aef0c0 !important; }
.chest-rolled-pool {
font-size: 9.5px;
color: var(--text-dim);
margin-top: 2px;
white-space: normal;
line-height: 1.3;
}
body.mobile-mode .chest-modal { max-width: 96%; padding: 14px; }
body.mobile-mode .chest-modal-icon { width: 54px; height: 54px; font-size: 32px; }
body.mobile-mode .chest-modal-title { font-size: 16px; }
.loot-row-overlevel {
display: inline-block;
padding: 3px 10px;
font-family: var(--font-title);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #ff8898;
background: rgba(225,80,90,0.14);
border: 1px solid rgba(225,80,90,0.4);
border-radius: 999px;
white-space: nowrap;
}
.loot-overlevel-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
margin: 0 0 12px;
background: linear-gradient(180deg, rgba(225,80,90,0.16), rgba(120,30,40,0.14));
border: 1px solid rgba(225,80,90,0.45);
border-left: 4px solid #ff5a78;
border-radius: 10px;
color: #ffc4cc;
font-size: 12.5px;
line-height: 1.4;
}
.loot-overlevel-banner i { font-size: 18px; color: #ff8898; flex-shrink: 0; }
.loot-row-chance {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 800;
color: var(--gold);
padding: 3px 10px;
background: rgba(233,185,99,0.12);
border-radius: 999px;
border: 1px solid rgba(233,185,99,0.3);
min-width: 52px;
text-align: center;
}
.loot-row-chance.is-guaranteed {
background: rgba(95,214,132,0.15);
border-color: var(--green);
color: var(--green);
}
/* 2026-05-14: chance viejo tachado + nuevo (con bonus de skill tree loot_chance/rare_find).
Layout APILADO en dos líneas: nuevo grande arriba, viejo tachado chico abajo. */
.loot-row-chance.has-bonus {
background: rgba(95,214,132,0.12);
border-color: rgba(95,214,132,0.45);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: 4px 10px;
min-width: 62px;
line-height: 1.05;
}
.loot-row-chance-new {
display: block;
font-size: 14px;
font-weight: 800;
color: #5fd684;
text-shadow: 0 0 6px rgba(95,214,132,0.45);
line-height: 1;
}
.loot-row-chance-old {
display: block;
font-size: 10px;
font-weight: 600;
color: rgba(255,255,255,0.40);
text-decoration: line-through;
letter-spacing: 0.01em;
line-height: 1;
}
/* 2026-05-17: badge "+4% overlevel" en la fila de SP cuando el char está
16+ niveles arriba del enemigo (la chance se duplica). */
.loot-row-overlevel-bonus {
display: inline-block;
margin-left: 8px;
padding: 2px 7px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(157,108,255,0.25), rgba(192,132,252,0.30));
border: 1px solid rgba(157,108,255,0.55);
color: #d4b3ff;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
vertical-align: middle;
text-shadow: 0 0 6px rgba(157,108,255,0.6);
}
.loot-row.has-overlevel-bonus {
border-color: rgba(157,108,255,0.7) !important;
background: linear-gradient(90deg, rgba(157,108,255,0.14), rgba(157,108,255,0.08)) !important;
box-shadow: 0 0 12px rgba(157,108,255,0.25);
}
.loot-row-chance.has-bonus .loot-row-chance-new { color: #c39dff; text-shadow: 0 0 8px rgba(195,157,255,0.6); }
.loot-row.loot-row-unique {
background: rgba(255,210,74,0.08);
border-color: rgba(255,210,74,0.4);
}
/* Pill "Item Único" en lista de monstruos */
.cmc-pill.cmc-pill-unique {
background: linear-gradient(180deg, rgba(255, 210, 74, 0.22), rgba(255, 175, 60, 0.12));
border: 1px solid #ffd24a;
color: #ffd24a;
font-weight: 700;
text-shadow: 0 0 4px rgba(255, 210, 74, 0.4);
box-shadow: 0 0 8px rgba(255, 210, 74, 0.25);
animation: cc-pulse-soft 2s ease-in-out infinite;
}
.cmc-pill.cmc-pill-unique i { color: #ffd24a; }
/* Unique COMÚN — outline gris/blanco (rareza common) */
.inv-cell.is-unique.is-unique-common {
outline: 1.5px solid #c4c4c4 !important;
box-shadow: 0 0 10px rgba(196, 196, 196, 0.40) !important;
}
.inv-cell.is-unique.is-unique-common .unique-mark {
color: #dcdcdc;
filter: drop-shadow(0 0 3px rgba(196, 196, 196, 0.7));
}
/* Unique UNCOMMON — outline verde */
.inv-cell.is-unique.is-unique-uncommon {
outline: 1.5px solid #5fd684 !important;
box-shadow: 0 0 12px rgba(95, 214, 132, 0.50) !important;
}
.inv-cell.is-unique.is-unique-uncommon .unique-mark {
color: #5fd684;
filter: drop-shadow(0 0 3px rgba(95, 214, 132, 0.8));
}
/* 2026-05-19: Unique RARE — outline azul */
.inv-cell.is-unique.is-unique-rare {
outline: 1.5px solid #5aa6ff !important;
box-shadow: 0 0 14px rgba(90, 166, 255, 0.55) !important;
}
.inv-cell.is-unique.is-unique-rare .unique-mark {
color: #5aa6ff;
filter: drop-shadow(0 0 3px rgba(90, 166, 255, 0.8));
}
/* 2026-05-19: Unique EPIC — outline violeta */
.inv-cell.is-unique.is-unique-epic {
outline: 1.5px solid #b884ff !important;
box-shadow: 0 0 16px rgba(184, 132, 255, 0.60) !important;
}
.inv-cell.is-unique.is-unique-epic .unique-mark {
color: #b884ff;
filter: drop-shadow(0 0 3px rgba(184, 132, 255, 0.85));
}
/* 2026-05-19: Unique LEGENDARY — outline dorado */
.inv-cell.is-unique.is-unique-legendary {
outline: 1.5px solid #ffd24a !important;
box-shadow: 0 0 18px rgba(255, 210, 74, 0.65) !important;
}
.inv-cell.is-unique.is-unique-legendary .unique-mark {
color: #ffd24a;
filter: drop-shadow(0 0 4px rgba(255, 210, 74, 0.9));
}
/* 2026-05-19: Unique MYTHIC — outline rojo-rosa con glow extra */
.inv-cell.is-unique.is-unique-mythic {
outline: 1.5px solid #ff5c7c !important;
box-shadow:
0 0 20px rgba(255, 92, 124, 0.7),
0 0 40px rgba(255, 92, 124, 0.3) !important;
}
.inv-cell.is-unique.is-unique-mythic .unique-mark {
color: #ff5c7c;
filter: drop-shadow(0 0 4px rgba(255, 92, 124, 0.95));
}
/* Marca compartida (clock) — pulsa suavemente */
.inv-cell .unique-mark {
position: absolute; top: 2px; right: 2px;
font-size: 11px;
animation: cc-pulse-soft 2s ease-in-out infinite;
pointer-events: none;
}
/* Item roto (único vencido) — basura, sin stats, no equipable */
.inv-cell.is-broken {
outline: 1.5px solid rgba(120,120,120,0.5) !important;
box-shadow: none !important;
filter: grayscale(0.95) brightness(0.55);
position: relative;
}
.inv-cell.is-broken::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(135deg,
rgba(0,0,0,0.0) 0, rgba(0,0,0,0.0) 4px,
rgba(225,80,90,0.10) 4px, rgba(225,80,90,0.10) 6px);
pointer-events: none;
}
.inv-cell .broken-mark {
position: absolute; top: 2px; right: 2px;
font-size: 13px; color: #ff5c7c;
filter: drop-shadow(0 0 3px rgba(225,80,90,0.6));
pointer-events: none;
z-index: 2;
}
/* ============================================================================
CLAN CAVE — Fullscreen + imágenes generadas
============================================================================ */
body.cc-fullscreen-active {
overflow: hidden;
}
body.cc-fullscreen-active .game-shell,
body.cc-fullscreen-active .top-bar,
body.cc-fullscreen-active .side-panel,
body.cc-fullscreen-active .mobile-bottom-tab {
/* mantener el shell debajo del fullscreen */
}
.cc-fullscreen {
position: fixed; inset: 0; z-index: 200;
background: #000;
overflow: hidden;
}
/* ===== Rotate phone overlay (mobile portrait) =====
Solo visible en mobile portrait. Desktop y mobile landscape lo ocultan. */
.cc-rotate-overlay {
display: none;
position: absolute; inset: 0;
background: linear-gradient(135deg, #1a0e2a 0%, #0a0414 100%);
z-index: 500;
align-items: center; justify-content: center;
padding: 20px;
}
.cc-rotate-card {
display: flex; flex-direction: column; align-items: center; gap: 12px;
text-align: center; max-width: 320px;
}
.cc-rotate-icon {
font-size: 78px;
color: var(--gold);
animation: cc-rotate-pulse 2s ease-in-out infinite;
filter: drop-shadow(0 0 18px rgba(233,185,99,0.5));
}
@keyframes cc-rotate-pulse {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(90deg); }
}
.cc-rotate-title {
font-family: var(--font-title); font-size: 22px; font-weight: 800;
color: var(--gold); letter-spacing: 0.05em;
}
.cc-rotate-sub {
font-family: var(--font-body); font-size: 14px;
color: var(--text-muted); line-height: 1.5;
margin-bottom: 8px;
}
.cc-rotate-leave {
background: rgba(0,0,0,0.5); border: 1px solid rgba(233,185,99,0.4);
color: var(--text); padding: 10px 18px; border-radius: var(--r-sm);
font-family: var(--font-body); font-size: 13.5px; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: all 0.15s;
}
.cc-rotate-leave:hover { color: var(--gold); border-color: var(--gold); }
/* Show overlay solo en mobile portrait (≤900px y portrait) */
@media (max-width: 900px) and (orientation: portrait) {
.cc-rotate-overlay { display: flex; }
/* Ocultar el contenido del lobby cuando el overlay está visible */
.cc-fullscreen .cc-fs-content,
.cc-fullscreen .cc-bg-static,
.cc-fullscreen .cc-door,
.cc-fullscreen .cc-mobile-fab,
.cc-fullscreen .cc-mobile-drawer,
.cc-fullscreen .cc-mobile-backdrop { display: none; }
}
/* ===========================================================================
MOBILE — botones flotantes (FAB) + drawers laterales
=========================================================================== */
.cc-mobile-fab,
.cc-mobile-drawer,
.cc-mobile-backdrop { display: none; }
/* FAB de CHAT — visible siempre (también desktop) para no robar espacio del stage.
En desktop lo posicionamos en la esquina inferior izquierda (no choca con la sidebar
ni el topbar, queda como un chat-pill flotante al estilo apps de mensajería). */
.cc-mobile-fab.cc-mobile-fab-right {
display: flex;
position: absolute;
bottom: 18px; left: 18px;
top: auto; right: auto;
width: 44px; height: 44px;
align-items: center; justify-content: center;
background: rgba(20,12,40,0.92);
border: 1px solid rgba(233,185,99,0.5);
color: var(--gold);
border-radius: 50%;
z-index: 250;
cursor: pointer;
backdrop-filter: blur(8px);
box-shadow: 0 6px 18px rgba(0,0,0,0.7);
transition: all 0.15s;
}
.cc-mobile-fab.cc-mobile-fab-right i { font-size: 20px; }
.cc-mobile-fab.cc-mobile-fab-right:hover {
color: #ffd060; border-color: #ffd060;
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(233,185,99,0.4);
}
/* Drawer derecho disponible siempre para el chat — ocupa toda la altura del viewport.
Usa position: fixed (no absolute) para no depender de la altura calculada del padre. */
.cc-mobile-drawer.cc-mobile-drawer-right {
display: flex !important;
flex-direction: column;
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: auto !important;
width: min(380px, 92vw);
height: 100vh !important;
height: 100dvh !important;
background: linear-gradient(180deg, rgba(20,12,40,0.97) 0%, rgba(15,8,30,0.97) 100%);
z-index: 260;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
overflow: hidden;
border-left: 1px solid rgba(233,185,99,0.3);
}
.cc-mobile-drawer.cc-mobile-drawer-right.is-open { transform: translateX(0); }
.cc-mobile-backdrop {
display: block;
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
z-index: 240;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.cc-mobile-backdrop.is-active {
opacity: 1;
pointer-events: auto;
}
@media (max-width: 1024px) {
/* En mobile: TODOS los FABs visibles, más chicos */
.cc-mobile-fab {
display: flex;
position: absolute;
top: 8px;
width: 34px; height: 34px;
align-items: center; justify-content: center;
background: rgba(20,12,40,0.85);
border: 1px solid rgba(233,185,99,0.4);
color: var(--gold);
border-radius: 50%;
z-index: 250;
cursor: pointer;
backdrop-filter: blur(8px);
box-shadow: 0 3px 10px rgba(0,0,0,0.6);
transition: all 0.15s;
}
.cc-mobile-fab i { font-size: 16px; }
.cc-mobile-fab:active { transform: scale(0.92); }
.cc-mobile-fab-left { left: 8px; top: 8px; }
.cc-mobile-fab-center { left: 50%; top: 8px; transform: translateX(-50%); }
.cc-mobile-fab-center:active { transform: translateX(-50%) scale(0.92); }
/* Override del FAB chat para mobile: TOP-RIGHT esquina, resetear bottom/left
que vienen del estilo desktop (bottom:18 left:18) — sin reset chocan con el
hamburger izquierdo. */
.cc-mobile-fab.cc-mobile-fab-right {
top: 8px !important;
right: 8px !important;
bottom: auto !important;
left: auto !important;
width: 34px;
height: 34px;
}
.cc-mobile-fab.cc-mobile-fab-right i { font-size: 16px; }
.cc-fab-badge {
position: absolute; top: -3px; right: -3px;
min-width: 14px; height: 14px;
padding: 0 4px;
background: #ff5566;
color: #fff;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 800;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 6px rgba(255,85,102,0.7);
border: 1.5px solid rgba(20,12,40,0.95);
}
/* En mobile, ocultar el topbar y la sidebar derecha originales — todo va a drawers */
.cc-fs-topbar,
.cc-fs-side { display: none !important; }
/* El stage ocupa todo el cc-fs-content (que ya no es grid) */
.cc-fs-stage { position: absolute; inset: 0; }
/* Backdrop click-to-close */
.cc-mobile-backdrop {
display: block;
position: absolute; inset: 0;
background: rgba(0,0,0,0.5);
z-index: 240;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.cc-mobile-backdrop.is-active {
opacity: 1;
pointer-events: auto;
}
/* Drawers — slide-in desde costado (sobreescribe a las reglas globales para mobile) */
.cc-mobile-drawer {
display: flex;
flex-direction: column;
position: absolute;
top: 0; bottom: 0;
width: min(70vw, 280px);
background: linear-gradient(180deg, rgba(20,12,40,0.97) 0%, rgba(15,8,30,0.97) 100%);
z-index: 260;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
overflow: hidden;
}
.cc-mobile-drawer-left {
left: 0;
border-right: 1px solid rgba(233,185,99,0.3);
transform: translateX(-100%);
}
.cc-mobile-drawer.cc-mobile-drawer-right {
right: 0;
width: min(70vw, 280px);
transform: translateX(100%);
}
.cc-mobile-drawer.is-open { transform: translateX(0); }
.cc-mobile-drawer-content {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.cc-drawer-head {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: rgba(0,0,0,0.45);
border-bottom: 1px solid rgba(233,185,99,0.25);
flex-shrink: 0;
}
.cc-drawer-close {
width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: var(--text);
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
}
.cc-drawer-close i { font-size: 13px; }
.cc-drawer-title {
font-family: var(--font-title);
font-size: 13px;
font-weight: 800;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cc-drawer-title i { font-size: 14px; }
.cc-drawer-section {
padding: 8px 10px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cc-drawer-section .cc-side-title {
font-size: 11px;
margin-bottom: 6px;
}
.cc-drawer-subline {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
margin-bottom: 6px;
}
.cc-drawer-subline .cc-status,
.cc-drawer-subline .cc-pill {
font-size: 10px;
padding: 2px 6px;
}
.cc-drawer-countdown { text-align: center; margin-top: 4px; }
.cc-drawer-countdown .cc-cd-label { font-size: 9px; }
.cc-drawer-countdown .cc-cd-value { font-size: 18px; }
.cc-drawer-leave-btn {
margin: auto 10px 10px 10px;
background: rgba(225,80,90,0.15);
border: 1px solid rgba(225,80,90,0.5);
color: #ff8a98;
padding: 7px 10px;
border-radius: var(--r-sm);
font-family: var(--font-body);
font-size: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.cc-drawer-leave-btn:active { background: rgba(225,80,90,0.25); }
/* Roster filas más compactas en mobile */
.cc-mobile-drawer .cc-roster-row {
padding: 4px 6px;
font-size: 11px;
gap: 5px;
}
.cc-mobile-drawer .cc-roster-name { font-size: 11px; }
.cc-mobile-drawer .cc-roster-stat { font-size: 10px; }
/* Drawer izquierdo: roster scrollable */
.cc-mobile-drawer-left .cc-drawer-section:nth-child(3) {
flex: 1;
overflow-y: auto;
}
.cc-mobile-drawer-left .cc-roster {
max-height: none;
}
/* Drawer derecho: chat feed scrollable + input fijo abajo */
.cc-drawer-chat-feed {
flex: 1;
overflow-y: auto;
padding: 8px 10px;
min-height: 0;
font-size: 11.5px;
}
.cc-drawer-chat-feed .cc-chat-line { font-size: 11.5px; }
.cc-drawer-chat-feed .cc-chat-name { font-size: 10.5px; }
.cc-mobile-drawer-right .cc-chat-input-row {
padding: 6px 8px;
background: rgba(0,0,0,0.45);
border-top: 1px solid rgba(233,185,99,0.25);
flex-shrink: 0;
}
.cc-mobile-drawer-right .cc-chat-input {
font-size: 12.5px;
padding: 6px 10px;
}
.cc-mobile-drawer-right .cc-chat-btn {
width: 32px; height: 32px;
}
.cc-mobile-drawer-right .cc-chat-btn i { font-size: 14px; }
}
/* Desktop — ocultar SOLO los FABs y drawer izquierdo (mobile),
pero MANTENER el FAB de chat y drawer derecho */
@media (min-width: 1025px) {
.cc-mobile-fab.cc-mobile-fab-left,
.cc-mobile-fab.cc-mobile-fab-center,
.cc-mobile-drawer.cc-mobile-drawer-left { display: none !important; }
}
/* ===== Estilos GLOBALES del drawer (aplican en desktop también para el chat) ===== */
.cc-mobile-drawer-content {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.cc-drawer-head {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(233,185,99,0.25);
flex-shrink: 0;
}
.cc-drawer-close {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: var(--text);
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
transition: all 0.15s;
}
.cc-drawer-close:hover { color: var(--gold); border-color: var(--gold); }
.cc-drawer-close i { font-size: 15px; }
.cc-drawer-title {
font-family: var(--font-title);
font-size: 15px;
font-weight: 800;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cc-drawer-title i { font-size: 17px; }
.cc-drawer-section {
padding: 10px 14px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cc-drawer-subline {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-bottom: 8px;
}
.cc-drawer-countdown { text-align: center; margin-top: 6px; }
.cc-drawer-leave-btn {
margin: auto 12px 12px 12px;
background: rgba(225,80,90,0.15);
border: 1px solid rgba(225,80,90,0.5);
color: #ff8a98;
padding: 9px 12px;
border-radius: var(--r-sm);
font-family: var(--font-body);
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.15s;
}
.cc-drawer-leave-btn:hover { background: rgba(225,80,90,0.25); }
/* Drawer derecho: chat feed scrollable + input fijo abajo (siempre visible) */
.cc-drawer-chat-feed {
flex: 1;
overflow-y: auto;
padding: 10px 14px;
min-height: 0;
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--font-body);
font-size: 13px;
color: var(--text);
}
.cc-drawer-chat-feed .cc-chat-line {
display: flex;
gap: 6px;
font-size: 13px;
line-height: 1.4;
padding: 4px 6px;
border-radius: var(--r-sm);
background: rgba(255,255,255,0.02);
word-break: break-word;
}
.cc-drawer-chat-feed .cc-chat-line:hover { background: rgba(255,255,255,0.05); }
.cc-drawer-chat-feed .cc-chat-name {
font-family: var(--font-title);
font-weight: 700;
font-size: 12px;
color: var(--gold);
flex-shrink: 0;
}
.cc-drawer-chat-feed .cc-chat-msg { color: var(--text); flex: 1; min-width: 0; }
.cc-drawer-chat-feed .cc-chat-empty {
text-align: center;
font-style: italic;
color: var(--text-muted);
padding: 20px 10px;
font-size: 12px;
}
.cc-mobile-drawer-right .cc-chat-input-row {
display: flex;
gap: 8px;
padding: 10px 12px;
background: rgba(0,0,0,0.45);
border-top: 1px solid rgba(233,185,99,0.25);
flex-shrink: 0;
align-items: center;
}
.cc-mobile-drawer-right .cc-chat-input {
flex: 1;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--r-sm);
padding: 8px 12px;
color: var(--text);
font-family: var(--font-body);
font-size: 13px;
outline: none;
transition: border-color 0.15s;
}
.cc-mobile-drawer-right .cc-chat-input:focus { border-color: rgba(233,185,99,0.6); }
.cc-mobile-drawer-right .cc-chat-input::placeholder { color: var(--text-muted); }
.cc-mobile-drawer-right .cc-chat-btn {
width: 36px; height: 36px;
background: rgba(233,185,99,0.18);
border: 1px solid rgba(233,185,99,0.5);
color: var(--gold);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.15s;
}
.cc-mobile-drawer-right .cc-chat-btn:hover { background: rgba(233,185,99,0.3); color: #ffd060; }
.cc-mobile-drawer-right .cc-chat-btn i { font-size: 15px; }
/* Capa de fondo PERSISTENTE — montada una sola vez en _mountFullscreen,
nunca se re-renderiza con el polling. Las animaciones (motes, fog, rays) NO se reinician. */
.cc-bg-static {
position: absolute; inset: 0; z-index: 0;
pointer-events: none;
}
/* Container del contenido dinámico (topbar + stage + side). Se re-renderiza en cada poll.
z-index alto para que los PJ (dentro del stage > actors) queden ARRIBA de la puerta. */
.cc-fs-content {
position: absolute; inset: 0; z-index: 100;
/* Sin grid — topbar/sidebar son overlays flotantes para no robar espacio del stage. */
}
.cc-bg-layer { position:absolute; inset:0; pointer-events:none; }
.cc-bg-image {
background-image: url('/wiki/assets/clan_cave/bg_no_door.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
}
.cc-bg-vignette {
background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.7) 100%);
z-index: 1;
}
.cc-light-rays { position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.cc-ray {
position:absolute; top:-10%; width:140px; height:120%;
background: linear-gradient(180deg, rgba(255,210,120,0.18) 0%, rgba(255,210,120,0.05) 50%, transparent 100%);
filter: blur(14px);
transform: rotate(8deg);
animation: cc-ray-shine 6s ease-in-out infinite alternate;
}
.cc-ray-1 { left:18%; }
.cc-ray-2 { left:48%; transform:rotate(-4deg); animation-delay: 1.5s; }
.cc-ray-3 { left:74%; transform:rotate(6deg); animation-delay: 3s; }
@keyframes cc-ray-shine { 0%,100% { opacity:0.6; } 50% { opacity:0.95; } }
/* TOP BAR — overlay flotante arriba, no roba espacio del stage */
.cc-fs-topbar {
position: absolute;
top: 0; left: 0; right: 0;
display:flex; align-items:center; gap:14px;
padding:10px 16px;
background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 70%, transparent 100%);
z-index: 10;
backdrop-filter: blur(4px);
pointer-events: none;
}
.cc-fs-topbar > * { pointer-events: auto; }
.cc-fs-leave {
background: rgba(0,0,0,0.5); border:1px solid rgba(233,185,99,0.4); color: var(--text);
padding: 6px 12px; border-radius: var(--r-sm); font-family: var(--font-body);
font-size: 13px; cursor: pointer; display:inline-flex; align-items:center; gap:6px;
transition: all 0.15s;
}
.cc-fs-leave:hover { color: var(--gold); border-color: var(--gold); }
.cc-fs-title-block { flex:1; }
.cc-fs-title {
font-family: var(--font-title); font-size: 22px; font-weight:800; color: var(--gold);
display:inline-flex; align-items:center; gap:8px;
}
.cc-fs-subline { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:4px; }
.cc-fs-countdown { text-align:right; min-width:140px; }
/* STAGE — ocupa TODO el espacio del cc-fs-content. El topbar y sidebar son overlays
absolute encima del stage, no roban espacio (la imagen de fondo se ve completa).
pointer-events: none para que clicks pasen a la puerta detrás (z-index:5).
Los hijos que SÍ necesitan clicks (door, info, etc.) reactivan pointer-events. */
.cc-fs-stage {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.cc-fs-stage .cc-door,
.cc-fs-stage .cc-stage-overlay-info,
.cc-fs-stage .cc-info-msg { pointer-events: auto; }
.cc-stage-overlay-info {
position:absolute; top:18px; left:50%; transform:translateX(-50%); z-index:8;
}
.cc-info-msg {
background: rgba(0,0,0,0.78); border:1px solid var(--border-strong); border-radius:999px;
padding: 7px 16px; font-size:13px; color:var(--text); display:inline-flex;
align-items:center; gap:6px; backdrop-filter: blur(4px);
}
@media (max-width: 1024px) {
.cc-info-msg { font-size: 11px; padding: 4px 10px; gap: 4px; }
.cc-info-msg i { font-size: 12px; }
/* La info-msg está top:18px — moverla un poco más arriba (debajo de los FABs) */
.cc-stage-overlay-info { top: 50px !important; }
}
@media (max-height: 480px) {
.cc-info-msg { font-size: 10px; padding: 3px 8px; }
.cc-stage-overlay-info { top: 46px !important; }
}
.cc-info-msg.cc-info-active {
background: rgba(95,214,132,0.25); border-color: var(--green); color: #c0ffd6;
box-shadow: 0 0 16px rgba(95,214,132,0.45);
animation: cc-pulse-soft 2s ease-in-out infinite;
}
@keyframes cc-pulse-soft { 0%,100% { box-shadow: 0 0 12px rgba(95,214,132,0.4); } 50% { box-shadow: 0 0 28px rgba(95,214,132,0.7); } }
/* PUERTA — anclada al PISO con position:fixed (bypass del layout grid).
La imagen base es 720×1080 (ratio 0.667 vertical). Container con MISMO ratio
y enorme para que se vea imponente y mucho más grande que el player.
!important en tamaños para evitar override por otras reglas. */
.cc-door {
position: fixed !important;
left: 50% !important;
bottom: 9vh !important;
top: auto !important;
transform: translateX(-50%);
/* Ratio match con la imagen (720x1080 → 0.667). Tamaño 30.4×45.6vh
(5% más chica que el anterior 32×48vh). */
width: 30.4vh !important;
height: 45.6vh !important;
cursor: pointer;
/* z-index bajo (5) para que la puerta quede DETRÁS de los PJ (cc-actors z-index 60). */
z-index: 5;
transition: transform 0.25s;
}
.cc-door:hover { transform: translateX(-50%) translateY(-3px); }
.cc-door-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: 50% 100%; /* centrado horizontal, BOTTOM en eje vertical */
display: block;
pointer-events: none;
}
.cc-door-glow { display: none; }
.cc-door-label {
position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
z-index: 2;
font-family: var(--font-title); font-size: 13px; font-weight: 800;
letter-spacing: 0.14em; color: var(--gold-soft); text-transform: uppercase;
padding: 6px 14px; background: rgba(0,0,0,0.85); border-radius: 6px;
border: 1px solid var(--border-strong);
white-space: nowrap;
}
@media (max-width: 1024px) {
.cc-door-label { font-size: 10px; padding: 3px 9px; top: -14px; letter-spacing: 0.08em; }
}
@media (max-height: 480px) {
.cc-door-label { font-size: 9px; padding: 2px 7px; top: -12px; }
}
.cc-door-open .cc-door-label {
color: #ffd060; border-color: #ffd060;
}
/* Mobile/tablet — landscape: la altura es chica y el ancho es grande,
por eso usamos vh (alto) sin overflow. */
@media (max-width: 1024px) {
.cc-door { width: 40vh !important; height: 60vh !important; bottom: 8vh !important; left: 50% !important; }
}
/* Pantallas muy chicas en landscape (e.g. teléfonos) */
@media (max-width: 900px) and (orientation: landscape) {
.cc-door { width: 36vh !important; height: 54vh !important; bottom: 5vh !important; left: 50% !important; }
}
/* Pantallas con MUY POCA altura (típico phone landscape ~360-420px) */
@media (max-height: 480px) {
.cc-door { width: 32vh !important; height: 48vh !important; bottom: 4vh !important; left: 50% !important; }
}
/* ANTORCHAS */
.cc-torch {
position:absolute; bottom:28%; width:14px; height:50px; z-index:6;
pointer-events:none;
}
.cc-torch-l { left: 5%; }
.cc-torch-r { right: 5%; }
.cc-torch-l2 { left: 22%; bottom: 32%; }
.cc-torch-r2 { right: 22%; bottom: 32%; }
.cc-torch-base {
position:absolute; bottom:0; left:50%; transform:translateX(-50%);
width: 8px; height: 36px;
background: linear-gradient(180deg, #6a4a25 0%, #3a2818 100%);
border-radius: 2px;
}
.cc-torch-flame {
position:absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
width: 22px; height: 28px;
background: radial-gradient(ellipse at center 70%, #ffe080 0%, #ff8c2a 50%, transparent 90%);
border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
box-shadow: 0 0 30px 8px rgba(255,140,40,0.6);
animation: cc-flicker 1.3s ease-in-out infinite alternate;
filter: blur(0.5px);
}
@keyframes cc-flicker {
0% { transform:translateX(-50%) scaleY(1); box-shadow:0 0 24px 6px rgba(255,140,40,0.5); }
100% { transform:translateX(-50%) scaleY(1.18); box-shadow:0 0 38px 12px rgba(255,140,40,0.85); }
}
/* PARTÍCULAS */
.cc-particles { position:absolute; inset:0; pointer-events:none; z-index: 3; overflow:hidden; }
.cc-mote {
position:absolute; bottom: -20px;
background: rgba(255,220,170,0.7);
border-radius: 50%;
animation: cc-mote-rise linear infinite;
filter: blur(0.4px);
box-shadow: 0 0 4px rgba(255,200,120,0.5);
}
@keyframes cc-mote-rise {
0% { transform: translateY(0) translateX(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 0.6; }
100% { transform: translateY(-105vh) translateX(15px); opacity: 0; }
}
/* NIEBLA en el suelo */
.cc-fog { position:absolute; left:0; right:0; bottom:0; height: 35%; pointer-events:none; z-index:4; overflow:hidden; }
.cc-fog-layer {
position:absolute; left:-50%; right:-50%; height:100%;
background: radial-gradient(ellipse at center bottom, rgba(180,160,200,0.35), transparent 60%);
filter: blur(20px);
animation: cc-fog-drift linear infinite;
}
.cc-fog-1 { animation-duration: 32s; bottom:-20%; }
.cc-fog-2 { animation-duration: 44s; animation-direction: reverse; bottom:-10%; opacity:0.8; }
.cc-fog-3 { animation-duration: 56s; bottom:-30%; opacity:0.6; }
@keyframes cc-fog-drift { 0% { transform: translateX(-15%); } 100% { transform: translateX(15%); } }
/* ACTORES (sprites) */
.cc-actors { position:absolute; inset:0; pointer-events:none; z-index: 7; }
.cc-actor {
position:absolute; transform:translate(-50%, -100%);
display:flex; flex-direction:column; align-items:center;
filter: drop-shadow(0 6px 12px rgba(0,0,0,0.7));
transition: top 0.5s, left 0.5s;
}
.cc-actor.is-self .cc-actor-name { color: var(--gold); font-weight:800; }
.cc-actor.is-self .cc-actor-sprite { filter: drop-shadow(0 0 14px rgba(233,185,99,0.65)); }
.cc-actor-sprite {
line-height: 0;
position: relative;
/* Bobbing animation removida — daba sensación de "tilde" cada vez que el polling
redibujaba el DOM. Ahora los sprites quedan estables. */
transform-origin: bottom center;
}
/* Escala por raza para compensar tamaños naturales de las imágenes:
- Humano: 0.75× (la imagen es muy grande)
- Hada (fae): 1.5× (la imagen es muy chica)
- Otros no-humanos (elf, ogre, drakkar, undead): 1.25× */
.cc-actor-sprite[data-race="human"] { transform: scale(0.75); }
.cc-actor-sprite[data-race="fae"] { transform: scale(1.5); }
.cc-actor-sprite[data-race="elf"],
.cc-actor-sprite[data-race="ogre"],
.cc-actor-sprite[data-race="drakkar"],
.cc-actor-sprite[data-race="undead"] { transform: scale(1.25); }
.cc-sprite-img {
width: 64px; height: auto; object-fit: contain;
display: block; image-rendering: -webkit-optimize-contrast;
transition: transform 0.2s;
}
@media (max-width: 1024px) { .cc-sprite-img { width: 44px; } }
@media (max-width: 900px) and (orientation: landscape) { .cc-sprite-img { width: 38px; } }
@media (max-height: 480px) { .cc-sprite-img { width: 32px; } }
/* También achicar el nombre flotante del actor en mobile */
@media (max-width: 1024px) {
.cc-actor-name { font-size: 9px; padding: 0 4px; max-width: 80px; }
.cc-actor-bubble { font-size: 11px; padding: 5px 9px; max-width: 150px; }
.cc-actor-mini-avatar { width: 16px; height: 16px; font-size: 9px; }
.cc-actor-bars { width: 56px; gap: 2px; }
.cc-actor-bar { height: 3px; }
}
@media (max-height: 480px) {
.cc-actor-name { font-size: 8px; max-width: 60px; }
.cc-actor-bars { width: 44px; }
}
/* 2026-05-08: avatar mini (foto del usuario) sobre el sprite + barras HP/MP */
.cc-actor-sprite-wrap {
position: relative;
line-height: 0;
}
.cc-actor-mini-avatar {
position: absolute;
top: -4px;
right: -6px;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid var(--border-gold);
background-color: rgba(20,12,40,0.95);
background-size: cover;
background-position: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.6);
z-index: 2;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.cc-actor-mini-avatar-fallback {
font-family: var(--font-title);
font-weight: 800;
font-size: 11px;
color: var(--gold);
background: linear-gradient(135deg, rgba(60,30,90,0.9), rgba(20,12,40,0.95));
}
.cc-actor.is-self .cc-actor-mini-avatar { border-color: var(--gold); box-shadow: 0 0 8px rgba(233,185,99,0.6); }
.cc-actor-bars {
display: flex;
flex-direction: column;
gap: 2px;
width: 70px;
margin-top: 3px;
pointer-events: none;
}
.cc-actor-bar {
height: 4px;
border-radius: 99px;
background: rgba(0,0,0,0.7);
border: 1px solid rgba(0,0,0,0.5);
overflow: hidden;
position: relative;
}
.cc-actor-bar-fill {
height: 100%;
border-radius: 99px;
transition: width 0.3s ease;
}
.cc-actor-bar-hp .cc-actor-bar-fill {
background: linear-gradient(90deg, #ff6378 0%, #ff8a98 100%);
box-shadow: 0 0 4px rgba(255,99,120,0.4);
}
.cc-actor-bar-hp.is-low .cc-actor-bar-fill {
background: linear-gradient(90deg, #d9342f 0%, #ff6378 100%);
animation: ccBarLowPulse 1.2s ease-in-out infinite;
}
.cc-actor-bar-mp .cc-actor-bar-fill {
background: linear-gradient(90deg, #5aa6ff 0%, #8cc6ff 100%);
box-shadow: 0 0 4px rgba(90,166,255,0.4);
}
@keyframes ccBarLowPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
.cc-actor.is-dead {
filter: grayscale(0.85) brightness(0.5);
opacity: 0.55;
}
/* 2026-05-08: Death modal — aparece cuando el char muere en la cueva */
.cc-death-overlay { z-index: 12000; background: rgba(0,0,0,0.75); }
.cc-death-modal {
max-width: 420px;
padding: 28px 24px 20px;
text-align: center;
border: 1px solid rgba(255,99,120,0.45);
background: linear-gradient(180deg, rgba(40,12,28,0.95), rgba(20,8,18,0.98));
box-shadow: 0 0 60px rgba(255,99,120,0.25), inset 0 0 30px rgba(0,0,0,0.5);
animation: ccDeathPop 0.4s cubic-bezier(0.4, 1.4, 0.6, 1);
}
@keyframes ccDeathPop {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
.cc-death-icon {
font-size: 56px;
color: #ff6378;
filter: drop-shadow(0 0 20px rgba(255,99,120,0.6));
margin-bottom: 8px;
animation: ccDeathFloat 2s ease-in-out infinite;
}
@keyframes ccDeathFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.cc-death-title {
font-family: var(--font-title);
font-size: 22px;
font-weight: 800;
letter-spacing: 0.06em;
color: #ff8a98;
text-transform: uppercase;
margin-bottom: 14px;
text-shadow: 0 0 12px rgba(255,99,120,0.4);
}
.cc-death-counter {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
margin: 14px 0 12px;
font-family: var(--font-title);
font-weight: 900;
}
.cc-death-num {
font-size: 64px;
color: var(--gold);
text-shadow: 0 0 20px rgba(233,185,99,0.6), 0 4px 10px rgba(0,0,0,0.7);
line-height: 1;
}
.cc-death-sep {
font-size: 36px;
color: rgba(255,255,255,0.4);
margin: 0 4px;
}
.cc-death-limit {
font-size: 36px;
color: rgba(255,255,255,0.65);
line-height: 1;
}
.cc-death-modal.is-eliminated .cc-death-num { color: #ff6378; text-shadow: 0 0 24px rgba(255,99,120,0.7); }
.cc-death-sub {
font-family: var(--font-body);
font-size: 13.5px;
line-height: 1.45;
color: var(--text);
margin: 0 4px 18px;
}
.cc-death-modal.is-eliminated .cc-death-title { color: #ff6378; }
.cc-death-ok {
margin-top: 4px;
}
/* Si el PJ está del lado izquierdo de la puerta, lo flippeamos para que mire hacia ella */
.cc-actor.cc-flip .cc-sprite-img,
.cc-actor.cc-flip svg { transform: scaleX(-1); }
.cc-actor-name {
margin-top: 2px;
font-size: 12px; font-weight: 600; color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.7);
white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
background: rgba(0,0,0,0.55); padding: 1px 8px; border-radius: 4px;
}
.cc-actor-clan {
color: var(--cyan);
font-size: 0.85em;
font-weight: 700;
margin-left: 2px;
letter-spacing: 0.04em;
}
.cc-actor-bubble {
position:absolute; bottom: calc(100% + 2px); left:50%; transform: translateX(-50%);
background: #fff; color: #1a0a08;
padding: 8px 12px; border-radius: 14px;
font-size: 12.5px; font-weight: 600; line-height: 1.3;
max-width: 200px; min-width: 60px;
box-shadow: 0 6px 18px rgba(0,0,0,0.6);
animation: cc-bubble-in 0.25s ease-out;
white-space: normal; word-wrap: break-word;
pointer-events: none; z-index: 10;
}
.cc-actor-bubble::after {
content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
border:7px solid transparent; border-top-color:#fff; border-bottom:0;
}
@keyframes cc-bubble-in { from { opacity:0; transform: translateX(-50%) translateY(8px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
.cc-actor-shadow {
position:absolute; bottom: -4px; left:50%; transform: translateX(-50%);
width: 90px; height: 14px;
background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 70%);
z-index: -1;
}
/* SIDEBAR — overlay flotante a la derecha (no roba espacio del stage) */
.cc-fs-side {
position: absolute;
top: 78px; /* deja respiro debajo del topbar */
right: 14px;
bottom: 14px;
width: 220px;
background: rgba(20,12,40,0.78);
border: 1px solid rgba(233,185,99,0.3);
border-radius: var(--r-md);
padding: 12px;
overflow-y: auto;
display:flex; flex-direction:column; gap:12px;
z-index: 9;
backdrop-filter: blur(8px);
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
/* Status pills + roster + chat — styles compartidos con el snapshot anterior */
.cc-screen { display:flex; flex-direction:column; gap:14px; }
.cc-header {
display:flex; align-items:center; justify-content:space-between;
padding:14px 18px; background:rgba(0,0,0,0.4); border:1px solid var(--border);
border-radius: var(--r-md);
}
.cc-title {
font-family: var(--font-title); font-size:22px; font-weight:800; color:var(--gold);
display:flex; align-items:center; gap:10px;
}
.cc-title i { font-size:24px; }
.cc-sub { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:6px; }
.cc-status { padding:3px 10px; font-size:11px; font-family:var(--font-title); letter-spacing:0.1em;
text-transform:uppercase; border-radius:999px; font-weight:800; }
.cc-status-scheduled { background:rgba(108,212,255,0.15); color:#6cd4ff; border:1px solid rgba(108,212,255,0.4); }
.cc-status-lobby { background:rgba(233,185,99,0.18); color:var(--gold); border:1px solid var(--border-strong); }
.cc-status-active { background:rgba(232,90,106,0.18); color:#ff8a98; border:1px solid #ff5566; animation: cc-pulse 1.4s ease-in-out infinite; }
.cc-status-ended { background:rgba(0,0,0,0.4); color:var(--text-dim); border:1px solid var(--border); }
@keyframes cc-pulse { 0%,100% { opacity:1; } 50% { opacity:0.55; } }
.cc-pill { padding:3px 9px; background:rgba(0,0,0,0.4); border:1px solid var(--border); border-radius:999px;
font-size:12px; font-family:var(--font-mono); display:inline-flex; align-items:center; gap:5px; }
.cc-pill b { color:var(--gold); }
.cc-countdown {
text-align:right; min-width:140px;
}
.cc-cd-label { font-size:10px; letter-spacing:0.16em; color:var(--text-muted); text-transform:uppercase; }
.cc-cd-value { font-family:var(--font-mono); font-size:24px; font-weight:800; color:var(--gold); letter-spacing:0.05em; }
.cc-main { display:grid; grid-template-columns: 1fr 320px; gap:14px; align-items:stretch; }
@media (max-width: 1024px) { .cc-main { grid-template-columns:1fr; } }
/* ===== Stage / cueva ===== */
.cc-stage {
position:relative; min-height:520px; height:64vh; max-height:720px;
border-radius: var(--r-lg); overflow:hidden;
border:2px solid #1a0d28;
box-shadow: inset 0 0 80px rgba(0,0,0,0.7);
}
.cc-cave-bg {
position:absolute; inset:0;
background:
radial-gradient(ellipse at center 35%, #2d1850 0%, #15082a 40%, #0a0414 80%),
radial-gradient(circle at 30% 70%, rgba(60,30,15,0.3), transparent 35%),
radial-gradient(circle at 70% 75%, rgba(60,30,15,0.3), transparent 35%);
background-color:#0a0414;
}
.cc-stalactites {
position:absolute; top:0; left:0; right:0; height:80px; width:100%;
pointer-events:none;
}
.cc-torch {
position:absolute; bottom:8%; width:18px; height:60px;
background: linear-gradient(180deg, #ff8c2a 0%, #ff5e1a 30%, #c0c0c0 30%, #888 100%);
border-radius: 2px;
box-shadow: 0 0 26px 8px rgba(255,140,40,0.55);
animation: cc-flicker 1.3s ease-in-out infinite alternate;
}
.cc-torch::before {
content:''; position:absolute; top:-22px; left:50%; transform:translateX(-50%);
width:24px; height:30px;
background: radial-gradient(ellipse at center, #ffe080 0%, #ff8c2a 50%, transparent 80%);
border-radius: 50%; opacity:0.85;
}
.cc-torch-l { left:6%; }
.cc-torch-r { right:6%; }
@keyframes cc-flicker { 0% { box-shadow:0 0 22px 6px rgba(255,140,40,0.45); } 100% { box-shadow:0 0 36px 10px rgba(255,140,40,0.75); } }
/* Estilos legacy de la puerta SVG removidos — esta definición de .cc-door
con width:140px sobreescribía la versión grande con imagen. Ahora la
única definición vigente es la del bloque "PUERTA" arriba (145vh × 175vh
con imagen door_open.png / door_closed.png).
Mantengo solo los estilos de glow/pulse que se reusan. */
.cc-door-glow {
position:absolute; inset:0;
border-radius: 70px 70px 0 0;
pointer-events:none;
transition: all 0.5s;
opacity:0;
}
.cc-door-open .cc-door-glow {
opacity:1;
box-shadow: 0 0 60px 20px rgba(255,140,40,0.6);
}
@keyframes cc-door-pulse { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.3); } }
.cc-door-open .cc-door-label {
color:#ffd24a; border-color:#ffd24a;
box-shadow:0 0 20px rgba(255,210,74,0.6);
animation: cc-door-pulse 1.6s ease-in-out infinite;
}
/* ===== Actores ===== */
.cc-actors { position:absolute; inset:0; pointer-events:none; }
.cc-actor {
position:absolute; transform:translate(-50%, -100%);
display:flex; flex-direction:column; align-items:center;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
transition: top 0.5s, left 0.5s;
}
.cc-actor.is-self .cc-actor-name { color:var(--gold); font-weight:800; }
.cc-actor.is-self .cc-actor-sprite { filter: drop-shadow(0 0 10px rgba(233,185,99,0.5)); }
.cc-actor-sprite { line-height:0; }
/* @keyframes cc-bob removida — el PJ queda parado quieto, sin flotar */
.cc-actor-name {
margin-top:2px; font-size:11px; font-weight:600; color:#fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.6);
white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis;
}
.cc-actor-bubble {
position:absolute; bottom:calc(100% - 8px); left:50%; transform:translateX(-50%);
background:#fff; color:#1a0a08;
padding: 7px 11px; border-radius:14px;
font-size:12.5px; font-weight:600; line-height:1.3;
max-width:180px; min-width:60px;
box-shadow: 0 4px 14px rgba(0,0,0,0.5);
animation: cc-bubble-in 0.25s ease-out;
white-space:normal; word-wrap:break-word;
pointer-events:none;
}
.cc-actor-bubble::after {
content:''; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
border:6px solid transparent; border-top-color:#fff; border-bottom:0;
}
@keyframes cc-bubble-in { from { opacity:0; transform:translateX(-50%) translateY(8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.cc-stage-overlay-info {
position:absolute; top:14px; left:50%; transform:translateX(-50%);
z-index:5;
}
.cc-info-msg {
background:rgba(0,0,0,0.78); border:1px solid var(--border-strong); border-radius:999px;
padding: 6px 14px; font-size:12.5px; color:var(--text);
display:inline-flex; align-items:center; gap:6px;
backdrop-filter: blur(4px);
}
/* ===== Sidebar ===== */
.cc-side { display:flex; flex-direction:column; gap:12px; }
.cc-side-block {
background: rgba(33,20,58,0.5); border:1px solid var(--border); border-radius: var(--r-md);
padding:12px 14px;
}
.cc-side-title {
display:flex; align-items:center; gap:7px;
font-family:var(--font-title); font-size:12px; font-weight:700; letter-spacing:0.12em;
color:var(--gold); text-transform:uppercase; margin-bottom:8px;
}
.cc-side-count { margin-left:auto; background:rgba(233,185,99,0.15); padding:2px 8px;
border-radius:999px; font-size:11px; color:var(--gold); }
.cc-roster { max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.cc-roster-empty { color:var(--text-dim); font-size:12px; text-align:center; padding:14px 0; }
.cc-roster-row {
display:flex; align-items:center; gap:6px; padding:5px 8px;
background:rgba(0,0,0,0.3); border-radius: var(--r-sm);
font-size:12px;
}
.cc-roster-row.is-eliminated { opacity:0.4; }
.cc-roster-dot { width:8px; height:8px; border-radius:50%; }
.cc-roster-dot.is-lobby { background:#ffd24a; box-shadow: 0 0 6px #ffd24a; }
.cc-roster-dot.is-battle { background:var(--blood); box-shadow: 0 0 6px var(--blood); animation: cc-pulse 1s ease-in-out infinite; }
.cc-roster-dot.is-away { background:#444; }
.cc-roster-race {
display:inline-block; width:14px; height:14px; border-radius:50%;
background:#888;
}
.cc-roster-race.race-human { background:#3a6fa5; }
.cc-roster-race.race-elf { background:#3a8d4f; }
.cc-roster-race.race-ogre { background:#7a9a55; }
.cc-roster-race.race-fae { background:#a060e0; }
.cc-roster-race.race-drakkar { background:#8b2020; }
.cc-roster-race.race-undead { background:#503060; }
.cc-roster-name { flex:1; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-roster-clan {
font-family: var(--font-mono);
font-size: 10px;
color: var(--cyan);
background: rgba(108,212,255,0.1);
border: 1px solid rgba(108,212,255,0.25);
padding: 1px 5px;
border-radius: 4px;
font-weight: 700;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.cc-roster-stat { font-size:11px; color:var(--text-muted); font-family:var(--font-mono); }
.cc-chat-clan-tag {
font-family: var(--font-mono);
font-size: 10px;
color: var(--cyan);
background: rgba(108,212,255,0.1);
border: 1px solid rgba(108,212,255,0.25);
padding: 0 4px;
border-radius: 3px;
margin-right: 5px;
font-weight: 700;
letter-spacing: 0.04em;
}
.cc-side-chat { flex:1; display:flex; flex-direction:column; min-height:200px; }
.cc-chat-feed {
flex:1; max-height:240px; overflow-y:auto; padding:6px;
background:rgba(0,0,0,0.35); border-radius: var(--r-sm);
display:flex; flex-direction:column; gap:4px; min-height:120px;
}
.cc-chat-line { font-size:12px; line-height:1.4; padding:2px 0; }
.cc-chat-name { color:var(--gold); font-weight:700; margin-right:6px; }
.cc-chat-msg { color:var(--text); }
.cc-chat-empty { font-size:11px; text-align:center; padding:20px; }
.cc-chat-input-row { display:flex; gap:6px; margin-top:8px; }
.cc-chat-input {
flex:1; padding:7px 10px; background:rgba(0,0,0,0.5); border:1px solid var(--border);
border-radius: var(--r-sm); color:var(--text); font-size:13px; outline:none;
}
.cc-chat-input:focus { border-color:var(--gold); }
.cc-chat-btn {
padding:7px 12px; background:linear-gradient(180deg, var(--gold-soft), #c89544);
border:1px solid var(--gold); border-radius: var(--r-sm); color:#2a1a00; cursor:pointer;
font-size:14px;
}
.cc-chat-btn:hover { transform:translateY(-1px); }
/* ============================================================================
Spotlight tutorial (atributos manuales)
============================================================================ */
#attr-spotlight-overlay {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: auto;
cursor: pointer;
}
.attr-spot-cutout {
position: fixed;
border: 2.5px solid var(--gold);
border-radius: 14px;
box-shadow: 0 0 0 9999px rgba(10,4,20,0.82),
0 0 32px 4px rgba(233,185,99,0.45),
inset 0 0 0 0 transparent;
pointer-events: none;
animation: attr-spot-pulse 2.2s ease-in-out infinite;
}
@keyframes attr-spot-pulse {
0%, 100% { box-shadow: 0 0 0 9999px rgba(10,4,20,0.82), 0 0 18px 2px rgba(233,185,99,0.35); }
50% { box-shadow: 0 0 0 9999px rgba(10,4,20,0.82), 0 0 38px 6px rgba(233,185,99,0.7); }
}
.attr-spot-callout {
position: fixed;
max-width: 420px;
width: calc(100vw - 40px);
background: linear-gradient(180deg, rgba(33,20,58,0.98), rgba(15,8,30,0.98));
border: 1.5px solid var(--gold);
border-radius: var(--r-lg);
padding: 18px 20px 16px;
box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 24px rgba(233,185,99,0.2);
cursor: default;
text-align: center;
z-index: 10000;
}
.attr-spot-arrow {
position: absolute;
left: 50%;
width: 14px;
height: 14px;
background: linear-gradient(180deg, rgba(33,20,58,0.98), rgba(15,8,30,0.98));
border: 1.5px solid var(--gold);
transform: translateX(-50%) rotate(45deg);
}
.attr-spot-arrow.arrow-up {
top: -8px;
border-right: none;
border-bottom: none;
}
.attr-spot-arrow.arrow-down {
bottom: -8px;
border-left: none;
border-top: none;
}
.attr-spot-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
background: rgba(233,185,99,0.15);
border: 1px solid var(--gold);
border-radius: 999px;
font-family: var(--font-title);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 10px;
}
.attr-spot-tag i { font-size: 12px; }
.attr-spot-title {
font-family: var(--font-title);
font-size: 19px;
font-weight: 800;
color: var(--text);
margin-bottom: 8px;
line-height: 1.25;
}
.attr-spot-body {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.55;
margin-bottom: 8px;
}
.attr-spot-body b { color: var(--gold); }
.attr-spot-extra {
font-size: 12px;
color: var(--text-dim);
line-height: 1.5;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.06);
margin-bottom: 14px;
}
.attr-spot-extra b { color: var(--gold-soft); }
.attr-spot-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 24px;
background: linear-gradient(180deg, var(--gold-soft), #c89544);
border: 1px solid var(--gold);
border-radius: 999px;
color: #2a1a00;
font-family: var(--font-title);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 4px 14px rgba(233,185,99,0.4);
}
.attr-spot-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(233,185,99,0.6);
}
.attr-spot-btn:active { transform: translateY(0); }
.attr-spot-btn i { font-size: 14px; }
@media (max-width: 600px) {
.attr-spot-callout { padding: 14px 16px 12px; }
.attr-spot-title { font-size: 16px; }
.attr-spot-body { font-size: 12.5px; }
.attr-spot-btn { padding: 9px 18px; font-size: 12px; }
}
/* ============================================================
Reset Modal v2 (2026-05-13) — diseño limpio del modal de reset
de atributos / skills / árbol con creator badge support.
============================================================ */
.reset-modal-v2 {
max-width: 460px;
width: 92vw;
padding: 0;
background: linear-gradient(180deg, rgba(38,22,68,0.98), rgba(18,8,32,0.99));
border: 1px solid rgba(232,90,106,0.42);
border-radius: 16px;
position: relative;
overflow: hidden;
box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.reset-modal-v2::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 100px;
background: radial-gradient(ellipse at top, rgba(232,90,106,0.18), transparent 60%);
pointer-events: none;
}
.reset-modal-v2 .ev-modal-close {
position: absolute;
top: 12px; right: 12px;
z-index: 10;
}
/* ── Header ── */
.rm-header {
padding: 22px 22px 16px;
text-align: center;
position: relative;
}
.rm-header-icon {
width: 56px;
height: 56px;
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, rgba(232,90,106,0.18), rgba(232,90,106,0.06));
border: 2px solid rgba(232,90,106,0.45);
color: var(--blood, #e85a6a);
font-size: 26px;
box-shadow: 0 0 18px rgba(232,90,106,0.32);
}
.rm-header-title {
font-family: var(--font-title, 'Cinzel'), serif;
font-size: 22px;
font-weight: 900;
color: var(--text, #e0d8c8);
letter-spacing: 0.04em;
margin-bottom: 5px;
}
.rm-header-sub {
font-size: 12.5px;
color: var(--text-muted, #999);
line-height: 1.5;
max-width: 360px;
margin: 0 auto;
}
/* ── Cost / Status card ── */
.rm-cost-card {
display: flex;
align-items: center;
gap: 12px;
margin: 0 18px 14px;
padding: 12px 14px;
border-radius: 12px;
border: 1.5px solid;
background: rgba(0,0,0,0.25);
}
.rm-cost-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.rm-cost-body {
flex: 1;
min-width: 0;
text-align: left;
}
.rm-cost-title {
font-family: var(--font-title, 'Cinzel'), serif;
font-size: 13px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 2px;
letter-spacing: 0.02em;
}
.rm-cost-sub {
font-size: 11.5px;
color: var(--text-muted, #999);
line-height: 1.35;
}
.rm-cost-sub b { color: var(--text); }
.rm-cost-badge {
font-family: var(--font-mono, 'JetBrains Mono'), monospace;
font-size: 16px;
font-weight: 800;
padding: 4px 11px;
border-radius: 8px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
}
/* Variants */
.rm-cost-card.rm-cost-free {
border-color: rgba(95,214,132,0.42);
background: linear-gradient(135deg, rgba(95,214,132,0.10), rgba(0,0,0,0.25));
}
.rm-cost-free .rm-cost-icon {
background: rgba(95,214,132,0.16);
color: var(--mint, #5fd684);
box-shadow: 0 0 12px rgba(95,214,132,0.22);
}
.rm-cost-free .rm-cost-title { color: var(--mint, #5fd684); }
.rm-cost-free .rm-cost-badge {
color: var(--mint, #5fd684);
background: rgba(95,214,132,0.10);
border: 1px solid rgba(95,214,132,0.32);
}
.rm-cost-card.rm-cost-creator {
border-color: rgba(255,210,74,0.42);
background: linear-gradient(135deg, rgba(255,210,74,0.10), rgba(0,0,0,0.25));
}
.rm-cost-creator .rm-cost-icon {
background: radial-gradient(circle at 30% 30%, #ffeaa0, #ffd24a 60%, #c79a45);
color: #3a2810;
box-shadow: 0 0 14px rgba(255,210,74,0.42);
}
.rm-cost-creator .rm-cost-title { color: #ffd24a; }
.rm-cost-creator .rm-cost-badge {
color: #ffd24a;
background: rgba(255,210,74,0.10);
border: 1px solid rgba(255,210,74,0.36);
}
.rm-cost-card.rm-cost-scroll-ok {
border-color: rgba(184,132,255,0.42);
background: linear-gradient(135deg, rgba(184,132,255,0.10), rgba(0,0,0,0.25));
}
.rm-cost-scroll-ok .rm-cost-icon {
background: rgba(184,132,255,0.16);
color: var(--epic, #b884ff);
}
.rm-cost-scroll-ok .rm-cost-title { color: var(--epic, #b884ff); }
.rm-cost-scroll-ok .rm-cost-badge {
color: var(--mint, #5fd684);
background: rgba(95,214,132,0.10);
font-size: 18px;
padding: 4px 8px;
}
.rm-cost-card.rm-cost-scroll-missing {
border-color: rgba(255,77,109,0.42);
background: linear-gradient(135deg, rgba(255,77,109,0.10), rgba(0,0,0,0.25));
}
.rm-cost-scroll-missing .rm-cost-icon {
background: rgba(255,77,109,0.16);
color: var(--blood, #ff5a78);
}
.rm-cost-scroll-missing .rm-cost-title { color: var(--blood, #ff5a78); }
.rm-cost-scroll-missing .rm-cost-badge {
color: var(--blood, #ff5a78);
background: rgba(255,77,109,0.10);
font-size: 18px;
padding: 4px 8px;
}
/* ── Refund banner ── */
.rm-refund-banner {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 18px 12px;
padding: 12px 16px;
background: linear-gradient(135deg, rgba(95,214,132,0.12), rgba(95,214,132,0.04));
border: 1px solid rgba(95,214,132,0.32);
border-radius: 10px;
}
.rm-refund-label {
font-family: var(--font-title, 'Cinzel'), serif;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mint, #5fd684);
font-weight: 700;
}
.rm-refund-value {
font-family: var(--font-mono, 'JetBrains Mono'), monospace;
font-size: 26px;
font-weight: 900;
color: #5fd684;
text-shadow: 0 0 10px rgba(95,214,132,0.4);
letter-spacing: 0.01em;
}
.rm-empty-banner {
display: flex;
align-items: center;
gap: 8px;
margin: 0 18px 12px;
padding: 11px 14px;
background: rgba(255,200,87,0.06);
border: 1px solid rgba(255,200,87,0.28);
border-radius: 10px;
font-size: 12px;
color: var(--text-soft);
}
.rm-empty-banner i { color: #ffc857; font-size: 16px; }
/* ── Stats grid ── */
.rm-stats-section {
padding: 0 18px 16px;
}
.rm-stats-label {
font-family: var(--font-title, 'Cinzel'), serif;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted, #888);
text-align: center;
margin-bottom: 8px;
font-weight: 700;
}
.rm-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.rm-stat-tile {
background: rgba(0,0,0,0.45);
border: 1px solid var(--line, rgba(255,255,255,0.08));
border-radius: 10px;
padding: 10px 4px;
text-align: center;
transition: transform 0.15s, border-color 0.15s;
}
.rm-stat-tile:hover { transform: translateY(-1px); }
.rm-stat-tile.str { border-color: rgba(240,128,144,0.32); background: rgba(240,128,144,0.05); }
.rm-stat-tile.agi { border-color: rgba(95,214,132,0.32); background: rgba(95,214,132,0.05); }
.rm-stat-tile.int { border-color: rgba(194,168,255,0.32); background: rgba(194,168,255,0.05); }
.rm-stat-tile.vit { border-color: rgba(255,200,87,0.32); background: rgba(255,200,87,0.05); }
.rm-stat-key {
font-family: var(--font-title, 'Cinzel'), serif;
font-size: 11px;
letter-spacing: 0.12em;
font-weight: 800;
margin-bottom: 4px;
}
.rm-stat-tile.str .rm-stat-key { color: #f08090; }
.rm-stat-tile.agi .rm-stat-key { color: #5fd684; }
.rm-stat-tile.int .rm-stat-key { color: #c2a8ff; }
.rm-stat-tile.vit .rm-stat-key { color: #ffc857; }
.rm-stat-val {
font-family: var(--font-mono, 'JetBrains Mono'), monospace;
font-size: 22px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
/* ── Actions ── */
.rm-actions {
display: flex;
gap: 8px;
padding: 14px 18px 18px;
border-top: 1px solid rgba(255,255,255,0.05);
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.18));
}
.rm-actions .btn {
flex: 1;
padding: 11px 14px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.04em;
}
.rm-actions .rm-confirm {
background: linear-gradient(135deg, #e85a6a, #c83e4f);
border: 1px solid #ff7a8a;
color: #fff;
box-shadow: 0 4px 14px rgba(232,90,106,0.32);
}
.rm-actions .rm-confirm:hover:not(:disabled) {
background: linear-gradient(135deg, #ff6e7e, #d54a5b);
box-shadow: 0 6px 18px rgba(232,90,106,0.48);
}
@media (max-width: 480px) {
.rm-header { padding: 18px 16px 14px; }
.rm-header-title { font-size: 18px; }
.rm-cost-card { margin: 0 14px 12px; }
.rm-refund-banner { margin: 0 14px 10px; }
.rm-stats-section { padding: 0 14px 14px; }
.rm-actions { padding: 12px 14px 16px; }
.rm-stat-val { font-size: 18px; }
}
/* Modal de compra de puntos / reset de atributos */
.attr-buy-modal,
.attr-respec-modal {
max-width: 460px;
width: 92vw;
padding: 24px 22px 20px;
text-align: center;
background: linear-gradient(180deg, rgba(33,20,58,0.98), rgba(15,8,30,0.98));
border: 1px solid rgba(233,185,99,0.3);
border-radius: var(--r-lg);
position: relative;
}
.attr-respec-modal {
border-color: rgba(232,90,106,0.4);
}
.attr-respec-modal .bp-icon {
color: var(--blood) !important;
filter: drop-shadow(0 0 12px rgba(232,90,106,0.4)) !important;
}
.attr-respec-modal .bp-stat:nth-child(2) > i { color: var(--green); filter: drop-shadow(0 0 6px rgba(95,214,132,0.4)); }
:is(.attr-buy-modal, .attr-respec-modal) .bp-icon {
font-size: 38px;
color: var(--gold);
filter: drop-shadow(0 0 12px rgba(233,185,99,0.4));
margin-bottom: 8px;
}
/* ─── Reset cost block — pergamino requerido o "GRATIS" ─── */
.reset-cost-block {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 10px;
margin: 10px 0;
border: 1.5px solid rgba(255,255,255,0.08);
background: rgba(0,0,0,0.4);
}
.reset-cost-block.reset-cost-free {
background: linear-gradient(135deg, rgba(95,214,132,0.14), rgba(95,214,132,0.04));
border-color: rgba(95,214,132,0.45);
}
.reset-cost-block.reset-cost-free > i {
font-size: 30px;
color: #5fd684;
filter: drop-shadow(0 0 8px rgba(95,214,132,0.5));
}
/* 2026-05-14: variante "Creador" — gold/star, reset gratis ilimitado */
.reset-cost-block.reset-cost-creator {
background: linear-gradient(135deg, rgba(255,210,74,0.16), rgba(255,210,74,0.04));
border-color: rgba(255,210,74,0.55);
}
.reset-cost-block.reset-cost-creator > i {
font-size: 28px;
color: #ffd24a;
filter: drop-shadow(0 0 8px rgba(255,210,74,0.55));
}
.reset-cost-block.reset-cost-creator .reset-cost-title { color: #ffd24a; }
.reset-cost-block.reset-cost-ok {
background: linear-gradient(135deg, rgba(233,185,99,0.12), rgba(233,185,99,0.04));
border-color: rgba(233,185,99,0.5);
}
.reset-cost-block.reset-cost-missing {
background: linear-gradient(135deg, rgba(232,90,106,0.10), rgba(232,90,106,0.03));
border-color: rgba(232,90,106,0.45);
}
.reset-scroll-icon {
width: 48px; height: 48px;
flex-shrink: 0;
border-radius: 10px;
background: rgba(15,8,30,0.85);
border: 1.5px solid currentColor;
display: flex; align-items: center; justify-content: center;
font-size: 24px;
color: var(--gold);
}
.reset-cost-block.reset-cost-missing .reset-scroll-icon { color: #e85a6a; opacity: 0.8; }
.reset-cost-info { flex: 1; min-width: 0; text-align: left; }
.reset-cost-title {
font-family: var(--font-title);
font-size: 13.5px;
font-weight: 700;
color: var(--text);
margin-bottom: 3px;
}
.reset-cost-sub {
font-size: 11.5px;
color: var(--text-dim);
display: inline-flex;
align-items: center;
gap: 4px;
}
.reset-cost-sub b { color: var(--text); font-weight: 800; }
.reset-cost-sub .text-green { color: #5fd684; }
.reset-cost-sub .text-error { color: #e85a6a; }
.reset-shop-hint {
font-size: 11.5px;
color: var(--text-dim);
text-align: center;
margin: 4px 0 8px;
padding: 6px 10px;
background: rgba(232,90,106,0.06);
border-radius: 8px;
}
.reset-shop-hint i { color: #e85a6a; margin-right: 4px; }
:is(.attr-buy-modal, .attr-respec-modal) .bp-title {
font-family: var(--font-title);
font-size: 19px;
font-weight: 800;
color: var(--text);
margin-bottom: 4px;
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-sub {
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.45;
margin-bottom: 14px;
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-stats {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 16px;
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-stat {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(233,185,99,0.18);
border-radius: var(--r-md);
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-stat > i {
font-size: 22px;
color: #6cd4ff;
filter: drop-shadow(0 0 6px rgba(108,212,255,0.4));
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-stat-label {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-stat-val {
font-family: var(--font-mono);
font-size: 17px;
font-weight: 800;
color: var(--text);
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-empty {
padding: 20px 16px;
background: rgba(232,90,106,0.08);
border: 1px solid rgba(232,90,106,0.3);
border-radius: var(--r-md);
color: var(--text-muted);
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-empty > i {
font-size: 28px;
color: #ffa15c;
display: block;
margin-bottom: 6px;
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-qty-row {
margin-bottom: 14px;
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-label {
display: block;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 8px;
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-qty-controls {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-step {
min-width: 42px;
padding: 8px 10px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(233,185,99,0.25);
border-radius: var(--r-sm);
color: var(--gold);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s, transform 0.12s;
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-step:hover {
background: rgba(233,185,99,0.18);
transform: translateY(-1px);
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-step-max {
background: linear-gradient(180deg, rgba(233,185,99,0.3), rgba(233,185,99,0.1));
border-color: rgba(233,185,99,0.5);
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-qty-input {
width: 90px;
padding: 8px 12px;
background: rgba(0,0,0,0.6);
border: 1.5px solid var(--gold);
border-radius: var(--r-sm);
color: var(--gold);
font-family: var(--font-mono);
font-size: 18px;
font-weight: 800;
text-align: center;
-moz-appearance: textfield;
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-qty-input::-webkit-outer-spin-button,
:is(.attr-buy-modal, .attr-respec-modal) .bp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:is(.attr-buy-modal, .attr-respec-modal) .bp-summary {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 14px;
background: rgba(0,0,0,0.4);
border-radius: var(--r-md);
margin-bottom: 14px;
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: var(--text);
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-summary-row b {
font-family: var(--font-mono);
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 5px;
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-summary-row b i { font-size: 12px; color: #6cd4ff; }
:is(.attr-buy-modal, .attr-respec-modal) .bp-actions {
display: flex;
gap: 8px;
justify-content: center;
}
:is(.attr-buy-modal, .attr-respec-modal) .bp-actions .btn { flex: 1; max-width: 160px; }
@media (max-width: 480px) {
:is(.attr-buy-modal, .attr-respec-modal) .bp-qty-input { width: 70px; font-size: 15px; }
:is(.attr-buy-modal, .attr-respec-modal) .bp-step { min-width: 36px; padding: 7px 6px; font-size: 12px; }
}
/* ============================================================================
SKILLS — rediseño completo
============================================================================ */
/* Summary card (4 cells inline) */
.skills-summary-card {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1px solid rgba(233,185,99,0.25);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.skills-summary-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(233,185,99,0.08), transparent 60%);
pointer-events: none;
}
.skills-summary-card .ssum-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
}
.skills-summary-card .ssum-cell {
--cell-color: var(--gold);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 8px 12px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--cell-color) 12%, rgba(0,0,0,0.55)) 0%,
rgba(0,0,0,0.55) 100%);
border: 1px solid color-mix(in srgb, var(--cell-color) 25%, rgba(255,255,255,0.06));
border-radius: var(--r-md);
transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
position: relative;
overflow: hidden;
}
.skills-summary-card .ssum-cell::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 0%,
color-mix(in srgb, var(--cell-color) 22%, transparent) 0%,
transparent 65%);
opacity: 0.5;
pointer-events: none;
transition: opacity 0.2s;
}
.skills-summary-card .ssum-cell:hover {
border-color: var(--cell-color);
transform: translateY(-2px);
box-shadow: 0 6px 18px color-mix(in srgb, var(--cell-color) 22%, transparent);
}
.skills-summary-card .ssum-cell:hover::before { opacity: 0.85; }
.skills-summary-card .ssum-cell.is-highlight {
border-color: var(--cell-color);
box-shadow: 0 4px 16px color-mix(in srgb, var(--cell-color) 30%, transparent);
animation: ssumPulse 2.4s ease-in-out infinite;
}
.skills-summary-card .ssum-cell.is-highlight::before { opacity: 0.95; }
@keyframes ssumPulse {
0%, 100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--cell-color) 25%, transparent); }
50% { box-shadow: 0 4px 22px color-mix(in srgb, var(--cell-color) 55%, transparent); }
}
/* Corner accents (ornate) */
.skills-summary-card .ssum-corner {
position: absolute;
width: 10px;
height: 10px;
pointer-events: none;
opacity: 0.7;
}
.skills-summary-card .ssum-corner-tl {
top: 4px;
left: 4px;
border-top: 1.5px solid var(--cell-color);
border-left: 1.5px solid var(--cell-color);
}
.skills-summary-card .ssum-corner-br {
bottom: 4px;
right: 4px;
border-bottom: 1.5px solid var(--cell-color);
border-right: 1.5px solid var(--cell-color);
}
.skills-summary-card .ssum-cell:hover .ssum-corner,
.skills-summary-card .ssum-cell.is-highlight .ssum-corner { opacity: 1; }
/* Icon in circular frame */
.skills-summary-card .ssum-icon {
width: 38px;
height: 38px;
border-radius: 50%;
background: color-mix(in srgb, var(--cell-color) 22%, rgba(0,0,0,0.65));
border: 1.5px solid var(--cell-color);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2px;
position: relative;
z-index: 1;
box-shadow:
0 0 12px color-mix(in srgb, var(--cell-color) 30%, transparent),
inset 0 0 8px color-mix(in srgb, var(--cell-color) 18%, transparent);
}
.skills-summary-card .ssum-icon i {
font-size: 18px;
color: var(--cell-color);
filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cell-color) 50%, transparent));
}
.skills-summary-card .ssum-val {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 800;
color: var(--text);
line-height: 1;
text-shadow: 0 0 10px color-mix(in srgb, var(--cell-color) 30%, transparent);
position: relative;
z-index: 1;
}
.skills-summary-card .ssum-frac { color: var(--text-dim); font-size: 14px; text-shadow: none; }
.skills-summary-card .ssum-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--cell-color) 60%, var(--text-muted));
position: relative;
z-index: 1;
font-weight: 700;
}
/* ==================================================================
MOBILE COMPACT — Skills Section (matching mockup)
3-card stat row, horizontal skill cards, tree badges
================================================================== */
@media (max-width: 720px) {
/* === STAT CARDS: 3 pills horizontales (oculto Mi Nivel) === */
.skills-summary-card {
padding: 7px 8px !important;
margin-bottom: 10px !important;
border-radius: var(--r-md) !important;
}
.skills-summary-card .ssum-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
}
.skills-summary-card .ssum-cell:nth-child(3),
.skills-summary-card .ssum-cell:nth-child(4) {
display: none !important;
}
.skills-summary-card .ssum-cell {
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 7px 8px !important;
text-align: left;
min-height: 0 !important;
}
.skills-summary-card .ssum-corner { display: none !important; }
.skills-summary-card .ssum-icon {
width: 26px !important;
height: 26px !important;
margin: 0 !important;
flex-shrink: 0 !important;
border-width: 1px !important;
box-shadow: none !important;
}
.skills-summary-card .ssum-icon i { font-size: 13px !important; }
.skills-summary-card .ssum-val {
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1 !important;
text-shadow: none !important;
}
.skills-summary-card .ssum-frac { font-size: 11px !important; }
.skills-summary-card .ssum-lbl {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
line-height: 1 !important;
margin: 0 !important;
text-transform: none !important;
color: var(--text-muted) !important;
}
/* === TREE CARDS: 6 en fila con badge numérico === */
.skill-trees-section { margin-bottom: 10px !important; }
.skill-trees-section-title {
font-size: 9.5px !important;
margin-bottom: 6px !important;
gap: 5px !important;
}
.skill-trees-section-title i { font-size: 11px !important; }
.skill-trees-row {
gap: 5px !important;
grid-template-columns: repeat(6, 1fr) !important;
}
.tree-card {
padding: 10px 3px 9px !important;
gap: 4px !important;
border-width: 1px !important;
min-height: 0 !important;
}
.tree-card-icon {
width: 34px !important;
height: 34px !important;
font-size: 17px !important;
border-width: 1.5px !important;
}
.tree-card-name {
font-size: 8.5px !important;
letter-spacing: 0.02em !important;
}
/* Hide progress bar on mobile, just show badge */
.tree-card-bar { display: none !important; }
.tree-card-progress { gap: 0 !important; }
.tree-card-frac {
/* Convert to top-right corner badge */
position: absolute !important;
top: 3px !important;
right: 3px !important;
background: var(--blood) !important;
color: #fff !important;
padding: 1px 5px !important;
border-radius: 999px !important;
font-size: 9px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
z-index: 2;
}
.tree-card-frac .text-dim { display: none !important; }
/* === BANNER === */
.skill-tree-banner {
padding: 10px 12px !important;
margin-bottom: 10px !important;
gap: 10px !important;
}
.skill-tree-banner.has-image {
min-height: 76px !important;
padding: 12px 14px !important;
}
.stb-icon {
width: 38px !important;
height: 38px !important;
font-size: 17px !important;
border-width: 1.5px !important;
}
.stb-name {
font-size: 13.5px !important;
margin-bottom: 1px !important;
letter-spacing: 0.05em !important;
}
.stb-desc { font-size: 10.5px !important; line-height: 1.3 !important; }
/* === FILTER CHIPS === */
.skill-filter-row {
padding: 3px !important;
margin-bottom: 8px !important;
gap: 3px !important;
}
.skill-filter-row .filter-chip {
padding: 7px 6px !important;
font-size: 10px !important;
gap: 4px !important;
letter-spacing: 0.04em !important;
}
.skill-filter-row .filter-chip i { font-size: 11px !important; }
/* === SKILL CARDS: layout HORIZONTAL 4 columnas === */
.skill-grid {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.skill-node-pro {
/* Override BOTH old (line 5897) and new (line 16792) definitions */
display: grid !important;
flex-direction: unset !important;
grid-template-columns: 64px minmax(0, 1fr) auto auto !important;
grid-template-areas:
"icon name badges action"
"icon stat badges action"
"icon desc badges action" !important;
grid-template-rows: auto auto 1fr !important;
gap: 2px 9px !important;
padding: 9px !important;
align-items: center !important;
}
.skill-node-pro:hover { transform: none !important; }
/* Status pill: inline en grid-area "stat" (no absolute) */
.skill-node-pro > .skn-status {
position: static !important;
grid-area: stat !important;
top: auto !important;
right: auto !important;
justify-self: flex-start !important;
align-self: flex-start !important;
padding: 2px 7px !important;
font-size: 8.5px !important;
letter-spacing: 0.08em !important;
line-height: 1.3 !important;
margin-top: 1px !important;
border-radius: 99px !important;
}
.skill-node-pro > .skn-status i { font-size: 9px !important; }
/* Icon column — flush against top, bottom, left edges of card */
.skill-node-pro > .skn-icon-wrap {
grid-area: icon !important;
margin: -9px 0 -9px -9px !important;
align-self: stretch !important;
justify-self: stretch !important;
width: auto !important;
min-width: 73px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
.skill-node-pro .skn-icon {
width: 100% !important;
height: 100% !important;
font-size: 26px !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
}
.skill-node-pro .skn-lv-badge {
font-size: 9px !important;
padding: 1px 6px !important;
bottom: 4px !important;
right: 4px !important;
left: auto !important;
border-width: 1.5px !important;
letter-spacing: 0.03em !important;
z-index: 2;
}
/* Name (left-aligned in middle column) */
.skill-node-pro > .skn-name {
grid-area: name !important;
text-align: left !important;
font-size: 12.5px !important;
margin-top: 0 !important;
line-height: 1.15 !important;
letter-spacing: 0.03em !important;
text-shadow: none !important;
}
/* Description (2 lines max) */
.skill-node-pro > .skn-desc {
grid-area: desc !important;
text-align: left !important;
font-size: 10.5px !important;
line-height: 1.3 !important;
padding: 0 !important;
margin-top: 2px !important;
min-height: 0 !important;
flex: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Dots hidden (Lv badge already shows progress) */
.skill-node-pro > .skn-dots { display: none !important; }
/* Tags: columna vertical de badges a la derecha */
.skill-node-pro > .skn-tags {
grid-area: badges !important;
flex-direction: column !important;
gap: 3px !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
align-self: center !important;
justify-content: center !important;
}
.skill-node-pro .skn-tag {
font-size: 8.5px !important;
padding: 3px 6px !important;
justify-content: flex-start !important;
gap: 4px !important;
border-radius: 99px !important;
line-height: 1.2 !important;
white-space: nowrap !important;
background: rgba(0,0,0,0.45) !important;
}
.skill-node-pro .skn-tag i { font-size: 9px !important; }
/* Preservar el esquema de color de tags tipados (para contraste) */
.skill-node-pro .skn-tag.tag-ultimate {
background: linear-gradient(180deg, #f0c674, #b97f2e) !important;
color: #2a1a00 !important;
border-color: var(--gold) !important;
font-weight: 800 !important;
}
.skill-node-pro .skn-tag.tag-passive {
background: rgba(122,76,240,0.18) !important;
color: var(--primary) !important;
border-color: rgba(122,76,240,0.4) !important;
}
.skill-node-pro .skn-tag.tag-active {
background: rgba(233,185,99,0.1) !important;
color: var(--gold) !important;
border-color: rgba(233,185,99,0.35) !important;
}
.skill-node-pro .skn-tag.tag-mp { color: var(--cyan) !important; }
.skill-node-pro .skn-tag.tag-cd { color: #ff8d63 !important; }
/* Action column: solo botón principal, esconder "Ver detalles" */
.skill-node-pro > .skn-action {
grid-area: action !important;
flex-direction: column !important;
gap: 4px !important;
margin-top: 0 !important;
padding-top: 0 !important;
align-self: center !important;
justify-self: end !important;
}
.skill-node-pro .skn-action .btn,
.skill-node-pro .skn-details-btn {
font-size: 9.5px !important;
padding: 6px 8px !important;
min-width: 80px !important;
width: 80px !important;
height: 28px !important;
letter-spacing: 0.02em !important;
line-height: 1 !important;
gap: 4px !important;
border-radius: 8px !important;
font-weight: 700 !important;
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.skill-node-pro .skn-action .btn > i,
.skill-node-pro .skn-details-btn > i { font-size: 11px !important; }
.skill-node-pro .skn-action .btn-cost {
margin-left: 3px !important;
font-size: 9px !important;
opacity: 0.85 !important;
}
.skill-node-pro .skn-details-btn { opacity: 0.78 !important; }
}
/* Ultra-compact (<= 380px) — apenas más chico */
@media (max-width: 380px) {
.skills-summary-card .ssum-lbl { display: none !important; }
.tree-card { padding: 8px 2px 7px !important; }
.tree-card-icon { width: 30px !important; height: 30px !important; font-size: 15px !important; }
.tree-card-name { font-size: 8px !important; }
.skill-node-pro {
grid-template-columns: 56px minmax(0, 1fr) auto auto !important;
padding: 8px !important;
gap: 2px 7px !important;
}
.skill-node-pro > .skn-icon-wrap { min-width: 64px !important; margin: -8px 0 -8px -8px !important; }
.skill-node-pro .skn-icon { font-size: 22px !important; }
.skill-node-pro > .skn-name { font-size: 11.5px !important; }
.skill-node-pro > .skn-desc { font-size: 10px !important; }
.skill-node-pro .skn-tag { font-size: 8px !important; padding: 2px 5px !important; }
.skill-node-pro .skn-action .btn { font-size: 10px !important; padding: 6px 8px !important; min-width: 70px !important; }
}
/* Section title pattern */
.skill-trees-section { margin-bottom: 16px; }
.skill-trees-section-title {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-weight: 700;
opacity: 0.85;
}
.skill-trees-section-title i { font-size: 14px; }
/* Tree cards row (horizontal scroll en mobile) */
.skill-trees-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}
/* En pantallas chicas/medianas, si 6 no entran bien, ir a 3+3 */
@media (max-width: 1100px) {
.skill-trees-row {
grid-template-columns: repeat(3, 1fr);
}
}
.tree-card {
background: rgba(0,0,0,0.4);
border: 1.5px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
padding: 14px 10px 12px;
cursor: pointer;
transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s, background 0.18s;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
-webkit-appearance: none;
appearance: none;
position: relative;
overflow: hidden;
}
.tree-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 60% at 50% 0%, var(--tree-color) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}
.tree-card:hover {
border-color: var(--tree-color);
transform: translateY(-3px);
}
.tree-card:hover::before { opacity: 0.12; }
.tree-card.is-active {
border-color: var(--tree-color);
background: linear-gradient(180deg,
color-mix(in srgb, var(--tree-color) 18%, rgba(0,0,0,0.4)) 0%,
rgba(0,0,0,0.4) 100%);
box-shadow:
0 6px 18px color-mix(in srgb, var(--tree-color) 25%, transparent),
inset 0 0 24px color-mix(in srgb, var(--tree-color) 10%, transparent);
}
.tree-card.is-active::before { opacity: 0.2; }
.tree-card-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: color-mix(in srgb, var(--tree-color) 18%, rgba(0,0,0,0.6));
border: 1.5px solid var(--tree-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--tree-color);
font-size: 22px;
filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tree-color) 40%, transparent));
position: relative;
z-index: 1;
}
.tree-card.is-active .tree-card-icon {
box-shadow: 0 0 18px color-mix(in srgb, var(--tree-color) 50%, transparent);
}
.tree-card-name {
font-family: var(--font-title);
font-size: 12.5px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.06em;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.tree-card.is-active .tree-card-name { color: var(--tree-color); }
.tree-card-progress {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 100%;
position: relative;
z-index: 1;
}
.tree-card-bar {
width: 100%;
height: 4px;
background: rgba(0,0,0,0.5);
border-radius: 99px;
overflow: hidden;
}
.tree-card-fill {
height: 100%;
background: linear-gradient(90deg,
color-mix(in srgb, var(--tree-color) 40%, transparent) 0%,
var(--tree-color) 100%);
border-radius: 99px;
transition: none; /* GSAP toma control */
box-shadow: 0 0 6px color-mix(in srgb, var(--tree-color) 60%, transparent);
}
.tree-card-frac {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
}
.tree-card.is-active .tree-card-frac { color: var(--text); }
/* Tree banner (cuando se selecciona un árbol) */
.skill-tree-banner {
background: linear-gradient(90deg,
color-mix(in srgb, var(--tree-color) 14%, rgba(15,8,30,0.95)) 0%,
rgba(15,8,30,0.95) 60%);
border: 1px solid color-mix(in srgb, var(--tree-color) 35%, var(--border));
border-radius: var(--r-md);
padding: 14px 18px;
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
position: relative;
overflow: hidden;
}
.skill-tree-banner::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 100% at 0% 50%, color-mix(in srgb, var(--tree-color) 25%, transparent), transparent 60%);
pointer-events: none;
}
/* Banner con imagen de fondo */
.skill-tree-banner.has-image {
background-image: var(--tree-image);
background-size: cover;
background-position: right center;
background-repeat: no-repeat;
min-height: 120px;
padding: 18px 22px;
}
.skill-tree-banner.has-image::before {
background:
linear-gradient(90deg,
rgba(8,4,18,0.94) 0%,
rgba(8,4,18,0.82) 40%,
rgba(8,4,18,0.45) 70%,
rgba(8,4,18,0.2) 100%),
radial-gradient(ellipse 60% 100% at 0% 50%, color-mix(in srgb, var(--tree-color) 30%, transparent), transparent 70%);
}
.skill-tree-banner.has-image::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow:
inset 0 0 40px rgba(0,0,0,0.6),
inset 0 0 0 1px color-mix(in srgb, var(--tree-color) 25%, transparent);
pointer-events: none;
}
/* banner mobile rules ahora en el bloque @media 720px de arriba */
.stb-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: color-mix(in srgb, var(--tree-color) 25%, rgba(0,0,0,0.5));
border: 2px solid var(--tree-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--tree-color);
font-size: 26px;
flex-shrink: 0;
filter: drop-shadow(0 0 14px color-mix(in srgb, var(--tree-color) 50%, transparent));
position: relative;
z-index: 1;
}
.stb-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.stb-name {
font-family: var(--font-title);
font-size: 19px;
font-weight: 800;
color: var(--tree-color);
text-transform: uppercase;
letter-spacing: 0.08em;
text-shadow: 0 0 14px color-mix(in srgb, var(--tree-color) 40%, transparent);
margin-bottom: 4px;
}
.stb-desc {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--text-muted);
}
/* Filter chips row */
.skill-filter-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
padding: 4px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
}
.skill-filter-row .filter-chip {
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 12px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-sm);
color: var(--text-muted);
font-family: var(--font-title);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
white-space: nowrap;
}
.skill-filter-row .filter-chip i { font-size: 13px; }
.skill-filter-row .filter-chip:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.skill-filter-row .filter-chip.active {
background: linear-gradient(180deg, rgba(233,185,99,0.22), rgba(122,76,240,0.15));
border-color: var(--gold);
color: var(--gold);
box-shadow: 0 2px 8px rgba(233,185,99,0.15);
}
/* === Skill node card (rediseñado) === */
.skill-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.skill-node-pro {
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,6,22,0.95));
border: 1.5px solid rgba(255,255,255,0.06);
border-radius: var(--r-lg);
padding: 16px 14px 14px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.skill-node-pro:hover {
transform: translateY(-3px);
border-color: var(--tree-color);
box-shadow: 0 8px 24px color-mix(in srgb, var(--tree-color) 18%, transparent);
}
.skill-node-pro.status-locked { opacity: 0.55; filter: grayscale(50%); }
.skill-node-pro.status-locked:hover { transform: none; }
.skill-node-pro.status-available {
border-color: color-mix(in srgb, var(--tree-color) 40%, rgba(255,255,255,0.06));
}
.skill-node-pro.status-learned {
border-color: var(--tree-color);
box-shadow: inset 0 0 22px color-mix(in srgb, var(--tree-color) 12%, transparent);
}
.skill-node-pro.status-maxed {
border-color: var(--gold);
background: linear-gradient(180deg, rgba(58,40,12,0.92) 0%, rgba(20,12,30,0.96) 100%);
box-shadow:
0 0 20px rgba(233,185,99,0.25),
inset 0 0 16px rgba(233,185,99,0.1);
}
/* Status badge */
.skn-status {
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: rgba(0,0,0,0.6);
border: 1px solid var(--text-dim);
border-radius: 99px;
font-family: var(--font-title);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
z-index: 2;
}
.skn-status i { font-size: 10px; }
.status-available .skn-status { color: var(--mint); border-color: var(--mint); background: rgba(63,214,146,0.12); }
.status-learned .skn-status { color: var(--tree-color); border-color: var(--tree-color); background: color-mix(in srgb, var(--tree-color) 12%, rgba(0,0,0,0.6)); }
.status-maxed .skn-status { color: #2a1a00; background: linear-gradient(180deg, #f0c674, #b97f2e); border-color: var(--gold); }
.status-locked .skn-status { color: var(--blood); border-color: rgba(225,80,90,0.5); }
/* Icon centered */
.skn-icon-wrap {
position: relative;
margin: 0 auto;
margin-top: 4px;
}
.skn-icon {
width: 64px;
height: 64px;
border-radius: 14px;
background: color-mix(in srgb, var(--tree-color) 14%, rgba(0,0,0,0.5));
border: 2px solid color-mix(in srgb, var(--tree-color) 40%, var(--border));
display: flex;
align-items: center;
justify-content: center;
color: var(--tree-color);
font-size: 28px;
overflow: hidden;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
.skill-node-pro.status-learned .skn-icon,
.skill-node-pro.status-maxed .skn-icon {
border-color: var(--tree-color);
box-shadow: 0 0 14px color-mix(in srgb, var(--tree-color) 35%, transparent);
}
.skill-node-pro.status-maxed .skn-icon {
border-color: var(--gold);
box-shadow: 0 0 18px rgba(233,185,99,0.4);
}
.skn-icon.ultimate {
background: linear-gradient(180deg, rgba(233,185,99,0.2), rgba(122,76,240,0.15));
border-color: var(--gold);
color: var(--gold);
}
.skn-icon.passive {
background: linear-gradient(180deg, rgba(122,76,240,0.18), rgba(86,200,255,0.12));
border-color: var(--primary);
color: var(--primary);
}
.skn-img {
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* Lv badge sobre el icono */
.skn-lv-badge {
position: absolute;
bottom: -8px;
right: -6px;
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 800;
padding: 2px 8px;
border-radius: 99px;
border: 2px solid rgba(20,12,40,1);
box-shadow: 0 3px 8px rgba(233,185,99,0.4);
letter-spacing: 0.04em;
}
.skn-name {
font-family: var(--font-title);
font-size: 15px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--text);
text-align: center;
text-transform: uppercase;
margin-top: 6px;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
/* Dots */
.skn-dots {
display: flex;
justify-content: center;
gap: 4px;
}
.lv-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.08);
transition: background 0.2s;
}
.lv-dot.active {
background: var(--tree-color);
box-shadow: 0 0 6px color-mix(in srgb, var(--tree-color) 70%, transparent);
border-color: var(--tree-color);
}
.skill-node-pro.status-maxed .lv-dot.active {
background: var(--gold);
box-shadow: 0 0 8px rgba(233,185,99,0.7);
border-color: var(--gold);
}
.skn-desc {
font-family: var(--font-serif);
font-style: italic;
font-size: 12.5px;
line-height: 1.45;
color: var(--text-muted);
text-align: center;
flex: 1;
padding: 4px 0;
}
/* Tags */
.skn-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
}
.skn-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
}
.skn-tag i { font-size: 10px; }
.skn-tag.tag-active { color: var(--gold); border-color: rgba(233,185,99,0.3); }
.skn-tag.tag-passive { color: var(--primary);border-color: rgba(122,76,240,0.4); background: rgba(122,76,240,0.1); }
.skn-tag.tag-ultimate { color: #2a1a00; background: linear-gradient(180deg, #f0c674, #b97f2e); border-color: var(--gold); }
.skn-tag.tag-mp { color: var(--cyan); border-color: rgba(86,200,255,0.4); }
.skn-tag.tag-cd { color: #ff8d63; border-color: rgba(255,113,67,0.4); }
.skn-tag.tag-req { color: var(--text-muted); }
.skn-tag.tag-req.locked { color: var(--blood); border-color: rgba(225,80,90,0.4); background: rgba(225,80,90,0.1); }
/* Action button */
.skn-action {
margin-top: auto;
padding-top: 4px;
}
.skn-action .btn {
width: 100%;
font-size: 12px;
letter-spacing: 0.05em;
}
.skn-action .btn-cost {
font-family: var(--font-mono);
opacity: 0.85;
margin-left: 4px;
font-weight: 800;
}
.skn-action {
display: flex;
flex-direction: column;
gap: 6px;
}
.skn-details-btn {
font-size: 11.5px !important;
opacity: 0.75;
padding: 6px 10px !important;
}
.skn-details-btn:hover { opacity: 1; }
.skn-details-btn > i { color: var(--tree-color); }
/* ===== Skill details modal ===== */
.sk-det-modal {
max-width: 480px;
background: linear-gradient(180deg, #1c1334 0%, #0a0518 100%);
border: 1.5px solid var(--tree-color, rgba(157,108,255,0.5));
border-radius: 16px;
padding: 22px 20px 18px;
box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 0 32px var(--tree-color);
position: relative;
}
.sk-det-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.sk-det-icon {
width: 64px; height: 64px;
border-radius: 14px;
background: rgba(0,0,0,0.5);
border: 1.5px solid var(--tree-color);
display: flex; align-items: center; justify-content: center;
font-size: 32px;
color: var(--tree-color);
flex-shrink: 0;
box-shadow: 0 0 18px color-mix(in srgb, var(--tree-color) 30%, transparent);
}
.sk-det-img {
width: 100%; height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sk-det-titlewrap { flex: 1; min-width: 0; }
.sk-det-name {
font-family: var(--font-title);
font-weight: 800;
font-size: 20px;
letter-spacing: 0.04em;
color: #fff;
margin-bottom: 6px;
}
.sk-det-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-det-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(0,0,0,0.45);
border: 1px solid var(--border-soft);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
}
.sk-det-tag.tag-ultimate {
background: linear-gradient(135deg, #c4951e22, #ffc85722);
border-color: #ffc85777;
color: #ffc857;
}
.sk-det-tag.tag-passive {
background: rgba(95,214,132,0.12);
border-color: rgba(95,214,132,0.4);
color: #5fd684;
}
.sk-det-tag.tag-active {
background: rgba(78,195,247,0.12);
border-color: rgba(78,195,247,0.4);
color: #4ec3f7;
}
.sk-det-desc {
font-size: 13px;
line-height: 1.5;
color: rgba(255,255,255,0.78);
font-style: italic;
padding: 10px 12px;
background: rgba(0,0,0,0.3);
border-left: 2px solid var(--tree-color);
border-radius: 4px;
white-space: pre-line; /* 2026-05-24: respeta \n en descripciones (skills V2 con niveles) */
margin-bottom: 14px;
}
.sk-det-section-title {
font-family: var(--font-title);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--tree-color);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.sk-det-section-mt { margin-top: 14px; }
.sk-det-section-title > i { font-size: 16px; }
.sk-det-table {
background: rgba(0,0,0,0.4);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 4px 0;
margin-bottom: 6px;
}
/* Tabla de progresión por nivel — todas las filas, actual y next destacados */
.sk-det-table-wrap {
background: rgba(0,0,0,0.4);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 0;
margin-bottom: 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sk-det-table-lvls {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
font-family: var(--font-mono);
}
.sk-det-table-lvls thead th {
text-align: left;
padding: 9px 12px;
font-family: var(--font-title);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
border-bottom: 1.5px solid var(--tree-color);
background: rgba(0,0,0,0.4);
white-space: nowrap;
}
.sk-det-table-lvls tbody td {
padding: 7px 12px;
color: rgba(255,255,255,0.55);
border-top: 1px solid rgba(255,255,255,0.04);
white-space: nowrap;
}
.sk-det-table-lvls tbody td:first-child {
font-family: var(--font-title);
font-weight: 700;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.7);
}
.sk-det-table-lvls tbody tr.is-future td { opacity: 0.55; }
.sk-det-table-lvls tbody tr.is-current {
background: color-mix(in srgb, var(--tree-color) 18%, transparent);
box-shadow: inset 3px 0 0 var(--tree-color);
}
.sk-det-table-lvls tbody tr.is-current td { color: #fff; font-weight: 700; }
.sk-det-table-lvls tbody tr.is-next {
background: rgba(95,214,132,0.08);
box-shadow: inset 3px 0 0 #5fd684;
}
.sk-det-table-lvls tbody tr.is-next td { color: #b6f0ce; }
/* 2026-05-13: sub-valor (ej. "(470%×2 hits)") en cell de daño con múltiples hits */
.sk-det-subval {
display: inline-block;
margin-left: 4px;
font-size: 10.5px;
font-weight: 500;
color: rgba(255,255,255,0.45);
letter-spacing: 0.02em;
}
.sk-det-table-lvls tbody tr.is-current .sk-det-subval,
.sk-det-table-lvls tbody tr.is-next .sk-det-subval { color: rgba(255,255,255,0.65); }
/* 2026-05-13: daño reducido vs targets con >25% HP (warrior_execute, ×0.55) */
.sk-det-reduced {
display: inline-block;
padding: 1px 8px;
border-radius: 6px;
background: rgba(255,148,77,0.10);
border: 1px solid rgba(255,148,77,0.32);
color: #ff944d;
font-weight: 700;
font-family: var(--font-mono);
}
/* 2026-05-13: daño con crit garantizado (rogue_backstab, ×2 base) */
.sk-det-crit {
display: inline-block;
padding: 1px 8px;
border-radius: 6px;
background: rgba(255,200,87,0.12);
border: 1px solid rgba(255,200,87,0.35);
color: #ffc857;
font-weight: 700;
font-family: var(--font-mono);
}
.sk-lv-tag {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: 8px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.sk-lv-tag.is-current {
background: var(--tree-color);
color: #0a0518;
}
.sk-lv-tag.is-next {
background: #5fd684;
color: #062613;
}
.sk-det-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 14px;
font-size: 13px;
}
.sk-det-row + .sk-det-row { border-top: 1px solid rgba(255,255,255,0.05); }
.sk-det-label { color: rgba(255,255,255,0.7); font-weight: 500; }
.sk-det-vals { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 800; }
.sk-det-cur { color: #fff; }
.sk-det-arrow { color: var(--tree-color); font-size: 13px; }
.sk-det-next { color: #5fd684; }
.sk-det-flags {
list-style: none;
margin: 0;
padding: 0;
background: rgba(95,214,132,0.06);
border: 1px solid rgba(95,214,132,0.3);
border-radius: 10px;
}
.sk-det-flags li {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
font-size: 12.5px;
color: rgba(255,255,255,0.85);
}
.sk-det-flags li + li { border-top: 1px solid rgba(255,255,255,0.05); }
.sk-det-flags li > i { color: #5fd684; flex-shrink: 0; }
.sk-det-mastered {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px;
margin-top: 12px;
background: rgba(255,200,87,0.1);
border: 1px solid rgba(255,200,87,0.4);
border-radius: 10px;
color: #ffc857;
font-weight: 700;
font-size: 12.5px;
}
@media (max-width: 540px) {
.sk-det-modal { padding: 18px 14px 14px; }
.sk-det-name { font-size: 17px; }
.sk-det-icon { width: 52px; height: 52px; font-size: 26px; }
.sk-det-row { font-size: 12px; padding: 7px 12px; }
}
/* ============================================================================
QUESTS — rediseño completo (2026-05-08d)
Sistema de cards prolijo, alineado, jerárquico. Todo en 6 zonas:
1) header (tipo izq + meta chips der)
2) title-block (nombre + descripción)
3) status (timer / level cap, una sola pill horizontal)
4) overall progress (sólo activas)
5) sections (objectives / rewards) con título consistente
6) action (botón CTA al fondo)
============================================================================ */
/* === SUMMARY CARD (encabezado de la pantalla) === */
.quests-summary-card {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1px solid rgba(233,185,99,0.25);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.quests-summary-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(233,185,99,0.08), transparent 60%);
pointer-events: none;
}
.qsum-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
}
.qsum-cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 14px 8px 12px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
text-align: center;
min-height: 92px;
}
.qsum-cell:hover {
border-color: rgba(233,185,99,0.4);
transform: translateY(-2px);
}
.qsum-cell.is-highlight {
background: linear-gradient(180deg, rgba(63,214,146,0.18), rgba(63,214,146,0.04));
border-color: var(--mint);
box-shadow: 0 4px 14px rgba(63,214,146,0.25);
animation: qsumPulse 2s ease-in-out infinite;
}
@keyframes qsumPulse {
0%, 100% { box-shadow: 0 4px 14px rgba(63,214,146,0.25); }
50% { box-shadow: 0 4px 22px rgba(63,214,146,0.5); }
}
.qsum-cell > i {
font-size: 22px;
color: var(--gold);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
line-height: 1;
}
.qsum-cell.is-highlight > i { color: var(--mint); }
.qsum-val {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.qsum-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
line-height: 1.2;
}
/* === NEXT-QUEST COUNTDOWN CARD === */
.next-quest-countdown {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin-bottom: 12px;
background: linear-gradient(180deg, rgba(255,200,87,0.08), rgba(255,200,87,0.02));
border: 1px solid rgba(255,200,87,0.25);
border-radius: var(--r-md);
position: relative;
overflow: hidden;
}
.next-quest-countdown::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(255,200,87,0.12), transparent 60%);
pointer-events: none;
}
.nqc-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,200,87,0.15);
border: 1.5px solid rgba(255,200,87,0.4);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 18px;
color: #ffc857;
z-index: 1;
}
.nqc-info { display: flex; flex-direction: column; min-width: 0; z-index: 1; flex: 1; gap: 2px; }
.nqc-label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-muted);
font-weight: 700;
font-family: var(--font-title);
}
.nqc-time {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 800;
color: #ffc857;
letter-spacing: 0.04em;
text-shadow: 0 0 8px rgba(255,200,87,0.35);
line-height: 1;
}
/* === TABS === */
.quest-tabs-row {
display: flex;
gap: 6px;
background: rgba(0,0,0,0.4);
padding: 4px;
border-radius: var(--r-md);
border: 1px solid var(--border-soft);
margin-bottom: 14px;
}
/* 2026-05-19: en mobile las 4 tabs van en 2 filas de 2 (mejor que apretarlas
en una sola fila ilegible). Orden CSS = orden DOM: [En curso, Para reclamar,
Disponibles, Ocultas] → top row + bottom row naturalmente. */
body.mobile-mode .quest-tabs-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
padding: 5px;
}
body.mobile-mode .quest-tab-btn {
padding: 9px 8px;
font-size: 10.5px;
letter-spacing: 0.05em;
gap: 5px;
min-height: 42px;
}
body.mobile-mode .quest-tab-btn i { font-size: 13px; }
body.mobile-mode .quest-tab-btn span:not(.quest-tab-count) {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.mobile-mode .quest-tab-count {
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 10px;
}
.quest-tab-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-sm);
color: var(--text-muted);
font-family: var(--font-title);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
position: relative;
}
.quest-tab-btn i { font-size: 15px; }
.quest-tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.quest-tab-btn.active {
background: linear-gradient(180deg, rgba(233,185,99,0.22), rgba(122,76,240,0.12));
border-color: var(--gold);
color: var(--gold);
box-shadow: 0 2px 10px rgba(233,185,99,0.2);
}
.quest-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
background: rgba(0,0,0,0.5);
color: var(--text);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 800;
margin-left: 2px;
}
.quest-tab-btn.active .quest-tab-count { color: var(--gold); }
.quest-tab-count.is-glow {
background: linear-gradient(180deg, var(--mint), #2a8b5e);
color: #0a1a10;
box-shadow: 0 0 10px rgba(63,214,146,0.6);
animation: glowPulse 1.6s ease-in-out infinite;
}
@keyframes glowPulse {
0%, 100% { box-shadow: 0 0 10px rgba(63,214,146,0.6); }
50% { box-shadow: 0 0 16px rgba(63,214,146,0.9); }
}
/* === GRID DE CARDS === */
.quest-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 14px;
}
/* === QUEST CARD (contenedor) ===
Layout vertical con 6 zonas (header/title/status/overall/sections/action).
Gap fijo de 12px entre zonas para mantener todo alineado. */
.quest-card-pro {
background: linear-gradient(180deg, rgba(20,12,40,0.85) 0%, rgba(10,6,22,0.95) 100%);
border: 1.5px solid rgba(255,255,255,0.06);
border-radius: var(--r-lg);
padding: 16px 18px 18px 22px;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
overflow: hidden;
transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
/* Banda lateral coloreada según tipo (más sutil que antes) */
.quest-card-pro::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--quest-color);
box-shadow: 0 0 12px color-mix(in srgb, var(--quest-color) 60%, transparent);
}
/* Glow sutil arriba a la izquierda */
.quest-card-pro::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 90% 50% at 0% 0%,
color-mix(in srgb, var(--quest-color) 10%, transparent),
transparent 60%);
pointer-events: none;
}
.quest-card-pro:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--quest-color) 60%, transparent);
box-shadow: 0 8px 26px color-mix(in srgb, var(--quest-color) 18%, transparent);
}
.quest-card-pro.is-complete {
border-color: var(--mint);
background: linear-gradient(180deg, rgba(20,38,28,0.88), rgba(10,18,12,0.95));
box-shadow: 0 0 18px rgba(63,214,146,0.2);
}
.quest-card-pro.is-complete::before {
background: var(--mint);
box-shadow: 0 0 14px var(--mint);
}
.quest-card-pro.is-expired {
opacity: 0.6;
filter: grayscale(40%);
}
/* Truco: todos los hijos directos quedan por encima del ::after */
.quest-card-pro > * { position: relative; z-index: 1; }
/* === ZONA 1: HEADER (tipo izq + chips der) === */
.qc-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.qc-type {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 9px;
background: color-mix(in srgb, var(--quest-color) 18%, rgba(0,0,0,0.5));
border: 1px solid color-mix(in srgb, var(--quest-color) 50%, transparent);
border-radius: 99px;
color: var(--quest-color);
font-family: var(--font-title);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
.qc-type i {
font-size: 12px;
filter: drop-shadow(0 0 4px var(--quest-color));
}
.qc-header-meta {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
/* Chip genérico (level / repeatable / etc) — un solo estilo unificado */
.qc-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 99px;
font-family: var(--font-title);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text);
white-space: nowrap;
}
.qc-chip i { font-size: 11px; }
.qc-chip-level { color: var(--gold); border-color: rgba(233,185,99,0.4); }
.qc-chip-level i { color: var(--gold); }
.qc-chip-mint { color: var(--mint); border-color: rgba(63,214,146,0.45); background: rgba(63,214,146,0.08); }
.qc-chip-mint i { color: var(--mint); }
/* === ZONA 2: TITLE BLOCK (nombre + descripción) === */
.qc-title-block {
display: flex;
flex-direction: column;
gap: 6px;
}
.qc-name {
font-family: var(--font-title);
font-size: 17px;
font-weight: 800;
letter-spacing: 0.03em;
color: var(--text);
line-height: 1.25;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.qc-desc {
font-family: var(--font-serif);
font-style: italic;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
}
/* === ZONA 3: STATUS STRIP (timer / level cap / ready) ===
Un solo elemento horizontal: icon + label + valor */
.qc-status {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
}
.qc-status > i {
font-size: 16px;
flex-shrink: 0;
}
.qc-status-label {
font-family: var(--font-title);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
flex: 1;
min-width: 0;
}
.qc-status-val {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* Variantes según contexto */
.qc-status-timer {
background: rgba(76,196,255,0.06);
border-color: rgba(76,196,255,0.25);
}
.qc-status-timer > i,
.qc-status-timer .qc-status-val {
color: var(--cyan);
}
.qc-status-level {
background: rgba(233,185,99,0.06);
border-color: rgba(233,185,99,0.25);
}
.qc-status-level > i,
.qc-status-level .qc-status-val {
color: var(--gold);
}
.qc-status-ready {
background: linear-gradient(90deg, rgba(63,214,146,0.18), rgba(63,214,146,0.04));
border-color: var(--mint);
animation: qcStatusReady 1.8s ease-in-out infinite;
}
@keyframes qcStatusReady {
0%, 100% { box-shadow: 0 0 0 rgba(63,214,146,0); }
50% { box-shadow: 0 0 16px rgba(63,214,146,0.4); }
}
.qc-status-ready > i,
.qc-status-ready .qc-status-label {
color: var(--mint);
}
.qc-status-ready .qc-status-label {
font-size: 11px;
letter-spacing: 0.08em;
}
/* === ZONA 4: OVERALL PROGRESS === */
.qc-overall {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.qc-overall-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.qc-overall-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-title);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
.qc-overall-label i { font-size: 12px; color: var(--gold); }
.qc-overall-pct {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 800;
color: var(--gold);
letter-spacing: 0.02em;
}
.qc-bar {
height: 8px;
background: rgba(0,0,0,0.6);
border-radius: 99px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.04);
}
.qc-bar-fill {
height: 100%;
background: linear-gradient(90deg,
color-mix(in srgb, var(--quest-color) 60%, transparent),
var(--quest-color));
border-radius: 99px;
box-shadow: 0 0 8px var(--quest-color);
transition: none;
}
.qc-bar-fill.is-full {
background: linear-gradient(90deg, #2a8b5e, var(--mint));
box-shadow: 0 0 12px var(--mint);
}
/* === ZONA 5: SECTIONS (Objectives / Rewards) ===
Cada sección es un wrapper con título consistente arriba. */
.qc-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.qc-section-title {
display: flex;
align-items: center;
gap: 7px;
font-family: var(--font-title);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
}
.qc-section-title i { font-size: 12px; }
.qc-section-rewards { color: var(--mint); }
.qc-section-rewards i { color: var(--mint); }
/* Objectives — list */
.qc-objectives-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.qc-obj-row {
display: grid;
grid-template-columns: 28px 1fr;
align-items: center;
gap: 10px;
padding: 9px 12px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
font-size: 12.5px;
color: var(--text);
line-height: 1.35;
}
.qc-obj-row b { color: var(--gold); font-weight: 700; }
.qc-obj-row-pro {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, background 0.15s;
}
.qc-obj-row-pro.is-done {
background: linear-gradient(90deg, rgba(63,214,146,0.12), rgba(63,214,146,0.02));
border-color: var(--mint);
}
.qc-obj-icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--gold);
border-radius: 50%;
background: rgba(233,185,99,0.1);
flex-shrink: 0;
}
.qc-obj-icon i { line-height: 1; }
.qc-obj-row-pro.is-done .qc-obj-icon {
color: var(--mint);
background: rgba(63,214,146,0.15);
}
.qc-obj-body {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.qc-obj-text {
font-size: 12.5px;
color: var(--text);
line-height: 1.35;
}
.qc-obj-text b { color: var(--gold); font-weight: 700; }
.qc-obj-row-pro.is-done .qc-obj-text b { color: var(--mint); }
.qc-obj-bar {
height: 4px;
background: rgba(0,0,0,0.6);
border-radius: 99px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.04);
}
.qc-obj-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--quest-color), color-mix(in srgb, var(--quest-color) 70%, white));
border-radius: 99px;
transition: none;
}
.qc-obj-row-pro.is-done .qc-obj-bar-fill {
background: linear-gradient(90deg, #2a8b5e, var(--mint));
}
.qc-obj-counter {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 800;
color: var(--gold);
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 56px;
letter-spacing: 0.02em;
}
.qc-obj-row-pro.is-done .qc-obj-counter { color: var(--mint); }
.qc-obj-counter i { font-size: 18px; }
.qc-obj-counter-sep { color: var(--text-muted); margin: 0 1px; }
/* === REWARDS GRID === */
.qc-rewards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.qc-reward {
display: grid;
grid-template-columns: 32px 1fr;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
}
.qc-reward > i {
font-size: 22px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(0,0,0,0.4);
flex-shrink: 0;
}
.qc-reward-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.qcr-val {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 800;
color: var(--text);
letter-spacing: 0.02em;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.qcr-lbl {
font-family: var(--font-title);
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
line-height: 1;
}
.qc-reward-gold { border-color: rgba(233,185,99,0.35); }
.qc-reward-gold > i { color: var(--gold); background: rgba(233,185,99,0.12); }
.qc-reward-gold .qcr-val { color: var(--gold); }
.qc-reward-xp { border-color: rgba(122,76,240,0.35); }
.qc-reward-xp > i { color: var(--primary); background: rgba(122,76,240,0.12); }
.qc-reward-xp .qcr-val { color: #b89dff; }
.qc-reward-item { border-color: rgba(86,200,255,0.35); }
.qc-reward-item > i { color: var(--cyan); background: rgba(86,200,255,0.12); }
.qc-reward-item .qcr-val { color: var(--cyan); }
/* Cuando hay un número impar de items, el último ocupa toda la fila */
.qc-rewards-grid > .qc-reward:last-child:nth-child(odd) {
grid-column: span 2;
}
/* Reward especial: Skill Tree Point */
.qc-reward-item.is-skill-point {
border-color: rgba(157,108,255,0.55);
background: rgba(157,108,255,0.10);
}
.qc-reward-item.is-skill-point > i {
color: #c39dff;
background: rgba(157,108,255,0.18);
filter: drop-shadow(0 0 4px rgba(157,108,255,0.5));
}
.qc-reward-item.is-skill-point .qcr-val {
color: #d8b4ff;
}
/* Rareza: bordes coloreados sutiles para items */
.qc-reward-item.is-rarity-uncommon { border-color: rgba(120,200,140,0.5); }
.qc-reward-item.is-rarity-uncommon > i { color: #78c88c; background: rgba(120,200,140,0.12); }
.qc-reward-item.is-rarity-uncommon .qcr-val { color: #98d4a8; }
.qc-reward-item.is-rarity-rare { border-color: rgba(86,200,255,0.55); }
.qc-reward-item.is-rarity-rare > i { color: #56c8ff; background: rgba(86,200,255,0.14); }
.qc-reward-item.is-rarity-rare .qcr-val { color: #84d6ff; }
.qc-reward-item.is-rarity-epic { border-color: rgba(184,132,255,0.55); }
.qc-reward-item.is-rarity-epic > i { color: #b884ff; background: rgba(184,132,255,0.14); }
.qc-reward-item.is-rarity-epic .qcr-val { color: #cda6ff; }
.qc-reward-item.is-rarity-legendary { border-color: rgba(255,178,76,0.6); }
.qc-reward-item.is-rarity-legendary > i { color: #ffb24c; background: rgba(255,178,76,0.14); }
.qc-reward-item.is-rarity-legendary .qcr-val { color: #ffc878; }
.qc-reward-item.is-rarity-mythic { border-color: rgba(255,99,123,0.6); }
.qc-reward-item.is-rarity-mythic > i { color: #ff637b; background: rgba(255,99,123,0.14); }
.qc-reward-item.is-rarity-mythic .qcr-val { color: #ff96a8; }
/* === ZONA 6: ACTION === */
.qc-action {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 6px;
}
.qc-action-row {
display: flex;
gap: 8px;
}
.qc-action-progress {
flex: 1;
min-height: 44px;
}
.qc-abandon-btn {
flex: 0 0 44px;
width: 44px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ============== SESSION EXPIRED — modal cuando el server reinicia ============== */
.session-expired-card {
position: relative;
max-width: 480px;
margin: 30px auto;
padding: 32px 28px 26px;
background: linear-gradient(135deg, rgba(30,28,55,0.95), rgba(20,15,38,0.95));
border: 1px solid rgba(184,132,255,0.5);
border-radius: 16px;
text-align: center;
box-shadow: 0 0 40px rgba(184,132,255,0.20), inset 0 0 30px rgba(184,132,255,0.05);
overflow: hidden;
animation: seFadeIn 0.4s ease-out;
}
@keyframes seFadeIn {
from { opacity: 0; transform: translateY(10px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.session-expired-glow {
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: radial-gradient(circle, rgba(184,132,255,0.15) 0%, transparent 50%);
pointer-events: none;
animation: seGlowPulse 4s ease-in-out infinite;
}
@keyframes seGlowPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.85; }
}
.session-expired-icon {
position: relative;
width: 80px; height: 80px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(184,132,255,0.25), rgba(157,108,255,0.10));
border: 2px solid rgba(184,132,255,0.55);
border-radius: 50%;
box-shadow: 0 0 20px rgba(184,132,255,0.35);
}
.session-expired-icon i {
font-size: 42px;
color: #c2a8ff;
animation: seIconRotate 3s ease-in-out infinite;
}
@keyframes seIconRotate {
0%, 100% { transform: rotate(0); }
50% { transform: rotate(360deg); }
}
.session-expired-title {
position: relative;
font-family: var(--font-title, 'Cinzel', serif);
font-size: 22px;
font-weight: 800;
color: #d8c2ff;
margin-bottom: 12px;
letter-spacing: 0.02em;
text-shadow: 0 0 12px rgba(184,132,255,0.45);
}
.session-expired-body {
position: relative;
font-size: 14px;
line-height: 1.55;
color: var(--text, #ddd);
margin-bottom: 16px;
padding: 0 6px;
}
.session-expired-free-badge {
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 14px;
background: linear-gradient(135deg, rgba(95,214,132,0.18), rgba(80,180,120,0.10));
border: 1px solid rgba(95,214,132,0.55);
border-radius: 99px;
color: #6cd99c;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 22px;
box-shadow: 0 0 12px rgba(95,214,132,0.20);
animation: sePulseBadge 2.4s ease-in-out infinite;
}
@keyframes sePulseBadge {
0%, 100% { box-shadow: 0 0 8px rgba(95,214,132,0.20); }
50% { box-shadow: 0 0 18px rgba(95,214,132,0.40); }
}
.session-expired-free-badge i {
font-size: 13px;
color: #6cd99c;
}
.session-expired-actions {
position: relative;
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.session-expired-actions .btn {
min-width: 160px;
}
@media (max-width: 480px) {
.session-expired-card { padding: 24px 18px 18px; margin: 16px auto; }
.session-expired-icon { width: 64px; height: 64px; margin-bottom: 14px; }
.session-expired-icon i { font-size: 32px; }
.session-expired-title { font-size: 18px; }
.session-expired-body { font-size: 13px; }
.session-expired-actions .btn { width: 100%; min-width: 0; }
}
/* ============== DEATH FLOW — modal limpio con selector de ciudad ============== */
/* Modal de derrota más compacto cuando muestra el flow de muerte */
.cap-result.is-defeat {
padding: 22px 20px 20px !important;
max-width: 460px;
margin: 0 auto;
}
.cap-result.is-defeat .cap-result-icon-wrap {
width: 70px; height: 70px;
margin: 0 auto 8px;
}
.cap-result.is-defeat .cap-result-icon { font-size: 44px; }
.cap-result.is-defeat .cap-result-title { font-size: 22px; margin-bottom: 2px; }
.cap-result.is-defeat .cap-result-sub { font-size: 12px; margin-bottom: 12px; }
/* Caja de oro perdido — más compacta */
.death-gold-box {
display: flex; align-items: center; gap: 12px;
margin: 6px 0 14px;
padding: 10px 14px;
background: linear-gradient(135deg, rgba(80,20,30,0.5), rgba(40,10,15,0.85));
border: 1px solid rgba(220,20,60,0.35);
border-radius: 10px;
box-shadow: inset 0 0 14px rgba(220,20,60,0.1);
}
.dgb-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(212,175,55,0.15);
border: 2px solid rgba(212,175,55,0.6);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.dgb-icon i { color: var(--gold); font-size: 18px; }
.dgb-info { flex: 1; min-width: 0; text-align: left; }
.dgb-num {
color: #ff6b6b;
font-size: 20px; font-weight: 800;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
line-height: 1;
margin-bottom: 2px;
}
.dgb-lbl {
color: var(--text-dim);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
}
.dgb-pct { color: var(--text-muted); margin-left: 4px; }
/* Título "Revivir en" — más compacto */
.death-cities-title {
text-align: center;
font-family: var(--font-cinzel, 'Cinzel', serif);
font-size: 12px;
font-weight: 700;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 8px;
position: relative;
}
.death-cities-title::before,
.death-cities-title::after {
content: '';
position: absolute; top: 50%;
width: 24px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(212,175,55,0.5));
}
.death-cities-title::before { right: calc(50% + 65px); transform: scaleX(-1); }
.death-cities-title::after { left: calc(50% + 65px); }
/* Grid de ciudades — compacto */
.death-cities-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 6px;
}
.death-city-card {
--city-color: var(--gold);
display: flex; flex-direction: column; align-items: center;
padding: 10px 8px 8px;
background: linear-gradient(180deg, rgba(28,16,48,0.5), rgba(15,8,25,0.92));
border: 2px solid rgba(255,255,255,0.08);
border-radius: 10px;
color: var(--text);
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
position: relative;
overflow: hidden;
min-height: 100px;
}
/* Imagen de la ciudad como fondo (capa más profunda).
El background-image se setea inline en el HTML para evitar problemas con CSS vars. */
.dcc-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
filter: saturate(0.85) brightness(0.85);
z-index: 0;
transition: transform 0.4s ease, filter 0.25s;
}
/* Overlay oscuro + gradient del color de la ciudad para legibilidad y mood */
.dcc-overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.92) 100%),
radial-gradient(ellipse at 50% 25%, color-mix(in srgb, var(--city-color) 30%, transparent) 0%, transparent 70%);
z-index: 1;
transition: background 0.25s;
pointer-events: none;
}
.death-city-card:hover:not(:disabled) {
border-color: var(--city-color);
transform: translateY(-3px);
box-shadow: 0 6px 22px rgba(0,0,0,0.5),
0 0 0 1px var(--city-color),
0 0 18px color-mix(in srgb, var(--city-color) 35%, transparent);
}
.death-city-card:hover:not(:disabled) .dcc-bg {
transform: scale(1.08);
filter: saturate(1.1) brightness(1.05);
}
.death-city-card:hover:not(:disabled) .dcc-overlay {
background:
linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.85) 100%),
radial-gradient(ellipse at 50% 25%, color-mix(in srgb, var(--city-color) 50%, transparent) 0%, transparent 75%);
}
.death-city-card:active:not(:disabled) { transform: translateY(-1px); }
.death-city-card:disabled { opacity: 0.4; cursor: not-allowed; }
.death-city-card.is-loading { opacity: 0.7; pointer-events: none; }
.death-city-card.is-loading::after {
content: '';
position: absolute; inset: 0;
background: rgba(0,0,0,0.55);
border-radius: 10px;
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat;
z-index: 5;
}
.dcc-icon {
width: 32px; height: 32px;
border-radius: 50%;
background: color-mix(in srgb, var(--city-color) 30%, rgba(0,0,0,0.5));
border: 2px solid var(--city-color);
display: flex; align-items: center; justify-content: center;
margin-bottom: 4px;
position: relative; z-index: 2;
transition: all 0.2s;
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.death-city-card:hover .dcc-icon {
background: color-mix(in srgb, var(--city-color) 50%, rgba(0,0,0,0.4));
box-shadow: 0 0 12px color-mix(in srgb, var(--city-color) 60%, transparent);
}
.dcc-icon i { color: #fff; font-size: 16px; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.dcc-name {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-size: 12px; font-weight: 800;
color: #fff;
letter-spacing: 0.4px;
margin-bottom: 1px;
position: relative; z-index: 2;
text-shadow: 0 2px 4px rgba(0,0,0,0.85);
}
.dcc-tag {
font-size: 9px;
color: rgba(255,255,255,0.75);
text-transform: uppercase;
letter-spacing: 1px;
position: relative; z-index: 2;
text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
/* Aviso bajo las ciudades — más compacto */
.death-tip {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin-top: 10px;
font-size: 11px;
color: var(--text-muted);
padding: 6px 10px;
background: rgba(0,0,0,0.35);
border-radius: 6px;
border: 1px solid rgba(86,200,255,0.18);
font-style: italic;
}
.death-tip i { color: var(--cyan); flex-shrink: 0; }
@media (max-width: 480px) {
.death-cities-grid { gap: 6px; }
.death-city-card { padding: 8px 6px 6px; min-height: 90px; }
.dcc-icon { width: 28px; height: 28px; }
.dcc-icon i { font-size: 14px; }
.dcc-name { font-size: 11px; }
.dcc-tag { font-size: 8.5px; }
}
/* ============== TRAVEL COOLDOWN MODAL ============== */
.travel-cd-overlay { z-index: 1500; }
.travel-cd-modal {
max-width: 380px;
padding: 28px 24px;
text-align: center;
}
.tcd-icon {
font-size: 56px;
color: var(--cyan);
margin-bottom: 14px;
animation: tcdPulse 2s ease-in-out infinite;
}
@keyframes tcdPulse {
0%,100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.08); opacity: 0.85; }
}
.tcd-title {
font-family: var(--font-title, 'Cinzel', serif);
font-size: 20px;
font-weight: 700;
color: var(--gold);
margin-bottom: 8px;
letter-spacing: 1.5px;
}
.tcd-sub {
font-size: 13px;
color: var(--text-dim);
margin-bottom: 18px;
line-height: 1.5;
}
.tcd-countdown-label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 4px;
}
.tcd-countdown {
font-family: var(--font-mono, monospace);
font-size: 38px;
font-weight: 800;
color: var(--cyan);
margin-bottom: 18px;
letter-spacing: 2px;
text-shadow: 0 0 12px rgba(86,200,255,0.4);
}
.tcd-btn { margin-top: 8px; }
/* Color por rareza en recompensas — sobreescribe el azul cyan default */
.qc-reward-item.is-rarity-common { border-color: rgba(180,180,180,0.45); }
.qc-reward-item.is-rarity-common i, .qc-reward-item.is-rarity-common .qcr-val { color: #cfcfcf; }
.qc-reward-item.is-rarity-uncommon { border-color: rgba(80,210,100,0.50); }
.qc-reward-item.is-rarity-uncommon i, .qc-reward-item.is-rarity-uncommon .qcr-val { color: #5fd87a; }
.qc-reward-item.is-rarity-rare { border-color: rgba(70,140,255,0.50); }
.qc-reward-item.is-rarity-rare i, .qc-reward-item.is-rarity-rare .qcr-val { color: #6aa3ff; }
.qc-reward-item.is-rarity-epic { border-color: rgba(180,90,230,0.55); }
.qc-reward-item.is-rarity-epic i, .qc-reward-item.is-rarity-epic .qcr-val { color: #c47cf0; }
.qc-reward-item.is-rarity-legendary { border-color: rgba(255,180,60,0.55); }
.qc-reward-item.is-rarity-legendary i, .qc-reward-item.is-rarity-legendary .qcr-val { color: #ffc34d; }
.qc-reward-item.is-rarity-mythic { border-color: rgba(255,80,140,0.60); }
.qc-reward-item.is-rarity-mythic i, .qc-reward-item.is-rarity-mythic .qcr-val { color: #ff5f8a; }
/* Meta pills */
.qc-meta-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
position: relative;
z-index: 1;
}
.qc-meta-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
color: var(--text-muted);
}
.qc-meta-pill i { font-size: 11px; }
.qc-meta-pill.is-mint { color: var(--mint); border-color: rgba(63,214,146,0.4); }
.qc-meta-pill.is-cyan { color: var(--cyan); border-color: rgba(86,200,255,0.4); }
/* Deadline */
.qc-deadline {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: rgba(86,200,255,0.08);
border-left: 3px solid var(--cyan);
border-radius: var(--r-md);
font-size: 12px;
color: var(--text);
position: relative;
z-index: 1;
}
.qc-deadline i { font-size: 16px; color: var(--cyan); }
.qcd-label { color: var(--text-muted); flex: 1; }
.qcd-time {
font-family: var(--font-mono);
font-weight: 800;
color: var(--cyan);
font-size: 13px;
}
.qc-deadline.is-expired {
background: rgba(225,80,90,0.12);
border-left-color: var(--blood);
}
.qc-deadline.is-expired i,
.qc-deadline.is-expired .qcd-time { color: var(--blood); }
/* 2026-05-08b: hint amarillo para quests one-time con max_level */
.qc-deadline.qc-level-hint {
background: rgba(255, 200, 87, 0.10);
border-left-color: var(--gold, #ffc857);
}
.qc-deadline.qc-level-hint i,
.qc-deadline.qc-level-hint .qcd-time { color: var(--gold, #ffc857); }
/* Action footer */
.qc-action {
margin-top: auto;
position: relative;
z-index: 1;
}
.qc-action .btn {
width: 100%;
font-size: 13px;
letter-spacing: 0.06em;
min-height: 44px;
}
.qc-action-row {
display: flex;
gap: 6px;
}
.qc-action-row .btn { font-size: 12px; }
.qc-abandon-btn {
flex: 0 0 44px;
width: 44px;
padding: 0;
font-size: 14px;
}
.qc-action .qc-hide-btn {
flex: 0 0 44px;
width: 44px;
padding: 0;
font-size: 14px;
}
/* Claim button shimmer */
.claim-btn-shimmer {
position: relative;
overflow: hidden;
}
.claim-btn-shimmer::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
transform: translateX(-100%);
animation: claimShimmer 2s ease-in-out infinite;
}
@keyframes claimShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Spinner */
.ph-spin-anim {
animation: phSpin 1s linear infinite;
}
@keyframes phSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ============================================================================
WORLD MAP — rediseño completo
============================================================================ */
/* Summary card */
.world-summary-card {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1px solid rgba(233,185,99,0.25);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.world-summary-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(233,185,99,0.08), transparent 60%);
pointer-events: none;
}
.wsum-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
}
.wsum-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 6px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
}
.wsum-cell:hover {
border-color: rgba(233,185,99,0.4);
transform: translateY(-2px);
}
.wsum-cell > i {
font-size: 20px;
color: var(--gold);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.wsum-cell.is-mint > i { color: var(--mint); }
.wsum-cell.is-current {
background: linear-gradient(180deg, rgba(233,185,99,0.18), rgba(233,185,99,0.04));
border-color: var(--gold);
box-shadow: 0 4px 14px rgba(233,185,99,0.2);
}
.wsum-cell.is-current > i { color: var(--gold); animation: pinPulse 1.8s ease-in-out infinite; }
@keyframes pinPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.wsum-val {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.wsum-cell.is-current .wsum-val.ws-current-name {
font-family: var(--font-title);
font-size: 14px;
color: var(--gold);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.wsum-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Section title */
.world-section-title {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-weight: 800;
opacity: 0.85;
}
.world-section-title i { font-size: 14px; }
/* Variantes Safe / PvP — separan visualmente las dos secciones del world */
.world-section-title.is-safe {
color: #5fd684;
opacity: 1;
border-bottom: 1px solid rgba(95,214,132,0.25);
padding-bottom: 8px;
margin-top: 4px;
}
.world-section-title.is-pvp {
color: #e85a6a;
opacity: 1;
border-bottom: 1px solid rgba(232,90,106,0.3);
padding-bottom: 8px;
margin-top: 22px;
}
/* 2026-06-02f T2: sección Zonas de Clanes (placeholder · evento semanal coop) */
.world-section-title.is-clan {
color: #a78bfa;
opacity: 1;
border-bottom: 1px solid rgba(167,139,250,0.32);
padding-bottom: 8px;
margin-top: 22px;
}
.world-section-title.is-clan .wst-count {
background: rgba(167,139,250,0.18);
color: #a78bfa;
}
/* Cards "Pronto" para zonas de clan futuras */
.zone-card.is-clan-coming {
cursor: not-allowed;
opacity: 0.78;
position: relative;
pointer-events: none;
border: 1px solid rgba(167,139,250,0.32);
}
.zone-card.is-clan-coming:hover { transform: none; }
.zone-card.is-clan-coming .zc-icon-wrap {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 12px;
background: rgba(167,139,250,0.16);
border: 1px solid rgba(167,139,250,0.4);
margin: 0 auto 8px;
}
.zone-card.is-clan-coming .zc-icon-wrap i {
font-size: 22px; color: #a78bfa;
}
.zone-card.is-clan-coming .zc-name {
font-weight: 800; font-size: 14px; color: #e9d5ff; text-align: center;
letter-spacing: 0.02em;
}
.zone-card.is-clan-coming .zc-sub {
text-align: center; margin-top: 4px;
}
.zone-card.is-clan-coming .zone-card-inner {
padding: 16px 12px 14px;
}
.zone-card.is-clan-coming .zc-coming-badge {
position: absolute;
top: 8px; right: 8px;
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
background: rgba(167,139,250,0.22);
border: 1px solid rgba(167,139,250,0.5);
border-radius: 99px;
color: #c4b5fd;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
z-index: 2;
}
.zone-card.is-clan-coming .zc-coming-badge i {
font-size: 11px;
}
.world-section-title.is-loot {
color: #d4af37;
opacity: 1;
border-bottom: 1px solid rgba(212,175,55,0.35);
padding-bottom: 8px;
margin-top: 22px;
}
.world-section-title .wst-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background: rgba(255,255,255,0.08);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
}
/* ===== PvP Attacked Modal (broadcast en tiempo real al defender) ===== */
.pvpa-modal {
max-width: 460px;
border: 1.5px solid var(--pvpa-accent, var(--gold));
box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 24px var(--pvpa-accent, transparent);
}
.pvpa-title {
color: var(--pvpa-accent, var(--gold)) !important;
font-size: 17px !important;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 12px;
}
.pvpa-attacker {
background: rgba(0,0,0,0.35);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 10px 12px;
margin-bottom: 12px;
}
.pvpa-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 6px 0;
font-size: 13px;
}
.pvpa-row + .pvpa-row { border-top: 1px solid rgba(255,255,255,0.04); }
.pvpa-lbl {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.pvpa-val {
font-family: var(--font-mono);
font-weight: 700;
color: var(--text);
}
.pvpa-row-loss .pvpa-val { color: #e85a6a; }
.pvpa-row-win .pvpa-val { color: #5fd684; }
.pvpa-row-items { flex-direction: column; align-items: flex-start; }
.pvpa-row-items .pvpa-val { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-family: var(--font-body); font-weight: 500; }
.pvpa-item {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--border-soft);
font-size: 11px;
}
.pvpa-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.pvpa-stat {
background: rgba(0,0,0,0.4);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 10px 6px;
text-align: center;
}
.pvpa-stat > i { font-size: 18px; color: var(--pvpa-accent, var(--gold)); }
.pvpa-stat-val {
font-family: var(--font-mono);
font-weight: 800;
font-size: 18px;
color: var(--text);
margin-top: 2px;
}
.pvpa-stat-lbl {
font-size: 10px;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 0.08em;
margin-top: 1px;
}
.pvpa-levelup {
background: linear-gradient(180deg, rgba(255,200,87,0.18), rgba(255,200,87,0.05));
border: 1px solid rgba(255,200,87,0.4);
border-radius: var(--r-md);
padding: 10px 12px;
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
color: #ffc857;
font-weight: 700;
font-size: 13px;
}
.pvpa-levelup > i { font-size: 18px; }
.world-section-title.is-safe .wst-count {
background: rgba(95,214,132,0.18);
color: #5fd684;
}
.world-section-title.is-pvp .wst-count {
background: rgba(232,90,106,0.2);
color: #e85a6a;
}
.world-section-title.is-loot .wst-count {
background: rgba(212,175,55,0.2);
color: #d4af37;
}
.world-section-title.is-dungeon {
color: #9d6cff;
opacity: 1;
border-bottom: 1px solid rgba(157,108,255,0.3);
padding-bottom: 8px;
margin-top: 22px;
}
.world-section-title.is-dungeon .wst-count {
background: rgba(157,108,255,0.2);
color: #9d6cff;
}
/* 2026-05-22: Sección Zona Evento Especial */
.world-section-title.is-event {
color: #b884ff;
opacity: 1;
border-bottom: 1px solid rgba(184,132,255,0.45);
padding-bottom: 8px;
margin-top: 4px;
}
.world-section-title.is-event i {
filter: drop-shadow(0 0 8px rgba(184,132,255,0.7));
animation: wst-event-pulse 2.2s ease-in-out infinite;
}
@keyframes wst-event-pulse {
0%,100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.world-section-title.is-event .wst-count {
background: rgba(184,132,255,0.25);
color: #b884ff;
}
/* Card de evento: borde cosmic + glow sutil */
.zone-card[data-zone].is-event-zone,
.map-grid > .zone-card[style*="b884ff"] { /* fallback via inline color */ }
.wst-beta-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: linear-gradient(135deg, #c4451e, #ffc857);
color: #1a0d2e;
font-size: 9.5px;
font-weight: 900;
letter-spacing: 0.12em;
border-radius: 4px;
margin-left: 4px;
}
/* Card de mazmorra en mantenimiento — visible pero deshabilitada */
.zone-card.is-dungeon-maintenance {
cursor: pointer;
filter: grayscale(0.5) brightness(0.75);
transition: all 0.18s;
position: relative;
}
.zone-card.is-dungeon-maintenance:hover {
filter: grayscale(0.3) brightness(0.9);
transform: translateY(-1px);
}
.zone-card.is-dungeon-maintenance .zc-overlay,
.zone-card.is-dungeon-maintenance .zc-maintenance-overlay {
background: linear-gradient(180deg, rgba(20,8,40,0.7), rgba(8,4,18,0.92));
}
.zc-maintenance-badge {
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: linear-gradient(135deg, #6a45c4, #9d6cff);
color: #fff;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 999px;
z-index: 3;
box-shadow: 0 4px 12px rgba(157,108,255,0.45);
}
.zc-maintenance-badge i { font-size: 11px; }
.zc-pvp.is-maintenance {
color: #9d6cff;
background: rgba(157,108,255,0.15) !important;
border-color: rgba(157,108,255,0.4) !important;
}
/* Modal de "Mazmorras en mantenimiento" */
.dgnm-modal {
max-width: 460px;
background: linear-gradient(180deg, #1c1334 0%, #0a0518 100%);
border: 1.5px solid rgba(157,108,255,0.45);
border-radius: 18px;
padding: 28px 24px 22px;
text-align: center;
position: relative;
box-shadow: 0 20px 60px rgba(157,108,255,0.25);
}
/* ===== Dungeon modal v2 (2026-05-16) — más pro: hero + stats grid + floor path ===== */
.dgnm-modal-v2 {
max-width: 560px !important;
padding: 0 !important;
text-align: left !important;
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 92vh;
}
.dgnm-modal-v2 .ev-modal-close {
position: absolute;
top: 12px; right: 12px;
z-index: 5;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.1);
}
.dgnm-hero {
position: relative;
height: 180px;
overflow: hidden;
background: linear-gradient(135deg, var(--dgn-accent, #4ec3f7) 0%, #1c1334 100%);
}
.dgnm-hero-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.65;
}
.dgnm-hero-overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(28,19,52,0.85) 70%, rgba(10,5,24,1) 100%),
radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--dgn-accent, #4ec3f7) 30%, transparent), transparent 60%);
}
.dgnm-hero-content {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 18px 22px;
gap: 6px;
}
.dgnm-modal-v2 .dgnm-tag {
align-self: flex-start;
font-size: 9.5px;
letter-spacing: 0.2em;
padding: 4px 11px;
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.dgnm-modal-v2 .dgnm-title {
font-family: var(--font-title);
font-size: 26px;
font-weight: 900;
letter-spacing: 0.03em;
margin: 4px 0 0;
text-shadow: 0 2px 8px rgba(0,0,0,0.7);
color: #fff;
}
.dgnm-hero-cd {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 4px 10px;
background: rgba(225,80,90,0.18);
border: 1px solid rgba(225,80,90,0.5);
border-radius: 99px;
font-size: 11px;
color: #ff9aa3;
align-self: flex-start;
font-weight: 600;
}
.dgnm-hero-cd i { font-size: 13px; }
/* Stats grid (4 chips) */
.dgnm-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dgnm-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 12px 8px;
background: linear-gradient(180deg, rgba(20,12,40,0.9), rgba(10,5,22,0.95));
text-align: center;
}
.dgnm-stat i {
font-size: 22px;
color: var(--dgn-accent, #b884ff);
margin-bottom: 2px;
}
.dgnm-stat-val {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 800;
color: #fff;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.dgnm-stat-lbl {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.55);
font-weight: 600;
}
.dgnm-body-v2 {
flex: 1;
overflow-y: auto;
padding: 18px 22px 12px;
}
.dgnm-section { margin-bottom: 18px; }
.dgnm-section-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #e0d7ff;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(157,108,255,0.18);
}
.dgnm-section-title > i { font-size: 16px; color: var(--dgn-accent, #b884ff); }
.dgnm-section-sub {
margin-left: auto;
font-family: var(--font-body);
font-size: 10.5px;
font-weight: 500;
color: var(--text-muted);
text-transform: none;
letter-spacing: 0;
}
/* Rules list */
.dgnm-rules {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.dgnm-rules li {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 7px 10px;
background: rgba(255,255,255,0.025);
border-left: 2px solid rgba(157,108,255,0.4);
border-radius: 4px;
font-size: 12.5px;
color: rgba(255,255,255,0.82);
line-height: 1.4;
}
.dgnm-rules li i {
font-size: 14px;
color: var(--dgn-accent, #b884ff);
flex-shrink: 0;
margin-top: 1px;
}
/* Floor path — chain visual de pisos */
.dgnm-floors {
display: flex;
align-items: center;
gap: 4px;
overflow-x: auto;
padding: 4px 2px 6px;
scrollbar-width: thin;
}
.dgnm-floor {
flex-shrink: 0;
min-width: 78px;
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
text-align: center;
transition: transform 0.15s;
}
.dgnm-floor:hover { transform: translateY(-2px); }
.dgnm-floor-num {
width: 24px; height: 24px;
border-radius: 50%;
background: rgba(157,108,255,0.2);
border: 1px solid rgba(157,108,255,0.5);
color: var(--dgn-accent, #b884ff);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
margin-bottom: 5px;
}
.dgnm-floor-num i { font-size: 13px; }
.dgnm-floor-name {
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.95);
margin-bottom: 1px;
white-space: nowrap;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
.dgnm-floor-lvl {
font-family: var(--font-mono);
font-size: 10px;
color: var(--gold);
font-weight: 600;
}
.dgnm-floor.is-boss {
background: linear-gradient(135deg, rgba(255,80,90,0.15), rgba(225,80,90,0.08));
border-color: rgba(225,80,90,0.5);
}
.dgnm-floor.is-boss .dgnm-floor-num {
background: rgba(255,80,90,0.25);
border-color: rgba(255,80,90,0.6);
color: #ffb3b8;
}
.dgnm-floor.is-boss .dgnm-floor-lvl { color: #ff9aa3; }
.dgnm-floor-arrow {
font-size: 14px;
color: rgba(255,255,255,0.3);
flex-shrink: 0;
}
/* Boss rewards grid */
.dgnm-boss-rewards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 10px;
}
.dgnm-boss-reward {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
}
.dgnm-boss-reward i { font-size: 24px; flex-shrink: 0; }
.dgnm-reward-gold i { color: var(--gold); filter: drop-shadow(0 0 6px rgba(252,211,77,0.4)); }
.dgnm-reward-xp i { color: #c2a8ff; filter: drop-shadow(0 0 6px rgba(194,168,255,0.4)); }
.dgnm-reward-gold { border-color: rgba(252,211,77,0.25); }
.dgnm-reward-xp { border-color: rgba(194,168,255,0.25); }
.dgnm-reward-info { min-width: 0; }
.dgnm-reward-val {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 800;
color: #fff;
font-variant-numeric: tabular-nums;
}
.dgnm-reward-lbl {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
font-weight: 600;
}
/* Boss drop cards (cofres, items raros) */
.dgnm-boss-drops {
display: flex;
flex-direction: column;
gap: 6px;
}
.dgnm-boss-drop-card {
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
}
.dgnm-boss-drop-icon {
width: 40px; height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.4);
border-radius: 6px;
font-size: 24px;
}
.dgnm-boss-drop-icon iconify-icon.gi { width: 1em; height: 1em; }
.dgnm-boss-drop-name {
font-size: 13px;
font-weight: 700;
color: #fff;
}
.dgnm-boss-drop-chance {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
font-family: var(--font-mono);
}
.dgnm-boss-drop-card.rarity-common { border-color: rgba(180,180,180,0.30); }
.dgnm-boss-drop-card.rarity-uncommon { border-color: rgba(80,200,120,0.45); background: rgba(80,200,120,0.06); }
.dgnm-boss-drop-card.rarity-uncommon .dgnm-boss-drop-name { color: #7be0a3; }
.dgnm-boss-drop-card.rarity-rare { border-color: rgba(80,160,255,0.50); background: rgba(80,160,255,0.07); }
.dgnm-boss-drop-card.rarity-rare .dgnm-boss-drop-name { color: #8cc1ff; }
.dgnm-boss-drop-card.rarity-epic { border-color: rgba(184,132,255,0.50); background: rgba(184,132,255,0.07); }
.dgnm-boss-drop-card.rarity-epic .dgnm-boss-drop-name { color: #d4b3ff; }
.dgnm-boss-drop-card.rarity-legendary { border-color: rgba(255,210,74,0.5); background: rgba(255,210,74,0.06); }
.dgnm-boss-drop-card.rarity-legendary .dgnm-boss-drop-name { color: #ffe28a; }
.dgnm-chest-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
font-size: 11px;
font-weight: 600;
background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(124,58,237,0.25));
border: 1px solid rgba(168,85,247,0.5);
border-radius: 99px;
color: #d8b4fe;
cursor: pointer;
font-family: inherit;
transition: all 0.15s;
white-space: nowrap;
}
.dgnm-chest-btn:hover {
background: linear-gradient(135deg, rgba(168,85,247,0.3), rgba(124,58,237,0.35));
border-color: rgba(192,132,252,0.8);
color: #fff;
transform: translateY(-1px);
}
.dgnm-chest-btn i { font-size: 12px; }
.dgnm-footer {
padding: 14px 22px 18px;
border-top: 1px solid rgba(255,255,255,0.05);
background: rgba(10,5,22,0.6);
}
.dgnm-enter-btn {
font-family: var(--font-title);
letter-spacing: 0.06em;
font-weight: 800;
box-shadow: 0 4px 20px rgba(225,80,90,0.4);
}
/* Mobile responsive */
body.mobile-mode .dgnm-modal-v2 { max-width: 96% !important; }
body.mobile-mode .dgnm-hero { height: 140px; }
body.mobile-mode .dgnm-modal-v2 .dgnm-title { font-size: 21px; }
body.mobile-mode .dgnm-stats-grid { grid-template-columns: repeat(2, 1fr); }
body.mobile-mode .dgnm-boss-rewards-grid { grid-template-columns: 1fr; }
body.mobile-mode .dgnm-body-v2 { padding: 14px 16px 10px; }
body.mobile-mode .dgnm-footer { padding: 12px 16px 14px; }
body.mobile-mode .dgnm-boss-drop-card { grid-template-columns: 36px 1fr; gap: 8px; }
body.mobile-mode .dgnm-chest-btn { grid-column: 1 / -1; justify-content: center; margin-top: 4px; }
.dgnm-icon-wrap {
position: relative;
width: 96px;
height: 96px;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
}
.dgnm-icon-glow {
position: absolute;
inset: -16px;
background: radial-gradient(circle, rgba(157,108,255,0.45), transparent 70%);
filter: blur(16px);
animation: tg-pulse 2.6s ease-in-out infinite;
}
.dgnm-main-icon {
position: relative;
font-size: 72px;
color: #b884ff;
filter: drop-shadow(0 6px 14px rgba(157,108,255,0.6));
}
.dgnm-tag {
display: inline-block;
background: rgba(157,108,255,0.18);
color: #b884ff;
border: 1px solid rgba(157,108,255,0.4);
border-radius: 999px;
padding: 4px 12px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.dgnm-title {
font-family: var(--font-title);
font-weight: 800;
font-size: 22px;
color: #fff;
margin: 12px 0 8px;
letter-spacing: 0.04em;
}
.dgnm-body {
font-size: 13px;
color: rgba(255,255,255,0.75);
line-height: 1.55;
padding: 0 4px;
margin-bottom: 14px;
}
.dgnm-stay-tuned {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
margin-bottom: 14px;
background: rgba(40,158,229,0.12);
border: 1px solid rgba(40,158,229,0.35);
border-radius: 10px;
color: #4ec3f7;
font-size: 12px;
font-weight: 600;
}
.dgnm-stay-tuned > i { font-size: 16px; }
/* Layout — antes era 2-col, ahora full-width (modal reemplaza el detail) */
.world-layout {
display: block;
}
/* === Desktop world layout: grid izq + current zone card derecha === */
.world-layout-pc {
display: grid;
grid-template-columns: 1fr 380px;
gap: 16px;
align-items: start;
}
.world-grid-col { min-width: 0; }
.world-current-col {
position: sticky;
top: 0;
}
/* Current zone card (desktop side panel) */
.world-current-card {
background: linear-gradient(180deg, rgba(20,12,40,0.92), rgba(10,6,22,0.98));
border: 1.5px solid var(--zone-color);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow:
0 8px 30px rgba(0,0,0,0.5),
0 0 24px color-mix(in srgb, var(--zone-color) 25%, transparent);
position: relative;
}
/* 2026-05-08: ocultar FAB de pociones cuando hay combate activo
(PvE) — no se puede tomar pociones en medio de la batalla.
El FAB está inside el container que recibe la clase .combat-active. */
.combat-active .combat-bag-fab { display: none !important; }
/* 2026-05-08: aviso de items perdidos por mochila llena */
.cap-loot-skipped {
display: flex;
gap: 12px;
align-items: flex-start;
margin-top: 14px;
padding: 12px 14px;
background: rgba(232,90,106,0.10);
border: 1px solid rgba(232,90,106,0.45);
border-radius: 10px;
}
.cap-loot-skipped > i {
font-size: 22px;
color: #ff8d63;
flex-shrink: 0;
margin-top: 2px;
}
.cap-loot-skipped-title {
font-family: var(--font-cinzel, serif);
font-weight: 700;
font-size: 14px;
color: #ff8d63;
letter-spacing: 0.04em;
}
.cap-loot-skipped-sub {
margin-top: 4px;
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.4;
}
/* 2026-05-08: card de caps diarios PvP (oro + XP wins) */
.pvp-caps-card {
margin: 14px 0;
padding: 14px 16px;
background: linear-gradient(180deg, rgba(184,132,255,0.08), rgba(20,12,40,0.7));
border: 1px solid rgba(184,132,255,0.30);
border-radius: 12px;
font-size: 13px;
}
.pvp-caps-card.pvp-caps-loading {
text-align: center;
color: var(--text-muted);
padding: 16px;
}
.pvp-caps-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
flex-wrap: wrap;
gap: 8px;
}
.pvp-caps-title {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-cinzel, serif);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: #d8c3ff;
text-transform: uppercase;
}
.pvp-caps-title i { color: #b884ff; font-size: 16px; }
.pvp-caps-reset {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
padding: 3px 9px;
background: rgba(255,255,255,0.05);
border-radius: 99px;
}
.pvp-caps-reset i { font-size: 11px; }
.pvp-caps-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 600px) {
.pvp-caps-body { grid-template-columns: 1fr; gap: 12px; }
}
.pvp-cap-row { display: grid; gap: 5px; }
.pvp-cap-info {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
.pvp-cap-info i { font-size: 14px; }
.pvp-cap-label {
color: var(--text-muted);
font-weight: 600;
}
.pvp-cap-val {
margin-left: auto;
font-family: var(--font-mono);
font-weight: 700;
color: #fff;
}
/* Badge con la fórmula del cap (+2k por nivel) — junto al label */
.pvp-cap-formula {
display: inline-flex;
align-items: center;
padding: 2px 7px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.4px;
color: #ffd87a;
background: rgba(255,200,87,0.15);
border: 1px solid rgba(255,200,87,0.4);
border-radius: 99px;
text-transform: uppercase;
font-family: var(--font-mono);
cursor: help;
white-space: nowrap;
}
.pvp-cap-bar {
height: 8px;
background: rgba(0,0,0,0.5);
border-radius: 99px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
}
.pvp-cap-fill {
height: 100%;
border-radius: 99px;
transition: width 0.4s ease;
}
.pvp-cap-fill.is-gold {
background: linear-gradient(90deg, #ffc857, #c48a21);
box-shadow: 0 0 8px rgba(255,200,87,0.5);
}
.pvp-cap-fill.is-xp {
background: linear-gradient(90deg, #c2a8ff, #6e3acc);
box-shadow: 0 0 8px rgba(184,132,255,0.5);
}
.pvp-cap-hint {
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono);
}
.pvp-cap-row.is-full .pvp-cap-hint { color: #ff8d63; font-weight: 700; }
.pvp-cap-row.is-full .pvp-cap-fill { filter: saturate(0.5) brightness(0.7); }
/* 2026-05-08: FAB de pociones en pantalla de combate/monstruos */
.combat-bag-fab {
position: fixed;
/* Desktop: a la IZQUIERDA del side-panel (chat) que mide 320px */
right: calc(320px + 20px);
bottom: 24px;
z-index: 50;
width: 54px;
height: 54px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(78,195,247,0.95), rgba(30,96,196,0.95));
border: 2px solid rgba(255,255,255,0.30);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
box-shadow: 0 6px 18px rgba(78,195,247,0.6), 0 3px 8px rgba(0,0,0,0.5);
transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
animation: world-bag-fab-pulse 2.6s ease-in-out infinite;
}
.combat-bag-fab:hover {
transform: scale(1.10) translateY(-2px);
box-shadow: 0 8px 24px rgba(78,195,247,0.85), 0 4px 10px rgba(0,0,0,0.6);
}
.combat-bag-fab:active { transform: scale(0.95); }
/* Mobile: el side-panel desaparece, así que la pegamos al borde derecho
por arriba del bottom-tab nav. */
body.mobile-mode .combat-bag-fab {
right: 14px;
bottom: calc(var(--m-bottom-h, 60px) + var(--m-safe-bottom, 0px) + 14px);
width: 50px;
height: 50px;
font-size: 24px;
}
/* 2026-05-08: FAB de pociones flotante (solo en ciudades) */
.world-bag-fab {
position: absolute;
top: 12px;
right: 12px;
z-index: 5;
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(78,195,247,0.95), rgba(30,96,196,0.95));
border: 2px solid rgba(255,255,255,0.25);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
box-shadow: 0 4px 14px rgba(78,195,247,0.55), 0 2px 6px rgba(0,0,0,0.4);
transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
animation: world-bag-fab-pulse 2.6s ease-in-out infinite;
}
.world-bag-fab:hover {
transform: scale(1.08) translateY(-2px);
box-shadow: 0 6px 20px rgba(78,195,247,0.75), 0 3px 8px rgba(0,0,0,0.5);
}
.world-bag-fab:active { transform: scale(0.95); }
@keyframes world-bag-fab-pulse {
0%, 100% { box-shadow: 0 4px 14px rgba(78,195,247,0.55), 0 2px 6px rgba(0,0,0,0.4), 0 0 0 0 rgba(78,195,247,0.45); }
50% { box-shadow: 0 4px 14px rgba(78,195,247,0.55), 0 2px 6px rgba(0,0,0,0.4), 0 0 0 10px rgba(78,195,247,0); }
}
/* Modal de pociones */
.world-pot-modal { max-width: 480px; }
.world-pot-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
max-height: 60vh;
overflow-y: auto;
}
.world-pot-card {
display: grid;
grid-template-columns: 60px 1fr auto;
align-items: center;
gap: 12px;
padding: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 10px;
cursor: pointer;
text-align: left;
transition: background .15s, border-color .15s, transform .15s;
}
.world-pot-card:hover {
background: rgba(78,195,247,0.10);
border-color: rgba(78,195,247,0.40);
transform: translateX(2px);
}
.world-pot-card.is-using { opacity: 0.5; pointer-events: none; }
.world-pot-card.r-uncommon { border-left: 3px solid var(--r-uncommon, #5fd684); }
.world-pot-card.r-rare { border-left: 3px solid var(--r-rare, #5fb4ff); }
.world-pot-card.r-epic { border-left: 3px solid var(--r-epic, #c2a8ff); }
.world-pot-card.r-legendary { border-left: 3px solid var(--r-legendary, #ffc857); }
.world-pot-card.r-mythic { border-left: 3px solid var(--r-mythic, #ff5fa0); }
.world-pot-img-wrap {
position: relative;
width: 56px;
height: 56px;
border-radius: 8px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.10);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #4cc4ff;
}
.world-pot-img {
width: 100%; height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.world-pot-qty {
position: absolute;
bottom: -4px;
right: -4px;
background: var(--gold);
color: #000;
font-family: var(--font-mono);
font-weight: 800;
font-size: 11px;
padding: 2px 6px;
border-radius: 999px;
border: 2px solid rgba(0,0,0,0.6);
}
.world-pot-info { min-width: 0; }
.world-pot-name {
font-family: var(--font-title);
font-weight: 700;
font-size: 13.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.world-pot-desc {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 2px;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.world-pot-use {
font-family: var(--font-title);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.05em;
color: #4cc4ff;
background: rgba(78,195,247,0.12);
border: 1px solid rgba(78,195,247,0.35);
border-radius: 6px;
padding: 6px 10px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.world-pot-card:hover .world-pot-use {
background: rgba(78,195,247,0.22);
border-color: rgba(78,195,247,0.6);
}
.world-pot-card.r-uncommon .world-pot-name { color: var(--r-uncommon, #5fd684); }
.world-pot-card.r-rare .world-pot-name { color: var(--r-rare, #5fb4ff); }
.world-pot-card.r-epic .world-pot-name { color: var(--r-epic, #c2a8ff); }
.world-pot-card.r-legendary .world-pot-name { color: var(--r-legendary, #ffc857); }
.world-pot-card.r-mythic .world-pot-name { color: var(--r-mythic, #ff5fa0); }
.wcc-hero {
position: relative;
height: 200px;
overflow: hidden;
}
.wcc-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: saturate(1.1);
transition: transform 0.4s ease;
}
.world-current-card:hover .wcc-hero-bg { transform: scale(1.04); }
.wcc-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0,0,0,0.2) 0%,
rgba(15,8,30,0.7) 60%,
rgba(20,12,40,0.97) 100%);
}
.wcc-here-tag {
position: absolute;
top: 12px;
left: 12px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
font-family: var(--font-title);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
border-radius: 99px;
z-index: 2;
box-shadow: 0 3px 10px rgba(233,185,99,0.5);
animation: hereTagPulse 1.6s ease-in-out infinite;
}
.wcc-here-tag i { font-size: 11px; }
.wcc-hero-content {
position: absolute;
bottom: 14px;
left: 18px;
right: 18px;
z-index: 2;
}
.wcc-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: color-mix(in srgb, var(--zone-color) 30%, rgba(0,0,0,0.7));
border: 2px solid var(--zone-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--zone-color);
font-size: 26px;
filter: drop-shadow(0 0 16px color-mix(in srgb, var(--zone-color) 60%, transparent));
margin-bottom: 8px;
}
.wcc-title {
font-family: var(--font-title);
font-size: 22px;
font-weight: 900;
letter-spacing: 0.05em;
color: var(--text);
text-shadow: 0 2px 12px rgba(0,0,0,0.9);
margin-bottom: 6px;
text-transform: uppercase;
}
.wcc-meta-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.wcc-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
background: rgba(0,0,0,0.7);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
color: var(--text);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.wcc-pill i { font-size: 11px; }
.wcc-pill.is-danger { color: var(--blood); border-color: rgba(225,80,90,0.5); background: rgba(225,80,90,0.15); }
.wcc-pill.is-mint { color: var(--mint); border-color: rgba(63,214,146,0.5); background: rgba(63,214,146,0.15); }
/* Body */
.wcc-body {
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.wcc-desc {
font-family: var(--font-serif);
font-style: italic;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
padding-left: 12px;
border-left: 3px solid color-mix(in srgb, var(--zone-color) 50%, transparent);
}
.wcc-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.wcc-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 10px 4px 8px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
}
.wcc-stat > i { font-size: 18px; }
.wcc-stat-val {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.wcc-stat-lbl {
font-family: var(--font-title);
font-size: 8.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
.wcc-territory {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: linear-gradient(90deg, rgba(233,185,99,0.12), rgba(233,185,99,0.02));
border-left: 3px solid var(--gold);
border-radius: var(--r-md);
}
.wcc-territory > i { font-size: 18px; color: var(--gold); }
.wcc-territory-label { font-family: var(--font-title); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.wcc-territory-name { font-family: var(--font-title); font-size: 13px; font-weight: 800; color: var(--text); }
.wcc-info-tip {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: rgba(86,200,255,0.08);
border-left: 3px solid var(--cyan);
border-radius: var(--r-md);
font-size: 12px;
color: var(--text);
line-height: 1.4;
}
.wcc-info-tip i { font-size: 16px; color: var(--cyan); flex-shrink: 0; margin-top: 1px; }
.wcc-action .btn { width: 100%; }
/* Section title tip */
.world-section-title .wst-tip {
margin-left: auto;
text-transform: none;
letter-spacing: 0;
font-weight: 500;
opacity: 0.7;
}
/* Map grid */
/* 2026-06-03: bajado el minmax 200→170 para que en pantallas PC chicas
(laptops ~1024-1366px) entren 3 cards por fila en vez de 2. Las cards
shrinkean naturalmente; ver media query abajo para padding/font tweaks. */
.map-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 10px;
}
/* 2026-06-03: en cards chicas, reducir padding e iconos para que el contenido
quepa bien aún con 3 por fila. Tablets/mobile siguen usando reglas mobile.css. */
@media (min-width: 720px) and (max-width: 1280px) {
.map-grid .zone-card { padding: 11px; }
.map-grid .zone-card .z-name { font-size: 13.5px; }
.map-grid .zone-card .z-sub { font-size: 11px; }
.map-grid .zone-card .z-icon { width: 38px; height: 38px; font-size: 18px; }
}
/* === Zone card === */
.zone-card {
position: relative;
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: var(--r-lg);
padding: 14px;
cursor: pointer;
overflow: hidden;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,6,22,0.95));
-webkit-tap-highlight-color: transparent;
}
.zone-card.has-bg { background: transparent; }
.zone-card .zc-bg {
position: absolute;
inset: 0;
/* background-image se setea inline en JS — usa url directa para evitar issues con CSS vars */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.4s ease, filter 0.3s ease;
z-index: 0;
/* Imagen claramente visible: sin filtros oscuros agresivos */
filter: saturate(1.1) brightness(1);
}
.zone-card .zc-overlay {
position: absolute;
inset: 0;
/* Overlay más sutil — mantiene legible el texto pero deja ver la imagen */
background: linear-gradient(180deg,
rgba(0,0,0,0) 0%,
rgba(15,8,30,0.5) 55%,
rgba(10,5,20,0.95) 100%);
z-index: 1;
}
.zone-card.is-locked .zc-bg { filter: saturate(0.3) brightness(0.5); }
.zone-card:hover {
transform: translateY(-4px);
border-color: var(--zone-color);
box-shadow: 0 10px 28px color-mix(in srgb, var(--zone-color) 35%, transparent);
}
.zone-card:hover .zc-bg { transform: scale(1.08); }
.zone-card.is-current {
border-color: var(--gold);
box-shadow:
0 0 24px rgba(233,185,99,0.35),
inset 0 0 30px rgba(233,185,99,0.1);
}
.zone-card.is-selected {
border-color: var(--zone-color);
box-shadow:
0 0 22px color-mix(in srgb, var(--zone-color) 50%, transparent),
inset 0 0 22px color-mix(in srgb, var(--zone-color) 12%, transparent);
}
.zone-card.is-locked {
opacity: 0.55;
filter: grayscale(40%);
}
.zone-card.is-locked:hover {
transform: none;
box-shadow: none;
}
/* Badges esquina */
.zc-current-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
font-family: var(--font-title);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 99px;
box-shadow: 0 3px 10px rgba(233,185,99,0.5);
animation: currentPulse 1.6s ease-in-out infinite;
}
@keyframes currentPulse {
0%, 100% { box-shadow: 0 3px 10px rgba(233,185,99,0.5); }
50% { box-shadow: 0 3px 16px rgba(233,185,99,0.85); }
}
.zc-current-badge i { font-size: 11px; }
.zc-lock-badge {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(0,0,0,0.85);
color: var(--blood);
border: 1px solid var(--blood);
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.04em;
border-radius: 99px;
}
.zc-lock-badge i { font-size: 11px; }
/* Loot city — badge de rareza requerida */
.zc-rarity-badge {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(0,0,0,0.85);
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
border-radius: 99px;
border: 1px solid currentColor;
}
.zc-rarity-badge i { font-size: 11px; }
.zc-rarity-badge.r-common { color: #a8a8b3; }
.zc-rarity-badge.r-uncommon { color: #5fd684; }
.zc-rarity-badge.r-rare { color: #5aa6ff; }
.zc-rarity-badge.r-epic { color: #b884ff; }
.zc-rarity-badge.r-legendary { color: #ffc857; }
.zc-rarity-badge.r-mythic { color: #ff5a8d; }
/* Si la zona está locked, el lock-badge va a la izquierda para no chocar con rarity-badge */
.zone-card.is-loot.is-locked .zc-lock-badge { right: auto; left: 10px; }
/* Pill de rareza dentro del modal de zona */
.zm-pill.r-common { color: #a8a8b3; border-color: rgba(168,168,179,0.4); background: rgba(168,168,179,0.1); }
.zm-pill.r-uncommon { color: #5fd684; border-color: rgba(95,214,132,0.4); background: rgba(95,214,132,0.1); }
.zm-pill.r-rare { color: #5aa6ff; border-color: rgba(90,166,255,0.4); background: rgba(90,166,255,0.1); }
.zm-pill.r-epic { color: #b884ff; border-color: rgba(184,132,255,0.4); background: rgba(184,132,255,0.1); }
.zm-pill.r-legendary { color: #ffc857; border-color: rgba(255,200,87,0.4); background: rgba(255,200,87,0.1); }
.zm-pill.r-mythic { color: #ff5a8d; border-color: rgba(255,90,141,0.4); background: rgba(255,90,141,0.1); }
/* Pills de regen bonus (HP/MP/STA) — visibles en modal de zona y en zone card */
.zm-pill.is-hp, .zc-regen-pill.is-hp { color: #ff6a8a; border-color: rgba(255,106,138,0.45); background: rgba(255,106,138,0.10); }
.zm-pill.is-mp, .zc-regen-pill.is-mp { color: #5aa6ff; border-color: rgba(90,166,255,0.45); background: rgba(90,166,255,0.10); }
.zm-pill.is-sta, .zc-regen-pill.is-sta { color: #ffc857; border-color: rgba(255,200,87,0.45); background: rgba(255,200,87,0.10); }
/* Layout de la fila pvp+regen en zone card */
.zc-pvp-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
justify-content: center;
margin-top: 4px;
}
.zc-regen-pill {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 7px;
border-radius: 999px;
border: 1px solid currentColor;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
white-space: nowrap;
}
.zc-regen-pill i { font-size: 10px; }
/* 2026-05-12: pills de regen (HP/MP/STA) movidas a esquina superior derecha
de la card, mismo nivel que zc-lock-badge / zc-rarity-badge. */
.zc-regen-stack {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
max-width: 50%;
pointer-events: none;
}
.zc-regen-stack .zc-regen-pill {
backdrop-filter: blur(4px);
background: rgba(8, 4, 16, 0.55) !important;
pointer-events: auto;
}
/* Buff card en el modal de zona */
.zm-buff-card {
margin: 12px 0;
padding: 12px 14px;
background: linear-gradient(180deg, rgba(212,175,55,0.10), rgba(12,6,22,0.4));
border: 1px solid rgba(212,175,55,0.35);
border-left: 3px solid var(--gold);
border-radius: 10px;
}
.zm-buff-title {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-cinzel, serif);
font-weight: 700;
font-size: 13px;
color: var(--gold);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 8px;
}
.zm-buff-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.zm-buff-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-soft);
}
.zm-buff-row i { font-size: 16px; }
.zm-buff-row b { color: var(--gold); }
/* Card content */
.zc-content {
position: relative;
z-index: 2;
}
.zc-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: color-mix(in srgb, var(--zone-color) 25%, rgba(0,0,0,0.6));
border: 1.5px solid var(--zone-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--zone-color);
font-size: 19px;
filter: drop-shadow(0 0 10px color-mix(in srgb, var(--zone-color) 50%, transparent));
margin-bottom: 8px;
}
.zc-name {
font-family: var(--font-title);
font-size: 16px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--text);
text-shadow: 0 2px 8px rgba(0,0,0,0.7);
margin-bottom: 6px;
}
.zc-meta {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 6px;
}
.zc-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
}
.zc-pvp {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
font-weight: 700;
font-family: var(--font-title);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.zc-pvp i { font-size: 11px; }
.zc-pvp.is-pvp { color: var(--blood); }
.zc-pvp.is-safe { color: var(--mint); }
/* ============================================================================
ZONE MODAL — popup al tocar una zona (reemplaza el detail card lateral)
============================================================================ */
.zone-modal-overlay {
padding: 16px;
align-items: center;
}
/* 2026-05-24: zone-modal-v2 = layout 2-col en PC. Mobile sigue como antes.
Izquierda: imagen full-height de la zona con info overlay encima.
Derecha: mobs + players, scrolleable. */
.zone-modal.zone-modal-v2 {
max-width: min(980px, 96vw) !important;
width: min(980px, 96vw) !important;
}
.zone-modal-v2 .zone-modal-body-cols { padding: 0 !important; }
@media (min-width: 900px) {
.zone-modal.zone-modal-v2 .zone-modal-body-cols {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0;
overflow: hidden;
}
/* 2026-05-24: ciudades sin mobs/players → 1 sola columna full-width (no más espacio vacío al lado). */
.zone-modal.zone-modal-v2 .zone-modal-body-cols.is-single-col {
grid-template-columns: minmax(0, 1fr);
}
.zone-modal-v2 .zm-col {
display: flex; flex-direction: column;
min-height: 0;
max-height: calc(92vh - 80px); /* deja espacio para los action buttons */
}
/* Columna IZQ: imagen como bg full-height + overlay + info encima */
.zone-modal-v2 .zm-col-left {
position: relative;
border-right: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
background-color: #1a0f30;
}
/* Fallback cuando no hay imagen (style inline ya seteó background-image cuando sí hay) */
.zone-modal-v2 .zm-col-left:not(.has-bg) {
background: linear-gradient(180deg, color-mix(in srgb, var(--zone-color) 30%, #1a0f30) 0%, #0a0414 100%);
}
/* Gradient: arriba transparente (se ve la imagen), abajo oscuro (legible el texto) */
.zone-modal-v2 .zm-left-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(8,4,20,0.15) 0%, rgba(8,4,20,0.35) 35%, rgba(8,4,20,0.85) 75%, rgba(8,4,20,0.96) 100%);
pointer-events: none;
z-index: 1;
}
/* Contenido pegado abajo (justify-content flex-end) */
.zone-modal-v2 .zm-left-content {
position: relative;
z-index: 2;
display: flex; flex-direction: column;
justify-content: flex-end;
height: 100%;
overflow-y: auto;
padding: 18px 18px 24px;
gap: 14px;
}
.zone-modal-v2 .zm-left-title-block {
display: flex; align-items: center; gap: 12px;
}
.zone-modal-v2 .zm-left-title-block .zm-icon {
width: 60px; height: 60px;
background: linear-gradient(135deg, var(--zone-color), color-mix(in srgb, var(--zone-color) 50%, #1a0f30));
border: 1.5px solid color-mix(in srgb, var(--zone-color) 60%, #fff 0%);
border-radius: 12px;
display: grid; place-items: center;
font-size: 28px;
color: #fff;
flex-shrink: 0;
box-shadow: 0 4px 14px color-mix(in srgb, var(--zone-color) 50%, transparent);
}
.zone-modal-v2 .zm-title-text { flex: 1; min-width: 0; padding-right: 40px; }
.zone-modal-v2 .zm-left-content .zm-name {
font-family: var(--font-title, 'Cinzel', serif);
font-size: 22px; font-weight: 700; line-height: 1.15;
color: #f3eff8;
text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.zone-modal-v2 .zm-left-content .zm-subtitle {
display: flex; flex-wrap: wrap; gap: 5px;
margin-top: 8px;
}
.zone-modal-v2 .zm-left-content .zm-here-tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 10px;
background: rgba(95,214,132,0.2); border: 1px solid rgba(95,214,132,0.5);
color: #7df0a3; font-size: 10px; font-weight: 700; letter-spacing: .5px;
margin-bottom: 4px;
}
.zone-modal-v2 .zm-col-right {
padding: 16px 18px 20px;
overflow-y: auto;
background: linear-gradient(180deg, #15092f 0%, #0a0414 100%);
}
}
@media (max-width: 899px) {
/* 2026-05-24 v5 — FIX: el body usa max-height + overflow-y auto en lugar de flex:1
(flex:1 con basis 0 colapsaba a 0 height porque el modal sólo tiene max-height, no height). */
.zone-modal.zone-modal-v2 {
max-width: 100%;
width: 100%;
max-height: 92vh;
margin: 0;
border-radius: 18px 18px 0 0;
}
.zone-modal-v2 .zone-modal-body-cols {
display: flex !important;
flex-direction: column !important;
max-height: calc(92vh - 90px); /* descontar actions */
overflow-y: auto;
gap: 0;
padding: 0 !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
grid-template-columns: none !important;
}
.zone-modal-v2 .zm-col {
display: block !important;
max-height: none !important;
min-height: 0;
flex: 0 0 auto;
}
/* ===== COLUMNA IZQUIERDA: hero compacto + info ===== */
.zone-modal-v2 .zm-col-left {
position: relative;
background: #0d0420;
border-right: none !important;
overflow: hidden;
}
/* Si hay imagen, la limitamos al hero (150px alto) — NO se estira al info */
.zone-modal-v2 .zm-col-left.has-bg {
background-repeat: no-repeat !important;
background-size: 100% 150px !important;
background-position: center top !important;
background-color: #0d0420 !important;
}
/* Overlay del hero — solo cubre la franja superior */
.zone-modal-v2 .zm-left-overlay {
position: absolute;
top: 0; left: 0; right: 0;
height: 150px;
background: linear-gradient(180deg,
rgba(8,4,20,0.05) 0%,
rgba(8,4,20,0.30) 50%,
rgba(8,4,20,0.92) 90%,
rgba(13,4,32,1.0) 100%);
z-index: 1;
pointer-events: none;
}
/* Content reset */
.zone-modal-v2 .zm-left-content {
position: relative;
z-index: 2;
padding: 0;
gap: 0;
overflow: visible;
height: auto;
display: block;
justify-content: flex-start !important;
}
/* Title block ocupa la franja hero (150px), alineado abajo */
.zone-modal-v2 .zm-left-title-block {
height: 150px;
padding: 12px 14px 12px;
display: flex;
align-items: flex-end;
gap: 11px;
margin: 0;
box-sizing: border-box;
}
.zone-modal-v2 .zm-left-title-block .zm-icon {
width: 44px; height: 44px;
background: linear-gradient(135deg, var(--zone-color), color-mix(in srgb, var(--zone-color) 50%, #1a0f30));
border: 1.5px solid color-mix(in srgb, var(--zone-color) 70%, #fff);
border-radius: 10px;
display: grid; place-items: center;
font-size: 21px;
color: #fff;
flex-shrink: 0;
box-shadow: 0 4px 12px color-mix(in srgb, var(--zone-color) 60%, transparent);
}
.zone-modal-v2 .zm-left-title-block .zm-title-text {
flex: 1;
min-width: 0;
padding-right: 44px; /* espacio para X */
}
.zone-modal-v2 .zm-left-content .zm-name {
font-family: var(--font-title, 'Cinzel', serif);
font-size: 17px; font-weight: 700; line-height: 1.15;
color: #fff;
text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
.zone-modal-v2 .zm-left-content .zm-subtitle {
display: flex; flex-wrap: wrap; gap: 4px;
margin-top: 6px;
}
.zone-modal-v2 .zm-left-content .zm-here-tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px; border-radius: 8px;
background: rgba(95,214,132,0.22); border: 1px solid rgba(95,214,132,0.55);
color: #7df0a3; font-size: 9px; font-weight: 700; letter-spacing: .5px;
margin-bottom: 5px;
}
/* Info section debajo del hero — bg SÓLIDO (sin gradiente semi-transparente que confunda) */
.zone-modal-v2 .zm-left-info {
position: relative;
z-index: 3;
padding: 14px 14px 16px;
background: #0d0420;
display: flex;
flex-direction: column;
gap: 12px;
}
/* ===== COLUMNA DERECHA (mobs + players) — divider claro arriba ===== */
.zone-modal-v2 .zm-col-right {
padding: 6px 14px 16px;
background: #0d0420;
border-top: 4px solid rgba(255,255,255,0.04);
margin-top: 0;
}
.zone-modal-v2 .zm-col-right .zm-section-title:first-child {
margin-top: 10px;
margin-bottom: 8px;
}
/* ===== ACTIONS sticky abajo ===== */
.zone-modal-v2 .zone-modal-actions {
flex: 0 0 auto !important;
border-top: 1px solid rgba(255,255,255,0.08);
background: rgba(0,0,0,0.45);
padding: 10px 14px calc(12px + var(--m-safe-bottom, 0px));
}
}
@media (max-width: 380px) {
.zone-modal-v2 .zm-col-left.has-bg {
background-size: 100% 130px !important;
}
.zone-modal-v2 .zm-left-overlay {
height: 130px;
}
.zone-modal-v2 .zm-left-title-block {
height: 130px;
padding: 10px 12px 10px;
}
.zone-modal-v2 .zm-left-content .zm-name { font-size: 16px; }
.zone-modal-v2 .zm-left-title-block .zm-icon { width: 40px; height: 40px; font-size: 19px; }
.zone-modal.zone-modal-v2 { max-height: 90vh; }
}
.zone-modal {
max-width: 480px;
width: 100%;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 92vh;
border: 1.5px solid color-mix(in srgb, var(--zone-color) 40%, var(--border-gold));
background: linear-gradient(180deg, rgba(20,12,40,0.96), rgba(10,6,22,0.99));
box-shadow:
0 12px 40px rgba(0,0,0,0.7),
0 0 30px color-mix(in srgb, var(--zone-color) 25%, transparent);
}
.zone-modal-loading {
padding: 60px 20px;
text-align: center;
}
.zone-modal-loading .loader { margin: 0 auto; }
/* Botón cerrar flotante */
.zone-modal-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0,0,0,0.7);
border: 1px solid rgba(255,255,255,0.15);
color: var(--text);
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s, transform 0.1s;
-webkit-appearance: none;
appearance: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.zone-modal-close:hover,
.zone-modal-close:active {
background: rgba(0,0,0,0.9);
transform: scale(0.92);
}
/* Hero */
.zone-modal-hero {
position: relative;
height: 200px;
overflow: hidden;
flex-shrink: 0;
}
.zm-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.04);
filter: saturate(1.1);
}
.zm-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0,0,0,0.15) 0%,
rgba(15,8,30,0.6) 55%,
rgba(20,12,40,0.97) 100%);
}
.zm-hero-content {
position: absolute;
bottom: 14px;
left: 18px;
right: 18px;
display: flex;
align-items: flex-end;
gap: 14px;
z-index: 2;
}
.zm-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: color-mix(in srgb, var(--zone-color) 30%, rgba(0,0,0,0.7));
border: 2px solid var(--zone-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--zone-color);
font-size: 28px;
filter: drop-shadow(0 0 16px color-mix(in srgb, var(--zone-color) 60%, transparent));
flex-shrink: 0;
}
.zm-title-block { flex: 1; min-width: 0; }
.zm-here-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
font-family: var(--font-title);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.14em;
border-radius: 99px;
margin-bottom: 6px;
box-shadow: 0 2px 8px rgba(233,185,99,0.5);
animation: hereTagPulse 1.6s ease-in-out infinite;
}
@keyframes hereTagPulse {
0%, 100% { box-shadow: 0 2px 8px rgba(233,185,99,0.5); }
50% { box-shadow: 0 2px 14px rgba(233,185,99,0.85); }
}
.zm-here-tag i { font-size: 10px; }
.zm-name {
font-family: var(--font-title);
font-size: 24px;
font-weight: 900;
letter-spacing: 0.05em;
color: var(--text);
text-shadow: 0 2px 12px rgba(0,0,0,0.9);
margin-bottom: 6px;
text-transform: uppercase;
line-height: 1.05;
}
.zm-subtitle {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.zm-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
background: rgba(0,0,0,0.7);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
color: var(--text);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.zm-pill i { font-size: 11px; }
.zm-pill.is-danger { color: var(--blood); border-color: rgba(225,80,90,0.5); background: rgba(225,80,90,0.15); }
.zm-pill.is-mint { color: var(--mint); border-color: rgba(63,214,146,0.5); background: rgba(63,214,146,0.15); }
/* Body scrollable */
.zone-modal-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 14px;
-webkit-overflow-scrolling: touch;
}
.zone-modal-body::-webkit-scrollbar { width: 4px; }
.zone-modal-body::-webkit-scrollbar-thumb { background: rgba(233,185,99,0.25); border-radius: 4px; }
.zm-desc {
font-family: var(--font-serif);
font-style: italic;
font-size: 13.5px;
line-height: 1.6;
color: var(--text-muted);
padding: 4px 0 4px 12px;
border-left: 3px solid color-mix(in srgb, var(--zone-color) 50%, transparent);
}
/* Stats grid */
.zm-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.zm-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 4px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
}
.zm-stat > i {
font-size: 22px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.zm-stat-val {
font-family: var(--font-mono);
font-size: 17px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.zm-stat-lbl {
font-family: var(--font-title);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
text-align: center;
}
/* Section title */
.zm-section-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
margin-top: 4px;
}
.zm-section-title > i { font-size: 14px; }
.zm-section-title > span:first-of-type { flex: 1; }
.zm-section-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(233,185,99,0.4);
color: var(--gold);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 800;
letter-spacing: 0;
}
/* Monsters list */
.zm-monsters-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.zm-monster-row {
display: grid;
grid-template-columns: 36px 1fr;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
overflow: hidden;
position: relative;
}
/* 2026-05-11: cuando hay imagen, el portrait se apoya a 3 bordes (top/left/bottom)
sin padding ni circular — efecto "infinito" igual que las combat cards. */
.zm-monster-row:has(.zmm-icon.has-img) {
grid-template-columns: 64px 1fr;
padding: 0 12px 0 0;
gap: 12px;
align-items: stretch;
}
.zm-monster-row:hover {
border-color: rgba(225,80,90,0.4);
transform: translateX(2px);
}
.zm-monster-row.is-boss {
background: linear-gradient(90deg, rgba(233,185,99,0.12), rgba(0,0,0,0.4));
border-color: rgba(233,185,99,0.4);
}
.zmm-icon {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(225,80,90,0.15);
display: flex;
align-items: center;
justify-content: center;
color: var(--blood);
font-size: 20px;
overflow: hidden;
flex-shrink: 0;
}
.zmm-icon.has-img {
/* Apoyado en 3 bordes: top, left, bottom — sin border circular */
width: 64px;
height: auto;
min-height: 64px;
align-self: stretch;
border-radius: var(--r-md, 10px) 0 0 var(--r-md, 10px);
border: none;
background: rgba(8,4,16,1);
}
.zmm-icon.has-img::after {
/* Fade del borde derecho hacia el fondo de la row */
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 30%;
background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
}
.zmm-icon-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.zmm-icon-fallback {
display: none; /* solo aparece si la imagen falla con onerror */
}
.zmm-icon.no-img .zmm-icon-fallback {
display: inline-block;
color: rgba(255,255,255,0.55);
}
.zm-monster-row.is-boss .zmm-icon {
background: rgba(233,185,99,0.2);
color: var(--gold);
filter: drop-shadow(0 0 8px rgba(233,185,99,0.5));
}
.zmm-body { min-width: 0; }
/* Padding vertical para el body cuando la row es full-bleed (con imagen) */
.zm-monster-row:has(.zmm-icon.has-img) .zmm-body { padding: 10px 0; }
.zmm-name {
font-family: var(--font-title);
font-size: 13.5px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.04em;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.zmm-boss-tag {
display: inline-flex;
padding: 1px 6px;
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.1em;
border-radius: 99px;
}
.zmm-stats {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
.zmm-stat {
display: inline-flex;
align-items: center;
gap: 3px;
}
.zmm-stat i { font-size: 12px; color: var(--gold); }
.zmm-stat:nth-child(1) i { color: var(--cyan); } /* Lv */
.zmm-stat:nth-child(2) i { color: var(--blood); } /* HP */
.zmm-stat:nth-child(3) i { color: var(--gold); } /* gold */
.zmm-stat:nth-child(4) i { color: var(--primary); }/* xp */
/* 2026-05-07: pill de cap diario (kill counter X/N) */
.zmm-stat.zmm-stat-cap {
padding: 2px 8px;
background: rgba(255,200,87,0.10);
border: 1px solid rgba(255,200,87,0.45);
border-radius: 99px;
color: #ffc857;
font-weight: 700;
font-size: 10px;
}
.zmm-stat.zmm-stat-cap i { color: #ffc857 !important; font-size: 11px; }
.zmm-stat.zmm-stat-cap.is-full {
background: rgba(225,80,90,0.10);
border-color: rgba(225,80,90,0.55);
color: #e85a6a;
}
.zmm-stat.zmm-stat-cap.is-full i { color: #e85a6a !important; }
/* 2026-05-10: badge de evasión en card de mob (lvl 21+ con dodge > 0) */
.zmm-stat.zmm-stat-evasion {
padding: 2px 8px;
background: rgba(255,167,71,0.12);
border: 1px solid rgba(255,167,71,0.5);
border-radius: 99px;
color: #ffd07a;
font-weight: 700;
font-size: 10px;
cursor: help;
}
.zmm-stat.zmm-stat-evasion i { color: #ff9c4a !important; font-size: 11px; }
.zm-monster-row.is-cap-locked { opacity: 0.65; filter: saturate(0.6); }
/* Players list */
.zm-players-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.zm-player-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(0,0,0,0.3);
border-radius: var(--r-md);
font-size: 12px;
}
.zm-player-row > i { font-size: 18px; color: var(--cyan); }
.zm-player-name { font-weight: 700; color: var(--text); flex: 1; }
.zm-player-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.zm-players-more { padding: 6px 12px; text-align: center; }
.zm-empty-tip {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
font-size: 12px;
color: var(--text-muted);
background: rgba(0,0,0,0.2);
border-radius: var(--r-md);
font-style: italic;
}
.zm-empty-tip i { font-size: 16px; opacity: 0.6; }
/* ========================================================================
PvP History (en zone-modal de zonas PvP)
Lista los últimos 15 combates PvP de la zona — quién contra quién, ganador,
oro perdido, hace cuánto.
======================================================================== */
.zm-section-title.pvp-hist-title,
.combat-section-title.pvp-hist-title {
color: var(--blood);
margin-top: 14px;
position: relative;
}
.zm-section-title.pvp-hist-title > i,
.combat-section-title.pvp-hist-title > i { color: var(--blood); }
/* Sección "Jugadores Online en esta zona" */
.combat-section-title.pvp-online-title {
color: var(--cyan);
margin-top: 14px;
}
.combat-section-title.pvp-online-title > i { color: var(--cyan); }
.combat-section-title.pvp-online-title .combat-section-meta {
background: rgba(90,166,255,0.12);
border: 1px solid rgba(90,166,255,0.3);
color: var(--cyan);
}
.pvp-online-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 12px;
font-size: 12px;
color: var(--text-muted);
background: rgba(0,0,0,0.2);
border: 1px dashed rgba(255,255,255,0.06);
border-radius: var(--r-md);
font-style: italic;
margin-bottom: 4px;
}
.pvp-online-empty i {
font-size: 16px;
color: var(--cyan);
opacity: 0.7;
}
.zm-section-title .zm-section-sub {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: none;
color: var(--text-muted);
margin-left: auto;
font-style: italic;
}
.combat-section-title.pvp-hist-title .combat-section-meta.pvp-hist-sub-tag {
background: rgba(225,80,90,0.15);
border: 1px solid rgba(225,80,90,0.3);
color: var(--blood);
}
.pvp-hist-section-sub {
font-family: var(--font-body);
font-size: 11px;
color: var(--text-muted);
font-style: italic;
margin: -4px 0 8px 22px;
letter-spacing: 0.02em;
}
.zm-pvp-history {
display: flex;
flex-direction: column;
gap: 6px;
}
.pvp-hist-loading,
.pvp-hist-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 12px;
font-size: 12px;
color: var(--text-muted);
background: rgba(0,0,0,0.2);
border: 1px dashed rgba(255,255,255,0.06);
border-radius: var(--r-md);
font-style: italic;
}
.pvp-hist-loading i,
.pvp-hist-empty i {
font-size: 16px;
color: var(--blood);
opacity: 0.7;
}
.pvp-hist-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.pvp-hist-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: linear-gradient(90deg, rgba(225,80,90,0.05), rgba(0,0,0,0.4), rgba(225,80,90,0.05));
border: 1px solid rgba(225,80,90,0.12);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
}
.pvp-hist-row:hover {
border-color: rgba(225,80,90,0.35);
transform: translateX(1px);
}
.pvp-hist-row.is-draw {
background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(0,0,0,0.4), rgba(255,255,255,0.03));
border-color: rgba(255,255,255,0.08);
}
.pvp-hist-side {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
min-width: 0;
position: relative;
padding: 2px 4px;
}
.pvp-hist-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.pvp-hist-att { text-align: left; }
.pvp-hist-def { text-align: right; flex-direction: row-reverse; }
.pvp-hist-def .pvp-hist-info { align-items: flex-end; }
.pvp-hist-av { flex-shrink: 0; }
/* Avatar más chico para historial (32px) */
.pvp-hist-av.avatar-sm { width: 32px; height: 32px; }
.pvp-hist-side.is-win .pvp-hist-name {
color: #f0c674;
text-shadow: 0 0 6px rgba(240,198,116,0.4);
}
.pvp-hist-side.is-loss .pvp-hist-name {
color: var(--text-muted);
text-decoration: line-through;
opacity: 0.7;
}
.pvp-hist-side.is-me {
background: rgba(90,166,255,0.08);
border-radius: var(--r-sm);
}
.pvp-hist-crown {
position: absolute;
top: -8px;
font-size: 12px;
color: var(--gold);
filter: drop-shadow(0 0 4px rgba(240,198,116,0.7));
}
.pvp-hist-att .pvp-hist-crown { left: 4px; }
.pvp-hist-def .pvp-hist-crown { right: 4px; }
.pvp-hist-name {
font-family: var(--font-title);
font-size: 12.5px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pvp-hist-you {
font-family: var(--font-mono);
font-size: 9px;
color: #5aa6ff;
letter-spacing: 0;
font-weight: 600;
}
.pvp-hist-meta {
display: flex;
gap: 6px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
align-items: center;
}
.pvp-hist-def .pvp-hist-meta { justify-content: flex-end; }
.pvp-hist-lvl {
display: inline-flex;
align-items: center;
padding: 1px 5px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 99px;
color: var(--gold);
font-weight: 700;
}
.pvp-hist-race {
display: inline-flex;
align-items: center;
color: var(--cyan);
text-transform: capitalize;
font-size: 9.5px;
letter-spacing: 0.04em;
}
.pvp-hist-vs {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
min-width: 90px;
padding: 2px 6px;
}
.pvp-hist-vs-icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle, rgba(225,80,90,0.25), rgba(225,80,90,0.05));
border: 1px solid rgba(225,80,90,0.3);
border-radius: 50%;
color: var(--blood);
font-size: 14px;
}
.pvp-hist-row.is-draw .pvp-hist-vs-icon {
background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
border-color: rgba(255,255,255,0.15);
color: var(--text-muted);
}
.pvp-hist-vs-info {
display: flex;
flex-direction: column;
gap: 2px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
align-items: center;
text-align: center;
}
.pvp-hist-vs-info > span {
display: inline-flex;
align-items: center;
gap: 3px;
white-space: nowrap;
}
.pvp-hist-vs-info i { font-size: 11px; }
.pvp-hist-gold { color: var(--gold); font-weight: 700; }
.pvp-hist-gold i { color: var(--gold); }
.pvp-hist-turns i { color: var(--cyan); }
.pvp-hist-time { opacity: 0.85; }
@media (max-width: 480px) {
.pvp-hist-row {
grid-template-columns: 1fr auto 1fr;
gap: 4px;
padding: 7px 8px;
}
.pvp-hist-name { font-size: 11.5px; }
.pvp-hist-vs { min-width: 70px; padding: 2px 2px; }
.pvp-hist-vs-icon { width: 24px; height: 24px; font-size: 12px; }
.pvp-hist-vs-info { font-size: 9.5px; }
.pvp-hist-meta { font-size: 9.5px; gap: 4px; }
.pvp-hist-lvl { font-size: 9.5px; padding: 1px 4px; }
}
/* Territory banner */
.zm-territory-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: linear-gradient(90deg, rgba(233,185,99,0.15), rgba(233,185,99,0.04));
border-left: 3px solid var(--gold);
border-radius: var(--r-md);
}
.zm-territory-banner i { font-size: 22px; color: var(--gold); flex-shrink: 0; }
.zm-territory-label {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
}
.zm-territory-name {
font-family: var(--font-title);
font-size: 14px;
font-weight: 800;
color: var(--text);
}
/* Actions footer */
.zone-modal-actions {
padding: 14px 20px 18px;
border-top: 1px solid rgba(255,255,255,0.06);
background: rgba(0,0,0,0.4);
flex-shrink: 0;
}
.zone-modal-actions .btn { width: 100%; min-height: 48px; font-size: 13px; letter-spacing: 0.06em; }
.zm-actions-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.zm-actions-row .btn { font-size: 12px; min-height: 46px; }
/* ============================================================================
MARKET / BAZAR — rediseño completo
============================================================================ */
/* 2026-05-10: "Desde X gemas" en cards cuando hay varios tiers de precio */
.mi-price-from-lbl {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
font-family: var(--font-title, 'Cinzel', serif);
margin-bottom: 2px;
text-align: right;
}
/* 2026-05-10: tabla de precios estilo RollerCoin (modal de detalle) */
.market-tiers-card {
margin-top: 14px;
padding: 12px 14px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--r-lg, 12px);
}
.market-tiers-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-family: var(--font-title, 'Cinzel', serif);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold, #e9b963);
font-weight: 700;
}
.market-tiers-header i { font-size: 14px; }
.market-tiers-total {
margin-left: auto;
padding: 2px 10px;
background: rgba(233,185,99,0.15);
border: 1px solid rgba(233,185,99,0.4);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--gold);
}
.market-tiers-table {
display: flex;
flex-direction: column;
gap: 2px;
}
.market-tiers-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
padding: 7px 10px;
border-radius: 6px;
font-size: 13px;
}
.market-tiers-row.market-tiers-head {
padding-top: 0;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255,255,255,0.06);
border-radius: 0;
font-family: var(--font-title, 'Cinzel', serif);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
}
.market-tiers-row:not(.market-tiers-head) {
background: rgba(255,255,255,0.025);
}
.market-tiers-row.is-cheapest {
background: rgba(95,220,255,0.12);
border-left: 3px solid #5fdcff;
}
.market-tiers-row.is-cheapest .market-tiers-price { color: #6cd4ff; font-weight: 800; }
.market-tiers-row.market-tiers-more { background: rgba(255,255,255,0.015); }
.market-tiers-row.market-tiers-more .market-tiers-price { color: var(--text-muted); font-style: italic; }
.market-tiers-price {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
color: #fff;
font-weight: 600;
}
.market-tiers-price i { color: var(--cyan, #5fdcff); font-size: 12px; }
.market-tiers-num {
text-align: right;
font-family: var(--font-mono);
color: #fff;
font-weight: 700;
}
/* 2026-05-10: chart de precio histórico (SVG inline) */
.market-history-card {
margin-top: 14px;
padding: 12px 14px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--r-lg, 12px);
}
.market-history-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-family: var(--font-title, 'Cinzel', serif);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold, #e9b963);
font-weight: 700;
}
.market-history-header i { font-size: 14px; color: #5fdcff; }
.market-history-svg {
display: block;
width: 100%;
height: 160px;
}
@media (max-width: 600px) {
.market-history-svg { height: 140px; }
}
/* Summary card */
.market-summary-card {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1px solid rgba(233,185,99,0.25);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.market-summary-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(233,185,99,0.08), transparent 60%);
pointer-events: none;
}
.msum-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
}
.msum-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 6px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
}
.msum-cell:hover {
border-color: rgba(233,185,99,0.4);
transform: translateY(-2px);
}
.msum-cell.is-gold {
background: linear-gradient(180deg, rgba(233,185,99,0.18), rgba(233,185,99,0.04));
border-color: var(--gold);
}
.msum-cell.is-gold > i { color: var(--gold); }
.msum-cell.is-gems {
background: linear-gradient(180deg, rgba(122,76,240,0.18), rgba(122,76,240,0.04));
border-color: var(--primary);
}
.msum-cell.is-gems > i { color: var(--accent); }
.msum-cell.is-gems .msum-val { color: var(--accent); }
.msum-cell.is-cyan { border-color: rgba(86,200,255,0.4); }
.msum-cell.is-cyan > i { color: var(--cyan); }
.msum-cell > i {
font-size: 20px;
color: var(--gold);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.msum-val {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.msum-cell.is-gold .msum-val { color: var(--gold); }
.msum-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
/* ============================================================
BAZAR — historial en tab dedicado (2026-05-07): live dot indicator
============================================================ */
.mrs-live-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #5fd684;
box-shadow: 0 0 8px #5fd684, 0 0 14px rgba(95,214,132,0.6);
animation: mrs-live-blink 1.6s ease-in-out infinite;
margin-left: 4px;
}
@keyframes mrs-live-blink {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.3); }
}
/* Tabs */
.market-tabs-row {
display: flex;
gap: 6px;
background: rgba(0,0,0,0.4);
padding: 4px;
border-radius: var(--r-md);
border: 1px solid var(--border-soft);
margin-bottom: 14px;
}
.market-tab-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-sm);
color: var(--text-muted);
font-family: var(--font-title);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
}
.market-tab-btn i { font-size: 15px; }
.market-tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.market-tab-btn.active {
background: linear-gradient(180deg, rgba(233,185,99,0.22), rgba(122,76,240,0.12));
border-color: var(--gold);
color: var(--gold);
box-shadow: 0 2px 10px rgba(233,185,99,0.2);
}
.market-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: linear-gradient(180deg, var(--mint), #2a8b5e);
color: #0a1a10;
border-radius: 99px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 800;
margin-left: 4px;
}
/* =====================================================================
Inventory hero — full-bleed con fondo del inventario (2026-05-11)
===================================================================== */
.page-header.inventory-hero {
position: relative;
border: none !important;
border-radius: 0;
margin: -24px -28px 4px;
padding: 28px 28px 32px;
overflow: hidden;
background:
url('../assets/bg/inventory.webp') center / cover no-repeat,
#0a0518;
box-shadow: none;
display: block;
}
/* Stats card dentro del hero — frosted glass sobre la imagen */
.inventory-hero-stats {
position: relative;
z-index: 1;
margin-top: 18px;
background: rgba(10,6,22,0.55) !important;
border: 1px solid rgba(184,132,255,0.25) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
/* 2026-05-12: en el inventario son 7 stats → 4 cols (4 arriba + 3 abajo) */
.inventory-hero-stats .hero-stats-grid {
grid-template-columns: repeat(4, 1fr);
}
.page-header.inventory-hero::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(10,6,22,0.88) 0%, rgba(10,6,22,0.60) 45%, rgba(10,6,22,0.25) 100%),
linear-gradient(180deg,
transparent 0%,
transparent 55%,
rgba(10,6,22,0.55) 80%,
rgba(10,6,22,0.92) 96%,
#0a0518 100%);
pointer-events: none;
}
.page-header.inventory-hero > * { position: relative; z-index: 1; }
.inventory-hero-content {
position: relative;
z-index: 1;
max-width: 65%;
}
.inventory-hero .page-title {
font-size: 32px;
letter-spacing: 0.02em;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.inventory-hero .page-title i {
color: #c8a8ff;
filter: drop-shadow(0 0 10px rgba(184,132,255,0.6));
}
.inventory-hero .page-sub {
font-style: italic;
color: rgba(255,255,255,0.70);
margin-top: 6px;
font-size: 13.5px;
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
@media (max-width: 760px) {
.page-header.inventory-hero {
margin: -16px -16px 4px;
padding: 22px 14px 22px;
}
.inventory-hero-content { max-width: 100%; }
.inventory-hero .page-title { font-size: 22px; }
.inventory-hero .page-sub { font-size: 12px; }
}
/* =====================================================================
Market hero — full-bleed sin marco (2026-05-11)
Imagen pegada a top/left/right del main-area. Abajo se desvanece con
gradient hacia el fondo de la pantalla.
===================================================================== */
.page-header.market-hero {
position: relative;
/* Sin border ni border-radius — full bleed */
border: none !important;
border-radius: 0;
/* Negative margins para escapar del padding del main-area */
margin: -24px -28px 4px;
padding: 32px 28px 36px;
overflow: hidden;
background:
url('../assets/bg/bazaar.webp') center / cover no-repeat,
#0a0518;
box-shadow: none;
/* Override del .page-header padre (era flex row) — forzamos columna */
display: block;
}
.page-header.market-hero > * { position: relative; z-index: 1; }
.page-header.market-hero::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(10,6,22,0.85) 0%, rgba(10,6,22,0.60) 45%, rgba(10,6,22,0.30) 100%),
linear-gradient(180deg,
transparent 0%,
transparent 55%,
rgba(10,6,22,0.55) 80%,
rgba(10,6,22,0.92) 96%,
#0a0518 100%);
pointer-events: none;
}
.page-header.market-hero::after {
/* Glow sutil violeta desde la izquierda — refuerza contraste con título */
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 10% 40%, rgba(184,132,255,0.18), transparent 55%);
pointer-events: none;
}
.market-hero-content {
position: relative;
z-index: 1;
max-width: 65%;
margin-bottom: 18px;
}
/* Las cards de acción dentro del hero — mismo z-index que stats */
.page-header.market-hero .market-actions-row {
position: relative;
z-index: 1;
margin-top: 16px;
margin-bottom: 0;
}
/* Stats 24h flotando sobre la imagen del fondo, sin card contenedora */
.market-hero-stats {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 12px;
max-width: 720px;
}
.market-hero-stats .msum-cell {
background: rgba(10,6,22,0.55);
border: 1px solid rgba(184,132,255,0.25);
border-radius: 12px;
padding: 14px 14px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
text-align: center;
}
.market-hero-stats .msum-cell > i {
font-size: 18px;
color: rgba(184,132,255,0.85);
margin-bottom: 2px;
}
.market-hero-stats .msum-cell.is-gems {
border-color: rgba(184,132,255,0.45);
background: rgba(30,18,60,0.55);
}
.market-hero-stats .msum-cell.is-gems > i { color: #c8a4ff; }
.market-hero-stats .msum-val {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 22px;
font-weight: 800;
color: #fff;
line-height: 1;
}
.market-hero-stats .msum-cell.is-gems .msum-val { color: #d8c2ff; }
.market-hero-stats .msum-lbl {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.10em;
color: rgba(255,255,255,0.65);
margin-top: 4px;
}
@media (max-width: 760px) {
.market-hero-stats { grid-template-columns: 1fr 1fr; gap: 8px; max-width: 100%; }
.market-hero-stats .msum-cell { padding: 10px 10px; }
.market-hero-stats .msum-val { font-size: 18px; }
.market-hero-stats .msum-lbl { font-size: 9px; }
.market-hero-stats .msum-cell > i { font-size: 16px; }
}
.market-hero .page-title {
font-size: 32px;
letter-spacing: 0.02em;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.market-hero .page-title i {
color: #c8a8ff;
filter: drop-shadow(0 0 10px rgba(184,132,255,0.6));
}
.market-hero .page-sub {
font-style: italic;
color: rgba(255,255,255,0.70);
margin-top: 6px;
font-size: 13.5px;
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
@media (max-width: 760px) {
.page-header.market-hero {
margin: -16px -16px 4px;
padding: 22px 14px 22px;
}
.market-hero-content { max-width: 100%; margin-bottom: 14px; }
.market-hero .page-title { font-size: 22px; }
.market-hero .page-sub { font-size: 12px; }
.page-header.market-hero .market-actions-row { margin-top: 14px; }
}
/* =====================================================================
Market action cards — 2026-05-11 (rediseño tabs como cards descriptivas)
===================================================================== */
.market-actions-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin-bottom: 16px;
}
.market-action-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: rgba(10,6,22,0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(184,132,255,0.20);
border-radius: 12px;
color: rgba(255,255,255,0.75);
cursor: pointer;
transition: border-color 0.18s, background 0.18s, transform 0.18s;
text-align: left;
font-family: 'Cinzel', serif;
position: relative;
-webkit-appearance: none;
appearance: none;
}
.market-action-card:hover {
border-color: rgba(184,132,255,0.45);
transform: translateY(-1px);
}
.market-action-card.active {
background: linear-gradient(180deg, rgba(40,28,8,0.65) 0%, rgba(10,6,22,0.95) 100%);
border-color: rgba(255,200,87,0.65);
color: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.market-action-card.is-buy.active {
border-color: rgba(255,200,87,0.70);
}
.market-action-card.is-history { padding-right: 38px; }
.mac-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(184,132,255,0.30);
border-radius: 9px;
font-size: 20px;
color: #b884ff;
flex-shrink: 0;
}
.is-buy .mac-icon { color: #ffc857; border-color: rgba(255,200,87,0.40); }
.is-sell .mac-icon { color: #b884ff; border-color: rgba(184,132,255,0.40); }
.is-history .mac-icon { color: #6cd4ff; border-color: rgba(108,212,255,0.40); }
.market-action-card.active .mac-icon {
background: linear-gradient(135deg, rgba(255,200,87,0.20), rgba(196,138,33,0.10));
border-color: rgba(255,200,87,0.55);
color: #ffd54a;
}
.mac-body { min-width: 0; flex: 1; }
.mac-title {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: inherit;
display: flex;
align-items: center;
gap: 7px;
}
.mac-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 6px;
background: linear-gradient(180deg, var(--mint, #5fd684), #2a8b5e);
color: #0a1a10;
border-radius: 99px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 800;
}
.mac-sub {
font-size: 11.5px;
color: rgba(255,255,255,0.55);
margin-top: 3px;
font-family: var(--font-body, 'Inter', sans-serif);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.market-action-card.active .mac-sub { color: rgba(255,255,255,0.70); }
.mac-arrow {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: rgba(255,255,255,0.40);
}
.market-action-card.active .mac-arrow { color: #ffc857; }
/* Mobile: las 3 cards quedan en UNA SOLA FILA (3 columnas) — compactas */
@media (max-width: 760px) {
.market-actions-row { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.market-action-card {
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
padding: 10px 8px;
}
.mac-icon { width: 36px; height: 36px; font-size: 17px; }
.mac-title { font-size: 11px; letter-spacing: 0.04em; justify-content: center; }
.mac-sub { display: none; } /* en mobile ocultamos la descripción */
.market-action-card.is-history { padding-right: 8px; }
.mac-arrow { display: none; } /* en mobile no entra */
.mac-count { min-width: 16px; height: 14px; font-size: 9px; padding: 0 4px; }
}
/* 2026-05-21: Buscador del bazar (input + clear button) */
.market-search-row {
position: relative;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.market-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-dim);
font-size: 16px;
pointer-events: none;
}
.market-search-input {
width: 100%;
padding: 10px 38px 10px 38px;
background: rgba(0,0,0,0.45);
border: 1.5px solid var(--border-soft);
border-radius: 10px;
color: var(--text);
font-family: var(--font-body);
font-size: 13px;
outline: none;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
-webkit-appearance: none;
appearance: none;
}
.market-search-input::placeholder { color: var(--text-dim); }
.market-search-input:focus {
border-color: var(--gold);
background: rgba(0,0,0,0.6);
box-shadow: 0 0 0 3px rgba(233,185,99,0.12);
}
.market-search-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: var(--text-dim);
font-size: 16px;
cursor: pointer;
padding: 6px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s;
}
.market-search-clear:hover { color: var(--gold); background: rgba(255,255,255,0.05); }
/* Filters chips row */
.market-filter-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
.market-filter-row .filter-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--border-soft);
border-radius: 99px;
color: var(--text-muted);
font-family: var(--font-title);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
white-space: nowrap;
}
.market-filter-row .filter-chip i { font-size: 13px; }
.market-filter-row .filter-chip:hover { color: var(--text); border-color: var(--gold); }
.market-filter-row .filter-chip.active {
background: linear-gradient(180deg, rgba(233,185,99,0.22), rgba(122,76,240,0.10));
border-color: var(--gold);
color: var(--gold);
box-shadow: 0 2px 8px rgba(233,185,99,0.2);
}
/* Market grid */
.market-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 10px;
}
/* Market card */
.market-card {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 12px;
align-items: center;
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,6,22,0.95));
border: 1.5px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
padding: 12px;
cursor: pointer;
transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
position: relative;
}
.market-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
border-radius: var(--r-md) 0 0 var(--r-md);
background: var(--text-dim);
opacity: 0.5;
transition: opacity 0.15s;
}
.market-card.r-common::before { background: rgba(220,220,220,0.7); }
.market-card.r-uncommon::before { background: #5fd684; }
.market-card.r-rare::before { background: #5aa6ff; }
.market-card.r-epic::before { background: #b884ff; }
.market-card.r-legendary::before { background: #ffaa50; }
.market-card.r-mythic::before { background: #ff5a78; }
.market-card:hover {
transform: translateY(-2px);
border-color: var(--gold);
box-shadow: 0 6px 18px rgba(233,185,99,0.18);
}
.market-card:hover::before { opacity: 1; }
.market-card .market-item-ic {
width: 64px;
height: 64px;
background: rgba(0,0,0,0.55);
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.market-card .market-item-ic.rb-common { border-color: rgba(220,220,220,0.4); }
.market-card .market-item-ic.rb-uncommon { border-color: rgba(80,200,120,0.5); }
.market-card .market-item-ic.rb-rare { border-color: rgba(80,160,255,0.5); }
.market-card .market-item-ic.rb-epic { border-color: rgba(170,100,255,0.5); }
.market-card .market-item-ic.rb-legendary { border-color: rgba(255,170,80,0.5); }
.market-card .market-item-ic.rb-mythic { border-color: rgba(255,80,120,0.55); }
.market-card .market-item-ic > i { font-size: 30px; color: var(--gold); }
.market-card .market-item-ic .item-modal-img-real { width: 100%; height: 100%; }
.market-card .mi-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.market-card .mi-name {
font-family: var(--font-title);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: 0 0 8px currentColor;
}
.market-card .mi-meta {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.mi-rarity-pill,
.mi-meta-pill {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 7px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
}
.mi-meta-pill i { font-size: 10px; }
.mi-rarity-pill.r-common { color: rgba(220,220,220,0.95); border-color: rgba(220,220,220,0.4); }
.mi-rarity-pill.r-uncommon { color: #5fd684; border-color: rgba(80,200,120,0.5); }
.mi-rarity-pill.r-rare { color: #5aa6ff; border-color: rgba(80,160,255,0.5); }
.mi-rarity-pill.r-epic { color: #b884ff; border-color: rgba(170,100,255,0.5); }
.mi-rarity-pill.r-legendary { color: #ffaa50; border-color: rgba(255,170,80,0.5); }
.mi-rarity-pill.r-mythic { color: #ff5a78; border-color: rgba(255,80,120,0.55); }
.mi-meta-pill.mi-qty { color: var(--gold); border-color: rgba(233,185,99,0.4); }
.market-card .mi-seller {
font-size: 11px;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 4px;
}
.market-card .mi-seller i { font-size: 12px; color: var(--cyan); }
.market-card .mi-price-block {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
.market-card .mi-price {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
color: var(--gold);
font-weight: 800;
}
.market-card .mi-price i { font-size: 16px; }
.market-card .mi-price-val { font-size: 16px; }
/* 2026-05-13: precio con descuento del Mercader (skill tree) */
.market-card .mi-price-discounted { flex-wrap: wrap; justify-content: flex-end; gap: 5px; position: relative; padding-right: 2px; }
.market-card .mi-price-old {
font-size: 11px;
color: rgba(212, 175, 55, 0.45);
text-decoration: line-through;
font-weight: 600;
line-height: 1;
}
.market-card .mi-price-disc {
color: var(--mint, #5fd684);
text-shadow: 0 0 8px rgba(95, 214, 132, 0.25);
}
.market-card .mi-price-discounted::after {
content: '−' attr(data-disc) '%';
display: none;
}
.market-card .mi-view-btn,
.market-card .mi-cancel-btn,
.market-card .mi-edit-btn {
width: 36px;
height: 36px;
padding: 0;
font-size: 14px;
flex-shrink: 0;
}
.market-card .mi-actions {
display: flex;
gap: 4px;
flex-direction: column;
align-items: center;
}
.market-card .mi-edit-btn {
border-color: rgba(212,175,55,0.4);
color: var(--gold);
}
.market-card .mi-edit-btn:hover {
background: rgba(212,175,55,0.15);
border-color: var(--gold);
}
.market-card .mi-status-badge {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
color: var(--text-dim);
padding: 4px 8px;
background: rgba(0,0,0,0.4);
border-radius: 99px;
}
/* ============================================================================
CHAT — rediseño completo
============================================================================ */
.chat-pro {
display: grid;
grid-template-rows: auto 1fr auto;
/* 2026-05-23: usar el alto real disponible del viewport en vez de capar a 760px
(en pantallas grandes quedaba media página vacía abajo). */
height: calc(100vh - 180px);
min-height: 500px;
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,6,22,0.95));
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
}
/* Channel tabs */
.chat-channels-row {
display: flex;
gap: 6px;
padding: 10px 12px;
background: rgba(0,0,0,0.4);
border-bottom: 1px solid var(--border-soft);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.chat-channels-row::-webkit-scrollbar { display: none; }
.chat-channel-tab {
flex: 1;
min-width: 100px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-md);
color: var(--text-muted);
font-family: var(--font-title);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
}
.chat-channel-tab i { font-size: 16px; }
.chat-channel-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.chat-channel-tab.active {
background: linear-gradient(180deg,
color-mix(in srgb, var(--chan-color) 22%, transparent),
color-mix(in srgb, var(--chan-color) 6%, transparent));
border-color: var(--chan-color);
color: var(--chan-color);
box-shadow: 0 2px 10px color-mix(in srgb, var(--chan-color) 22%, transparent);
}
/* Messages body */
.chat-body {
overflow-y: auto;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
-webkit-overflow-scrolling: touch;
}
.chat-body::-webkit-scrollbar { width: 4px; }
.chat-body::-webkit-scrollbar-thumb { background: rgba(233,185,99,0.25); border-radius: 4px; }
.chat-loading { padding: 40px; text-align: center; }
.chat-loading .loader { margin: 0 auto; }
/* === Updates feed (chat full + sidebar) === */
.chat-update-card,
.qc-update {
background: linear-gradient(180deg, rgba(28,16,45,0.95), rgba(12,6,22,0.99));
border: 1px solid rgba(212,175,55,0.30);
border-left: 3px solid var(--gold);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 10px;
}
.chat-update-card.kind-feature, .qc-update.qc-update-feature { border-left-color: #5fd684; }
.chat-update-card.kind-balance, .qc-update.qc-update-balance { border-left-color: #5aa6ff; }
.chat-update-card.kind-bugfix, .qc-update.qc-update-bugfix { border-left-color: #ff7a3a; }
.chat-update-card.kind-event, .qc-update.qc-update-event { border-left-color: #b884ff; }
.chat-update-card.kind-other, .qc-update.qc-update-other { border-left-color: var(--gold); }
.cuc-head, .qc-update-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
gap: 8px;
}
.cuc-kind, .qc-update-kind {
font-family: var(--font-cinzel, serif);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
padding: 3px 8px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
}
.cuc-kind.k-feature, .qc-update-kind.k-feature { background: rgba(95,214,132,0.18); color: #7eebac; }
.cuc-kind.k-balance, .qc-update-kind.k-balance { background: rgba(90,166,255,0.18); color: #7fbaff; }
.cuc-kind.k-bugfix, .qc-update-kind.k-bugfix { background: rgba(255,122,58,0.18); color: #ffaa78; }
.cuc-kind.k-event, .qc-update-kind.k-event { background: rgba(184,132,255,0.18); color: #d8b4ff; }
.cuc-kind.k-other, .qc-update-kind.k-other { background: rgba(212,175,55,0.18); color: var(--gold); }
.cuc-date, .qc-update-date {
font-size: 11px;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 4px;
}
.cuc-title, .qc-update-title {
font-family: var(--font-cinzel, serif);
font-weight: 700;
font-size: 15px;
color: #f8e9c4;
margin-bottom: 6px;
line-height: 1.25;
}
.cuc-body, .qc-update-body {
color: var(--text-soft, #c9c9d3);
font-size: 13px;
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
}
.cuc-by {
margin-top: 8px;
font-size: 11px;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 4px;
}
.cuc-by i { color: var(--gold); }
/* Tab "Updates" en chat-widget — pequeño, con icono */
.chat-widget-tab.is-updates {
display: inline-flex;
align-items: center;
gap: 4px;
}
.chat-widget-tab.is-updates i { font-size: 12px; color: var(--gold); }
.chat-widget-tab.is-updates.active i { color: #fff; }
.chat-empty {
padding: 60px 20px;
text-align: center;
color: var(--text-muted);
}
.chat-empty i { font-size: 48px; opacity: 0.3; }
.chat-empty p { margin-top: 8px; }
/* Day separator */
.chat-day-sep {
display: flex;
align-items: center;
gap: 10px;
margin: 8px 0 4px;
}
.chat-day-sep::before,
.chat-day-sep::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(233,185,99,0.25), transparent);
}
.chat-day-sep span {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.7;
padding: 0 8px;
}
/* System msg */
.chat-system-msg {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(86,200,255,0.1);
border-left: 3px solid var(--cyan);
border-radius: var(--r-md);
font-size: 12.5px;
font-style: italic;
color: var(--cyan);
}
.chat-system-msg i { font-size: 14px; }
/* Message group (Discord-style) */
.chat-msg-group {
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px;
padding: 6px 10px;
border-radius: var(--r-md);
transition: background 0.15s;
}
.chat-msg-group:hover {
background: rgba(255,255,255,0.025);
}
.chat-msg-group.is-own {
background: linear-gradient(90deg, rgba(233,185,99,0.05), transparent 80%);
border-left: 2px solid rgba(233,185,99,0.3);
padding-left: 8px;
}
.chat-msg-group.is-vip .cmg-name {
color: var(--gold);
text-shadow: 0 0 8px rgba(233,185,99,0.4);
}
/* Avatar */
.cmg-avatar {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(122,76,240,0.4), rgba(86,200,255,0.4));
border: 2px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
font-size: 18px;
font-weight: 800;
color: var(--text);
flex-shrink: 0;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.cmg-avatar.level-high {
background: linear-gradient(135deg, var(--gold), #b97f2e);
border-color: var(--gold);
box-shadow: 0 2px 10px rgba(233,185,99,0.35);
color: #2a1a00;
}
.cmg-avatar.level-mid {
background: linear-gradient(135deg, rgba(122,76,240,0.6), rgba(86,200,255,0.5));
border-color: var(--primary);
}
.cmg-avatar.level-low {
background: linear-gradient(135deg, rgba(63,214,146,0.5), rgba(86,200,255,0.4));
border-color: rgba(63,214,146,0.5);
}
/* 2026-05-07: avatar con portrait de raza (override del background con la imagen) */
.cmg-avatar.has-portrait { background: rgba(0,0,0,0.4); overflow: hidden; }
.cmg-portrait {
position: absolute;
inset: 0;
border-radius: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.cmg-vip-crown {
position: absolute;
bottom: -3px;
right: -3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(180deg, #f0c674, #b97f2e);
display: flex;
align-items: center;
justify-content: center;
color: #2a1a00;
font-size: 9px;
border: 2px solid #16092b;
box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
/* Content */
.cmg-content { min-width: 0; }
.cmg-header {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 3px;
}
.cmg-name {
font-family: var(--font-title);
font-weight: 700;
font-size: 14px;
color: var(--text);
letter-spacing: 0.04em;
}
.is-own .cmg-name { color: var(--gold); }
.cmg-level {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-muted);
font-weight: 700;
}
.cmg-time {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-dim);
margin-left: auto;
}
/* Inline badges */
.cmg-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 6px;
border-radius: 99px;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.05em;
}
.cmg-badge i { font-size: 9.5px; }
.cmg-badge-vip {
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
box-shadow: 0 1px 4px rgba(233,185,99,0.4);
}
.cmg-badge-clan {
background: rgba(122,76,240,0.18);
color: var(--primary);
border: 1px solid rgba(122,76,240,0.4);
}
.cmg-badge-admin {
background: linear-gradient(180deg, #ff3860, #b71c4d);
color: #fff;
border: 1px solid rgba(255,255,255,0.25);
box-shadow: 0 0 10px rgba(255,56,96,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
animation: admin-glow 2.4s ease-in-out infinite;
}
@keyframes admin-glow {
0%, 100% { box-shadow: 0 0 8px rgba(255,56,96,0.45), inset 0 1px 0 rgba(255,255,255,0.2); }
50% { box-shadow: 0 0 16px rgba(255,56,96,0.85), inset 0 1px 0 rgba(255,255,255,0.3); }
}
.cmg-badge-mod {
background: linear-gradient(180deg, #00b8d4, #006e87);
color: #fff;
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 0 6px rgba(0,184,212,0.4);
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* Admin/Mod styling: borde y nombre realzados */
.is-admin .cmg-name { color: #ff5c7c; text-shadow: 0 0 6px rgba(255,56,96,0.4); }
.is-mod .cmg-name { color: #00d4ff; text-shadow: 0 0 6px rgba(0,184,212,0.4); }
.avatar-admin {
background: linear-gradient(135deg, #ff5c7c, #b71c4d) !important;
border-color: #ff3860 !important;
box-shadow: 0 0 14px rgba(255,56,96,0.55) !important;
}
.avatar-mod {
background: linear-gradient(135deg, #00d4ff, #006e87) !important;
border-color: #00b8d4 !important;
}
.cmg-admin-shield {
position: absolute;
bottom: -3px;
right: -3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(180deg, #ff3860, #8b0d28);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 10px;
border: 2px solid #16092b;
box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 8px rgba(255,56,96,0.6);
}
/* =====================================================================
2026-05-31: SISTEMA — mismo look que admin pero en amarillo/dorado
Para mensajes del sistema (sender_id NULL en chat_messages).
===================================================================== */
.chat-msg-group.is-system {
background: linear-gradient(90deg, rgba(255, 200, 60, 0.08), transparent 80%);
border-left: 2px solid rgba(255, 200, 60, 0.55);
}
.cmg-badge-system {
background: linear-gradient(180deg, #ffd56a, #b8861f);
color: #1a0e2a;
border: 1px solid rgba(255, 240, 180, 0.35);
box-shadow: 0 0 10px rgba(255, 200, 60, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
text-shadow: 0 1px 1px rgba(255, 230, 150, 0.6);
font-weight: 800;
animation: system-glow 2.4s ease-in-out infinite;
}
@keyframes system-glow {
0%, 100% { box-shadow: 0 0 8px rgba(255, 200, 60, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
50% { box-shadow: 0 0 18px rgba(255, 220, 100, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
}
.avatar-system {
background: linear-gradient(135deg, #ffd56a, #b8861f) !important;
border-color: #ffd56a !important;
box-shadow: 0 0 14px rgba(255, 200, 60, 0.55) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative;
}
.cmg-system-icon {
color: #1a0e2a !important;
font-size: 20px !important;
text-shadow: 0 1px 2px rgba(255, 230, 150, 0.5);
}
.cmg-system-shield {
position: absolute;
bottom: -3px;
right: -3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(180deg, #ffd56a, #8a6010);
display: flex;
align-items: center;
justify-content: center;
color: #1a0e2a;
font-size: 10px;
border: 2px solid #16092b;
box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 8px rgba(255, 200, 60, 0.65);
}
.cmg-name-system {
color: #ffd56a !important;
font-weight: 800 !important;
text-shadow: 0 0 8px rgba(255, 200, 60, 0.4);
}
/* Mini-chat lateral (qc-chat-body) — mensajes del sistema */
.chat-msg.chat-msg-system {
background: linear-gradient(90deg, rgba(255, 200, 60, 0.18), rgba(255, 200, 60, 0.06) 70%, transparent);
border-left: 3px solid #ffd56a;
padding: 4px 8px;
border-radius: 4px;
margin: 2px 0;
}
.qc-role.qc-role-system {
display: inline-flex;
align-items: center;
gap: 3px;
background: linear-gradient(180deg, #ffd56a, #b8861f);
color: #1a0e2a;
border: 1px solid rgba(255, 240, 180, 0.45);
border-radius: 5px;
padding: 0 5px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-right: 5px;
box-shadow: 0 0 8px rgba(255, 200, 60, 0.5);
animation: system-glow 2.4s ease-in-out infinite;
}
.qc-role.qc-role-system i { font-size: 10px; }
.msg-sender.msg-sender-system {
color: #ffd56a !important;
font-weight: 800;
text-shadow: 0 0 6px rgba(255, 200, 60, 0.5);
}
.qc-msg-system-body {
color: #fff5d8;
font-weight: 500;
}
/* === Botón de borrar mensaje (chat full screen) — admin only === */
.cmg-body { position: relative; padding-right: 30px; }
.cmg-delete-btn {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid rgba(255,56,96,0.3);
background: rgba(255,56,96,0.08);
color: #ff5c7c;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.15s, background 0.15s, transform 0.15s;
padding: 0;
}
.cmg-body:hover .cmg-delete-btn { opacity: 1; }
.cmg-delete-btn:hover {
background: linear-gradient(180deg, #ff3860, #8b0d28);
color: #fff;
border-color: #ff3860;
box-shadow: 0 0 8px rgba(255,56,96,0.6);
transform: translateY(-50%) scale(1.08);
}
/* === Quick chat (sidebar derecha) — badges + delete === */
.chat-msg { position: relative; }
.qc-role {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 0 5px;
border-radius: 4px;
font-family: var(--font-mono);
font-size: 8.5px;
font-weight: 800;
letter-spacing: 0.04em;
margin-right: 4px;
vertical-align: middle;
}
.qc-role i { font-size: 8.5px; }
.qc-role-admin {
background: linear-gradient(180deg, #ff3860, #b71c4d);
color: #fff;
box-shadow: 0 0 4px rgba(255,56,96,0.5);
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.qc-role-mod {
background: linear-gradient(180deg, #00b8d4, #006e87);
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.msg-sender-admin { color: #ff5c7c !important; font-weight: 800 !important; }
.msg-sender-mod { color: #00d4ff !important; font-weight: 800 !important; }
.msg-sender-vip { color: #ffc857 !important; font-weight: 800 !important; }
.qc-role-vip {
background: linear-gradient(180deg, #ffc857, #b8941e);
color: #1a0f00;
text-shadow: 0 1px 1px rgba(0,0,0,0.15);
box-shadow: 0 0 4px rgba(255,200,87,0.5);
}
.chat-msg.is-vip { background: rgba(255,200,87,0.04); border-left: 2px solid rgba(255,200,87,0.3); padding-left: 4px; }
.qc-del {
margin-left: 6px;
padding: 0 5px;
background: transparent;
border: 1px solid rgba(255,56,96,0.25);
color: #ff5c7c;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
opacity: 0;
transition: opacity 0.15s, background 0.15s;
vertical-align: middle;
}
.chat-msg:hover .qc-del { opacity: 0.75; }
.qc-del:hover { opacity: 1; background: rgba(255,56,96,0.15); }
/* 2026-05-08: boton ban (admin) en quick chat */
.qc-ban {
margin-left: 4px;
padding: 0 5px;
background: transparent;
border: 1px solid rgba(255,140,40,0.30);
color: #ffb04c;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
opacity: 0;
transition: opacity 0.15s, background 0.15s;
vertical-align: middle;
}
.chat-msg:hover .qc-ban { opacity: 0.75; }
.qc-ban:hover { opacity: 1; background: rgba(255,140,40,0.18); }
/* Menu de duracion (1 dia / forever) */
.qc-ban-menu {
position: fixed;
z-index: 9999;
width: 180px;
background: linear-gradient(180deg, rgba(28,16,42,0.98), rgba(15,8,24,0.98));
border: 1px solid rgba(255,140,40,0.35);
border-radius: 8px;
padding: 6px;
box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4);
display: flex;
flex-direction: column;
gap: 4px;
animation: qc-ban-menu-in 0.15s ease;
}
@keyframes qc-ban-menu-in {
from { opacity: 0; transform: scale(0.95) translateY(-4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.qc-ban-menu-title {
font-size: 11px;
color: var(--text-muted);
padding: 4px 6px 2px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 4px;
}
.qc-ban-menu-title i { color: #ffb04c; margin-right: 4px; }
.qc-ban-menu-title b { color: #ffb04c; }
.qc-ban-opt {
display: flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
background: transparent;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 5px;
color: #f4d8a8;
font-size: 12px;
font-weight: 600;
cursor: pointer;
text-align: left;
transition: background 0.15s, border-color 0.15s;
}
.qc-ban-opt i { font-size: 14px; }
.qc-ban-opt:hover {
background: rgba(255,140,40,0.12);
border-color: rgba(255,140,40,0.4);
}
.qc-ban-opt-perm { color: #ff5c7c; }
.qc-ban-opt-perm:hover {
background: rgba(255,56,96,0.15);
border-color: rgba(255,56,96,0.5);
}
.qc-ban-cancel {
margin-top: 2px;
color: var(--text-muted);
font-size: 11px;
border-color: transparent;
text-align: center;
justify-content: center;
}
.qc-ban-cancel:hover { background: rgba(255,255,255,0.05); }
/* Body lines */
.cmg-bodies {
display: flex;
flex-direction: column;
gap: 2px;
}
.cmg-body {
font-size: 13.5px;
line-height: 1.45;
color: var(--text);
word-wrap: break-word;
overflow-wrap: break-word;
}
.chat-link {
color: var(--cyan);
text-decoration: underline;
word-break: break-all;
}
.chat-link:hover { color: #7adfff; }
/* Input bar */
.chat-input-bar {
display: flex;
gap: 8px;
padding: 12px 14px;
background: rgba(0,0,0,0.45);
border-top: 1px solid var(--border-soft);
}
.chat-input-wrap {
flex: 1;
position: relative;
}
.chat-input-wrap input {
width: 100%;
height: 44px;
padding: 0 70px 0 16px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 99px;
color: var(--text);
font-size: 14px;
outline: none;
transition: border-color 0.15s;
}
.chat-input-wrap input:focus {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(233,185,99,0.15);
}
.chat-char-count {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
pointer-events: none;
}
.chat-char-count.is-warn { color: var(--gold); }
.chat-char-count.is-error { color: var(--blood); }
.chat-send-btn {
flex-shrink: 0;
height: 44px;
padding: 0 18px;
font-size: 13px;
letter-spacing: 0.06em;
}
.chat-send-btn i { font-size: 15px; }
/* ============================================================================
RANKING — rediseño con podio + lista
============================================================================ */
/* Mi posición */
.rank-myrank-card {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 14px;
align-items: center;
background: linear-gradient(90deg, rgba(233,185,99,0.18), rgba(122,76,240,0.10));
border: 1.5px solid var(--gold);
border-radius: var(--r-lg);
padding: 14px 18px;
margin-bottom: 16px;
box-shadow: 0 4px 18px rgba(233,185,99,0.2);
}
.rmrc-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #f0c674, #b97f2e);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
font-size: 24px;
font-weight: 800;
color: #2a1a00;
border: 2px solid var(--gold);
box-shadow: 0 0 16px rgba(233,185,99,0.5);
overflow: hidden;
}
/* Imagen del avatar real (custom o por raza). Ocupa todo el círculo. */
.rank-avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
}
.rank-avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-family: var(--font-title);
font-weight: 800;
}
/* Asegurar que .rpc-avatar y .rank-row-avatar también recortan la imagen */
.rpc-avatar, .rank-row-avatar { overflow: hidden; padding: 0 !important; }
.rmrc-info { min-width: 0; }
.rmrc-label {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
font-weight: 700;
margin-bottom: 4px;
}
.rmrc-name {
font-family: var(--font-title);
font-size: 18px;
font-weight: 800;
color: var(--text);
}
.rmrc-position { text-align: right; }
.rmrc-pos-num {
font-family: var(--font-title);
font-size: 28px;
font-weight: 900;
color: var(--gold);
line-height: 1;
text-shadow: 0 0 14px rgba(233,185,99,0.5);
}
.rmrc-pos-total {
font-size: 15px;
font-weight: 600;
color: var(--text-dim);
text-shadow: none;
}
.rmrc-pos-val {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text);
margin-top: 4px;
font-weight: 700;
}
/* Tabs */
.rank-tabs-row {
display: flex;
gap: 6px;
background: rgba(0,0,0,0.4);
padding: 4px;
border-radius: var(--r-md);
border: 1px solid var(--border-soft);
margin-bottom: 16px;
}
.rank-tab-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-sm);
color: var(--text-muted);
font-family: var(--font-title);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
}
.rank-tab-btn i { font-size: 15px; }
.rank-tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.rank-tab-btn.active {
background: linear-gradient(180deg,
color-mix(in srgb, var(--rank-color) 22%, transparent),
color-mix(in srgb, var(--rank-color) 5%, transparent));
border-color: var(--rank-color);
color: var(--rank-color);
box-shadow: 0 2px 10px color-mix(in srgb, var(--rank-color) 22%, transparent);
}
/* === Podio Top 3 === */
.rank-podium {
display: grid;
grid-template-columns: 1fr 1.15fr 1fr;
gap: 10px;
align-items: end;
margin-bottom: 22px;
padding: 0 4px;
}
.rank-podium-card {
position: relative;
background: linear-gradient(180deg, rgba(20,12,40,0.95), rgba(10,6,22,0.99));
border: 2px solid rgba(255,255,255,0.08);
border-radius: var(--r-lg);
padding: 18px 14px 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.rank-podium-card.pos-1 {
border-color: var(--gold);
background: linear-gradient(180deg, rgba(58,40,12,0.92), rgba(20,12,30,0.96));
box-shadow:
0 0 30px rgba(233,185,99,0.4),
inset 0 0 24px rgba(233,185,99,0.08);
transform: translateY(-12px);
z-index: 2;
}
.rank-podium-card.pos-2 {
border-color: #c0c0c0;
background: linear-gradient(180deg, rgba(60,60,70,0.5), rgba(20,12,30,0.96));
box-shadow: 0 0 20px rgba(192,192,192,0.25);
}
.rank-podium-card.pos-3 {
border-color: #cd7f32;
background: linear-gradient(180deg, rgba(60,40,20,0.6), rgba(20,12,30,0.96));
box-shadow: 0 0 20px rgba(205,127,50,0.25);
}
.rpc-trophy {
display: flex;
align-items: center;
gap: 4px;
}
.rpc-trophy i { font-size: 28px; }
.pos-1 .rpc-trophy i { color: var(--gold); filter: drop-shadow(0 0 12px rgba(233,185,99,0.7)); }
.pos-2 .rpc-trophy i { color: #c0c0c0; filter: drop-shadow(0 0 8px rgba(192,192,192,0.6)); }
.pos-3 .rpc-trophy i { color: #cd7f32; filter: drop-shadow(0 0 8px rgba(205,127,50,0.6)); }
.rpc-pos-label {
font-family: var(--font-title);
font-size: 14px;
font-weight: 900;
letter-spacing: 0.04em;
}
.pos-1 .rpc-pos-label { color: var(--gold); }
.pos-2 .rpc-pos-label { color: #c0c0c0; }
.pos-3 .rpc-pos-label { color: #cd7f32; }
.rpc-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
font-size: 26px;
font-weight: 800;
border: 3px solid;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.pos-1 .rpc-avatar {
background: linear-gradient(135deg, #f0c674, #b97f2e);
color: #2a1a00;
border-color: var(--gold);
box-shadow: 0 0 20px rgba(233,185,99,0.5);
}
.pos-2 .rpc-avatar {
background: linear-gradient(135deg, #d0d0d8, #888893);
color: #1a1a20;
border-color: #c0c0c0;
box-shadow: 0 0 14px rgba(192,192,192,0.4);
}
.pos-3 .rpc-avatar {
background: linear-gradient(135deg, #d49056, #8b542a);
color: #1a0e08;
border-color: #cd7f32;
box-shadow: 0 0 14px rgba(205,127,50,0.4);
}
.rpc-name {
font-family: var(--font-title);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--text);
text-transform: uppercase;
word-break: break-word;
}
.pos-1 .rpc-name { font-size: 16px; color: var(--gold); text-shadow: 0 0 10px rgba(233,185,99,0.4); }
.rpc-level {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
.rpc-value {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 16px;
font-weight: 800;
margin-top: 4px;
}
.pos-1 .rpc-value { font-size: 18px; }
.rpc-value i { font-size: 16px; }
/* Section title */
.rank-section-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
margin-bottom: 10px;
opacity: 0.8;
}
.rank-section-title i { font-size: 14px; }
/* Lista */
.rank-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.rank-row {
display: grid;
grid-template-columns: 48px 44px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.rank-row:hover {
transform: translateX(2px);
border-color: var(--gold);
}
.rank-row.is-me {
background: linear-gradient(90deg, rgba(233,185,99,0.18), rgba(233,185,99,0.04));
border-color: var(--gold);
box-shadow: 0 2px 10px rgba(233,185,99,0.18);
}
.rank-pos-num {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 800;
color: var(--text-muted);
text-align: center;
}
.rank-row.is-me .rank-pos-num { color: var(--gold); }
.rank-row-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
font-size: 18px;
font-weight: 800;
color: var(--text);
border: 2px solid rgba(255,255,255,0.1);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.rank-row-avatar.level-high {
background: linear-gradient(135deg, var(--gold), #b97f2e);
border-color: var(--gold);
color: #2a1a00;
}
.rank-row-avatar.level-mid {
background: linear-gradient(135deg, rgba(122,76,240,0.6), rgba(86,200,255,0.5));
border-color: var(--primary);
}
.rank-row-avatar.level-low {
background: linear-gradient(135deg, rgba(63,214,146,0.5), rgba(86,200,255,0.4));
border-color: rgba(63,214,146,0.5);
}
.rank-row-info { min-width: 0; }
.rank-row-name {
font-family: var(--font-title);
font-weight: 700;
font-size: 14px;
color: var(--text);
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.03em;
}
.rank-me-tag {
display: inline-flex;
padding: 1px 7px;
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.1em;
border-radius: 99px;
box-shadow: 0 1px 4px rgba(233,185,99,0.4);
}
.rank-row-level {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
.rank-row-value {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-weight: 800;
font-size: 14px;
flex-shrink: 0;
}
.rank-row-value i { font-size: 14px; }
/* ============================================================================
ACHIEVEMENTS — rediseño completo
============================================================================ */
/* Summary card */
.ach-summary-card {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1px solid rgba(233,185,99,0.25);
border-radius: var(--r-lg);
padding: 14px 16px 16px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.ach-summary-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(233,185,99,0.08), transparent 60%);
pointer-events: none;
}
.asum-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
margin-bottom: 12px;
}
.asum-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 6px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
}
.asum-cell:hover {
border-color: rgba(233,185,99,0.4);
transform: translateY(-2px);
}
.asum-cell.is-highlight {
background: linear-gradient(180deg, rgba(233,185,99,0.18), rgba(233,185,99,0.04));
border-color: var(--gold);
box-shadow: 0 4px 14px rgba(233,185,99,0.25);
animation: ssumPulse 2.4s ease-in-out infinite;
}
.asum-cell.is-mint {
background: linear-gradient(180deg, rgba(63,214,146,0.10), rgba(63,214,146,0.02));
border-color: rgba(63,214,146,0.35);
}
.asum-cell.is-mint > i { color: var(--mint); }
.asum-cell > i {
font-size: 20px;
color: var(--gold);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.asum-cell.is-highlight > i { color: var(--gold); }
.asum-val {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.asum-frac {
color: var(--text-dim);
font-size: 14px;
}
.asum-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Progress bar global */
.asum-progress { position: relative; }
.asum-progress-bar {
height: 8px;
background: rgba(0,0,0,0.6);
border-radius: 99px;
overflow: hidden;
border: 1px solid rgba(233,185,99,0.2);
}
.asum-progress-fill {
height: 100%;
background: linear-gradient(90deg, #b97f2e 0%, #f0c674 50%, #ffe8b3 100%);
box-shadow: 0 0 12px rgba(233,185,99,0.5);
border-radius: 99px;
transition: none;
}
/* Filter chips */
.ach-cats-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
.ach-cat-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 12px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--border-soft);
border-radius: 99px;
color: var(--text-muted);
font-family: var(--font-title);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
white-space: nowrap;
}
.ach-cat-chip i { font-size: 13px; }
.ach-cat-chip:hover {
color: var(--text);
border-color: var(--cat-color);
}
.ach-cat-chip.active {
background: linear-gradient(180deg,
color-mix(in srgb, var(--cat-color) 22%, transparent),
color-mix(in srgb, var(--cat-color) 5%, transparent));
border-color: var(--cat-color);
color: var(--cat-color);
box-shadow: 0 2px 8px color-mix(in srgb, var(--cat-color) 25%, transparent);
}
.ach-cat-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 6px;
background: rgba(0,0,0,0.55);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 800;
margin-left: 2px;
}
/* Achievements grid */
.ach-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 12px;
}
/* === Achievement card === */
.ach-card-pro {
position: relative;
display: grid;
grid-template-columns: 80px 1fr;
gap: 14px;
align-items: center;
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,6,22,0.95));
border: 1.5px solid rgba(255,255,255,0.06);
border-radius: var(--r-lg);
padding: 16px 16px 16px 18px;
transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
overflow: hidden;
}
.ach-card-pro::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--cat-color);
box-shadow: 0 0 12px var(--cat-color);
opacity: 0.3;
transition: opacity 0.18s;
}
.ach-card-pro:hover {
transform: translateY(-3px);
border-color: var(--cat-color);
box-shadow: 0 8px 24px color-mix(in srgb, var(--cat-color) 18%, transparent);
}
.ach-card-pro:hover::before { opacity: 1; }
.ach-card-pro.status-locked {
opacity: 0.65;
filter: grayscale(35%);
}
.ach-card-pro.status-locked:hover { transform: none; }
.ach-card-pro.status-unlocked {
border-color: var(--gold);
background: linear-gradient(180deg, rgba(58,40,12,0.85), rgba(20,12,30,0.95));
box-shadow:
0 0 20px rgba(233,185,99,0.25),
inset 0 0 18px rgba(233,185,99,0.08);
}
.ach-card-pro.status-unlocked::before {
background: var(--gold);
box-shadow: 0 0 14px var(--gold);
opacity: 1;
}
.ach-card-pro.status-claimed {
border-color: var(--mint);
background: linear-gradient(180deg, rgba(20,38,28,0.85), rgba(10,18,12,0.95));
}
.ach-card-pro.status-claimed::before {
background: var(--mint);
box-shadow: 0 0 10px var(--mint);
opacity: 0.8;
}
/* Status badge */
.ach-status-badge {
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: rgba(0,0,0,0.6);
border: 1px solid var(--text-dim);
border-radius: 99px;
font-family: var(--font-title);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
z-index: 2;
}
.ach-status-badge i { font-size: 10px; }
.ach-status-badge.is-locked {
color: var(--text-dim);
border-color: var(--text-dim);
}
.ach-status-badge.is-available {
color: #2a1a00;
background: linear-gradient(180deg, #f0c674, #b97f2e);
border-color: var(--gold);
animation: ssumPulse 2s ease-in-out infinite;
}
.ach-status-badge.is-claimed {
color: var(--mint);
border-color: var(--mint);
background: rgba(63,214,146,0.15);
}
/* Icon */
.ach-icon-wrap {
position: relative;
width: 80px;
height: 80px;
flex-shrink: 0;
}
.ach-icon {
width: 80px;
height: 80px;
border-radius: 16px;
background: color-mix(in srgb, var(--cat-color) 15%, rgba(0,0,0,0.5));
border: 2px solid color-mix(in srgb, var(--cat-color) 50%, var(--border));
display: flex;
align-items: center;
justify-content: center;
color: var(--cat-color);
font-size: 36px;
filter: drop-shadow(0 0 12px color-mix(in srgb, var(--cat-color) 35%, transparent));
}
.ach-card-pro.status-unlocked .ach-icon {
border-color: var(--gold);
color: var(--gold);
box-shadow: 0 0 20px rgba(233,185,99,0.4);
background: linear-gradient(180deg, rgba(233,185,99,0.18), rgba(122,76,240,0.10));
}
.ach-card-pro.status-claimed .ach-icon {
border-color: var(--mint);
color: var(--mint);
box-shadow: 0 0 16px rgba(63,214,146,0.3);
background: rgba(63,214,146,0.10);
}
/* Claimed checkmark */
.ach-claimed-check {
position: absolute;
bottom: -6px;
right: -6px;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--mint), #2a8b5e);
display: flex;
align-items: center;
justify-content: center;
color: #0a1a10;
font-size: 14px;
border: 2.5px solid rgba(20,12,30,1);
box-shadow: 0 3px 8px rgba(63,214,146,0.5);
}
/* Body */
.ach-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ach-name {
font-family: var(--font-title);
font-size: 15px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--text);
line-height: 1.2;
padding-right: 90px; /* deja espacio para el badge de status */
}
.ach-desc {
font-family: var(--font-serif);
font-style: italic;
font-size: 12.5px;
line-height: 1.4;
color: var(--text-muted);
}
/* Progress bar */
.ach-progress-block {
margin-top: 4px;
}
.ach-progress-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
margin-bottom: 5px;
}
.ach-progress-label {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
.ach-progress-val {
font-size: 12px;
color: var(--gold);
font-weight: 700;
}
.ach-bar {
height: 5px;
background: rgba(0,0,0,0.6);
border-radius: 99px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.04);
}
.ach-bar-fill {
height: 100%;
background: linear-gradient(90deg,
color-mix(in srgb, var(--cat-color) 60%, transparent),
var(--cat-color));
border-radius: 99px;
box-shadow: 0 0 6px var(--cat-color);
transition: none;
}
/* Rewards */
.ach-rewards-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 4px;
}
.ach-reward {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--text);
}
.ach-reward i { font-size: 11px; }
.ach-reward.is-gold { color: var(--gold); border-color: rgba(233,185,99,0.4); }
.ach-reward.is-xp { color: var(--primary); border-color: rgba(122,76,240,0.4); }
.ach-reward.is-gems { color: #b89dff; border-color: rgba(122,76,240,0.4); }
.ach-reward.is-eldor { color: var(--ember); border-color: rgba(255,113,67,0.4); }
/* Action button */
.ach-action {
position: absolute;
bottom: 14px;
right: 14px;
}
.ach-claim-btn {
font-size: 11.5px;
letter-spacing: 0.06em;
min-height: 36px;
padding: 0 14px;
}
/* ============================================================================
VIP SCREEN — rediseño premium
============================================================================ */
/* === Active banner (cuando ya sos VIP) === */
.vip-active-banner-pro {
position: relative;
background: linear-gradient(135deg, rgba(58,40,12,0.95), rgba(20,12,30,0.98));
border: 2px solid var(--gold);
border-radius: var(--r-xl);
padding: 18px 22px;
margin-bottom: 20px;
overflow: hidden;
box-shadow:
0 8px 30px rgba(0,0,0,0.5),
0 0 30px rgba(233,185,99,0.3);
}
.vab-glow {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 60% at 0% 0%, rgba(233,185,99,0.25), transparent 60%),
radial-gradient(ellipse 60% 60% at 100% 100%, rgba(122,76,240,0.18), transparent 60%);
pointer-events: none;
}
.vab-content {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 16px;
margin-bottom: 14px;
}
.vab-left {
display: flex;
align-items: center;
gap: 14px;
}
.vab-crown {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #f0c674, #b97f2e);
display: flex;
align-items: center;
justify-content: center;
color: #2a1a00;
font-size: 26px;
border: 2px solid var(--gold);
box-shadow: 0 0 20px rgba(233,185,99,0.5);
flex-shrink: 0;
animation: vipCrownGlow 2.5s ease-in-out infinite;
}
@keyframes vipCrownGlow {
0%, 100% { box-shadow: 0 0 20px rgba(233,185,99,0.5); }
50% { box-shadow: 0 0 32px rgba(233,185,99,0.85); }
}
.vab-eyebrow {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
text-shadow: 0 0 10px rgba(233,185,99,0.5);
}
.vab-meta {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.vab-right { text-align: right; }
.vab-counter-num {
font-family: var(--font-title);
font-size: 40px;
font-weight: 900;
color: var(--gold);
line-height: 1;
text-shadow: 0 0 16px rgba(233,185,99,0.6);
}
.vab-counter-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 4px;
}
.vab-progress {
position: relative;
margin-bottom: 14px;
}
.vab-progress-bar {
height: 8px;
background: rgba(0,0,0,0.6);
border-radius: 99px;
border: 1px solid rgba(233,185,99,0.3);
overflow: hidden;
}
.vab-progress-fill {
height: 100%;
background: linear-gradient(90deg, #b97f2e 0%, #f0c674 50%, #ffe8b3 100%);
border-radius: 99px;
box-shadow: 0 0 12px rgba(233,185,99,0.6);
}
.vab-progress-meta {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-muted);
}
.vab-perks {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.vab-perk {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 11px;
background: rgba(233,185,99,0.12);
border: 1px solid rgba(233,185,99,0.4);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--gold);
}
.vab-perk i { font-size: 11px; color: var(--mint); }
/* === Hero (purchase banner) === */
.vip-hero-pro {
position: relative;
background:
radial-gradient(ellipse 80% 100% at 50% 0%, rgba(233,185,99,0.25), transparent 65%),
linear-gradient(180deg, rgba(40,28,68,0.95), rgba(15,8,30,0.98));
border: 2px solid var(--gold);
border-radius: var(--r-xl);
padding: 36px 28px 32px;
margin-bottom: 24px;
overflow: hidden;
text-align: center;
box-shadow:
0 12px 40px rgba(0,0,0,0.6),
0 0 40px rgba(233,185,99,0.2);
}
.vip-hero-pro.is-active {
/* En modo activo, el hero es el de extender — un poco más calmado */
border-color: rgba(233,185,99,0.4);
}
/* Particles flotantes */
.vip-hero-particles {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.vph-particle {
position: absolute;
width: 4px;
height: 4px;
background: var(--gold);
border-radius: 50%;
box-shadow: 0 0 8px var(--gold);
top: calc(50% + (var(--i) * 7px - 50px));
left: calc(50% + ((var(--i) % 4) * 90px - 180px));
opacity: 0;
animation: particleFloat 4s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.3s);
}
@keyframes particleFloat {
0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
20% { opacity: 0.8; }
50% { opacity: 1; transform: translateY(-30px) scale(1); }
80% { opacity: 0.6; }
}
/* Glow detrás de la corona */
.vip-hero-glow {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(233,185,99,0.45) 0%, transparent 65%);
filter: blur(20px);
pointer-events: none;
animation: heroGlowPulse 3s ease-in-out infinite;
}
@keyframes heroGlowPulse {
0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}
.vip-hero-content {
position: relative;
z-index: 1;
}
.vip-crown-big {
width: 96px;
height: 96px;
margin: 0 auto 18px;
border-radius: 50%;
background: linear-gradient(135deg, #f0c674, #b97f2e);
display: flex;
align-items: center;
justify-content: center;
color: #2a1a00;
font-size: 50px;
border: 4px solid var(--gold);
box-shadow:
0 0 40px rgba(233,185,99,0.6),
inset 0 4px 12px rgba(255,255,255,0.3);
position: relative;
}
.vip-crown-big::before {
content: '';
position: absolute;
inset: -8px;
border: 2px dashed rgba(233,185,99,0.4);
border-radius: 50%;
animation: rotateRing 12s linear infinite;
}
@keyframes rotateRing {
to { transform: rotate(360deg); }
}
.vip-hero-eyebrow {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.85;
margin-bottom: 6px;
text-shadow: 0 0 10px rgba(233,185,99,0.5);
}
.vip-hero-title {
font-family: var(--font-title);
font-size: 36px;
font-weight: 900;
letter-spacing: 0.06em;
background: linear-gradient(180deg, #ffe8b3 0%, #c89a3e 50%, #6e4d15 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-transform: uppercase;
margin-bottom: 6px;
text-shadow: 0 0 30px rgba(233,185,99,0.4);
}
.vip-hero-sub {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--text-muted);
letter-spacing: 0.05em;
margin-bottom: 22px;
}
.vip-price-block {
display: inline-flex;
align-items: baseline;
gap: 10px;
margin-bottom: 6px;
}
.vip-price-block i {
font-size: 28px;
color: var(--accent);
filter: drop-shadow(0 0 8px rgba(122,76,240,0.6));
align-self: center;
}
.vip-price-num {
font-family: var(--font-mono);
font-size: 44px;
font-weight: 900;
color: var(--gold);
text-shadow: 0 0 20px rgba(233,185,99,0.5);
letter-spacing: -0.02em;
}
.vip-price-unit {
font-family: var(--font-title);
font-size: 14px;
letter-spacing: 0.18em;
color: var(--text-muted);
}
.vip-price-usd {
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--text-muted);
margin-bottom: 22px;
}
.vip-hero-action {
display: flex;
flex-direction: column;
gap: 10px;
align-items: stretch;
max-width: 360px;
margin: 0 auto;
}
.vip-buy-btn {
min-height: 56px;
font-size: 14px;
letter-spacing: 0.1em;
padding: 0 24px;
position: relative;
overflow: hidden;
}
.vip-buy-btn:not(:disabled)::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
transform: translateX(-100%);
animation: vipBuyShimmer 2.4s ease-in-out infinite;
}
@keyframes vipBuyShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.vip-deposit-btn { min-height: 46px; }
/* Section title */
.vip-section-title {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-title);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
margin: 24px 0 12px;
opacity: 0.9;
}
.vip-section-title i { font-size: 16px; }
/* === Benefits grid === */
.vip-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
margin-bottom: 8px;
}
.vip-benefit-card-pro {
position: relative;
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,6,22,0.95));
border: 1.5px solid color-mix(in srgb, var(--vbc-color) 40%, var(--border));
border-radius: var(--r-lg);
padding: 18px 16px 16px;
display: flex;
flex-direction: column;
gap: 8px;
transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
overflow: hidden;
}
.vip-benefit-card-pro::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 60% at 50% 0%,
color-mix(in srgb, var(--vbc-color) 12%, transparent),
transparent 60%);
pointer-events: none;
}
.vip-benefit-card-pro:hover {
transform: translateY(-3px);
border-color: var(--vbc-color);
box-shadow: 0 8px 24px color-mix(in srgb, var(--vbc-color) 18%, transparent);
}
.vip-benefit-card-pro.is-dim {
opacity: 0.65;
}
.vbc-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: color-mix(in srgb, var(--vbc-color) 18%, rgba(0,0,0,0.55));
border: 1.5px solid color-mix(in srgb, var(--vbc-color) 50%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--vbc-color);
font-size: 26px;
filter: drop-shadow(0 0 12px color-mix(in srgb, var(--vbc-color) 35%, transparent));
position: relative;
z-index: 1;
}
.vbc-tag {
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
padding: 3px 9px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--vbc-tag-color) 25%, rgba(0,0,0,0.4)),
color-mix(in srgb, var(--vbc-tag-color) 8%, rgba(0,0,0,0.4)));
border: 1px solid var(--vbc-tag-color);
color: var(--vbc-tag-color);
border-radius: 99px;
font-family: var(--font-title);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.12em;
z-index: 2;
}
.vbc-title {
font-family: var(--font-title);
font-size: 15px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--text);
position: relative;
z-index: 1;
margin-top: 2px;
}
.vbc-desc {
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
position: relative;
z-index: 1;
}
.vbc-desc b { color: var(--text); }
/* === VIP items grid === */
.vip-items-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
margin-bottom: 24px;
}
.vip-item-card {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
background: linear-gradient(180deg, rgba(33,20,58,0.7), rgba(15,8,30,0.9));
border: 1.5px solid var(--rarity-color, rgba(233,185,99,0.3));
border-radius: var(--r-lg);
position: relative;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.vip-item-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.vip-item-card.r-rare { --rarity-color: rgba(86,166,255,0.5); box-shadow: 0 0 14px rgba(86,166,255,0.18); }
.vip-item-card.r-epic { --rarity-color: rgba(184,132,255,0.5); box-shadow: 0 0 14px rgba(184,132,255,0.18); }
.vip-item-card.r-legendary { --rarity-color: rgba(255,170,80,0.5); box-shadow: 0 0 14px rgba(255,170,80,0.18); }
.vic-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.4);
border: 1px solid var(--rarity-color, rgba(233,185,99,0.3));
border-radius: var(--r-md);
flex-shrink: 0;
}
.vic-icon i {
font-size: 20px;
color: var(--rarity-color, var(--gold));
}
.vip-item-card.r-rare .vic-icon i { color: #56a6ff; }
.vip-item-card.r-epic .vic-icon i { color: #b884ff; }
.vip-item-card.r-legendary .vic-icon i { color: #ffaa50; }
.vic-info {
flex: 1;
min-width: 0;
}
.vic-name {
font-family: var(--font-title);
font-weight: 700;
font-size: 13.5px;
margin-bottom: 3px;
}
.vic-name.r-rare { color: #56a6ff; }
.vic-name.r-epic { color: #b884ff; }
.vic-name.r-legendary { color: #ffaa50; }
.vic-stats {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--text-muted);
letter-spacing: 0.02em;
}
.vic-rarity-pill {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 800;
padding: 4px 8px;
border-radius: 99px;
flex-shrink: 0;
}
.vic-rarity-pill.r-rare {
background: rgba(86,166,255,0.15);
color: #56a6ff;
border: 1px solid rgba(86,166,255,0.4);
}
.vic-rarity-pill.r-epic {
background: rgba(184,132,255,0.15);
color: #b884ff;
border: 1px solid rgba(184,132,255,0.4);
}
.vic-rarity-pill.r-legendary {
background: rgba(255,170,80,0.15);
color: #ffaa50;
border: 1px solid rgba(255,170,80,0.4);
}
/* === ROI card === */
.vip-roi-pro {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1.5px solid rgba(233,185,99,0.3);
border-radius: var(--r-xl);
padding: 22px 22px 18px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.vip-roi-pro::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(233,185,99,0.10), transparent 60%);
pointer-events: none;
}
.vroi-section {
position: relative;
margin-bottom: 18px;
}
.vroi-section-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px dashed rgba(233,185,99,0.25);
}
.vroi-section-title i { font-size: 14px; }
.vroi-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 0;
font-size: 13px;
}
.vroi-label { color: var(--text-muted); }
.vroi-val {
font-family: var(--font-mono);
font-weight: 700;
color: var(--text);
}
.vroi-val.text-gold { color: var(--gold); }
.vroi-row.vroi-subtotal {
border-top: 1px dashed rgba(233,185,99,0.2);
margin-top: 4px;
padding-top: 10px;
font-size: 14px;
}
.vroi-row.vroi-subtotal .vroi-val { font-size: 15px; }
/* Grand total — destacado */
.vroi-grand-total {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 14px;
padding: 16px 18px;
margin-top: 14px;
background: linear-gradient(135deg, rgba(63,214,146,0.18), rgba(63,214,146,0.04));
border: 1.5px solid var(--mint);
border-radius: var(--r-lg);
box-shadow: 0 4px 18px rgba(63,214,146,0.18);
}
.vroi-grand-label {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mint);
font-weight: 800;
}
.vroi-grand-label i { font-size: 18px; }
.vroi-grand-val { text-align: right; }
.vroi-grand-amount {
display: block;
font-family: var(--font-mono);
font-size: 28px;
font-weight: 900;
color: var(--mint);
text-shadow: 0 0 16px rgba(63,214,146,0.5);
line-height: 1;
}
.vroi-grand-period {
display: block;
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 4px;
}
.vroi-disclaimer {
position: relative;
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
margin-top: 14px;
font-size: 11.5px;
color: var(--text-muted);
font-style: italic;
background: rgba(0,0,0,0.25);
border-radius: var(--r-md);
}
.vroi-disclaimer i { font-size: 14px; color: var(--text-muted); flex-shrink: 0; margin-top: 1px; }
/* ============================================================================
ALTAR DE SACRIFICIO — rediseño
============================================================================ */
/* Summary */
.altar-summary-card {
background: linear-gradient(180deg, rgba(58,30,12,0.7), rgba(15,8,30,0.95));
border: 1px solid rgba(255,113,67,0.3);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.altar-summary-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(255,113,67,0.10), transparent 60%);
pointer-events: none;
}
.altsum-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
}
.altsum-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 6px 10px;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
}
.altsum-cell:hover { border-color: rgba(255,113,67,0.5); transform: translateY(-2px); }
.altsum-cell.is-ember {
background: linear-gradient(180deg, rgba(255,113,67,0.18), rgba(255,113,67,0.04));
border-color: var(--ember);
}
.altsum-cell.is-ember > i { color: var(--ember); }
.altsum-cell > i {
font-size: 20px;
color: var(--gold);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.altsum-val {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.altsum-frac { color: var(--text-dim); font-size: 14px; }
.altsum-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Layout */
.altar-layout-pro {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 16px;
align-items: start;
margin-bottom: 18px;
}
/* Pyre - dramatic flame card */
.altar-pyre-pro {
position: relative;
background:
radial-gradient(ellipse 80% 100% at 50% 80%, rgba(255,113,67,0.25), transparent 70%),
linear-gradient(180deg, rgba(40,15,8,0.95), rgba(15,8,30,0.99));
border: 2px solid var(--ember);
border-radius: var(--r-xl);
padding: 30px 22px 26px;
text-align: center;
overflow: hidden;
box-shadow:
0 8px 30px rgba(0,0,0,0.5),
0 0 30px rgba(255,113,67,0.2);
}
.apy-flame-bg {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,113,67,0.18), transparent 65%);
pointer-events: none;
animation: pyreBgPulse 3s ease-in-out infinite;
}
@keyframes pyreBgPulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); }
}
/* Sparks */
.apy-particles {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.apy-spark {
position: absolute;
width: 4px;
height: 4px;
background: var(--ember);
border-radius: 50%;
box-shadow: 0 0 6px var(--ember);
bottom: 30%;
left: calc(50% + (var(--i) * 18px - 70px));
opacity: 0;
animation: sparkRise 3s ease-out infinite;
animation-delay: calc(var(--i) * 0.4s);
}
@keyframes sparkRise {
0% { transform: translateY(0) scale(0.8); opacity: 0; }
20% { opacity: 1; }
100% { transform: translateY(-160px) scale(0.3); opacity: 0; }
}
.apy-flame-wrap {
position: relative;
width: 110px;
height: 110px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
}
.apy-flame-icon {
font-size: 80px;
color: var(--ember);
filter: drop-shadow(0 0 20px rgba(255,113,67,0.7));
animation: flameWobble 1.5s ease-in-out infinite;
position: relative;
z-index: 2;
}
.apy-flame-wrap::before {
content: '';
position: absolute;
inset: -10px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,113,67,0.35) 0%, transparent 70%);
filter: blur(12px);
animation: pyreBgPulse 2s ease-in-out infinite;
}
@keyframes flameWobble {
0%, 100% { transform: scale(1) rotate(-2deg); }
50% { transform: scale(1.06) rotate(2deg); }
}
.apy-conversion {
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 12px 20px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,113,67,0.4);
border-radius: 99px;
margin-bottom: 16px;
}
.apy-conv-side {
display: flex;
align-items: baseline;
gap: 6px;
color: var(--gold);
}
.apy-conv-side.is-ember { color: var(--ember); }
.apy-conv-side i {
font-size: 18px;
align-self: center;
}
.apy-conv-num {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 900;
}
.apy-conv-lbl {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.7;
}
.apy-conv-arrow {
font-size: 16px;
color: var(--text-muted);
}
.apy-quote {
position: relative;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
margin-top: 4px;
}
/* Forge */
.altar-forge-pro {
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,6,22,0.95));
border: 1.5px solid rgba(255,113,67,0.3);
border-radius: var(--r-xl);
padding: 22px 22px 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.afg-section-title {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-title);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ember);
font-weight: 800;
}
.afg-section-title i { font-size: 16px; }
.afg-section-title-mt { margin-top: 18px; color: var(--gold); }
.afg-section-title-mt i { color: var(--gold); }
.afg-quick-amounts {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.afg-quick-btn {
padding: 10px 8px;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
color: var(--text);
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
}
.afg-quick-btn:hover {
border-color: var(--ember);
background: rgba(255,113,67,0.12);
color: var(--ember);
}
.afg-quick-btn.afg-max-btn {
background: linear-gradient(180deg, rgba(255,113,67,0.25), rgba(255,113,67,0.08));
border-color: var(--ember);
color: var(--ember);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.afg-quick-btn.afg-max-btn i { font-size: 12px; }
/* Input */
.afg-input-row { display: flex; flex-direction: column; gap: 6px; }
.afg-input-label {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
.afg-input-label i { font-size: 13px; color: var(--gold); }
.afg-input-wrap {
position: relative;
display: flex;
align-items: center;
border: 1.5px solid rgba(255,113,67,0.25);
border-radius: var(--r-md);
background: rgba(0,0,0,0.5);
transition: border-color 0.15s, box-shadow 0.15s;
}
.afg-input-wrap:focus-within {
border-color: var(--ember);
box-shadow: 0 0 0 3px rgba(255,113,67,0.15);
}
.afg-input {
flex: 1;
background: transparent;
border: none;
color: var(--text);
font-family: var(--font-mono);
font-size: 18px;
font-weight: 800;
padding: 12px 14px;
outline: none;
-moz-appearance: textfield;
min-height: 48px;
}
.afg-input::-webkit-outer-spin-button,
.afg-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.afg-input-unit {
padding: 0 16px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold);
border-left: 1px solid rgba(255,255,255,0.08);
align-self: stretch;
display: flex;
align-items: center;
}
.afg-input-hint {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
/* Preview */
.afg-preview {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
padding: 16px 18px;
background:
radial-gradient(ellipse 100% 100% at 50% 50%, rgba(255,113,67,0.08), transparent 70%),
rgba(0,0,0,0.4);
border: 1px solid rgba(255,113,67,0.25);
border-radius: var(--r-md);
}
.afg-preview-side {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: var(--gold);
}
.afg-preview-side.is-ember { color: var(--ember); }
.afg-preview-side > i {
font-size: 26px;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.afg-preview-num {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 900;
line-height: 1;
}
.afg-preview-lbl {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
.afg-preview-arrow {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.afg-preview-arrow i { font-size: 18px; color: var(--ember); }
.afg-preview-fire {
font-size: 14px;
filter: drop-shadow(0 0 6px rgba(255,113,67,0.6));
}
.afg-forge-btn {
font-size: 14px !important;
letter-spacing: 0.1em;
background: linear-gradient(180deg, #c93838, #7a1f1f) !important;
border: 1.5px solid #ff5252 !important;
color: #fff !important;
position: relative;
overflow: hidden;
}
.afg-forge-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,150,80,0.4) 50%, transparent 100%);
transform: translateX(-100%);
animation: forgeShimmer 2.6s ease-in-out infinite;
}
@keyframes forgeShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.afg-forge-btn:hover { box-shadow: 0 0 20px rgba(201,56,56,0.5); }
/* Warning card */
.afg-warn-card {
display: flex;
gap: 10px;
padding: 12px 14px;
background: linear-gradient(90deg, rgba(255,200,0,0.10), rgba(255,200,0,0.02));
border-left: 3px solid #ffc857;
border-radius: var(--r-md);
}
.afg-warn-card > i { font-size: 18px; color: #ffc857; flex-shrink: 0; margin-top: 2px; }
.afg-warn-title {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #ffc857;
font-weight: 800;
margin-bottom: 4px;
}
.afg-warn-text { font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.afg-warn-text b { color: var(--text); }
/* ===== Altar exchange (gold → gems) ===== */
.altar-exchange-card {
background: linear-gradient(180deg, rgba(157,108,255,0.08), rgba(157,108,255,0.02));
border: 1px solid rgba(157,108,255,0.3);
border-radius: var(--r-lg);
padding: 16px;
margin-top: 16px;
position: relative;
overflow: hidden;
}
.altar-exchange-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(157,108,255,0.12), transparent 60%);
pointer-events: none;
}
.aex-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; position: relative; z-index: 1; }
.aex-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.aex-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(157,108,255,0.15);
border: 1.5px solid rgba(157,108,255,0.4);
display: flex; align-items: center; justify-content: center;
font-size: 22px;
color: #b884ff;
flex-shrink: 0;
}
.aex-title { font-family: var(--font-title); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; color: var(--text); }
.aex-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.aex-sub b { color: #b884ff; font-weight: 700; }
.aex-balance {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: rgba(157,108,255,0.12);
border: 1px solid rgba(157,108,255,0.3);
border-radius: 20px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 13px;
color: #b884ff;
flex-shrink: 0;
}
.aex-quick-amounts {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.aex-quick-btn {
padding: 7px 4px;
background: rgba(0,0,0,0.45);
border: 1px solid var(--border);
border-radius: 8px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
color: var(--text);
cursor: pointer;
transition: all 0.12s;
}
.aex-quick-btn:hover { border-color: rgba(157,108,255,0.5); color: #b884ff; transform: translateY(-1px); }
.aex-max-btn {
background: linear-gradient(135deg, rgba(157,108,255,0.2), rgba(157,108,255,0.1));
border-color: rgba(157,108,255,0.4);
color: #b884ff;
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.aex-input-row { margin-bottom: 12px; position: relative; z-index: 1; }
.aex-input-wrap { position: relative; }
.aex-input {
width: 100%;
padding: 10px 60px 10px 14px;
background: rgba(0,0,0,0.55);
border: 1.5px solid var(--border);
border-radius: 10px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 16px;
color: var(--text);
}
.aex-input:focus { outline: none; border-color: rgba(157,108,255,0.5); }
.aex-input-unit {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 0.1em;
}
.aex-input-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.aex-preview {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--border-soft);
border-radius: 10px;
margin-bottom: 12px;
position: relative;
z-index: 1;
}
.aex-preview-side { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.aex-preview-side > i { font-size: 22px; color: var(--gold); }
.aex-preview-side.is-gem > i { color: #b884ff; }
.aex-preview-num { font-family: var(--font-mono); font-weight: 800; font-size: 16px; color: var(--gold); }
.aex-preview-side.is-gem .aex-preview-num { color: #b884ff; }
.aex-preview-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.aex-preview-arrow { padding: 0 14px; color: var(--text-muted); font-size: 18px; }
.aex-btn {
background: linear-gradient(135deg, #6a45c4, #b884ff) !important;
border: 1px solid rgba(157,108,255,0.5) !important;
position: relative;
z-index: 1;
}
.aex-btn:hover { box-shadow: 0 6px 18px rgba(157,108,255,0.35); }
/* Other ways grid */
.altar-other-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.alt-other-card {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
padding: 14px;
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color 0.15s, transform 0.15s;
}
.alt-other-card:hover { border-color: var(--aoc-color, var(--gold)); transform: translateY(-2px); }
.alt-other-card.alt-other-active {
background: linear-gradient(180deg, rgba(255,113,67,0.12), rgba(255,113,67,0.02));
border-color: var(--ember);
}
.aoc-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: color-mix(in srgb, var(--aoc-color) 18%, rgba(0,0,0,0.5));
border: 1.5px solid color-mix(in srgb, var(--aoc-color) 50%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--aoc-color);
font-size: 20px;
}
.aoc-title {
font-family: var(--font-title);
font-size: 13px;
font-weight: 800;
color: var(--text);
letter-spacing: 0.04em;
}
.aoc-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.aoc-desc b { color: var(--text); }
/* ============================================================================
ALTAR v2 — Layout simplificado con dos modos lado a lado
============================================================================ */
/* Balance card en la cabecera (oro / gemas / eldor) */
.altar-balance-card {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 14px;
background: linear-gradient(135deg, rgba(58,30,12,0.55), rgba(15,8,30,0.85));
border: 1px solid rgba(255,200,80,0.25);
border-radius: 14px;
margin-bottom: 16px;
}
.abc-cell {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
padding: 10px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
}
.abc-cell > i { font-size: 22px; color: var(--gold); margin-bottom: 2px; }
.abc-cell.is-gem > i { color: #b884ff; }
.abc-cell.is-ember > i { color: #ff8d63; }
.abc-val { font-family: var(--font-mono); font-weight: 800; font-size: 17px; color: #fff; }
.abc-lbl { font-size: 11px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.04em; }
/* Grid de los dos modos */
.altar-modes-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 22px;
}
@media (max-width: 880px) {
.altar-modes-grid { grid-template-columns: 1fr; }
}
.altar-mode-card {
background: linear-gradient(180deg, rgba(20,15,30,0.85), rgba(10,5,20,0.9));
border: 2px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 18px 16px 16px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
}
.altar-mode-gems {
border-color: rgba(184,132,255,0.45);
background: linear-gradient(180deg, rgba(40,15,80,0.45), rgba(20,8,40,0.85));
box-shadow: 0 6px 24px rgba(184,132,255,0.12);
}
.altar-mode-eldor {
border-color: rgba(255,140,80,0.4);
background: linear-gradient(180deg, rgba(60,20,5,0.45), rgba(20,5,2,0.85));
box-shadow: 0 6px 24px rgba(255,140,80,0.12);
}
/* Header del modo */
.amc-header {
text-align: center;
position: relative;
padding-top: 6px;
}
.amc-badge {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
border-radius: 99px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
white-space: nowrap;
}
.amc-badge i { font-size: 11px; }
.amc-badge-recommended {
background: linear-gradient(180deg, #b884ff, #6e3acc);
color: #fff;
box-shadow: 0 2px 10px rgba(184,132,255,0.5);
}
.amc-badge-premium {
background: linear-gradient(180deg, #ff8d63, #c83e1f);
color: #fff;
box-shadow: 0 2px 10px rgba(255,141,99,0.5);
}
.amc-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(184,132,255,0.15);
border: 2px solid rgba(184,132,255,0.4);
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 8px;
font-size: 28px;
color: #b884ff;
}
.amc-icon.is-ember {
background: rgba(255,141,99,0.15);
border-color: rgba(255,141,99,0.4);
color: #ff8d63;
}
.amc-title {
font-family: var(--font-cinzel, serif);
font-size: 19px;
font-weight: 800;
color: #fff;
margin-bottom: 2px;
}
.amc-sub {
font-size: 12px;
color: var(--text-muted);
}
/* Body */
.amc-body {
display: flex;
flex-direction: column;
gap: 10px;
}
.amc-quick-amounts {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
}
.amc-quick-btn {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.1);
color: var(--text-soft);
font-size: 11.5px;
font-weight: 700;
font-family: var(--font-mono);
padding: 7px 4px;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
}
.amc-quick-btn:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.2);
color: #fff;
}
.amc-quick-btn i { font-size: 11px; }
.amc-max-btn {
background: linear-gradient(180deg, rgba(233,185,99,0.25), rgba(120,80,30,0.25));
border-color: rgba(233,185,99,0.5);
color: var(--gold);
}
.amc-max-btn:hover { background: linear-gradient(180deg, rgba(233,185,99,0.4), rgba(120,80,30,0.4)); }
.amc-input-row { display: flex; flex-direction: column; gap: 4px; }
.amc-input-wrap {
position: relative;
display: flex;
align-items: center;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 0 12px;
height: 44px;
}
.amc-input-wrap:focus-within {
border-color: var(--gold);
box-shadow: 0 0 0 2px rgba(233,185,99,0.2);
}
.amc-input-icon { font-size: 16px; color: var(--gold); margin-right: 8px; }
.amc-input {
flex: 1;
background: transparent;
border: none;
color: #fff;
font-family: var(--font-mono);
font-size: 16px;
font-weight: 700;
outline: none;
width: 100%;
-moz-appearance: textfield;
}
.amc-input::-webkit-outer-spin-button,
.amc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amc-input-unit {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: var(--font-mono);
margin-left: 6px;
}
.amc-input-hint { font-size: 11px; color: var(--text-muted); }
.amc-input-hint b { color: var(--text-soft); }
/* Preview */
.amc-preview {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 10px;
align-items: center;
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
padding: 12px 10px;
}
.amc-prev-side {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.amc-prev-side > i { font-size: 22px; color: var(--gold); }
.amc-prev-side.is-gem > i { color: #b884ff; }
.amc-prev-side.is-ember > i { color: #ff8d63; }
.amc-prev-num {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 800;
color: #fff;
}
.amc-prev-side.is-gem .amc-prev-num { color: #c8a8ff; }
.amc-prev-side.is-ember .amc-prev-num { color: #ffb084; }
.amc-prev-lbl { font-size: 10px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; }
.amc-prev-arrow { color: var(--text-muted); font-size: 22px; }
.amc-prev-fire { font-size: 22px; }
/* 2026-05-09: tag de bonus bulk en preview del altar */
.amc-prev-bulk-tag {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
padding: 2px 8px;
border-radius: 99px;
background: linear-gradient(135deg, rgba(184,132,255,0.25), rgba(122,76,240,0.18));
border: 1px solid rgba(184,132,255,0.55);
color: #c8a8ff;
font-family: var(--font-title);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.12em;
box-shadow: 0 0 8px rgba(184,132,255,0.25);
animation: amcBulkPulse 1.6s ease-in-out infinite;
}
.amc-prev-bulk-tag i { font-size: 10px; color: #d9b8ff; }
@keyframes amcBulkPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Action buttons */
.amc-action-btn {
margin-top: 4px;
font-family: var(--font-cinzel, serif);
letter-spacing: 0.05em;
}
.amc-action-gems {
background: linear-gradient(180deg, #b884ff, #6e3acc);
border: none;
color: #fff;
}
.amc-action-gems:hover {
background: linear-gradient(180deg, #c895ff, #7e44e0);
box-shadow: 0 6px 20px rgba(184,132,255,0.5);
}
.amc-action-eldor {
background: linear-gradient(180deg, #ff8d63, #c83e1f);
border: none;
color: #fff;
}
.amc-action-eldor:hover {
background: linear-gradient(180deg, #ffa07a, #d84e2f);
box-shadow: 0 6px 20px rgba(255,141,99,0.5);
}
/* ============================================================
ALTAR — Mode 3: ELDOR → Gems (reverse conversion, 2026-05-13)
Card full-width debajo del grid de 2 columnas. Tinte morado-rosado
para diferenciarla de las otras dos (gemas / eldor forge).
============================================================ */
.altar-mode-eldor-to-gems {
margin-top: 18px;
border: 1px solid rgba(195,157,255,0.35);
background: linear-gradient(180deg, rgba(40,20,60,0.5), rgba(18,8,30,0.85));
box-shadow: 0 6px 24px rgba(157,108,255,0.10);
border-radius: var(--r-lg, 14px);
padding: 16px;
position: relative;
}
.amc-badge-reverse {
background: linear-gradient(180deg, #b884ff, #ff7eb9);
color: #fff;
box-shadow: 0 2px 10px rgba(184,132,255,0.45);
}
.amc-icon.is-purple {
background: rgba(157,108,255,0.15);
border-color: rgba(157,108,255,0.45);
color: #c39dff;
box-shadow: 0 0 14px rgba(157,108,255,0.18);
}
.altar-mode-eldor-to-gems .amc-icon.is-purple i { color: #c39dff; }
.amc-preview-e2g {
background: linear-gradient(135deg, rgba(157,108,255,0.10), rgba(95,214,132,0.06));
border-color: rgba(157,108,255,0.30);
}
.amc-action-e2g {
background: linear-gradient(180deg, #9d6cff, #6e3acc);
border: none;
color: #fff;
}
.amc-action-e2g:hover {
background: linear-gradient(180deg, #b384ff, #7e44e0);
box-shadow: 0 6px 20px rgba(157,108,255,0.5);
}
.amc-warn {
display: flex;
gap: 8px;
background: rgba(255,200,80,0.08);
border: 1px solid rgba(255,200,80,0.25);
border-radius: 8px;
padding: 8px 10px;
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.4;
}
.amc-warn > i { color: #ffc857; font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.amc-warn b { color: #ffc857; }
/* Sección "Otras formas" — reutiliza .alt-other-card */
.altar-section-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-cinzel, serif);
font-size: 16px;
font-weight: 800;
color: var(--gold);
margin: 8px 0 12px;
}
.altar-section-title i { font-size: 18px; }
/* Mobile tweaks */
@media (max-width: 600px) {
.altar-balance-card { grid-template-columns: repeat(3, 1fr); padding: 10px; gap: 6px; }
.abc-val { font-size: 14px; }
.abc-cell { padding: 7px 4px; }
.abc-cell > i { font-size: 18px; }
.altar-mode-card { padding: 16px 12px 14px; gap: 10px; }
.amc-icon { width: 48px; height: 48px; font-size: 24px; }
.amc-title { font-size: 17px; }
.amc-sub { font-size: 11px; }
.amc-quick-amounts { grid-template-columns: repeat(5, 1fr); gap: 4px; }
.amc-quick-btn { font-size: 10.5px; padding: 6px 2px; }
.amc-input-wrap { height: 40px; }
.amc-input { font-size: 15px; }
.amc-preview { padding: 10px 6px; gap: 6px; }
.amc-prev-num { font-size: 15px; }
.amc-prev-side > i { font-size: 18px; }
.amc-prev-arrow { font-size: 18px; }
.amc-prev-fire { font-size: 18px; }
}
/* ============================================================================
DEPOSIT — rediseño
============================================================================ */
/* Summary */
.dep-summary-card {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1px solid rgba(122,76,240,0.3);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.dep-summary-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(122,76,240,0.10), transparent 60%);
pointer-events: none;
}
.dsum-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
}
.dsum-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 6px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
}
.dsum-cell:hover { border-color: rgba(122,76,240,0.5); transform: translateY(-2px); }
.dsum-cell.is-primary {
background: linear-gradient(180deg, rgba(122,76,240,0.20), rgba(122,76,240,0.04));
border-color: var(--primary);
}
.dsum-cell.is-primary > i { color: var(--accent); }
.dsum-cell > i {
font-size: 20px;
color: var(--gold);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.dsum-val {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.dsum-frac { color: var(--text-dim); font-size: 13px; margin-left: 2px; }
.dsum-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Layout */
.dep-layout-pro {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 16px;
align-items: start;
}
.dep-form-pro {
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,6,22,0.95));
border: 1.5px solid rgba(122,76,240,0.3);
border-radius: var(--r-xl);
padding: 22px;
display: flex;
flex-direction: column;
gap: 16px;
}
.dep-side-pro {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Section title */
.dep-section-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
}
.dep-section-title i { font-size: 14px; }
.dep-section-title-mt { margin-top: 6px; }
/* Quick amounts */
.dep-quick-amounts {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
}
.dep-quick-btn {
padding: 10px 6px;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
color: var(--text);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
}
.dep-quick-btn:hover {
border-color: var(--gold);
color: var(--gold);
background: rgba(233,185,99,0.08);
}
.dep-quick-btn.active {
background: linear-gradient(180deg, rgba(233,185,99,0.25), rgba(233,185,99,0.08));
border-color: var(--gold);
color: var(--gold);
box-shadow: 0 2px 8px rgba(233,185,99,0.25);
}
/* Input row */
.dep-input-row { display: flex; flex-direction: column; gap: 6px; }
.dep-input-label {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
.dep-input-label i { font-size: 13px; color: var(--gold); }
.dep-input-wrap {
display: grid;
grid-template-columns: 40px 1fr 60px;
align-items: stretch;
border: 1.5px solid rgba(122,76,240,0.3);
border-radius: var(--r-md);
background: rgba(0,0,0,0.5);
transition: border-color 0.15s, box-shadow 0.15s;
overflow: hidden;
}
.dep-input-wrap:focus-within {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(233,185,99,0.15);
}
.dep-input-prefix,
.dep-input-suffix {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-weight: 700;
color: var(--gold);
background: rgba(0,0,0,0.3);
}
.dep-input-prefix { font-size: 18px; }
.dep-input-suffix {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.dep-input {
background: transparent;
border: none;
color: var(--text);
font-family: var(--font-mono);
font-size: 22px;
font-weight: 800;
padding: 12px 14px;
outline: none;
-moz-appearance: textfield;
text-align: center;
}
.dep-input::-webkit-outer-spin-button,
.dep-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.dep-input-hint {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
/* Preview card */
.dep-preview-card {
background: linear-gradient(180deg, rgba(122,76,240,0.10), rgba(122,76,240,0.02));
border: 1px solid rgba(122,76,240,0.3);
border-radius: var(--r-md);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.dep-preview-empty { color: var(--text-muted); font-style: italic; font-size: 13px; text-align: center; padding: 6px; }
.dep-preview-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
font-size: 13px;
}
.dpr-lbl {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-muted);
}
.dpr-lbl i { font-size: 14px; color: var(--accent); }
.dpr-val {
font-family: var(--font-mono);
font-weight: 700;
color: var(--text);
}
.dpr-val.text-primary { color: var(--accent); }
.dpr-val.text-mint { color: var(--mint); }
.dep-preview-bonus .dpr-lbl i { color: var(--mint); }
.dep-preview-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(122,76,240,0.4), transparent);
margin: 4px 0;
}
.dep-preview-total .dpr-lbl {
font-family: var(--font-title);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
font-weight: 800;
}
.dep-preview-total .dpr-lbl i { color: var(--accent); }
.dpr-total-num {
font-size: 20px;
font-weight: 900;
color: var(--accent);
text-shadow: 0 0 12px rgba(122,76,240,0.4);
}
.dpr-total-unit {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-left: 4px;
}
/* Network selector */
.dep-network-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
}
.dep-net-btn {
display: grid;
grid-template-columns: 36px 1fr;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(0,0,0,0.45);
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
color: var(--text);
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
text-align: left;
position: relative;
}
.dep-net-btn:hover { border-color: var(--net-color); }
.dep-net-btn.active {
background: linear-gradient(180deg,
color-mix(in srgb, var(--net-color) 18%, transparent),
color-mix(in srgb, var(--net-color) 5%, transparent));
border-color: var(--net-color);
box-shadow: 0 2px 12px color-mix(in srgb, var(--net-color) 25%, transparent);
}
.dep-net-btn.active::after {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--net-color);
box-shadow: 0 0 8px var(--net-color);
}
.dnb-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: color-mix(in srgb, var(--net-color) 18%, rgba(0,0,0,0.6));
border: 1.5px solid var(--net-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--net-color);
font-size: 16px;
}
.dnb-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dnb-name {
font-family: var(--font-title);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
}
.dnb-tag {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
}
.dnb-fee {
position: absolute;
bottom: 6px;
right: 8px;
font-family: var(--font-mono);
font-size: 9px;
color: var(--mint);
font-weight: 700;
}
/* Currency grid (Paykassa) */
.dep-currency-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px;
}
.dep-cur-btn {
display: grid;
grid-template-columns: 38px 1fr;
grid-template-rows: auto auto;
align-items: center;
gap: 4px 10px;
padding: 10px 12px;
background: rgba(0,0,0,0.45);
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
color: var(--text);
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
text-align: left;
position: relative;
}
.dep-cur-btn:hover { border-color: var(--cur-color); transform: translateY(-1px); }
.dep-cur-btn.active {
background: linear-gradient(180deg,
color-mix(in srgb, var(--cur-color) 22%, transparent),
color-mix(in srgb, var(--cur-color) 6%, transparent));
border-color: var(--cur-color);
box-shadow: 0 4px 16px color-mix(in srgb, var(--cur-color) 30%, transparent);
}
.dep-cur-btn.active::after {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cur-color);
box-shadow: 0 0 10px var(--cur-color);
}
.dcb-icon {
width: 38px;
height: 38px;
border-radius: 50%;
background: color-mix(in srgb, var(--cur-color) 18%, rgba(0,0,0,0.6));
border: 1.5px solid var(--cur-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--cur-color);
font-size: 18px;
grid-row: 1 / 3;
}
.dcb-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; grid-column: 2; }
.dcb-name {
font-family: var(--font-title);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.03em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dcb-sym {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--cur-color);
font-weight: 700;
}
.dcb-amt {
grid-column: 2;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dep-cur-btn.is-below-min {
opacity: 0.45;
filter: grayscale(0.4);
cursor: pointer;
}
.dep-cur-btn.is-below-min::before {
content: 'Mín no alcanzado';
position: absolute;
bottom: 6px;
right: 8px;
font-family: var(--font-mono);
font-size: 9px;
color: var(--blood);
font-weight: 700;
}
/* QR code in invoice modal */
.inv-qr-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 14px;
margin: 12px 0;
background: white;
border-radius: var(--r-md);
border: 2px solid rgba(233,185,99,0.4);
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.inv-qr-img {
width: 200px;
height: 200px;
display: block;
border-radius: var(--r-sm);
}
.inv-qr-hint {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11.5px;
color: #1a0a30;
font-weight: 700;
letter-spacing: 0.04em;
background: rgba(233,185,99,0.18);
padding: 4px 10px;
border-radius: 99px;
border: 1px solid rgba(233,185,99,0.6);
}
.inv-qr-hint i { font-size: 13px; color: #1a0a30; }
/* Tag warning (XRP, XLM) */
.inv-tag-warn {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 12px 14px;
background: linear-gradient(90deg, rgba(255,170,80,0.15), rgba(255,170,80,0.04));
border: 1.5px solid rgba(255,170,80,0.5);
border-radius: var(--r-md);
margin-top: 12px;
font-size: 12.5px;
}
.inv-tag-warn > i { color: #ffaa50; font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.inv-tag-warn code {
display: block;
background: rgba(0,0,0,0.5);
padding: 6px 10px;
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-size: 12px;
color: #ffaa50;
font-weight: 700;
margin-top: 4px;
word-break: break-all;
}
body.mobile-mode .dep-currency-grid { grid-template-columns: 1fr; }
.dep-create-btn {
font-size: 14px !important;
letter-spacing: 0.08em;
position: relative;
overflow: hidden;
}
.dep-create-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
transform: translateX(-100%);
animation: depCreateShimmer 2.4s ease-in-out infinite;
}
@keyframes depCreateShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.dep-info-tip {
display: flex;
gap: 10px;
padding: 10px 14px;
background: rgba(86,200,255,0.08);
border-left: 3px solid var(--cyan);
border-radius: var(--r-md);
font-size: 12px;
line-height: 1.45;
color: var(--text-muted);
}
.dep-info-tip i { font-size: 16px; color: var(--cyan); flex-shrink: 0; margin-top: 1px; }
.dep-info-tip b { color: var(--text); }
/* Bonus tiers list */
.dep-bonus-list {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
overflow: hidden;
}
.dep-bonus-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
border-bottom: 1px dashed rgba(255,255,255,0.05);
transition: background 0.15s;
}
.dep-bonus-row:last-child { border-bottom: none; }
.dep-bonus-row.active {
background: linear-gradient(90deg, rgba(63,214,146,0.12), transparent);
border-left: 3px solid var(--mint);
padding-left: 11px;
}
.dbr-tier {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-muted);
font-weight: 700;
}
.dbr-tier i { font-size: 14px; color: var(--gold); }
.dep-bonus-row.active .dbr-tier { color: var(--text); }
.dep-bonus-row.active .dbr-tier i { color: var(--mint); }
.dbr-pct {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 900;
color: var(--text-dim);
}
.dep-bonus-row.active .dbr-pct { color: var(--mint); text-shadow: 0 0 8px rgba(63,214,146,0.4); }
.dep-bonus-tip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin-top: 4px;
font-size: 11.5px;
font-style: italic;
color: var(--text-muted);
}
.dep-bonus-tip i { color: var(--gold); font-size: 14px; }
/* Uses list */
.dep-uses-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.dep-uses-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(0,0,0,0.3);
border-radius: var(--r-sm);
font-size: 12.5px;
color: var(--text-muted);
}
.dep-uses-list li i { font-size: 14px; color: var(--gold); flex-shrink: 0; }
.dep-uses-list li b { color: var(--text); }
.dep-store-btn { font-size: 12.5px; }
/* History card */
.dep-history-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 24px;
color: var(--text-muted);
font-size: 12px;
}
.dep-history-empty i { font-size: 28px; opacity: 0.4; }
.dep-history-list { display: flex; flex-direction: column; gap: 6px; }
.dep-hist-card {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 5px;
transition: border-color 0.15s;
}
.dep-hist-card:hover { border-color: rgba(122,76,240,0.4); }
.dhc-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.dhc-amount {
display: flex;
align-items: baseline;
gap: 6px;
}
.dhc-amount-num {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 800;
color: var(--gold);
}
.dhc-amount-net {
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 700;
color: var(--text-muted);
background: rgba(0,0,0,0.5);
padding: 1px 7px;
border-radius: 99px;
border: 1px solid rgba(255,255,255,0.1);
}
.dhc-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: rgba(0,0,0,0.5);
border: 1px solid;
border-radius: 99px;
font-family: var(--font-title);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.dhc-status i { font-size: 10px; }
.dhc-row-meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.dhc-gems {
display: inline-flex;
align-items: center;
gap: 4px;
}
.dhc-gems i { color: var(--accent); font-size: 11px; }
.dhc-time { color: var(--text-dim); }
.dhc-tx { font-family: var(--font-mono); font-size: 10.5px; color: var(--cyan); display: flex; align-items: center; gap: 4px; }
.dhc-reason { font-size: 10.5px; color: var(--blood); display: flex; align-items: center; gap: 4px; }
.dhc-cancel-btn { font-size: 11px; min-height: 32px; margin-top: 4px; }
/* === Invoice modal === */
.invoice-modal-overlay {
padding: 16px;
align-items: center;
}
.invoice-modal {
max-width: 480px;
width: 100%;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 92vh;
border: 1.5px solid var(--gold);
background: linear-gradient(180deg, rgba(20,12,40,0.96), rgba(10,6,22,0.99));
box-shadow:
0 12px 40px rgba(0,0,0,0.7),
0 0 30px rgba(233,185,99,0.25);
}
.invoice-header {
display: flex;
align-items: center;
gap: 14px;
padding: 22px 24px 18px;
background:
radial-gradient(ellipse 80% 100% at 0% 0%, rgba(233,185,99,0.18), transparent 70%),
rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
.invh-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(233,185,99,0.3), rgba(233,185,99,0.1));
border: 1px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
font-size: 22px;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(233,185,99,0.25);
}
.invh-title {
font-family: var(--font-title);
font-size: 17px;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--gold);
text-transform: uppercase;
}
.invh-sub {
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.invoice-body {
flex: 1;
overflow-y: auto;
padding: 18px 22px;
display: flex;
flex-direction: column;
gap: 16px;
-webkit-overflow-scrolling: touch;
}
/* Summary inside invoice */
.inv-summary {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.inv-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
padding: 4px 0;
}
.inv-lbl { color: var(--text-muted); }
.inv-val { font-family: var(--font-mono); font-weight: 700; color: var(--text); }
.inv-val.text-primary { color: var(--accent); }
.inv-val.text-mint { color: var(--mint); }
.inv-net-pill {
display: inline-flex;
padding: 2px 10px;
background: rgba(122,76,240,0.18);
border: 1px solid var(--primary);
color: var(--accent);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 800;
}
/* Address block */
.inv-address-block {
background: linear-gradient(180deg, rgba(63,214,146,0.10), rgba(63,214,146,0.02));
border: 1.5px solid var(--mint);
border-radius: var(--r-md);
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.inv-address-label {
font-size: 13px;
color: var(--text);
text-align: center;
}
.inv-address-label b { color: var(--mint); font-size: 14px; }
.inv-address-box {
background: rgba(0,0,0,0.7);
border: 1px solid rgba(63,214,146,0.4);
border-radius: var(--r-sm);
padding: 12px 14px;
word-break: break-all;
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--mint);
text-align: center;
letter-spacing: 0.02em;
}
.inv-copy-btn {
font-size: 12.5px;
letter-spacing: 0.06em;
}
.inv-net-warn {
display: flex;
gap: 8px;
padding: 8px 12px;
background: rgba(255,200,0,0.08);
border-left: 3px solid #ffc857;
border-radius: var(--r-sm);
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.4;
}
.inv-net-warn i { color: #ffc857; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.inv-net-warn b { color: #ffc857; }
/* Timer box */
.inv-timer-box {
display: flex;
gap: 12px;
padding: 12px 14px;
background: rgba(86,200,255,0.10);
border-left: 3px solid var(--cyan);
border-radius: var(--r-md);
}
.inv-timer-box > i { font-size: 22px; color: var(--cyan); flex-shrink: 0; margin-top: 2px; }
.inv-timer-title {
font-family: var(--font-title);
font-size: 13px;
font-weight: 800;
color: var(--cyan);
margin-bottom: 4px;
letter-spacing: 0.05em;
}
.inv-timer-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.invoice-actions {
padding: 14px 22px 18px;
border-top: 1px solid rgba(255,255,255,0.06);
background: rgba(0,0,0,0.4);
flex-shrink: 0;
}
.invoice-actions .btn { font-size: 13px; letter-spacing: 0.08em; min-height: 48px; }
/* ============================================================================
STORE — rediseño
============================================================================ */
/* Summary */
.store-summary-card {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1px solid rgba(233,185,99,0.25);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.store-summary-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(233,185,99,0.08), transparent 60%);
pointer-events: none;
}
.stsum-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
}
.stsum-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 6px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
}
.stsum-cell:hover { border-color: rgba(233,185,99,0.4); transform: translateY(-2px); }
.stsum-cell.is-gold {
background: linear-gradient(180deg, rgba(233,185,99,0.18), rgba(233,185,99,0.04));
border-color: var(--gold);
}
.stsum-cell.is-gold > i { color: var(--gold); }
.stsum-cell.is-gems {
background: linear-gradient(180deg, rgba(122,76,240,0.18), rgba(122,76,240,0.04));
border-color: var(--primary);
}
.stsum-cell.is-gems > i { color: var(--accent); }
.stsum-cell.is-ember {
background: linear-gradient(180deg, rgba(255,113,67,0.18), rgba(255,113,67,0.04));
border-color: var(--ember);
}
.stsum-cell.is-ember > i { color: var(--ember); }
.stsum-cell > i {
font-size: 20px;
color: var(--gold);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.stsum-val {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.stsum-cell.is-gold .stsum-val { color: var(--gold); }
.stsum-cell.is-gems .stsum-val { color: var(--accent); }
.stsum-cell.is-ember .stsum-val { color: var(--ember); }
.stsum-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Tabs */
.store-tabs-row {
display: flex;
gap: 6px;
background: rgba(0,0,0,0.4);
padding: 4px;
border-radius: var(--r-md);
border: 1px solid var(--border-soft);
margin-bottom: 16px;
}
.store-tab-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-sm);
color: var(--text-muted);
font-family: var(--font-title);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
}
.store-tab-btn i { font-size: 15px; }
.store-tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.store-tab-btn.active {
background: linear-gradient(180deg,
color-mix(in srgb, var(--tab-color) 22%, transparent),
color-mix(in srgb, var(--tab-color) 5%, transparent));
border-color: var(--tab-color);
color: var(--tab-color);
box-shadow: 0 2px 10px color-mix(in srgb, var(--tab-color) 22%, transparent);
}
.store-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
background: rgba(0,0,0,0.5);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 800;
margin-left: 2px;
}
/* === Premium pack — dramatic */
.premium-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
}
.premium-pack {
position: relative;
background: linear-gradient(180deg, rgba(20,12,40,0.95), rgba(10,6,22,0.99));
border: 1.5px solid rgba(255,255,255,0.06);
border-radius: var(--r-lg);
padding: 22px 18px 18px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
text-align: center;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
overflow: hidden;
}
.premium-pack::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(233,185,99,0.10), transparent 60%);
pointer-events: none;
}
.premium-pack:hover {
transform: translateY(-4px);
border-color: var(--gold);
box-shadow: 0 10px 28px rgba(233,185,99,0.2);
}
/* Tier-specific glows */
.premium-pack.tier-apprentice { border-color: rgba(180,180,180,0.4); }
.premium-pack.tier-adventurer { border-color: rgba(80,200,120,0.4); }
.premium-pack.tier-veteran { border-color: rgba(80,160,255,0.4); }
.premium-pack.tier-hero { border-color: rgba(170,100,255,0.5); }
.premium-pack.tier-elite { border-color: rgba(255,170,80,0.5); }
.premium-pack.tier-whale { border-color: rgba(255,120,80,0.5); box-shadow: 0 0 18px rgba(255,120,80,0.15); }
.premium-pack.tier-emperor { border-color: rgba(255,80,140,0.5); box-shadow: 0 0 18px rgba(255,80,140,0.15); }
.premium-pack.tier-god {
border-color: rgba(255,200,80,0.7);
box-shadow: 0 0 24px rgba(255,200,80,0.25);
background:
radial-gradient(ellipse 80% 80% at 50% 0%, rgba(255,200,80,0.15), transparent 60%),
linear-gradient(180deg, rgba(40,28,8,0.95), rgba(10,6,22,0.99));
}
.premium-pack.is-featured {
border-color: var(--gold);
box-shadow: 0 6px 22px rgba(233,185,99,0.25);
}
/* Featured ribbon */
.pack-ribbon {
position: absolute;
top: 12px;
left: -4px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
font-family: var(--font-title);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
border-radius: 0 99px 99px 0;
box-shadow: 0 3px 10px rgba(233,185,99,0.5);
z-index: 3;
animation: ribbonPulse 2s ease-in-out infinite;
}
@keyframes ribbonPulse {
0%, 100% { box-shadow: 0 3px 10px rgba(233,185,99,0.5); }
50% { box-shadow: 0 3px 16px rgba(233,185,99,0.85); }
}
.pack-ribbon i { font-size: 11px; }
/* Tier label */
.pack-tier-label {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 99px;
font-family: var(--font-title);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.14em;
color: var(--text-muted);
z-index: 1;
}
.pack-tier-label i { font-size: 11px; }
.tier-elite .pack-tier-label { color: #ffaa50; border-color: rgba(255,170,80,0.5); }
.tier-whale .pack-tier-label { color: #ff7e54; border-color: rgba(255,120,80,0.5); }
.tier-emperor .pack-tier-label { color: #ff5a8c; border-color: rgba(255,80,140,0.5); }
.tier-god .pack-tier-label { color: #ffe8b3; border-color: var(--gold); background: rgba(255,200,80,0.18); }
/* Pack icon */
.pack-icon-wrap {
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(233,185,99,0.18), rgba(122,76,240,0.10));
border: 2px solid rgba(233,185,99,0.4);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
font-size: 36px;
filter: drop-shadow(0 0 14px rgba(233,185,99,0.3));
z-index: 1;
}
.tier-god .pack-icon-wrap {
border-color: var(--gold);
box-shadow: 0 0 22px rgba(255,200,80,0.4);
}
.pack-name {
position: relative;
z-index: 1;
font-family: var(--font-title);
font-size: 16px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--text);
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.pack-desc {
position: relative;
z-index: 1;
font-family: var(--font-serif);
font-style: italic;
font-size: 12.5px;
line-height: 1.4;
color: var(--text-muted);
}
.pack-contents {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
padding: 10px 12px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
margin-top: 4px;
}
.pc-row {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text);
}
.pc-row i { font-size: 13px; color: var(--gold); flex-shrink: 0; }
.pc-row.pc-value {
margin-top: 4px;
padding-top: 6px;
border-top: 1px dashed rgba(255,255,255,0.08);
color: var(--mint);
font-weight: 700;
}
.pc-row.pc-value i { color: var(--mint); }
.pack-price-block {
position: relative;
z-index: 1;
margin-top: 6px;
}
.pack-price-big {
font-family: var(--font-mono);
font-size: 28px;
font-weight: 900;
color: var(--gold);
text-shadow: 0 0 12px rgba(233,185,99,0.4);
line-height: 1;
}
.pack-price-currency {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 4px;
}
.pack-price-currency i { color: var(--accent); }
.premium-pack .buy-btn {
position: relative;
z-index: 1;
width: 100%;
margin-top: 4px;
font-size: 13px;
letter-spacing: 0.06em;
}
/* === Resource pack === */
.resource-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.resource-pack {
position: relative;
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,6,22,0.95));
border: 1.5px solid rgba(255,255,255,0.06);
border-radius: var(--r-lg);
padding: 18px 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
text-align: center;
transition: transform 0.18s, border-color 0.18s;
}
.resource-pack:hover {
transform: translateY(-3px);
border-color: var(--gold);
}
.resource-pack.is-featured {
border-color: var(--gold);
background: linear-gradient(180deg, rgba(40,28,8,0.95), rgba(15,8,28,0.98));
box-shadow: 0 4px 16px rgba(233,185,99,0.18);
}
.resource-pack-flag {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 7px;
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
font-family: var(--font-title);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.12em;
border-radius: 99px;
box-shadow: 0 2px 6px rgba(233,185,99,0.4);
}
.resource-pack-icon {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
filter: drop-shadow(0 0 12px currentColor);
}
.resource-pack-icon.gold {
background: linear-gradient(135deg, rgba(233,185,99,0.25), rgba(184,127,46,0.1));
border: 2px solid var(--gold);
color: var(--gold);
}
.resource-pack-icon.gems {
background: linear-gradient(135deg, rgba(122,76,240,0.25), rgba(86,200,255,0.1));
border: 2px solid var(--primary);
color: var(--accent);
}
.resource-pack-amount {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 900;
color: var(--text);
line-height: 1;
}
.resource-pack-unit {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--text-muted);
text-transform: uppercase;
}
.resource-pack-name {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--text);
margin-top: 2px;
}
.resource-pack .buy-btn { font-size: 12px; }
/* === Utility pack === */
.utility-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 10px;
}
.utility-pack {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 14px;
align-items: center;
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,6,22,0.95));
border: 1.5px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
padding: 14px 16px;
transition: transform 0.15s, border-color 0.15s;
}
.utility-pack:hover {
transform: translateY(-2px);
border-color: var(--mint);
}
.utility-pack.is-featured {
border-color: var(--mint);
background: linear-gradient(180deg, rgba(20,38,28,0.85), rgba(10,18,12,0.95));
}
.utility-pack-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(63,214,146,0.18), rgba(86,200,255,0.10));
border: 1.5px solid rgba(63,214,146,0.4);
display: flex;
align-items: center;
justify-content: center;
color: var(--mint);
font-size: 24px;
flex-shrink: 0;
}
.utility-pack-info { min-width: 0; }
.utility-pack-name {
font-family: var(--font-title);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--text);
line-height: 1.2;
margin-bottom: 4px;
}
.utility-pack-desc {
font-size: 12.5px;
line-height: 1.4;
color: var(--text-muted);
}
.utility-pack-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex-shrink: 0;
}
.utility-pack-price {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 16px;
font-weight: 800;
color: var(--accent);
}
.utility-pack-price i { font-size: 16px; }
/* ============================================================================
WITHDRAW — rediseño
============================================================================ */
/* Summary */
.wd-summary-card {
background: linear-gradient(180deg, rgba(58,30,12,0.6), rgba(15,8,30,0.95));
border: 1px solid rgba(255,113,67,0.25);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.wd-summary-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(255,113,67,0.10), transparent 60%);
pointer-events: none;
}
.wdsum-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
}
.wdsum-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 6px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
}
.wdsum-cell:hover { border-color: rgba(255,113,67,0.5); transform: translateY(-2px); }
.wdsum-cell.is-ember {
background: linear-gradient(180deg, rgba(255,113,67,0.18), rgba(255,113,67,0.04));
border-color: var(--ember);
}
.wdsum-cell.is-ember > i { color: var(--ember); }
.wdsum-cell.is-mint {
background: linear-gradient(180deg, rgba(63,214,146,0.18), rgba(63,214,146,0.04));
border-color: var(--mint);
}
.wdsum-cell.is-mint > i { color: var(--mint); }
.wdsum-cell > i {
font-size: 20px;
color: var(--gold);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.wdsum-val {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.wdsum-cell.is-ember .wdsum-val { color: var(--ember); }
.wdsum-cell.is-mint .wdsum-val { color: var(--mint); }
.wdsum-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Layout */
.wd-layout-pro {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 16px;
align-items: start;
}
.wd-form-pro {
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,6,22,0.95));
border: 1.5px solid rgba(255,113,67,0.3);
border-radius: var(--r-xl);
padding: 22px;
display: flex;
flex-direction: column;
gap: 14px;
}
.wd-side-pro { display: flex; flex-direction: column; gap: 12px; }
/* Section title */
.wd-section-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ember);
font-weight: 800;
}
.wd-section-title i { font-size: 14px; }
.wd-section-title-mt { margin-top: 6px; color: var(--gold); }
/* Quick amounts */
.wd-quick-amounts {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.wd-quick-btn {
padding: 10px 6px;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
color: var(--text);
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
min-height: 42px;
}
.wd-quick-btn:hover {
border-color: var(--ember);
color: var(--ember);
background: rgba(255,113,67,0.10);
}
.wd-quick-btn.active {
background: linear-gradient(180deg, rgba(255,113,67,0.25), rgba(255,113,67,0.08));
border-color: var(--ember);
color: var(--ember);
box-shadow: 0 2px 8px rgba(255,113,67,0.25);
}
.wd-quick-btn.wd-max-btn {
background: linear-gradient(180deg, rgba(255,113,67,0.30), rgba(255,113,67,0.10));
border-color: var(--ember);
color: var(--ember);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.wd-quick-btn.wd-max-btn i { font-size: 12px; }
/* Input row */
.wd-input-row { display: flex; flex-direction: column; gap: 6px; }
.wd-input-label {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
.wd-input-label i { font-size: 13px; color: var(--ember); }
.wd-input-wrap {
display: flex;
align-items: stretch;
border: 1.5px solid rgba(255,113,67,0.3);
border-radius: var(--r-md);
background: rgba(0,0,0,0.5);
transition: border-color 0.15s, box-shadow 0.15s;
overflow: hidden;
}
.wd-input-wrap:focus-within {
border-color: var(--ember);
box-shadow: 0 0 0 3px rgba(255,113,67,0.15);
}
.wd-input {
flex: 1;
background: transparent;
border: none;
color: var(--text);
font-family: var(--font-mono);
font-size: 20px;
font-weight: 800;
padding: 12px 14px;
outline: none;
-moz-appearance: textfield;
text-align: center;
}
.wd-input::-webkit-outer-spin-button,
.wd-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.wd-input-unit {
padding: 0 16px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ember);
background: rgba(0,0,0,0.3);
display: flex;
align-items: center;
font-weight: 800;
}
.wd-input-hint {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
.wd-input-warn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: rgba(225,80,90,0.1);
border-left: 3px solid var(--blood);
border-radius: 6px;
color: var(--text-muted);
}
.wd-input-warn i { color: var(--blood); font-size: 13px; flex-shrink: 0; }
.wd-input-warn b { color: var(--blood); }
.wd-wallet-input {
width: 100%;
background: rgba(0,0,0,0.5);
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
color: var(--text);
font-family: var(--font-mono);
font-size: 13px;
padding: 12px 14px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
min-height: 46px;
}
.wd-wallet-input:focus {
border-color: var(--ember);
box-shadow: 0 0 0 3px rgba(255,113,67,0.15);
}
/* Network grid */
.wd-network-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
}
.wd-net-btn {
display: grid;
grid-template-columns: 36px 1fr;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(0,0,0,0.45);
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
color: var(--text);
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
text-align: left;
position: relative;
}
.wd-net-btn:hover { border-color: var(--net-color); }
.wd-net-btn.active {
background: linear-gradient(180deg,
color-mix(in srgb, var(--net-color) 18%, transparent),
color-mix(in srgb, var(--net-color) 5%, transparent));
border-color: var(--net-color);
box-shadow: 0 2px 12px color-mix(in srgb, var(--net-color) 25%, transparent);
}
.wd-net-btn.active::after {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--net-color);
box-shadow: 0 0 8px var(--net-color);
}
.wnb-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: color-mix(in srgb, var(--net-color) 18%, rgba(0,0,0,0.6));
border: 1.5px solid var(--net-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--net-color);
font-size: 16px;
}
.wnb-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wnb-name {
font-family: var(--font-title);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
}
.wnb-tag {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
}
.wnb-fee {
position: absolute;
bottom: 6px;
right: 8px;
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-muted);
font-weight: 700;
}
/* Summary block (live preview) */
.wd-summary-block {
background: linear-gradient(180deg, rgba(63,214,146,0.08), rgba(63,214,146,0.02));
border: 1px solid rgba(63,214,146,0.3);
border-radius: var(--r-md);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.wsb-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
font-size: 13px;
}
.wsb-lbl {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-muted);
}
.wsb-lbl i { font-size: 14px; }
.wsb-val { font-family: var(--font-mono); font-weight: 700; color: var(--text); }
.wsb-val.text-ember { color: var(--ember); }
.wsb-val.text-blood { color: var(--blood); }
.wsb-val.text-mint { color: var(--mint); }
.wsb-fee .wsb-lbl i { color: var(--blood); }
.wsb-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(63,214,146,0.4), transparent);
margin: 4px 0;
}
.wsb-total .wsb-lbl {
font-family: var(--font-title);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--mint);
font-weight: 800;
}
.wsb-total .wsb-lbl i { color: var(--mint); }
.wsb-total-num {
font-size: 22px;
font-weight: 900;
color: var(--mint);
text-shadow: 0 0 12px rgba(63,214,146,0.4);
}
.wsb-total-unit {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-left: 4px;
}
.wd-submit-btn {
font-size: 14px !important;
letter-spacing: 0.08em;
position: relative;
overflow: hidden;
}
.wd-submit-btn:not(:disabled)::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
transform: translateX(-100%);
animation: wdSubmitShimmer 2.4s ease-in-out infinite;
}
@keyframes wdSubmitShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.wd-info-tip {
display: flex;
gap: 10px;
padding: 10px 14px;
background: rgba(86,200,255,0.08);
border-left: 3px solid var(--cyan);
border-radius: var(--r-md);
}
.wd-info-tip > i { font-size: 18px; color: var(--cyan); flex-shrink: 0; margin-top: 2px; }
.wd-info-title {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cyan);
font-weight: 800;
margin-bottom: 4px;
}
.wd-info-text { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
/* === Rate card === */
.wd-rate-card {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.wrc-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.wrc-row:last-of-type { border-bottom: none; }
.wrc-side {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
}
.wrc-row .wrc-side:nth-child(1) { justify-content: flex-end; }
.wrc-row .wrc-side:nth-child(3) { justify-content: flex-start; }
.wrc-side i { font-size: 18px; }
.wrc-num {
font-size: 18px;
font-weight: 800;
color: var(--text);
}
.wrc-unit {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
.wrc-arrow { font-size: 16px; color: var(--gold); }
.wrc-note {
font-size: 11px;
color: var(--text-muted);
font-style: italic;
line-height: 1.4;
padding-top: 4px;
border-top: 1px dashed rgba(255,255,255,0.06);
}
/* History card */
.wd-history-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 24px;
color: var(--text-muted);
font-size: 12px;
}
.wd-history-empty i { font-size: 28px; opacity: 0.4; }
.wd-history-list { display: flex; flex-direction: column; gap: 6px; }
.wd-hist-card {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 5px;
transition: border-color 0.15s;
}
.wd-hist-card:hover { border-color: rgba(255,113,67,0.4); }
.whc-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.whc-amount {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-family: var(--font-mono);
}
.whc-amount > i { color: var(--ember); font-size: 14px; align-self: center; }
.whc-amount-num {
font-size: 16px;
font-weight: 800;
color: var(--ember);
}
.whc-amount-unit {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.12em;
color: var(--text-muted);
text-transform: uppercase;
}
.whc-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: rgba(0,0,0,0.5);
border: 1px solid;
border-radius: 99px;
font-family: var(--font-title);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.whc-status i { font-size: 10px; }
.whc-row-meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.whc-net {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--mint);
}
.whc-net i { font-size: 12px; }
.whc-time { color: var(--text-dim); }
.whc-wallet {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-muted);
}
.whc-wallet i { font-size: 12px; color: var(--text-dim); }
.whc-tx {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--cyan);
text-decoration: none;
cursor: pointer;
padding: 3px 6px;
margin: 2px 0;
border-radius: 6px;
background: rgba(95, 214, 230, 0.06);
border: 1px solid rgba(95, 214, 230, 0.18);
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.whc-tx:hover {
background: rgba(95, 214, 230, 0.14);
border-color: rgba(95, 214, 230, 0.4);
text-decoration: underline;
color: #8fe6f5;
}
.whc-tx-out { font-size: 11px; opacity: 0.7; margin-left: 2px; }
.whc-tx:hover .whc-tx-out { opacity: 1; }
.whc-reason {
display: flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
color: var(--blood);
}
.whc-cancel-btn { font-size: 11px; min-height: 32px; margin-top: 4px; }
/* ============================================================================
REFERRAL — rediseño v2 (con Phosphor)
============================================================================ */
/* Summary */
.ref-summary-card {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1px solid rgba(122,76,240,0.3);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.ref-summary-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(122,76,240,0.10), transparent 60%);
pointer-events: none;
}
.rfsum-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
}
.rfsum-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 6px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
}
.rfsum-cell:hover { border-color: rgba(122,76,240,0.5); transform: translateY(-2px); }
.rfsum-cell.is-mint { background: linear-gradient(180deg, rgba(63,214,146,0.10), transparent); border-color: rgba(63,214,146,0.35); }
.rfsum-cell.is-mint > i { color: var(--mint); }
.rfsum-cell.is-gold { background: linear-gradient(180deg, rgba(233,185,99,0.12), transparent); border-color: rgba(233,185,99,0.35); }
.rfsum-cell.is-gold > i { color: var(--gold); }
.rfsum-cell.is-gems { background: linear-gradient(180deg, rgba(122,76,240,0.15), transparent); border-color: rgba(122,76,240,0.4); }
.rfsum-cell.is-gems > i { color: var(--accent); }
.rfsum-cell > i {
font-size: 20px;
color: var(--gold);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.rfsum-val {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.rfsum-cell.is-mint .rfsum-val { color: var(--mint); }
.rfsum-cell.is-gold .rfsum-val { color: var(--gold); }
.rfsum-cell.is-gems .rfsum-val { color: var(--accent); }
.rfsum-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Hero */
.ref-hero-pro {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.rh-left {
background: linear-gradient(180deg, rgba(20,12,40,0.92), rgba(10,6,22,0.98));
border: 1.5px solid var(--gold);
border-radius: var(--r-lg);
padding: 22px;
position: relative;
overflow: hidden;
}
.rh-left::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(233,185,99,0.18), transparent 60%);
pointer-events: none;
}
.rh-eyebrow {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--gold);
font-weight: 800;
margin-bottom: 12px;
}
.rh-eyebrow i { font-size: 13px; }
.rh-link-row {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
margin-bottom: 14px;
}
.rh-link-input {
background: rgba(0,0,0,0.55);
border: 1.5px solid var(--gold);
border-radius: var(--r-md);
color: var(--text);
font-family: var(--font-mono);
font-size: 13px;
padding: 12px 14px;
outline: none;
letter-spacing: 0.02em;
min-height: 46px;
transition: box-shadow 0.15s;
}
.rh-link-input:focus { box-shadow: 0 0 0 3px rgba(233,185,99,0.18); }
.rh-copy-btn { font-size: 12.5px; min-height: 46px; padding: 0 18px; }
.rh-code-row {
position: relative;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.rh-code-label {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--text-muted);
font-weight: 700;
}
.rh-code-pill {
flex: 1;
background: rgba(0,0,0,0.6);
border: 1px solid var(--gold);
border-radius: 99px;
color: var(--gold);
font-family: var(--font-mono);
font-size: 14px;
font-weight: 800;
padding: 6px 16px;
letter-spacing: 0.1em;
text-align: center;
}
.rh-code-copy {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: var(--gold);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
-webkit-appearance: none;
appearance: none;
transition: background 0.15s, transform 0.1s;
}
.rh-code-copy:hover { background: rgba(233,185,99,0.18); }
.rh-code-copy:active { transform: scale(0.92); }
/* Share buttons (logos) */
.rh-share-row {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.rh-share-btn {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
text-decoration: none;
transition: transform 0.15s, border-color 0.15s, color 0.15s;
cursor: pointer;
color: var(--text-muted);
}
.rh-share-btn:hover { transform: translateY(-2px); }
.rh-share-x:hover { color: #fff; border-color: #fff; }
.rh-share-tg:hover { color: #29b6f6; border-color: #29b6f6; }
.rh-share-wa:hover { color: #25d366; border-color: #25d366; }
.rh-share-dc:hover { color: #5865f2; border-color: #5865f2; }
/* Right: rewards card */
.rh-right { display: flex; }
.rh-rewards-card {
flex: 1;
background: linear-gradient(180deg, rgba(20,12,40,0.92), rgba(40,28,68,0.85));
border: 1.5px solid rgba(233,185,99,0.4);
border-radius: var(--r-lg);
padding: 20px;
position: relative;
overflow: hidden;
}
.rh-rewards-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(233,185,99,0.15), transparent 60%);
pointer-events: none;
}
.rh-rewards-title {
position: relative;
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
margin-bottom: 14px;
}
.rh-rewards-title i { font-size: 14px; }
.rh-reward-line {
position: relative;
display: grid;
grid-template-columns: 32px 1fr;
gap: 12px;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px dashed rgba(233,185,99,0.2);
}
.rh-reward-line:last-child { border-bottom: none; padding-bottom: 0; }
.rh-reward-line > i {
font-size: 26px;
filter: drop-shadow(0 0 10px currentColor);
}
.rh-reward-amount {
font-family: var(--font-title);
font-weight: 800;
font-size: 18px;
color: var(--text);
letter-spacing: 0.04em;
}
.rh-reward-desc {
font-size: 12px;
color: var(--text-muted);
margin-top: 3px;
line-height: 1.4;
}
.rh-reward-desc b { color: var(--text); }
/* Referrer banner */
.ref-by-card-pro {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
background: linear-gradient(90deg, rgba(233,185,99,0.12), transparent);
border-left: 3px solid var(--gold);
border-radius: var(--r-md);
margin-bottom: 16px;
}
.ref-by-card-pro > i { font-size: 24px; color: var(--gold); }
.rby-label {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--text-muted);
font-weight: 700;
}
.rby-name {
font-family: var(--font-title);
font-size: 16px;
font-weight: 800;
color: var(--gold);
margin-top: 2px;
}
/* Tabs */
.ref-tabs-row {
display: flex;
gap: 6px;
background: rgba(0,0,0,0.4);
padding: 4px;
border-radius: var(--r-md);
border: 1px solid var(--border-soft);
margin-bottom: 16px;
}
.ref-tab-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-sm);
color: var(--text-muted);
font-family: var(--font-title);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
}
.ref-tab-btn i { font-size: 14px; }
.ref-tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.ref-tab-btn.active {
background: linear-gradient(180deg, rgba(233,185,99,0.22), rgba(122,76,240,0.12));
border-color: var(--gold);
color: var(--gold);
box-shadow: 0 2px 10px rgba(233,185,99,0.2);
}
.ref-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
background: rgba(0,0,0,0.5);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 800;
margin-left: 2px;
}
/* === Overview tab === */
.ref-overview { display: flex; flex-direction: column; gap: 14px; }
.ref-step-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.ref-step-pro {
position: relative;
background: rgba(0,0,0,0.4);
border: 1.5px solid rgba(255,255,255,0.06);
border-radius: var(--r-lg);
padding: 24px 14px 16px;
text-align: center;
transition: transform 0.18s, border-color 0.18s;
}
.ref-step-pro:hover {
transform: translateY(-3px);
border-color: var(--gold);
}
.ref-step-pro.is-gold {
background: linear-gradient(180deg, rgba(58,40,12,0.7), rgba(15,8,30,0.95));
border-color: rgba(233,185,99,0.4);
}
.ref-step-pro.is-accent {
background: linear-gradient(180deg, rgba(40,28,68,0.85), rgba(15,8,30,0.95));
border-color: rgba(122,76,240,0.4);
}
.rs-num {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
font-family: var(--font-title);
font-size: 16px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg-dark);
box-shadow: 0 4px 12px rgba(233,185,99,0.4);
}
.rs-icon {
font-size: 32px;
color: var(--accent);
margin: 14px 0 12px;
filter: drop-shadow(0 0 10px currentColor);
}
.rs-title {
font-family: var(--font-title);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--text);
margin-bottom: 8px;
}
.rs-desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
.rs-desc b { color: var(--text); }
/* Example card */
.ref-example-card-pro {
background: linear-gradient(180deg, rgba(20,38,28,0.7), rgba(15,8,30,0.95));
border: 1.5px solid var(--mint);
border-radius: var(--r-lg);
padding: 18px 22px;
}
.rec-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mint);
font-weight: 800;
margin-bottom: 12px;
}
.rec-title i { font-size: 14px; }
.rec-grid {
display: flex;
flex-direction: column;
gap: 8px;
}
.rec-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: 13px;
}
.rec-label { color: var(--text-muted); }
.rec-label b { color: var(--text); }
.rec-val { font-family: var(--font-mono); font-weight: 700; color: var(--text); }
.rec-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(63,214,146,0.4), transparent);
margin: 4px 0;
}
.rec-row-highlight .rec-val { display: flex; align-items: baseline; gap: 6px; }
.rec-big {
font-size: 22px;
font-weight: 900;
color: var(--mint);
text-shadow: 0 0 10px rgba(63,214,146,0.4);
}
.rec-small {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Rules card */
.ref-rules-card {
display: flex;
gap: 12px;
padding: 14px 16px;
background: rgba(0,0,0,0.3);
border-left: 3px solid var(--cyan);
border-radius: var(--r-md);
}
.ref-rules-card > i { font-size: 22px; color: var(--cyan); flex-shrink: 0; margin-top: 2px; }
.rrc-title {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cyan);
font-weight: 800;
margin-bottom: 4px;
}
.rrc-text { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.rrc-text b { color: var(--text); }
/* === Mis referidos list === */
.ref-list-pro {
display: flex;
flex-direction: column;
gap: 6px;
}
.ref-list-item-pro {
display: grid;
grid-template-columns: 44px 1fr auto auto;
gap: 14px;
align-items: center;
padding: 12px 16px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
}
.ref-list-item-pro:hover { border-color: var(--gold); transform: translateX(2px); }
.ref-list-item-pro.is-active {
background: linear-gradient(90deg, rgba(63,214,146,0.10), transparent);
border-color: var(--mint);
}
.rli-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(122,76,240,0.5), rgba(86,200,255,0.4));
border: 2px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
font-size: 18px;
font-weight: 800;
color: var(--text);
}
.rli-avatar.is-active {
background: linear-gradient(135deg, var(--mint), #2a8b5e);
border-color: var(--mint);
color: #0a1a10;
box-shadow: 0 0 12px rgba(63,214,146,0.4);
}
.rli-info { min-width: 0; }
.rli-name {
font-family: var(--font-title);
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.rli-char { color: var(--text-muted); font-weight: 500; }
.rli-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-size: 11px;
color: var(--text-muted);
}
.rli-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 7px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
color: var(--gold);
}
.rli-pill.is-dim { color: var(--text-dim); }
.rli-pill i { font-size: 10px; }
.rli-date { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); }
.rli-date i { font-size: 11px; }
.rli-status-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 99px;
font-family: var(--font-title);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.rli-status-pill i { font-size: 11px; }
.rli-status-pill.is-active { color: var(--mint); background: rgba(63,214,146,0.15); border: 1px solid var(--mint); }
.rli-status-pill.is-pending { color: var(--text-muted); background: rgba(0,0,0,0.5); border: 1px solid var(--border); }
.rli-earned {
display: flex;
flex-direction: column;
gap: 3px;
align-items: flex-end;
min-width: 100px;
}
.rli-earn-row {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 800;
}
.rli-earn-row i { font-size: 12px; }
.rli-earn-empty { font-size: 11px; color: var(--text-dim); font-style: italic; }
/* === Earnings list === */
.ref-earnings-list {
display: flex;
flex-direction: column;
gap: 5px;
}
.ref-earn-row {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s;
}
.ref-earn-row:hover { border-color: var(--gold); }
.rer-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.rer-icon.is-gold { background: rgba(233,185,99,0.15); color: var(--gold); border: 1.5px solid var(--gold); }
.rer-icon.is-gems { background: rgba(122,76,240,0.18); color: var(--accent); border: 1.5px solid var(--primary); }
.rer-info { min-width: 0; }
.rer-name {
font-family: var(--font-title);
font-weight: 700;
font-size: 13.5px;
color: var(--text);
margin-bottom: 4px;
}
.rer-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rer-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 99px;
font-family: var(--font-title);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.rer-tag i { font-size: 10px; }
.rer-tag.is-gold { color: var(--gold); background: rgba(233,185,99,0.12); border: 1px solid rgba(233,185,99,0.4); }
.rer-tag.is-primary { color: var(--accent); background: rgba(122,76,240,0.15); border: 1px solid rgba(122,76,240,0.4); }
.rer-date {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-dim);
}
.rer-date i { font-size: 11px; }
.rer-amount {
display: flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-weight: 900;
font-size: 16px;
}
.rer-amount.is-gold { color: var(--gold); }
.rer-amount.is-gems { color: var(--accent); }
.rer-amount-num { text-shadow: 0 0 8px currentColor; }
/* ============================================================================
GUILD — rediseño v2
============================================================================ */
/* Guild summary (reusa estilo de otros sums) */
.guild-summary-card {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1px solid rgba(233,185,99,0.25);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.guild-summary-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(233,185,99,0.08), transparent 60%);
pointer-events: none;
}
.gsum-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
}
.gsum-grid.gsum-grid-3 { grid-template-columns: repeat(3, 1fr); }
.gsum-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 6px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
}
.gsum-cell:hover { border-color: rgba(233,185,99,0.4); transform: translateY(-2px); }
.gsum-cell.is-mint { background: linear-gradient(180deg, rgba(63,214,146,0.10), transparent); border-color: rgba(63,214,146,0.35); }
.gsum-cell.is-mint > i { color: var(--mint); }
.gsum-cell.is-gold { background: linear-gradient(180deg, rgba(233,185,99,0.18), transparent); border-color: var(--gold); }
.gsum-cell.is-gold > i { color: var(--gold); }
.gsum-cell.is-highlight {
background: linear-gradient(180deg, rgba(233,185,99,0.18), rgba(233,185,99,0.04));
border-color: var(--gold);
box-shadow: 0 4px 12px rgba(233,185,99,0.2);
animation: ssumPulse 2s ease-in-out infinite;
}
.gsum-cell > i {
font-size: 20px;
color: var(--gold);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.gsum-val {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.gsum-cell.is-mint .gsum-val { color: var(--mint); }
.gsum-cell.is-gold .gsum-val { color: var(--gold); }
.gsum-frac { color: var(--text-dim); font-size: 14px; }
.gsum-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
/* === Hero del clan === */
.guild-hero-pro {
position: relative;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--fac-color) 25%, transparent), transparent 65%),
linear-gradient(180deg, rgba(30,18,55,0.95), rgba(15,8,28,0.99));
border: 2px solid var(--fac-color);
border-radius: var(--r-xl);
padding: 32px 22px 24px;
margin-bottom: 16px;
text-align: center;
overflow: hidden;
box-shadow:
0 8px 30px rgba(0,0,0,0.5),
0 0 30px color-mix(in srgb, var(--fac-color) 25%, transparent);
}
.gh-bg {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 50% at 50% 50%,
color-mix(in srgb, var(--fac-color) 15%, transparent),
transparent 65%);
animation: pyreBgPulse 3s ease-in-out infinite;
}
.gh-particles {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.gh-particle {
position: absolute;
width: 4px;
height: 4px;
background: var(--fac-color);
border-radius: 50%;
box-shadow: 0 0 6px var(--fac-color);
bottom: 30%;
left: calc(50% + (var(--i) * 22px - 60px));
opacity: 0;
animation: sparkRise 4s ease-out infinite;
animation-delay: calc(var(--i) * 0.6s);
}
.gh-content { position: relative; z-index: 1; }
.gh-crest {
width: 90px;
height: 90px;
margin: 0 auto 14px;
border-radius: 50%;
background: color-mix(in srgb, var(--fac-color) 25%, rgba(0,0,0,0.5));
border: 3px solid var(--fac-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--fac-color);
font-size: 44px;
filter: drop-shadow(0 0 24px color-mix(in srgb, var(--fac-color) 60%, transparent));
}
.gh-tag-big {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 900;
color: var(--gold);
letter-spacing: 0.12em;
margin-bottom: 4px;
}
.gh-name {
font-family: var(--font-title);
font-size: 28px;
font-weight: 900;
letter-spacing: 0.06em;
color: var(--text);
text-transform: uppercase;
text-shadow: 0 0 16px rgba(0,0,0,0.6);
margin-bottom: 8px;
}
.gh-faction {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 14px;
background: color-mix(in srgb, var(--fac-color) 18%, rgba(0,0,0,0.55));
border: 1px solid var(--fac-color);
border-radius: 99px;
color: var(--fac-color);
font-family: var(--font-title);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.gh-faction i { font-size: 13px; }
.gh-motto {
font-family: var(--font-serif);
font-style: italic;
font-size: 13.5px;
color: var(--text-muted);
margin-top: 12px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
/* Action row */
.guild-actions-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.guild-action-btn {
flex: 1;
min-width: 140px;
font-size: 13px;
letter-spacing: 0.06em;
min-height: 46px;
}
.guild-action-btn i { font-size: 15px; }
/* Section title */
.guild-section-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
margin-bottom: 10px;
margin-top: 4px;
}
.guild-section-title > i { font-size: 14px; }
.guild-section-title > span:first-of-type { flex: 1; }
.guild-section-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
text-transform: none;
letter-spacing: 0;
font-weight: 600;
opacity: 0.85;
}
/* ============================================================
GUILD XP BAR
============================================================ */
.guild-xp-bar {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed rgba(233,185,99,0.2);
}
.gxp-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: var(--text-muted);
margin-bottom: 6px;
}
.gxp-meta i { font-size: 13px; color: #b884ff; margin-right: 4px; }
.gxp-num {
font-family: var(--font-mono);
font-weight: 700;
color: var(--text);
}
.gxp-track {
height: 8px;
background: rgba(0,0,0,0.5);
border-radius: 99px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.05);
margin-bottom: 8px;
}
.gxp-fill {
height: 100%;
background: linear-gradient(90deg, #b884ff, var(--gold));
border-radius: 99px;
transition: width 0.6s ease;
box-shadow: 0 0 12px rgba(184,132,255,0.4);
}
.gxp-hint {
font-size: 11px;
color: var(--text-dim);
display: flex;
align-items: center;
gap: 6px;
font-style: italic;
}
.gxp-hint i { font-size: 12px; }
/* ============================================================
GUILD ACTIVE BONUSES BAR
============================================================ */
.guild-bonuses-bar {
background: linear-gradient(180deg, rgba(184,132,255,0.12), rgba(184,132,255,0.03));
border: 1.5px solid rgba(184,132,255,0.4);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 16px;
}
.gbb-title {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #b884ff;
font-weight: 800;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.gbb-title i { font-size: 14px; }
.gbb-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.gbb-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--bc, var(--gold));
border-radius: 99px;
font-size: 12px;
font-family: var(--font-mono);
}
.gbb-chip i { font-size: 13px; color: var(--bc, var(--gold)); }
.gbb-l { color: var(--text-muted); font-weight: 600; }
.gbb-v { color: var(--bc, var(--gold)); font-weight: 800; }
/* ============================================================
GUILD INFO BANNER (helper info)
============================================================ */
.guild-info-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: linear-gradient(90deg, rgba(86,166,255,0.1), rgba(86,166,255,0.02));
border: 1px solid rgba(86,166,255,0.35);
border-left: 3px solid var(--cyan);
border-radius: var(--r-md);
margin-bottom: 12px;
font-size: 12.5px;
color: var(--text-muted);
}
.guild-info-banner i { color: var(--cyan); font-size: 18px; flex-shrink: 0; }
/* ============================================================
GUILD UPGRADES GRID
============================================================ */
.guild-upgrades-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.guild-upgrade-card {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: var(--r-lg);
padding: 16px;
transition: all 0.25s;
display: flex;
flex-direction: column;
}
.guild-upgrade-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0,0,0,0.3);
}
.guild-upgrade-card.cat-combat { border-color: rgba(225,80,90,0.3); }
.guild-upgrade-card.cat-economy { border-color: rgba(233,185,99,0.3); }
.guild-upgrade-card.cat-capacity { border-color: rgba(95,214,132,0.3); }
.guild-upgrade-card.cat-special { border-color: rgba(184,132,255,0.3); }
.guild-upgrade-card.is-max {
border-color: rgba(255,170,80,0.6);
background: linear-gradient(180deg, rgba(255,170,80,0.15), rgba(255,170,80,0.04));
}
.guc-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.guc-icon {
width: 44px;
height: 44px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(233,185,99,0.3);
border-radius: var(--r-md);
}
.guild-upgrade-card.cat-combat .guc-icon { border-color: rgba(225,80,90,0.4); }
.guild-upgrade-card.cat-combat .guc-icon i { color: #e1505a; }
.guild-upgrade-card.cat-economy .guc-icon i { color: var(--gold); }
.guild-upgrade-card.cat-capacity .guc-icon { border-color: rgba(95,214,132,0.4); }
.guild-upgrade-card.cat-capacity .guc-icon i { color: #5fd684; }
.guild-upgrade-card.cat-special .guc-icon { border-color: rgba(184,132,255,0.4); }
.guild-upgrade-card.cat-special .guc-icon i { color: #b884ff; }
.guc-icon i { font-size: 22px; color: var(--gold); }
.guc-title-block { flex: 1; min-width: 0; }
.guc-name {
font-family: var(--font-title);
font-size: 14px;
font-weight: 800;
color: var(--text);
letter-spacing: 0.04em;
margin-bottom: 2px;
}
.guc-cat {
font-size: 10.5px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
font-family: var(--font-title);
font-weight: 700;
}
.guc-desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
margin-bottom: 10px;
}
.guc-effect-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: rgba(0,0,0,0.4);
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-size: 12px;
margin-bottom: 10px;
}
.guc-effect-now {
color: var(--text-muted);
font-weight: 700;
}
.guc-effect-next {
color: #5fd684;
font-weight: 800;
}
.guc-effect-row > i { color: var(--gold); }
.guc-levels {
display: flex;
gap: 3px;
margin-bottom: 12px;
}
.gu-lv {
flex: 1;
height: 6px;
background: rgba(255,255,255,0.06);
border-radius: 99px;
transition: all 0.2s;
}
.gu-lv.is-filled {
background: linear-gradient(90deg, var(--gold), #ffaa50);
box-shadow: 0 0 8px rgba(233,185,99,0.4);
}
.gu-lv.is-next {
background: rgba(95,214,132,0.4);
animation: guPulse 1.4s ease-in-out infinite;
}
@keyframes guPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.guc-action { margin-top: auto; }
.gu-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px;
font-size: 12px;
}
.gu-cost, .gu-need {
font-family: var(--font-mono);
font-size: 11px;
margin-left: 4px;
opacity: 0.85;
}
.gu-need { color: var(--blood); }
.gu-status {
text-align: center;
padding: 10px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
background: rgba(0,0,0,0.3);
border: 1px dashed rgba(255,255,255,0.1);
border-radius: var(--r-md);
}
.gu-status.is-max {
color: #ffaa50;
border-color: rgba(255,170,80,0.4);
background: rgba(255,170,80,0.1);
font-family: var(--font-title);
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.gu-status.is-locked {
color: var(--blood);
border-color: rgba(225,80,90,0.3);
background: rgba(225,80,90,0.08);
}
.gu-status.is-max i, .gu-status.is-locked i { margin-right: 4px; font-size: 13px; }
/* Mobile */
body.mobile-mode .guild-upgrades-grid {
grid-template-columns: 1fr;
gap: 10px;
}
body.mobile-mode .guild-upgrade-card { padding: 12px; }
body.mobile-mode .guc-icon { width: 38px; height: 38px; }
body.mobile-mode .guc-icon i { font-size: 18px; }
body.mobile-mode .guc-name { font-size: 13px; }
body.mobile-mode .gbb-chips { gap: 6px; }
body.mobile-mode .gbb-chip { font-size: 11px; padding: 4px 9px; }
/* === Join request rows (solo líder ve) === */
.guild-requests-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.guild-request-row {
display: grid;
grid-template-columns: 48px 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: linear-gradient(90deg, rgba(86,166,255,0.1), rgba(86,166,255,0.02));
border: 1px solid rgba(86,166,255,0.4);
border-radius: var(--r-md);
transition: all 0.2s;
}
.guild-request-row:hover {
border-color: var(--cyan);
background: linear-gradient(90deg, rgba(86,166,255,0.18), rgba(86,166,255,0.05));
}
.grr-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #56a6ff, #2a6eb5);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
font-weight: 900;
font-size: 18px;
flex-shrink: 0;
}
.grr-info { flex: 1; min-width: 0; }
.grr-name {
font-family: var(--font-title);
font-size: 14px;
font-weight: 800;
color: var(--text);
margin-bottom: 4px;
}
.grr-meta {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 4px;
}
.grr-pill {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
background: rgba(0,0,0,0.4);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-muted);
}
.grr-pill i { color: var(--gold); font-size: 11px; }
.grr-msg {
font-family: var(--font-cormorant);
font-style: italic;
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
.grr-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.grr-actions .btn {
padding: 8px 12px;
min-width: 38px;
}
body.mobile-mode .guild-request-row {
grid-template-columns: 40px 1fr;
}
body.mobile-mode .grr-actions {
grid-column: 1 / 3;
margin-top: 6px;
justify-content: flex-end;
}
/* === Member rows === */
.guild-members-list {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 18px;
}
.guild-member-row {
display: grid;
grid-template-columns: 48px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.guild-member-row:hover {
border-color: var(--gold);
transform: translateX(2px);
}
.guild-member-row.role-leader {
background: linear-gradient(90deg, rgba(233,185,99,0.10), transparent 70%);
border-color: rgba(233,185,99,0.4);
}
.gmr-avatar {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
font-size: 18px;
font-weight: 800;
color: var(--text);
border: 2px solid rgba(255,255,255,0.1);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.gmr-avatar.level-high {
background: linear-gradient(135deg, var(--gold), #b97f2e);
border-color: var(--gold);
color: #2a1a00;
}
.gmr-avatar.level-mid {
background: linear-gradient(135deg, rgba(122,76,240,0.6), rgba(86,200,255,0.5));
border-color: var(--primary);
}
.gmr-avatar.level-low {
background: linear-gradient(135deg, rgba(63,214,146,0.5), rgba(86,200,255,0.4));
border-color: rgba(63,214,146,0.5);
}
.gmr-status-dot {
position: absolute;
bottom: -2px;
right: -2px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--text-dim);
border: 2px solid var(--bg-dark);
}
.gmr-status-dot.is-online {
background: var(--mint);
box-shadow: 0 0 8px rgba(63,214,146,0.6);
animation: pinPulse 2s ease-in-out infinite;
}
.gmr-info { min-width: 0; }
.gmr-name {
font-family: var(--font-title);
font-size: 14px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.04em;
}
.gmr-meta {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
flex-wrap: wrap;
}
.gmr-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 7px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
}
.gmr-pill i { font-size: 10px; color: var(--gold); }
.gmr-pill.is-online-pill {
background: rgba(95,214,132,0.15);
border-color: rgba(95,214,132,0.5);
color: #5fd684;
}
.gmr-pill.is-online-pill i {
color: #5fd684;
font-size: 8px;
animation: pulse-online 2s infinite ease-in-out;
}
@keyframes pulse-online {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
.gmr-role {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: color-mix(in srgb, var(--role-color) 12%, rgba(0,0,0,0.5));
border: 1px solid var(--role-color);
color: var(--role-color);
border-radius: 99px;
font-family: var(--font-title);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.gmr-role i { font-size: 11px; }
.gmr-kick-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(225,80,90,0.12);
border: 1px solid rgba(225,80,90,0.4);
color: var(--blood);
cursor: pointer;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
-webkit-appearance: none;
appearance: none;
transition: all 0.15s;
}
.gmr-kick-btn:hover { background: rgba(225,80,90,0.25); transform: scale(1.05); }
/* Acciones del miembro (kick + promote + demote, agrupados a la derecha) */
.gmr-actions {
display: flex;
align-items: center;
gap: 4px;
}
.gmr-promote-btn, .gmr-demote-btn {
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
-webkit-appearance: none;
appearance: none;
transition: all 0.15s;
}
.gmr-promote-btn {
background: rgba(95,214,132,0.12);
border: 1px solid rgba(95,214,132,0.45);
color: #5fd684;
}
.gmr-promote-btn:hover { background: rgba(95,214,132,0.25); transform: scale(1.05); }
.gmr-demote-btn {
background: rgba(255,200,87,0.12);
border: 1px solid rgba(255,200,87,0.45);
color: var(--gold);
}
.gmr-demote-btn:hover { background: rgba(255,200,87,0.25); transform: scale(1.05); }
/* === Crear clan card === */
.guild-create-card {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 14px;
align-items: center;
padding: 16px 18px;
background: linear-gradient(90deg, rgba(58,40,12,0.6), rgba(15,8,30,0.95));
border: 1.5px solid var(--gold);
border-radius: var(--r-lg);
margin-bottom: 16px;
box-shadow: 0 4px 18px rgba(233,185,99,0.18);
}
.gcc-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(233,185,99,0.3), rgba(233,185,99,0.1));
border: 2px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
font-size: 28px;
filter: drop-shadow(0 0 14px rgba(233,185,99,0.4));
}
.gcc-info { min-width: 0; }
.gcc-title {
font-family: var(--font-title);
font-size: 16px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--gold);
margin-bottom: 4px;
}
.gcc-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; margin-bottom: 8px; }
.gcc-cost-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.gcc-cost-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 99px;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 700;
border: 1px solid;
}
.gcc-cost-pill.is-ok {
background: rgba(95,214,132,0.12);
color: #5fd684;
border-color: rgba(95,214,132,0.4);
}
.gcc-cost-pill.is-bad {
background: rgba(225,80,90,0.08);
color: var(--blood);
border-color: rgba(225,80,90,0.3);
text-decoration: line-through;
opacity: 0.6;
}
.gcc-cost-pill i { font-size: 12px; }
.gcc-or {
font-family: var(--font-cormorant);
font-style: italic;
font-size: 11px;
color: var(--text-dim);
}
.gcc-btn { font-size: 12px; min-height: 44px; padding: 0 18px; }
/* === Invite cards === */
.guild-invites-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.guild-invite-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
padding: 12px 16px;
background: linear-gradient(90deg, rgba(233,185,99,0.10), rgba(0,0,0,0.4));
border: 1.5px solid rgba(233,185,99,0.4);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
}
.guild-invite-card:hover { border-color: var(--gold); transform: translateX(2px); }
.gic-tag {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 900;
color: var(--gold);
padding: 8px 14px;
background: rgba(0,0,0,0.5);
border: 1px solid var(--gold);
border-radius: var(--r-md);
letter-spacing: 0.08em;
}
.gic-info { min-width: 0; }
.gic-name {
font-family: var(--font-title);
font-size: 15px;
font-weight: 800;
color: var(--text);
letter-spacing: 0.04em;
}
.gic-meta {
display: flex;
gap: 12px;
margin-top: 4px;
font-size: 11px;
color: var(--text-muted);
flex-wrap: wrap;
}
.gic-meta span { display: inline-flex; align-items: center; gap: 4px; }
.gic-meta i { font-size: 12px; color: var(--cyan); }
.gic-actions {
display: flex;
gap: 6px;
}
.gic-accept { font-size: 12px; }
.gic-reject {
width: 36px;
height: 36px;
padding: 0;
}
/* === Guild list === */
.guild-list-pro { display: flex; flex-direction: column; gap: 6px; }
.guild-card-pro {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
padding: 12px 16px;
background: rgba(0,0,0,0.4);
border: 1.5px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: all 0.15s;
}
.guild-card-pro:hover {
border-color: var(--fac-color);
transform: translateX(2px);
box-shadow: 0 4px 14px color-mix(in srgb, var(--fac-color) 18%, transparent);
}
.gcd-tag {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 900;
color: var(--fac-color);
padding: 6px 12px;
background: color-mix(in srgb, var(--fac-color) 12%, rgba(0,0,0,0.5));
border: 1px solid var(--fac-color);
border-radius: var(--r-sm);
letter-spacing: 0.08em;
}
.gcd-info { min-width: 0; }
.gcd-name-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.gcd-name {
font-family: var(--font-title);
font-size: 15px;
font-weight: 800;
color: var(--text);
letter-spacing: 0.04em;
}
.gcd-faction {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 8px;
background: color-mix(in srgb, var(--fac-color) 12%, rgba(0,0,0,0.5));
border: 1px solid var(--fac-color);
border-radius: 99px;
color: var(--fac-color);
font-family: var(--font-title);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.gcd-faction i { font-size: 10px; }
.gcd-meta { display: flex; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.gcd-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 7px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
}
.gcd-pill i { font-size: 10px; color: var(--gold); }
.gcd-progress { display: flex; align-items: center; gap: 8px; }
.gcd-prog-bar {
flex: 1;
height: 5px;
background: rgba(0,0,0,0.6);
border-radius: 99px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.05);
}
.gcd-prog-fill { height: 100%; border-radius: 99px; }
.gcd-prog-text {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-muted);
font-weight: 700;
white-space: nowrap;
}
.gcd-action { flex-shrink: 0; }
.gcd-closed {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
background: rgba(0,0,0,0.5);
border: 1px solid var(--border);
border-radius: 99px;
font-family: var(--font-title);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
.gcd-closed i { font-size: 11px; }
/* === Invite modal === */
.invite-modal-overlay {
padding: 16px;
align-items: center;
}
.invite-modal {
max-width: 480px;
width: 100%;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 92vh;
border: 1px solid var(--border-gold);
}
.invite-modal-header {
display: flex;
align-items: center;
gap: 14px;
padding: 22px 24px 18px;
background:
radial-gradient(ellipse 80% 100% at 0% 0%, rgba(122,76,240,0.20), transparent 70%),
rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.im-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(122,76,240,0.3), rgba(86,200,255,0.15));
border: 1px solid var(--primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
font-size: 22px;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(122,76,240,0.25);
}
.im-title {
font-family: var(--font-title);
font-size: 17px;
font-weight: 800;
color: var(--accent);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.im-sub {
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.invite-modal-body {
flex: 1;
overflow-y: auto;
padding: 16px 22px 22px;
display: flex;
flex-direction: column;
gap: 12px;
}
.im-search-wrap {
position: relative;
display: flex;
align-items: center;
}
.im-search-icon {
position: absolute;
left: 14px;
font-size: 16px;
color: var(--text-muted);
pointer-events: none;
}
.im-search-input {
width: 100%;
padding: 12px 14px 12px 42px;
background: rgba(0,0,0,0.5);
border: 1.5px solid rgba(122,76,240,0.3);
border-radius: 99px;
color: var(--text);
font-size: 14px;
outline: none;
min-height: 46px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.im-search-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(122,76,240,0.18);
}
.im-results { display: flex; flex-direction: column; gap: 6px; min-height: 100px; }
.im-results-empty,
.im-results-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 30px;
color: var(--text-muted);
font-size: 12px;
}
.im-results-empty i { font-size: 32px; opacity: 0.4; }
.im-result-row {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s;
}
.im-result-row:hover { border-color: var(--primary); }
.im-result-row.is-busy { opacity: 0.6; }
.imr-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(122,76,240,0.5), rgba(86,200,255,0.4));
border: 2px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
font-size: 16px;
font-weight: 800;
}
.imr-info { min-width: 0; }
.imr-name {
font-family: var(--font-title);
font-weight: 700;
font-size: 13.5px;
color: var(--text);
}
.imr-meta {
display: flex;
gap: 8px;
margin-top: 3px;
font-size: 11px;
color: var(--text-muted);
}
.imr-meta span { display: inline-flex; align-items: center; gap: 4px; }
.imr-meta i { font-size: 11px; color: var(--gold); }
.imr-busy {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(0,0,0,0.5);
border: 1px solid var(--border);
border-radius: 99px;
color: var(--text-muted);
font-family: var(--font-title);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.imr-busy i { font-size: 11px; color: var(--text-muted); }
/* ============================================================================
COMBAT — rediseño épico
============================================================================ */
/* Back btn */
.cb-back-btn {
font-size: 12px;
letter-spacing: 0.06em;
min-height: 40px;
}
.cb-back-btn i { font-size: 14px; }
/* Combat info card (zone summary) */
.combat-info-card {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1px solid rgba(225,80,90,0.25);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.combat-info-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(225,80,90,0.10), transparent 60%);
pointer-events: none;
}
.cic-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
}
.cic-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 6px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
transition: border-color 0.15s, transform 0.15s;
}
.cic-cell:hover { border-color: rgba(225,80,90,0.5); transform: translateY(-2px); }
.cic-cell.is-blood { background: linear-gradient(180deg, rgba(225,80,90,0.15), transparent); border-color: rgba(225,80,90,0.5); }
.cic-cell.is-blood > i { color: var(--blood); }
.cic-cell.is-mint { background: linear-gradient(180deg, rgba(63,214,146,0.10), transparent); border-color: rgba(63,214,146,0.4); }
.cic-cell.is-mint > i { color: var(--mint); }
.cic-cell.is-ember { background: linear-gradient(180deg, rgba(255,113,67,0.12), transparent); border-color: rgba(255,113,67,0.4); }
.cic-cell.is-ember > i { color: var(--ember); }
.cic-cell > i {
font-size: 20px;
color: var(--gold);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.cic-val {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.cic-frac { color: var(--text-dim); font-size: 13px; }
.cic-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Section title */
.combat-section-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
margin-bottom: 10px;
margin-top: 4px;
}
.combat-section-title > i { font-size: 14px; }
.combat-section-title > span:first-of-type { flex: 1; }
.combat-section-title-mt { margin-top: 18px; }
.combat-section-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
text-transform: none;
letter-spacing: 0;
font-weight: 600;
opacity: 0.85;
}
/* === Monster card === */
.combat-monsters-list, .combat-players-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.combat-monster-card,
.combat-player-card {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
background: rgba(0,0,0,0.4);
border: 1.5px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
transition: all 0.15s;
}
.combat-monster-card:hover,
.combat-player-card:hover {
transform: translateX(2px);
border-color: var(--blood);
box-shadow: 0 4px 14px rgba(225,80,90,0.2);
}
.combat-monster-card.is-boss {
background: linear-gradient(90deg, rgba(58,40,12,0.7), rgba(0,0,0,0.4));
border-color: var(--gold);
}
.combat-monster-card.is-boss:hover { box-shadow: 0 4px 18px rgba(233,185,99,0.3); }
.cmc-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(225,80,90,0.15);
border: 2px solid var(--blood);
display: flex;
align-items: center;
justify-content: center;
color: var(--blood);
font-size: 26px;
filter: drop-shadow(0 0 10px rgba(225,80,90,0.4));
}
.cmc-icon.is-boss {
background: linear-gradient(135deg, rgba(233,185,99,0.25), rgba(184,127,46,0.1));
border-color: var(--gold);
color: var(--gold);
filter: drop-shadow(0 0 14px rgba(233,185,99,0.5));
}
.cpc-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(122,76,240,0.5), rgba(86,200,255,0.4));
border: 2px solid var(--primary);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
font-size: 22px;
font-weight: 800;
color: var(--text);
}
/* 2026-05-16: avatar real con renderAvatar() en la lista de jugadores online */
.cpc-av { flex-shrink: 0; }
.cpc-av.avatar-md { width: 56px; height: 56px; }
.cpc-av .avatar-photo { border: 2px solid var(--primary); }
.cmc-info, .cpc-info { min-width: 0; }
.cmc-name, .cpc-name {
font-family: var(--font-title);
font-size: 14.5px;
font-weight: 800;
color: var(--text);
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.cmc-boss-tag {
display: inline-flex;
padding: 1px 8px;
background: linear-gradient(180deg, #f0c674, #b97f2e);
color: #2a1a00;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.14em;
border-radius: 99px;
}
.cmc-meta, .cpc-meta {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.cmc-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
color: var(--text-muted);
}
.cmc-pill i { font-size: 11px; }
.cmc-pill-gold { color: var(--gold); border-color: rgba(233,185,99,0.4); }
.cmc-pill-xp { color: var(--accent); border-color: rgba(122,76,240,0.4); }
/* 2026-05-10: pill de evasión en card de mob (lvl 21+ con dodge > 0) */
.cmc-pill-evasion {
color: #ffd07a;
border-color: rgba(255,167,71,0.5) !important;
background: rgba(255,167,71,0.10);
cursor: help;
}
.cmc-pill-evasion i { color: #ff9c4a; }
/* 2026-05-11: pill "Mob Configurable" en la card del world (informativo, sin click) */
.cmc-pill-training-label {
color: #6cd4ff;
border-color: rgba(108,212,255,0.5) !important;
background: rgba(108,212,255,0.10);
cursor: help;
}
.cmc-pill-training-label i { color: #6cd4ff; }
/* 2026-05-11: botón "Configurar" dentro del combate del Sparring Personalizado */
.cs-fighter-train-cfg {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
background: linear-gradient(135deg, rgba(108,212,255,0.18), rgba(108,212,255,0.08));
border: 1px solid rgba(108,212,255,0.55);
border-radius: 99px;
color: #6cd4ff;
font-family: var(--font-title, 'Cinzel', serif);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: transform .15s, background .15s;
}
.cs-fighter-train-cfg:hover {
transform: scale(1.05);
background: linear-gradient(135deg, rgba(108,212,255,0.30), rgba(108,212,255,0.15));
}
.cs-fighter-train-cfg i { font-size: 12px; }
/* Modal de configuración del Sparring */
.train-dummy-modal { max-width: 460px; }
.train-dummy-row {
display: grid;
grid-template-columns: 110px 1fr 60px;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
.train-dummy-row label {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-size: 13px;
color: var(--text);
}
.train-dummy-row label i { font-size: 14px; }
.train-dummy-row input {
padding: 7px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 6px;
color: #fff;
font-family: var(--font-mono);
font-size: 13px;
text-align: right;
}
.train-dummy-row input:focus {
outline: none;
border-color: var(--cyan, #6cd4ff);
box-shadow: 0 0 0 2px rgba(108,212,255,0.2);
}
.train-dummy-hint {
font-size: 10px;
color: var(--text-muted);
font-family: var(--font-mono);
text-align: right;
}
.cmc-pill-drop-guaranteed {
color: #5fd684;
border-color: rgba(95,214,132,0.55);
background: rgba(95,214,132,0.10);
font-weight: 700;
}
.cmc-pill-drop-guaranteed i { color: #5fd684; }
.cmc-pill-drop-chance {
color: #ffc857;
border-color: rgba(255,200,87,0.45);
background: rgba(255,200,87,0.06);
}
.cmc-pill-drop-chance i { color: #ffc857; }
/* Idea 3 - 2026-05: pill de penalty por overlevel + variantes is-penalty */
.cmc-pill-penalty {
color: #ff7a8a !important;
border-color: rgba(225,80,90,0.55) !important;
background: rgba(225,80,90,0.10) !important;
font-weight: 700;
font-size: 9.5px;
margin-left: 6px;
}
.cmc-pill-penalty i { color: #ff7a8a; }
.cmc-pill-gold.is-penalty,
.cmc-pill-xp.is-penalty {
opacity: 0.65;
text-decoration: line-through dashed rgba(225,80,90,0.5);
}
.cmc-attack-btn {
font-size: 12px;
letter-spacing: 0.06em;
padding: 0 14px;
min-height: 40px;
flex-shrink: 0;
}
.cmc-attack-btn i { font-size: 13px; }
/* 2026-05-06: anti-twink — mob bloqueado por gap de nivel +15 */
.combat-monster-card.is-level-locked {
opacity: 0.55;
filter: grayscale(0.7);
background: rgba(80,80,90,0.10) !important;
border-color: rgba(120,120,130,0.25) !important;
cursor: not-allowed;
}
.combat-monster-card.is-level-locked:hover {
transform: none;
box-shadow: none;
}
.combat-monster-card.is-level-locked .cmc-icon {
filter: grayscale(1);
opacity: 0.6;
}
.cmc-pill-locked {
color: #b8b8c0 !important;
border-color: rgba(160,160,170,0.45) !important;
background: rgba(80,80,90,0.18) !important;
font-weight: 700;
font-size: 9.5px;
margin-left: 6px;
}
.cmc-pill-locked i { color: #b8b8c0; }
.cmc-lock-msg {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 5px 10px;
background: rgba(80,80,90,0.15);
border: 1px dashed rgba(160,160,170,0.4);
border-radius: 6px;
font-size: 11px;
color: #b8b8c0;
font-style: italic;
}
.cmc-lock-msg i { color: #c89a3e; font-size: 12px; }
.cmc-attack-btn.is-locked {
background: rgba(80,80,90,0.25) !important;
border-color: rgba(160,160,170,0.4) !important;
color: #888 !important;
cursor: not-allowed !important;
opacity: 0.6;
pointer-events: none;
}
.cmc-attack-btn.is-locked i { color: #888; }
/* 2026-05-09: overlevel_penalty — char +16 lvls arriba sin grind disponible.
Es peleable PERO sin recompensas (XP -90%, sin oro/loot/SP). Card medio gris,
pill warning amarilla, mensaje + botón habilitado pero con tag "XP -90%". */
.combat-monster-card.is-overlevel:not(.is-level-locked) {
opacity: 0.78;
filter: grayscale(0.45);
background: rgba(255,180,60,0.04) !important;
border-color: rgba(255,180,60,0.20) !important;
}
.combat-monster-card.is-overlevel:not(.is-level-locked):hover {
opacity: 0.92;
filter: grayscale(0.2);
}
.cmc-pill-overlevel {
color: #ffd07a !important;
border-color: rgba(255,200,100,0.5) !important;
background: rgba(255,170,60,0.15) !important;
font-weight: 700;
font-size: 9.5px;
margin-left: 6px;
}
.cmc-pill-overlevel i { color: #ffd07a; }
.cmc-overlevel-msg {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 5px 10px;
background: rgba(255,170,60,0.10);
border: 1px dashed rgba(255,200,100,0.5);
border-radius: 6px;
color: #ffc870;
font-size: 12px;
font-weight: 600;
}
.cmc-overlevel-msg i { color: #ffc870; font-size: 12px; }
.cmc-attack-btn.is-overlevel:not(.is-locked) {
background: linear-gradient(180deg, rgba(180,120,40,0.85), rgba(120,75,25,0.85)) !important;
border-color: rgba(255,180,80,0.55) !important;
color: #fff !important;
font-size: 12px;
}
.cmc-attack-btn.is-overlevel:not(.is-locked) i { color: #ffd07a; }
/* 2026-05-06: límite diario de boss kills (10/día por boss) */
.cmc-pill-boss-kills {
color: #ffc857 !important;
border-color: rgba(255,200,87,0.45) !important;
background: rgba(255,200,87,0.10) !important;
font-weight: 700;
font-size: 9.5px;
margin-left: 6px;
}
.cmc-pill-boss-kills i { color: #ffc857; }
.cmc-pill-boss-kills.is-full {
color: #e85a6a !important;
border-color: rgba(225,80,90,0.55) !important;
background: rgba(225,80,90,0.10) !important;
}
.cmc-pill-boss-kills.is-full i { color: #e85a6a; }
.combat-monster-card.is-boss-locked {
opacity: 0.65;
filter: saturate(0.6);
background: rgba(60,30,40,0.20) !important;
border-color: rgba(225,80,90,0.30) !important;
cursor: not-allowed;
}
.combat-monster-card.is-boss-locked:hover {
transform: none;
box-shadow: none;
}
/* 2026-05-07: PvP cooldown post-duelo (60s) en player card */
.combat-player-card.is-pvp-cooldown {
opacity: 0.7;
filter: saturate(0.7);
}
.cpc-cd-pill {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
padding: 2px 9px;
background: rgba(225,80,90,0.15);
border: 1px solid rgba(225,80,90,0.5);
border-radius: 99px;
font-family: var(--font-mono, monospace);
font-size: 10.5px;
color: #ff8a8a;
font-weight: 700;
vertical-align: middle;
}
.cpc-cd-pill i { font-size: 11px; }
.cmc-attack-btn.is-cooldown {
background: rgba(80,80,90,0.25) !important;
border-color: rgba(225,80,90,0.4) !important;
color: #ff8a8a !important;
cursor: not-allowed !important;
opacity: 0.65;
}
/* 2026-05-07: SP grind mode — pelea permitida con recompensas reducidas */
.cmc-grind-msg {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 5px 10px;
background: rgba(184,132,255,0.10);
border: 1px dashed rgba(184,132,255,0.45);
border-radius: 6px;
font-size: 11px;
color: #d8c2ff;
font-style: italic;
}
.cmc-grind-msg i { color: #b884ff; font-size: 12px; }
.cmc-attack-btn.is-grind {
background: rgba(184,132,255,0.15) !important;
border-color: rgba(184,132,255,0.55) !important;
color: #d8c2ff !important;
}
.cmc-attack-btn.is-grind i { color: #c2a8ff; }
/* === Combat arena (épico) === */
.combat-arena-pro {
position: relative;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(225,80,90,0.18), transparent 65%),
linear-gradient(180deg, rgba(40,15,8,0.92), rgba(15,8,28,0.98));
border: 2px solid var(--blood);
border-radius: var(--r-xl);
padding: 24px;
margin-bottom: 16px;
overflow: hidden;
box-shadow:
0 12px 40px rgba(0,0,0,0.6),
0 0 30px rgba(225,80,90,0.18);
}
.cap-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 30% 30%, rgba(122,76,240,0.10), transparent 60%),
radial-gradient(ellipse 60% 40% at 70% 70%, rgba(225,80,90,0.10), transparent 60%);
animation: pyreBgPulse 4s ease-in-out infinite;
pointer-events: none;
}
/* Battlefield grid */
.cap-battlefield {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 14px;
align-items: stretch;
margin-bottom: 18px;
}
.cap-side {
position: relative;
background: rgba(0,0,0,0.4);
border: 1.5px solid rgba(255,255,255,0.06);
border-radius: var(--r-lg);
padding: 16px 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.cap-side.cap-player {
border-color: rgba(122,76,240,0.4);
background: linear-gradient(180deg, rgba(40,28,68,0.7), rgba(10,6,22,0.95));
}
.cap-side.cap-enemy {
border-color: rgba(225,80,90,0.5);
background: linear-gradient(180deg, rgba(58,15,18,0.7), rgba(10,6,22,0.95));
}
/* Portrait */
.cap-portrait-wrap {
position: relative;
width: 110px;
height: 110px;
}
.cap-portrait {
width: 110px;
height: 110px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--primary);
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 24px rgba(122,76,240,0.4);
position: relative;
}
.cap-portrait > * { width: 100%; height: 100%; }
.cap-portrait-enemy {
border-color: var(--blood);
box-shadow: 0 0 24px rgba(225,80,90,0.45);
color: var(--blood);
font-size: 50px;
}
.cap-portrait-enemy.is-boss {
border-color: var(--gold);
color: var(--gold);
box-shadow:
0 0 28px rgba(233,185,99,0.5),
inset 0 0 20px rgba(233,185,99,0.15);
}
/* Damage / heal popups */
.cap-popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-title);
font-size: 32px;
font-weight: 900;
z-index: 5;
pointer-events: none;
text-shadow:
-2px -2px 0 rgba(0,0,0,0.8),
2px -2px 0 rgba(0,0,0,0.8),
-2px 2px 0 rgba(0,0,0,0.8),
2px 2px 0 rgba(0,0,0,0.8),
0 0 14px currentColor;
}
.cap-popup.is-damage { color: var(--blood); }
.cap-popup.is-heal { color: var(--mint); }
.cap-name {
font-family: var(--font-title);
font-size: 17px;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--text);
text-align: center;
text-shadow: 0 0 10px rgba(0,0,0,0.6);
display: flex;
align-items: center;
gap: 6px;
}
.cap-meta {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--text-muted);
font-weight: 700;
}
/* Bars */
/* 2026-06-03: shrink en PvE — las barras quedaban larguísimas en PC, sobre todo
con el card de player tan ancho. Capamos a 380px centrado para mejor lectura. */
.cap-bars {
width: 100%;
max-width: 380px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
}
/* Mobile: usar todo el ancho disponible */
@media (max-width: 720px) {
.cap-bars { max-width: 100%; }
}
.cap-bar-row {
display: grid;
grid-template-columns: 22px 1fr 60px;
align-items: center;
gap: 8px;
}
.cap-bar-icon { font-size: 13px; }
.cap-bar-icon.hp { color: var(--blood); }
.cap-bar-icon.mp { color: var(--cyan); }
.cap-bar {
height: 12px;
background: rgba(0,0,0,0.7);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 99px;
overflow: hidden;
}
.cap-bar-fill {
height: 100%;
border-radius: 99px;
transition: width 0.4s cubic-bezier(.22,.9,.32,1.04);
}
.cap-bar-fill.hp {
background: linear-gradient(90deg, #b9303a, #f8838e);
box-shadow: 0 0 8px rgba(225,80,90,0.5);
}
.cap-bar-fill.hp.is-enemy {
background: linear-gradient(90deg, #1f7fc7, #e85a6a, #b9303a);
}
.cap-bar-fill.mp {
background: linear-gradient(90deg, #1f7fc7, #4cc4ff);
box-shadow: 0 0 8px rgba(86,200,255,0.5);
}
.cap-bar-val {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--text);
text-align: right;
white-space: nowrap;
}
/* Buffs row */
.cap-buffs {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
margin-top: 6px;
}
.cap-buff {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
background: linear-gradient(180deg, rgba(122,76,240,0.18), rgba(122,76,240,0.04));
border: 1px solid var(--primary);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent);
font-weight: 700;
}
.cap-buff i { font-size: 10px; }
.cb-turns { color: var(--text-muted); margin-left: 2px; }
/* VS column */
.cap-vs {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 4px;
}
.cap-vs-text {
font-family: var(--font-title);
font-size: 32px;
font-weight: 900;
color: var(--gold);
text-shadow:
0 0 20px rgba(233,185,99,0.5),
-2px -2px 0 rgba(0,0,0,0.7),
2px 2px 0 rgba(0,0,0,0.7);
letter-spacing: 0.05em;
animation: vsPulse 2s ease-in-out infinite;
}
@keyframes vsPulse {
0%, 100% { transform: scale(1); text-shadow: 0 0 20px rgba(233,185,99,0.5), -2px -2px 0 rgba(0,0,0,0.7), 2px 2px 0 rgba(0,0,0,0.7); }
50% { transform: scale(1.08); text-shadow: 0 0 28px rgba(233,185,99,0.8), -2px -2px 0 rgba(0,0,0,0.7), 2px 2px 0 rgba(0,0,0,0.7); }
}
.cap-turn-pill {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
background: rgba(0,0,0,0.6);
border: 1px solid var(--gold);
border-radius: 99px;
padding: 3px 10px;
font-weight: 800;
}
/* Combat log */
.cap-log-section {
position: relative;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
padding: 12px 14px;
margin-bottom: 16px;
}
.cap-log-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px dashed rgba(233,185,99,0.18);
}
.cap-log-title i { font-size: 12px; }
.cap-log {
max-height: 220px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
padding-right: 4px;
font-family: var(--font-mono);
font-size: 12.5px;
}
.cap-log::-webkit-scrollbar { width: 4px; }
.cap-log::-webkit-scrollbar-thumb { background: rgba(233,185,99,0.25); border-radius: 4px; }
.cap-log-line {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
border-radius: 6px;
line-height: 1.3;
}
.cap-log-line i { font-size: 14px; flex-shrink: 0; }
.cap-log-line b { color: var(--text); font-weight: 800; }
.cap-log-line.is-start { color: var(--gold); background: rgba(233,185,99,0.08); }
.cap-log-line.is-start i { color: var(--gold); }
.cap-log-line.is-end { color: var(--gold); background: rgba(233,185,99,0.10); justify-content: center; font-weight: 700; }
.cap-log-line.is-end i { color: var(--gold); }
.cap-log-line.is-flee { color: var(--text-muted); font-style: italic; }
.cap-log-line.is-hit-player { color: var(--mint); }
.cap-log-line.is-hit-player i { color: var(--mint); }
.cap-log-line.is-hit-player b { color: var(--mint); }
.cap-log-line.is-hit-enemy { color: var(--blood); }
.cap-log-line.is-hit-enemy i { color: var(--blood); }
.cap-log-line.is-hit-enemy b { color: var(--blood); }
.cap-log-line.is-crit {
color: var(--ember);
background: rgba(255,113,67,0.10);
border-left: 3px solid var(--ember);
font-weight: 700;
}
.cap-log-line.is-crit i { color: var(--ember); animation: critPulse 0.6s ease-in-out 2; }
.cap-log-line.is-crit b { color: var(--ember); }
@keyframes critPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.4); filter: drop-shadow(0 0 8px var(--ember)); }
}
.cap-log-line.is-ult {
color: var(--gold);
background: rgba(233,185,99,0.12);
border-left: 3px solid var(--gold);
font-weight: 700;
}
.cap-log-line.is-ult i { color: var(--gold); }
.cap-log-line.is-ult b { color: var(--gold); }
.cap-log-line.is-dodge { color: var(--cyan); font-style: italic; }
.cap-log-line.is-dodge i { color: var(--cyan); }
/* 2026-05-19: Resistencia critica del mob (PvE) */
.cap-log-line.is-crit-resist { color: #c084fc; font-style: italic; }
.cap-log-line.is-crit-resist i { color: #c084fc; }
.cap-log-line.is-crit-resist b { color: #c084fc; }
.cap-log-line.is-heal { color: var(--mint); }
.cap-log-line.is-heal i { color: var(--mint); }
.cap-log-line.is-heal b { color: var(--mint); }
.cap-log-line.is-buff { color: var(--accent); }
.cap-log-line.is-buff i { color: var(--accent); }
.cap-log-line.is-buff b { color: var(--accent); }
.cap-log-line.is-info { color: var(--text-muted); font-style: italic; }
/* Lifesteal — destacado: rojo+verde, glow, font-size un poco mayor */
.cap-log-line.is-lifesteal {
color: #e8425f;
background: linear-gradient(90deg, rgba(232,66,95,0.12), rgba(86,200,140,0.10));
border-left: 3px solid #e8425f;
font-weight: 600;
text-shadow: 0 0 8px rgba(232,66,95,0.35);
animation: lifestealPulse 0.6s ease-out;
}
.cap-log-line.is-lifesteal i { color: #e8425f; font-size: 1.1em; }
.cap-log-line.is-lifesteal .ls-val { color: #56c88c; font-size: 1.05em; }
@keyframes lifestealPulse {
0% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(232,66,95,0.45); }
60% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(232,66,95,0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232,66,95,0); }
}
/* 2026-05-24: Renacer Necrótico (undead v2) — log destacado del revive con pulse + flash */
.cap-log-line.is-rebirth {
background: linear-gradient(135deg, rgba(157, 78, 221, 0.25), rgba(86, 200, 140, 0.15), rgba(232, 66, 95, 0.15));
border: 1px solid rgba(157, 78, 221, 0.6);
border-left: 4px solid #9d4edd;
border-radius: 8px;
padding: 8px 12px;
margin: 6px 0;
box-shadow: 0 0 20px rgba(157, 78, 221, 0.45), inset 0 0 10px rgba(157, 78, 221, 0.15);
animation: rebirthPulse 1.4s ease-out;
position: relative;
overflow: hidden;
}
.cap-log-line.is-rebirth::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
animation: rebirthFlash 1.4s ease-out;
pointer-events: none;
}
.cap-log-line.is-rebirth .rebirth-title {
color: #d896ff;
font-weight: 800;
font-size: 1.05em;
letter-spacing: 0.5px;
text-shadow: 0 0 12px rgba(216, 150, 255, 0.7);
margin-bottom: 4px;
}
.cap-log-line.is-rebirth .rebirth-body {
color: #56c88c;
font-weight: 600;
}
.cap-log-line.is-rebirth .rebirth-body b {
color: #fff;
text-shadow: 0 0 6px rgba(86, 200, 140, 0.7);
}
.cap-log-line.is-rebirth .rebirth-immunity {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
background: rgba(95, 179, 255, 0.25);
border: 1px solid #5fb3ff;
border-radius: 4px;
color: #5fb3ff;
font-weight: 700;
font-size: 0.9em;
text-shadow: 0 0 4px rgba(95, 179, 255, 0.6);
}
@keyframes rebirthPulse {
0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(157, 78, 221, 0.75), inset 0 0 10px rgba(157, 78, 221, 0.15); }
40% { transform: scale(1.04); box-shadow: 0 0 28px 6px rgba(157, 78, 221, 0.55), inset 0 0 20px rgba(157, 78, 221, 0.3); }
100% { transform: scale(1); box-shadow: 0 0 20px rgba(157, 78, 221, 0.45), inset 0 0 10px rgba(157, 78, 221, 0.15); }
}
@keyframes rebirthFlash {
0% { opacity: 1; }
60% { opacity: 0.4; }
100% { opacity: 0; }
}
/* Stance block — escudo cyan, indica daño bloqueado por postura defensiva */
.cap-log-line.is-stance {
color: #5fb3ff;
background: rgba(95,179,255,0.10);
border-left: 3px solid #5fb3ff;
font-weight: 600;
}
.cap-log-line.is-stance i { color: #5fb3ff; font-size: 1.1em; }
.cap-log-line.is-stance b { color: #fff; }
/* Espinas (thorns) — daño devuelto al atacante por defensa */
.cap-log-line.is-thorns {
color: #b09cff;
background: rgba(176,156,255,0.10);
border-left: 3px solid #b09cff;
font-weight: 600;
}
.cap-log-line.is-thorns i { color: #b09cff; font-size: 1.1em; }
.cap-log-line.is-thorns b { color: #fff; }
/* 2026-06-02 T2 F8: Resist. Mágica / Def. Mágica (RES counter) — violeta */
.cap-log-line.is-spell-resist {
color: #d4b3ff;
background: rgba(184,132,255,0.10);
border-left: 3px solid #b884ff;
font-weight: 600;
}
.cap-log-line.is-spell-resist b { color: #fff; }
/* 2026-06-02 T2 F8: Resist. Debuffs (RES counter de CC) — cyan */
.cap-log-line.is-debuff-resist {
color: #a8fff0;
background: rgba(132,255,227,0.08);
border-left: 3px solid #84ffe3;
font-weight: 600;
}
.cap-log-line.is-debuff-resist b { color: #fff; }
/* Action buttons */
.cap-actions-wrap {
position: relative;
}
.cap-actions {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px;
}
.cap-action-btn {
display: grid;
grid-template-columns: 48px 1fr;
gap: 10px;
align-items: center;
padding: 10px 12px;
background: linear-gradient(180deg, rgba(20,12,40,0.85), rgba(10,6,22,0.95));
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
cursor: pointer;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
text-align: left;
position: relative;
min-height: 64px;
color: var(--text);
}
.cap-action-btn:hover:not(:disabled):not(.is-disabled) {
transform: translateY(-2px);
border-color: var(--gold);
box-shadow: 0 4px 14px rgba(233,185,99,0.18);
}
.cap-action-btn:active:not(:disabled):not(.is-disabled) { transform: scale(0.97); }
.cap-action-btn.is-disabled,
.cap-action-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
filter: grayscale(50%);
}
.cap-action-btn.primary {
border-color: rgba(225,80,90,0.4);
background: linear-gradient(180deg, rgba(58,15,18,0.7), rgba(10,6,22,0.95));
}
.cap-action-btn.primary:hover { border-color: var(--blood); box-shadow: 0 4px 18px rgba(225,80,90,0.25); }
.cap-action-btn.skill {
border-color: rgba(122,76,240,0.4);
background: linear-gradient(180deg, rgba(40,28,68,0.7), rgba(10,6,22,0.95));
}
.cap-action-btn.ultimate {
border-color: var(--gold);
background: linear-gradient(180deg, rgba(58,40,12,0.7), rgba(10,6,22,0.95));
box-shadow: 0 0 14px rgba(233,185,99,0.18);
}
.cap-action-btn.ultimate:hover { box-shadow: 0 4px 22px rgba(233,185,99,0.35); }
.cap-action-btn.flee {
border-color: rgba(255,255,255,0.15);
background: rgba(0,0,0,0.5);
}
.cab-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(0,0,0,0.6);
border: 1.5px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: var(--gold);
position: relative;
overflow: hidden;
}
.primary .cab-icon { color: var(--blood); border-color: var(--blood); }
.skill .cab-icon { color: var(--accent); border-color: var(--primary); }
.ultimate .cab-icon, .cab-icon.is-ult {
color: var(--gold);
border-color: var(--gold);
background: linear-gradient(135deg, rgba(233,185,99,0.25), rgba(122,76,240,0.10));
box-shadow: 0 0 10px rgba(233,185,99,0.3);
}
.flee .cab-icon { color: var(--text-muted); }
.cab-ability-img {
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.cab-cd-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.85);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 22px;
font-weight: 900;
color: var(--blood);
border-radius: 11px;
}
.cab-info { min-width: 0; }
.cab-name {
font-family: var(--font-title);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text);
margin-bottom: 3px;
}
.cab-meta {
display: flex;
gap: 6px;
flex-wrap: wrap;
font-size: 10px;
font-family: var(--font-mono);
}
.cab-mp, .cab-cd, .cab-lv {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 6px;
background: rgba(0,0,0,0.5);
border-radius: 99px;
font-weight: 700;
}
.cab-mp { color: var(--cyan); }
.cab-cd { color: var(--blood); }
.cab-lv { color: var(--text-muted); }
.cab-mp i, .cab-cd i { font-size: 10px; }
/* === Result screen === */
.cap-result {
position: relative;
text-align: center;
/* 2026-05-07: padding inferior reducido para que el sticky button no quede
muy lejos del último contenido. overflow-x:hidden mantiene los glows contenidos. */
padding: 32px 22px 14px;
border-radius: var(--r-xl);
overflow-x: hidden;
}
.cap-result.is-victory {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(63,214,146,0.30), transparent 65%),
linear-gradient(180deg, rgba(20,38,28,0.95), rgba(10,18,12,0.99));
border: 2px solid var(--mint);
box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 30px rgba(63,214,146,0.25);
}
.cap-result.is-draw {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(86,200,255,0.20), transparent 65%),
linear-gradient(180deg, rgba(15,28,40,0.95), rgba(10,12,22,0.99));
border: 2px solid var(--cyan);
}
.cap-result.is-defeat {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(225,80,90,0.30), transparent 65%),
linear-gradient(180deg, rgba(58,15,18,0.95), rgba(15,8,18,0.99));
border: 2px solid var(--blood);
box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 30px rgba(225,80,90,0.25);
}
.cap-result-glow {
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
width: 280px;
height: 280px;
border-radius: 50%;
filter: blur(40px);
pointer-events: none;
}
.is-victory .cap-result-glow { background: radial-gradient(circle, rgba(63,214,146,0.5), transparent 65%); }
.is-draw .cap-result-glow { background: radial-gradient(circle, rgba(86,200,255,0.5), transparent 65%); }
.is-defeat .cap-result-glow { background: radial-gradient(circle, rgba(225,80,90,0.5), transparent 65%); }
.cap-result-icon-wrap {
position: relative;
margin: 0 auto 14px;
width: 110px;
height: 110px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.cap-result-icon {
font-size: 70px;
filter: drop-shadow(0 0 20px currentColor);
z-index: 2;
}
.is-victory .cap-result-icon { color: var(--mint); animation: victoryBounce 0.8s ease-out; }
.is-draw .cap-result-icon { color: var(--cyan); }
.is-defeat .cap-result-icon { color: var(--blood); }
@keyframes victoryBounce {
0% { transform: scale(0) rotate(-180deg); }
70% { transform: scale(1.15) rotate(15deg); }
100% { transform: scale(1) rotate(0); }
}
/* Rays around the trophy */
.cap-result-rays {
position: absolute;
inset: -20px;
border-radius: 50%;
background:
conic-gradient(
from 0deg,
transparent 0deg,
rgba(63,214,146,0.4) 30deg,
transparent 60deg,
rgba(63,214,146,0.4) 120deg,
transparent 150deg,
rgba(63,214,146,0.4) 210deg,
transparent 240deg,
rgba(63,214,146,0.4) 300deg,
transparent 330deg
);
animation: rayRotate 4s linear infinite;
filter: blur(8px);
z-index: 0;
}
@keyframes rayRotate {
to { transform: rotate(360deg); }
}
.cap-result-title {
position: relative;
font-family: var(--font-title);
font-size: 36px;
font-weight: 900;
letter-spacing: 0.1em;
color: var(--text);
text-transform: uppercase;
text-shadow: 0 0 24px currentColor;
margin-bottom: 6px;
z-index: 1;
}
.is-victory .cap-result-title { color: var(--mint); }
.is-draw .cap-result-title { color: var(--cyan); }
.is-defeat .cap-result-title { color: var(--blood); }
.cap-result-sub {
position: relative;
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--text-muted);
margin-bottom: 22px;
z-index: 1;
}
/* Rewards grid — DEPRECATED 2026-05-07 v3 (reemplazado por cap-v2-stats).
Mantenido por si algún flujo legacy lo usa. */
.cap-rewards-grid {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
gap: 8px;
max-width: 480px;
margin: 0 auto 16px;
z-index: 1;
}
/* ============================================================================
CAP V2 — REDISEÑO modal de victoria (2026-05-07).
Más limpio, menos "boxy", más "trophy room" feel.
============================================================================ */
.cap-v2 {
/* Override del padding del cap-result base — más compacto */
padding: 28px 22px 14px !important;
}
.cap-v2-hero {
position: relative;
z-index: 1;
margin-bottom: 18px;
}
/* Stats inline: una fila elegante con separators (no boxy cards) */
.cap-v2-stats {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 16px;
margin: 0 auto 14px;
max-width: 420px;
background:
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18)),
rgba(0,0,0,0.35);
border: 1.5px solid rgba(255,255,255,0.10);
border-radius: var(--r-md);
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
flex-wrap: wrap;
}
.cap-v2-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
flex: 1 1 80px;
min-width: 80px;
}
.cap-v2-stat > i {
font-size: 22px;
filter: drop-shadow(0 0 8px currentColor);
}
.cap-v2-stat.is-gold > i { color: var(--gold); }
.cap-v2-stat.is-xp > i { color: var(--accent, #b884ff); }
.cap-v2-stat.is-loot > i { color: var(--cyan, #56c8ff); }
.cap-v2-stat-num {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 900;
color: var(--text);
line-height: 1.1;
letter-spacing: 0.02em;
}
.cap-v2-stat.is-gold .cap-v2-stat-num { color: var(--gold); }
.cap-v2-stat.is-xp .cap-v2-stat-num { color: var(--accent, #b884ff); }
.cap-v2-stat.is-loot .cap-v2-stat-num { color: var(--cyan, #56c8ff); }
.cap-v2-stat-lbl {
font-family: var(--font-title);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
/* Separator vertical entre stats */
.cap-v2-stat-sep {
width: 1px;
height: 36px;
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent);
flex-shrink: 0;
}
@media (max-width: 480px) {
.cap-v2-stats { gap: 8px; padding: 12px 10px; }
.cap-v2-stat-sep { display: none; }
.cap-v2-stat > i { font-size: 19px; }
.cap-v2-stat-num { font-size: 16px; }
}
/* Chips inline para level up + skill point drop (cuando aplica) */
.cap-v2-chips {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0 auto 14px;
max-width: 420px;
}
.cap-v2-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 99px;
font-size: 12px;
background: rgba(0,0,0,0.45);
border: 1.5px solid rgba(255,255,255,0.10);
}
.cap-v2-chip > i { font-size: 16px; filter: drop-shadow(0 0 6px currentColor); }
.cap-v2-chip-eyebrow {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 800;
opacity: 0.85;
}
.cap-v2-chip-text {
font-family: var(--font-mono);
font-weight: 700;
color: var(--text);
}
.cap-v2-chip-text b { font-weight: 900; }
.cap-v2-chip.is-lvup {
border-color: rgba(255,200,87,0.45);
background: linear-gradient(135deg, rgba(255,200,87,0.18), rgba(255,140,80,0.10));
color: #ffc857;
}
.cap-v2-chip.is-lvup > i { color: #ffc857; }
.cap-v2-chip.is-sp {
border-color: rgba(122,76,240,0.5);
background: linear-gradient(135deg, rgba(184,132,255,0.18), rgba(122,76,240,0.10));
color: #c2a8ff;
}
.cap-v2-chip.is-sp > i { color: #c2a8ff; }
.cap-reward {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 11px 6px 9px;
background: rgba(0,0,0,0.4);
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
min-width: 0; /* permite shrink en grid */
}
.cap-reward.is-gold { border-color: var(--gold); background: rgba(233,185,99,0.10); }
.cap-reward.is-gold > i { color: var(--gold); }
.cap-reward.is-xp { border-color: var(--primary); background: rgba(122,76,240,0.10); }
.cap-reward.is-xp > i { color: var(--accent); }
.cap-reward.is-loot { border-color: var(--cyan); background: rgba(86,200,255,0.10); }
.cap-reward.is-loot > i { color: var(--cyan); }
.cap-reward.is-loss { border-color: var(--blood); background: rgba(225,80,90,0.12); }
.cap-reward.is-loss > i { color: var(--blood); }
.cap-reward > i {
font-size: 22px;
color: var(--gold);
filter: drop-shadow(0 0 10px currentColor);
}
.cap-reward-num {
font-family: var(--font-mono);
font-size: 17px;
font-weight: 900;
color: var(--text);
line-height: 1.1;
white-space: nowrap;
}
.cap-reward.is-gold .cap-reward-num { color: var(--gold); }
.cap-reward.is-xp .cap-reward-num { color: var(--accent); }
.cap-reward.is-loot .cap-reward-num { color: var(--cyan); }
.cap-reward.is-loss .cap-reward-num { color: var(--blood); }
.cap-reward-lbl {
font-family: var(--font-title);
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Level up banner */
.cap-levelup-banner {
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 22px;
background: linear-gradient(90deg, rgba(233,185,99,0.25), rgba(63,214,146,0.18));
border: 2px solid var(--gold);
border-radius: 99px;
margin: 0 auto 18px;
box-shadow: 0 4px 18px rgba(233,185,99,0.35);
animation: levelUpPulse 1.6s ease-in-out infinite;
z-index: 1;
}
@keyframes levelUpPulse {
0%, 100% { box-shadow: 0 4px 18px rgba(233,185,99,0.35); }
50% { box-shadow: 0 4px 28px rgba(233,185,99,0.7); }
}
.cap-levelup-banner i { font-size: 28px; color: var(--gold); }
.cap-lvup-eyebrow {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--gold);
font-weight: 800;
}
.cap-lvup-text {
font-family: var(--font-title);
font-size: 16px;
font-weight: 800;
color: var(--text);
}
/* Loot section */
.cap-loot-section {
position: relative;
background: rgba(0,0,0,0.4);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px 18px;
margin: 0 auto 18px;
max-width: 480px;
text-align: left;
z-index: 1;
}
.cap-loot-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cyan);
font-weight: 800;
margin-bottom: 10px;
}
.cap-loot-title i { font-size: 14px; }
.cap-loot-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.cap-loot-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 6px;
margin-left: 6px;
border-radius: 99px;
background: rgba(0,212,255,0.18);
border: 1px solid rgba(0,212,255,0.4);
color: var(--cyan);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.06em;
}
.cap-loot-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: rgba(0,0,0,0.4);
border-left: 3px solid rgba(255,255,255,0.10);
border-radius: var(--r-sm);
font-size: 12.5px;
color: var(--text);
min-width: 0;
}
.cap-loot-item-icon { font-size: 16px; flex-shrink: 0; }
.cap-loot-item-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cap-loot-item-qty {
flex-shrink: 0;
font-family: var(--font-mono, monospace);
font-weight: 800;
color: var(--gold);
font-size: 12px;
}
/* Rarity colors on left border + icon */
.cap-loot-item.r-common { border-left-color: rgba(180,180,180,0.6); }
.cap-loot-item.r-common .cap-loot-item-icon { color: #b8b8b8; }
.cap-loot-item.r-uncommon { border-left-color: rgba(95,214,132,0.7); background: rgba(95,214,132,0.08); }
.cap-loot-item.r-uncommon .cap-loot-item-icon { color: #5fd684; }
.cap-loot-item.r-uncommon .cap-loot-item-name { color: #b6f1c8; }
.cap-loot-item.r-rare { border-left-color: rgba(108,212,255,0.7); background: rgba(108,212,255,0.08); }
.cap-loot-item.r-rare .cap-loot-item-icon { color: #6cd4ff; }
.cap-loot-item.r-rare .cap-loot-item-name { color: #b8e7ff; }
.cap-loot-item.r-epic { border-left-color: rgba(184,132,255,0.7); background: rgba(184,132,255,0.10); }
.cap-loot-item.r-epic .cap-loot-item-icon { color: #b884ff; }
.cap-loot-item.r-epic .cap-loot-item-name { color: #d8b4ff; }
.cap-loot-item.r-legendary { border-left-color: rgba(255,200,87,0.85); background: rgba(255,200,87,0.10); }
.cap-loot-item.r-legendary .cap-loot-item-icon { color: #ffc857; filter: drop-shadow(0 0 4px rgba(255,200,87,0.6)); }
.cap-loot-item.r-legendary .cap-loot-item-name { color: #ffd88a; }
.cap-loot-item.r-mythic { border-left-color: rgba(255,93,135,0.9); background: rgba(255,93,135,0.12); }
.cap-loot-item.r-mythic .cap-loot-item-icon { color: #ff5d87; filter: drop-shadow(0 0 4px rgba(255,93,135,0.7)); }
.cap-loot-item.r-mythic .cap-loot-item-name { color: #ffb1c4; }
@media (max-width: 480px) {
.cap-loot-list { grid-template-columns: 1fr; }
}
/* ============================================================
Banner especial de DROP ÚNICO (rolled item) — modal de victoria
============================================================ */
.cap-reward.is-unique {
background: linear-gradient(180deg, rgba(255,200,87,0.18), rgba(255,200,87,0.05));
border: 1px solid rgba(255,200,87,0.5);
}
.cap-reward.is-unique i { color: #ffd88a; filter: drop-shadow(0 0 8px rgba(255,200,87,0.7)); }
.cap-reward.is-unique .cap-reward-num { color: #ffd88a; }
.cap-unique-banner {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
margin: 12px 0;
border-radius: var(--r-md, 12px);
background:
radial-gradient(ellipse 70% 80% at 0% 50%, rgba(255,200,87,0.20), transparent 70%),
linear-gradient(180deg, rgba(255,200,87,0.10), rgba(255,93,135,0.06));
border: 1.5px solid rgba(255,200,87,0.55);
box-shadow: 0 6px 22px rgba(255,200,87,0.18), inset 0 0 28px rgba(255,200,87,0.08);
overflow: hidden;
animation: cubPulse 2.4s ease-in-out infinite;
}
@keyframes cubPulse {
0%, 100% { box-shadow: 0 6px 22px rgba(255,200,87,0.18), inset 0 0 28px rgba(255,200,87,0.08); }
50% { box-shadow: 0 6px 28px rgba(255,200,87,0.32), inset 0 0 36px rgba(255,200,87,0.14); }
}
/* Variante UNCOMMON — verde con accent gold */
.cap-unique-banner.is-uncommon {
background:
radial-gradient(ellipse 70% 80% at 0% 50%, rgba(95,214,132,0.22), transparent 70%),
linear-gradient(180deg, rgba(95,214,132,0.12), rgba(255,200,87,0.06));
border: 1.5px solid rgba(95,214,132,0.65);
box-shadow: 0 6px 22px rgba(95,214,132,0.22), inset 0 0 28px rgba(95,214,132,0.10);
animation: cubPulseUncommon 2.4s ease-in-out infinite;
}
@keyframes cubPulseUncommon {
0%, 100% { box-shadow: 0 6px 22px rgba(95,214,132,0.22), inset 0 0 28px rgba(95,214,132,0.10); }
50% { box-shadow: 0 6px 28px rgba(95,214,132,0.40), inset 0 0 36px rgba(95,214,132,0.18); }
}
.cap-unique-banner.is-uncommon .cub-icon { color: #5fd684; filter: drop-shadow(0 0 12px rgba(95,214,132,0.85)); }
.cap-unique-banner.is-uncommon .cub-icon-wrap { background: radial-gradient(circle, rgba(95,214,132,0.30), rgba(95,214,132,0.10) 70%, transparent); }
.cap-unique-banner.is-uncommon .cub-eyebrow { color: #5fd684; }
.cap-unique-banner.is-uncommon .cub-name { text-shadow: 0 0 10px rgba(95,214,132,0.55); }
.cap-unique-banner.is-uncommon .cud-stat { border-color: rgba(95,214,132,0.45); }
.cap-unique-banner.is-uncommon .cud-stat-val { color: #b6f1c8; }
.cub-rays {
position: absolute;
inset: -50%;
background:
repeating-conic-gradient(from 0deg at 0% 50%, rgba(255,200,87,0.18) 0deg 8deg, transparent 8deg 22deg);
filter: blur(1px);
opacity: 0.55;
pointer-events: none;
animation: cubRays 18s linear infinite;
}
@keyframes cubRays {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.cub-icon-wrap {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 54px;
height: 54px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,200,87,0.30), rgba(255,200,87,0.10) 70%, transparent);
display: flex;
align-items: center;
justify-content: center;
}
.cub-icon {
font-size: 30px;
color: #ffd88a;
filter: drop-shadow(0 0 12px rgba(255,200,87,0.85));
animation: cubIconSpin 3s linear infinite;
}
@keyframes cubIconSpin {
from { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.12); }
to { transform: rotate(360deg) scale(1); }
}
.cub-body {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
}
.cub-eyebrow {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ffd88a;
font-weight: 800;
margin-bottom: 4px;
}
.cub-name {
font-family: var(--font-title);
font-size: 16px;
font-weight: 900;
color: #fff;
text-shadow: 0 0 10px rgba(255,200,87,0.55);
margin-bottom: 6px;
line-height: 1.2;
}
.cud-suffix {
color: #ff97c4;
font-style: italic;
font-weight: 700;
}
.cub-stats {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
.cud-stat {
display: inline-flex;
align-items: baseline;
gap: 4px;
padding: 3px 9px;
border-radius: 99px;
background: rgba(0,0,0,0.40);
border: 1px solid rgba(255,200,87,0.40);
}
.cud-stat-val {
font-family: var(--font-mono, monospace);
font-size: 12px;
font-weight: 800;
color: #ffd88a;
}
.cud-stat-lbl {
font-family: var(--font-title);
font-size: 9px;
letter-spacing: 0.12em;
color: var(--text-muted, #aaa);
text-transform: uppercase;
}
.cub-note {
font-size: 10.5px;
color: var(--text-muted, #aaa);
font-style: italic;
}
@media (max-width: 480px) {
.cap-unique-banner { padding: 12px; gap: 10px; }
.cub-icon-wrap { width: 44px; height: 44px; }
.cub-icon { font-size: 24px; }
.cub-name { font-size: 14px; }
}
.cap-result-btn {
/* 2026-05-07: sticky al fondo del modal scrollable. Siempre visible aunque
el contenido (loot, unique, level up, etc.) sea muy largo. */
position: sticky;
bottom: 0;
z-index: 5;
max-width: 360px;
margin: 16px auto 0;
font-size: 14px !important;
letter-spacing: 0.1em;
min-height: 52px;
/* Sombra sutil arriba para indicar que hay contenido scrolleado debajo */
box-shadow:
0 -10px 18px -8px rgba(12,6,22,0.9),
0 6px 18px rgba(0,0,0,0.4) !important;
}
/* === Market buy panel inside item modal === */
.market-buy-panel {
background: linear-gradient(180deg, rgba(233,185,99,0.10), rgba(233,185,99,0.02));
border: 1px solid rgba(233,185,99,0.3);
border-radius: var(--r-md);
padding: 14px;
margin-top: 4px;
}
.mbp-header {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(233,185,99,0.25);
}
.mbp-header i { font-size: 14px; }
.mbp-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: 12.5px;
}
.mbp-label {
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 6px;
}
.mbp-label i { font-size: 14px; color: var(--gold); }
.mbp-val {
font-family: var(--font-mono);
font-weight: 700;
color: var(--text);
}
.mbp-val.text-gold { color: var(--gold); }
/* Stepper */
.mbp-qty-row {
margin: 12px 0;
}
.mbp-qty-label {
display: block;
font-family: var(--font-title);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 6px;
font-weight: 700;
}
.mbp-stepper {
display: grid;
grid-template-columns: 44px 36px 1fr 36px 44px 56px;
gap: 4px;
border: 1px solid rgba(233,185,99,0.25);
border-radius: var(--r-md);
background: rgba(0,0,0,0.5);
padding: 4px;
overflow: hidden;
}
.mbp-step-btn {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
color: var(--gold);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 800;
border-radius: var(--r-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
-webkit-appearance: none;
appearance: none;
transition: background 0.15s, transform 0.1s;
padding: 0;
min-height: 36px;
}
.mbp-step-btn:hover { background: rgba(233,185,99,0.18); }
.mbp-step-btn:active { transform: scale(0.92); background: rgba(233,185,99,0.3); }
.mbp-step-btn i { font-size: 13px; }
.mbp-max-btn {
background: linear-gradient(180deg, rgba(233,185,99,0.25), rgba(233,185,99,0.08));
color: var(--gold);
font-size: 11px;
letter-spacing: 0.06em;
}
.mbp-qty-input {
background: transparent;
border: none;
color: var(--text);
font-family: var(--font-mono);
font-size: 18px;
font-weight: 800;
text-align: center;
outline: none;
-moz-appearance: textfield;
min-height: 36px;
}
.mbp-qty-input::-webkit-outer-spin-button,
.mbp-qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Summary */
.mbp-summary {
padding-top: 10px;
border-top: 1px dashed rgba(233,185,99,0.25);
}
.mbp-total {
font-size: 14px;
}
.mbp-total .mbp-val {
font-size: 20px;
color: var(--gold);
text-shadow: 0 0 12px rgba(233,185,99,0.4);
}
.mbp-total .mbp-val.is-error { color: var(--blood); text-shadow: 0 0 8px rgba(225,80,90,0.4); }
.mbp-mini { font-size: 11.5px; }
.mbp-mini .mbp-val { font-size: 12.5px; color: var(--text-muted); }
.mbp-mini .mbp-val.is-error { color: var(--blood); }
.mbp-error {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin-top: 8px;
background: rgba(225,80,90,0.12);
border: 1px solid rgba(225,80,90,0.4);
border-radius: var(--r-md);
font-size: 11.5px;
color: var(--blood);
}
.mbp-error i { font-size: 14px; }
.mbp-error b { color: var(--blood); }
/* 2026-05-23: Stepper de cantidad para compra de materiales/consumibles */
.market-qty-stepper {
background: rgba(122,77,255,0.08);
border: 1px solid rgba(122,77,255,0.28);
border-radius: var(--r-md);
padding: 10px 14px;
margin-top: 8px;
margin-bottom: 8px;
}
.mqs-label {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 6px;
font-weight: 700;
}
.mqs-row {
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px;
}
.mqs-btn {
width: 32px; height: 32px;
border-radius: 8px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(232,196,106,0.32);
color: var(--gold);
display: grid; place-items: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.15s;
}
.mqs-btn:hover {
background: rgba(232,196,106,0.18);
border-color: var(--gold);
}
.mqs-btn:active { transform: scale(0.94); }
.mqs-btn i { font-size: 14px; }
.mqs-input {
flex: 1;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(232,196,106,0.22);
border-radius: 8px;
color: var(--gold);
font-family: var(--font-mono, monospace);
font-size: 17px;
font-weight: 700;
text-align: center;
padding: 4px 8px;
outline: none;
appearance: textfield;
-moz-appearance: textfield;
min-width: 60px;
}
.mqs-input::-webkit-outer-spin-button,
.mqs-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.mqs-input:focus { border-color: var(--gold); }
.mqs-max {
font-size: 12px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
white-space: nowrap;
padding-left: 2px;
}
.mqs-quick {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.mqs-quick-btn {
flex: 1;
min-width: 44px;
padding: 5px 8px;
background: rgba(0,0,0,0.32);
border: 1px solid rgba(232,196,106,0.18);
border-radius: 6px;
color: var(--text);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.mqs-quick-btn:hover {
background: rgba(232,196,106,0.16);
border-color: rgba(232,196,106,0.5);
color: var(--gold);
}
/* Compact price summary (reemplaza buy-panel — sin selector de cantidad) */
.market-price-summary {
background: linear-gradient(180deg, rgba(233,185,99,0.10), rgba(233,185,99,0.02));
border: 1px solid rgba(233,185,99,0.3);
border-radius: var(--r-md);
padding: 12px 14px;
margin-top: 4px;
}
.mps-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: 13px;
}
.mps-lbl {
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 6px;
}
.mps-lbl i { font-size: 14px; color: var(--gold); }
.mps-val {
font-family: var(--font-mono);
font-weight: 800;
color: var(--gold);
font-size: 16px;
text-shadow: 0 0 10px rgba(233,185,99,0.35);
}
.mps-val.is-error {
color: var(--blood);
text-shadow: 0 0 8px rgba(225,80,90,0.4);
}
.mps-mini { font-size: 11.5px; }
.mps-mini .mps-val { font-size: 12.5px; color: var(--text-muted); text-shadow: none; font-weight: 700; }
.mps-mini .mps-val.is-error { color: var(--blood); }
.mps-error {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin-top: 8px;
background: rgba(225,80,90,0.12);
border: 1px solid rgba(225,80,90,0.4);
border-radius: var(--r-md);
font-size: 11.5px;
color: var(--blood);
}
.mps-error i { font-size: 14px; }
.mps-error b { color: var(--blood); }
/* Tip card extra (descripción útil) */
.item-tip-card {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 13px;
background: linear-gradient(90deg, rgba(86,200,255,0.12), rgba(86,200,255,0.02));
border-left: 3px solid var(--cyan);
border-radius: var(--r-md);
margin-bottom: 10px;
}
.item-tip-card > i {
font-size: 18px;
color: var(--cyan);
flex-shrink: 0;
margin-top: 2px;
}
.item-tip-text {
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
}
.item-tip-text b { color: var(--text); }
/* Seller pill (en el detail modal) */
.mi-seller-pill {
color: var(--cyan);
border-color: rgba(86,200,255,0.4);
background: rgba(86,200,255,0.08);
}
/* ============================================================
CRAFTING SCREEN
============================================================ */
/* Tabs */
.craft-tabs {
display: flex;
gap: 8px;
margin-bottom: 18px;
}
.ct-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 18px;
background: linear-gradient(180deg, rgba(33,20,58,0.8), rgba(15,8,30,0.95));
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: var(--r-lg);
font-family: var(--font-title);
font-size: 13px;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.ct-tab i { font-size: 18px; }
.ct-tab:hover { color: var(--text); border-color: rgba(233,185,99,0.3); }
.ct-tab.active {
color: var(--gold);
border-color: rgba(233,185,99,0.5);
background: linear-gradient(180deg, rgba(233,185,99,0.18), rgba(233,185,99,0.04));
box-shadow: 0 0 20px rgba(233,185,99,0.15);
}
.ct-tab.is-locked {
opacity: 0.6;
position: relative;
}
.ct-tab.is-locked::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 8px, rgba(255,255,255,0.05) 8px 16px);
pointer-events: none;
}
.ct-lock-badge {
font-size: 11px !important;
letter-spacing: 0;
padding: 0 !important;
background: rgba(225,80,90,0.15);
color: var(--blood);
border-radius: 99px;
width: 22px;
height: 22px;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin-left: 4px;
}
.ct-lock-badge i { font-size: 12px !important; }
/* Header card with attempts */
.craft-header-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 16px 20px;
background: linear-gradient(135deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1.5px solid rgba(233,185,99,0.3);
border-radius: var(--r-xl);
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.craft-header-card::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(233,185,99,0.15), transparent 70%);
pointer-events: none;
}
.ch-info { flex: 1; min-width: 0; }
.ch-perks {
display: flex;
gap: 6px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.ch-perk-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 99px;
font-family: var(--font-title);
font-size: 10.5px;
letter-spacing: 0.1em;
font-weight: 800;
text-transform: uppercase;
}
.ch-perk-badge.is-vip {
background: linear-gradient(90deg, rgba(233,185,99,0.25), rgba(233,185,99,0.08));
color: var(--gold);
border: 1px solid rgba(233,185,99,0.5);
}
.ch-perk-badge.is-lvl {
background: linear-gradient(90deg, rgba(86,200,255,0.2), rgba(86,200,255,0.05));
color: var(--cyan);
border: 1px solid rgba(86,200,255,0.4);
}
.ch-perk-badge i { font-size: 12px; }
.ch-perk-detail {
font-size: 12px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 6px;
}
.ch-perk-detail i { font-size: 13px; color: var(--text-dim); }
.ch-attempts {
text-align: center;
flex-shrink: 0;
}
.cha-num {
font-family: var(--font-title);
font-size: 32px;
font-weight: 900;
color: var(--gold);
text-shadow: 0 0 16px rgba(233,185,99,0.4);
line-height: 1;
}
.cha-divider {
font-size: 18px;
color: var(--text-dim);
font-weight: 600;
margin: 0 2px;
}
.cha-lbl {
font-size: 10.5px;
color: var(--text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 4px;
font-family: var(--font-title);
font-weight: 700;
}
.cha-success {
font-size: 11px;
color: var(--green);
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
justify-content: center;
}
.cha-success i { font-size: 13px; }
/* Recipe card */
.craft-recipe-card {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1.5px solid rgba(184,132,255,0.4);
border-radius: var(--r-xl);
padding: 20px 22px;
margin-bottom: 20px;
box-shadow: 0 0 24px rgba(184,132,255,0.12);
}
.cr-header {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px dashed rgba(184,132,255,0.2);
}
.cr-header > i {
font-size: 28px;
color: #b884ff;
flex-shrink: 0;
margin-top: 2px;
}
.cr-title {
font-family: var(--font-title);
font-size: 17px;
letter-spacing: 0.06em;
font-weight: 800;
color: #b884ff;
margin-bottom: 4px;
}
.cr-sub {
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.4;
}
.cr-ingredients {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.cri {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px;
background: rgba(0,0,0,0.4);
border: 1.5px solid var(--rar-color, rgba(255,255,255,0.1));
border-radius: var(--r-md);
min-width: 100px;
position: relative;
}
.cri.r-common { --rar-color: rgba(180,180,180,0.4); }
.cri.r-uncommon { --rar-color: rgba(95,214,132,0.5); box-shadow: 0 0 12px rgba(95,214,132,0.15); }
.cri.r-rare { --rar-color: rgba(86,166,255,0.5); box-shadow: 0 0 12px rgba(86,166,255,0.15); }
.cri.r-epic { --rar-color: rgba(184,132,255,0.5); box-shadow: 0 0 12px rgba(184,132,255,0.15); }
.cri.r-legendary { --rar-color: rgba(255,170,80,0.5); box-shadow: 0 0 12px rgba(255,170,80,0.15); }
.cri-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.4);
border-radius: var(--r-sm);
margin-bottom: 8px;
overflow: hidden;
}
.cri-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.cri-icon i {
font-size: 24px;
color: var(--rar-color, var(--gold));
}
.cri-qty {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 800;
color: var(--gold);
margin-bottom: 2px;
}
.cri-name {
font-size: 11.5px;
text-align: center;
font-weight: 600;
line-height: 1.2;
}
.cri-name.r-common { color: #c0c0c0; }
.cri-name.r-uncommon { color: #5fd684; }
.cri-name.r-rare { color: #56a6ff; }
.cri-name.r-epic { color: #b884ff; }
.cri-name.r-legendary { color: #ffaa50; }
/* Reward info */
.cr-rewards {
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed rgba(184,132,255,0.2);
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.crw-lbl {
font-size: 12px;
color: var(--text-muted);
letter-spacing: 0.06em;
font-family: var(--font-title);
text-transform: uppercase;
}
.crw-options {
display: flex;
align-items: center;
gap: 10px;
}
.crw-opt {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: rgba(233,185,99,0.12);
border: 1px solid rgba(233,185,99,0.35);
border-radius: 99px;
font-size: 13px;
color: var(--gold);
font-family: var(--font-mono);
font-weight: 700;
}
.crw-opt i { font-size: 14px; }
.crw-or {
color: var(--text-dim);
font-style: italic;
font-size: 12px;
}
/* Section title */
.craft-section-title {
display: flex;
align-items: center;
gap: 10px;
margin: 22px 0 12px;
font-family: var(--font-title);
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
}
.craft-section-title i { font-size: 16px; }
.craft-section-title .cs-hint {
margin-left: auto;
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.04em;
text-transform: none;
font-weight: 500;
font-style: italic;
}
/* Slots grid — desktop: 6 slots ocupando todo el ancho */
.craft-slots {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
margin-bottom: 18px;
width: 100%;
}
.craft-slot {
position: relative;
aspect-ratio: 1;
background: linear-gradient(180deg, rgba(33,20,58,0.6), rgba(15,8,30,0.85));
border: 2px dashed rgba(233,185,99,0.3);
border-radius: var(--r-lg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
overflow: hidden;
}
.craft-slot.is-empty {
flex-direction: column;
gap: 6px;
}
.craft-slot.is-empty > i {
font-size: 38px;
color: var(--text-dim);
transition: color 0.2s;
}
.craft-slot:hover {
border-color: rgba(233,185,99,0.7);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(233,185,99,0.2);
}
.craft-slot:hover > i { color: var(--gold); }
.craft-slot .cs-num {
position: absolute;
top: 6px;
left: 8px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
background: rgba(0,0,0,0.5);
padding: 1px 6px;
border-radius: 99px;
font-weight: 700;
}
/* 2026-05-12: qty badge cuando un slot tiene más de 1 unidad */
.craft-slot .cs-qty {
position: absolute;
top: 6px;
right: 8px;
font-family: 'Cinzel', serif;
font-size: 13px;
color: var(--gold);
background: rgba(0,0,0,0.7);
padding: 1px 8px;
border-radius: 99px;
font-weight: 800;
border: 1px solid rgba(212,175,55,0.5);
}
/* 2026-05-12: control ± para ajustar qty del slot inline */
.craft-slot .cs-qty-ctrl {
display: inline-flex;
align-items: center;
gap: 2px;
background: rgba(0,0,0,0.75);
border: 1px solid rgba(212,175,55,0.5);
border-radius: 99px;
padding: 1px 2px;
margin-top: 4px;
}
.craft-slot .cs-qty-btn {
background: transparent;
border: 0;
color: var(--gold);
font-size: 16px;
font-weight: 800;
width: 22px;
height: 22px;
border-radius: 50%;
cursor: pointer;
padding: 0;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.craft-slot .cs-qty-btn:hover:not(:disabled) {
background: rgba(212,175,55,0.18);
}
.craft-slot .cs-qty-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.craft-slot .cs-qty-val {
font-family: 'Cinzel', serif;
font-size: 13px;
color: var(--gold);
font-weight: 800;
min-width: 28px;
text-align: center;
}
.craft-slot.is-filled {
border-style: solid;
flex-direction: column;
padding: 8px;
gap: 4px;
}
.craft-slot.is-filled.r-common { border-color: rgba(180,180,180,0.5); }
.craft-slot.is-filled.r-uncommon { border-color: rgba(95,214,132,0.6); box-shadow: 0 0 16px rgba(95,214,132,0.2); }
.craft-slot.is-filled.r-rare { border-color: rgba(86,166,255,0.6); box-shadow: 0 0 16px rgba(86,166,255,0.2); }
.craft-slot.is-filled.r-epic { border-color: rgba(184,132,255,0.6); box-shadow: 0 0 16px rgba(184,132,255,0.2); }
.cs-img {
width: 64px;
height: 64px;
background-size: cover;
background-position: center;
border-radius: var(--r-sm);
}
.cs-fa { font-size: 42px; color: var(--gold); }
.cs-name {
font-size: 11.5px;
text-align: center;
line-height: 1.2;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
margin-top: 4px;
padding: 0 4px;
}
.cs-name.r-common { color: #c0c0c0; }
.cs-name.r-uncommon { color: #5fd684; }
.cs-name.r-rare { color: #56a6ff; }
.cs-name.r-epic { color: #b884ff; }
/* Reward selector */
.craft-reward-selector {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 18px;
}
.crs-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(180deg, rgba(33,20,58,0.8), rgba(15,8,30,0.95));
border: 2px solid rgba(255,255,255,0.08);
border-radius: var(--r-lg);
cursor: pointer;
transition: all 0.2s;
text-align: left;
}
.crs-btn:hover { border-color: rgba(233,185,99,0.4); }
.crs-btn.active {
border-color: var(--gold);
background: linear-gradient(180deg, rgba(233,185,99,0.2), rgba(233,185,99,0.05));
box-shadow: 0 0 22px rgba(233,185,99,0.3);
}
.crs-btn i {
font-size: 30px;
color: var(--gold);
}
.crs-text { flex: 1; min-width: 0; }
.crs-lbl {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
margin-bottom: 2px;
}
.crs-amt {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 800;
color: var(--gold);
}
.crs-btn.active .crs-amt {
text-shadow: 0 0 10px rgba(233,185,99,0.5);
}
/* Action buttons */
.craft-actions {
display: flex;
gap: 10px;
margin-bottom: 24px;
}
.craft-actions .btn-ghost { flex: 0 0 auto; }
.craft-actions .btn-gold { flex: 1; padding: 14px; font-size: 14px; }
.craft-actions .btn i { font-size: 18px; }
/* Materials grid */
.craft-materials-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
margin-bottom: 24px;
}
.craft-material-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
background: linear-gradient(180deg, rgba(33,20,58,0.7), rgba(15,8,30,0.9));
border: 1px solid var(--rar-color, rgba(255,255,255,0.08));
border-radius: var(--r-md);
transition: transform 0.2s;
}
.craft-material-card.r-common { --rar-color: rgba(180,180,180,0.3); }
.craft-material-card.r-uncommon { --rar-color: rgba(95,214,132,0.4); }
.craft-material-card.r-rare { --rar-color: rgba(86,166,255,0.5); }
.craft-material-card.r-epic { --rar-color: rgba(184,132,255,0.5); }
.craft-material-card:hover { transform: translateY(-2px); }
.cmc-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.4);
border-radius: var(--r-sm);
flex-shrink: 0;
overflow: hidden;
}
.cmc-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.cmc-icon i { font-size: 20px; color: var(--gold); }
.cmc-name {
font-size: 11.5px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmc-name.r-common { color: #c0c0c0; }
.cmc-name.r-uncommon { color: #5fd684; }
.cmc-name.r-rare { color: #56a6ff; }
.cmc-name.r-epic { color: #b884ff; }
.cmc-qty {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 800;
color: var(--gold);
margin-left: auto;
flex-shrink: 0;
}
/* Picker modal */
.craft-picker-modal {
width: 90%;
max-width: 500px;
max-height: 75vh;
overflow-y: auto;
padding: 18px;
background: linear-gradient(180deg, rgba(20,12,40,0.98), rgba(10,4,20,1));
border: 1.5px solid rgba(233,185,99,0.3);
border-radius: var(--r-xl);
}
.craft-picker-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px dashed rgba(233,185,99,0.2);
}
.cph-title {
font-family: var(--font-title);
font-size: 14px;
letter-spacing: 0.08em;
color: var(--gold);
font-weight: 800;
display: flex;
align-items: center;
gap: 8px;
}
.cph-title i { font-size: 18px; }
.craft-picker-close {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: var(--text-muted);
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.craft-picker-close:hover { color: var(--blood); border-color: var(--blood); }
.craft-picker-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.craft-picker-mat {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--rar-color, rgba(255,255,255,0.08));
border-radius: var(--r-md);
cursor: pointer;
transition: all 0.2s;
text-align: left;
}
.craft-picker-mat.r-common { --rar-color: rgba(180,180,180,0.3); }
.craft-picker-mat.r-uncommon { --rar-color: rgba(95,214,132,0.4); }
.craft-picker-mat.r-rare { --rar-color: rgba(86,166,255,0.5); }
.craft-picker-mat.r-epic { --rar-color: rgba(184,132,255,0.5); }
.craft-picker-mat:hover:not(.is-disabled) {
background: rgba(255,255,255,0.05);
transform: translateX(4px);
}
.craft-picker-mat.is-disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cpm-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.5);
border-radius: var(--r-sm);
flex-shrink: 0;
overflow: hidden;
}
.cpm-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.cpm-icon i { font-size: 22px; color: var(--gold); }
.cpm-info { flex: 1; min-width: 0; }
.cpm-name {
font-size: 13px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 2px;
}
.cpm-name.r-common { color: #c0c0c0; }
.cpm-name.r-uncommon { color: #5fd684; }
.cpm-name.r-rare { color: #56a6ff; }
.cpm-name.r-epic { color: #b884ff; }
.cpm-qty {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--text-muted);
}
/* Qty picker modal */
.craft-qty-modal {
width: 90%;
max-width: 380px;
padding: 18px;
background: linear-gradient(180deg, rgba(20,12,40,0.98), rgba(10,4,20,1));
border: 1.5px solid rgba(233,185,99,0.3);
border-radius: var(--r-xl);
}
.cqm-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--rar-color, rgba(255,255,255,0.1));
border-radius: var(--r-md);
margin-bottom: 14px;
}
.cqm-item.r-common { --rar-color: rgba(180,180,180,0.3); }
.cqm-item.r-uncommon { --rar-color: rgba(95,214,132,0.4); }
.cqm-item.r-rare { --rar-color: rgba(86,166,255,0.5); }
.cqm-item.r-epic { --rar-color: rgba(184,132,255,0.5); }
.cqm-name {
font-size: 13.5px;
font-weight: 700;
margin-bottom: 2px;
}
.cqm-name.r-common { color: #c0c0c0; }
.cqm-name.r-uncommon { color: #5fd684; }
.cqm-name.r-rare { color: #56a6ff; }
.cqm-name.r-epic { color: #b884ff; }
.cqm-max {
font-size: 11.5px;
color: var(--text-muted);
font-family: var(--font-mono);
}
.cqm-qty-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.cqm-qty-btn {
padding: 12px 0;
background: rgba(233,185,99,0.1);
border: 1.5px solid rgba(233,185,99,0.35);
color: var(--gold);
font-family: var(--font-mono);
font-size: 16px;
font-weight: 800;
border-radius: var(--r-md);
cursor: pointer;
transition: all 0.15s;
}
.cqm-qty-btn:hover {
background: rgba(233,185,99,0.25);
transform: scale(1.05);
}
/* ============================================================
LOCKED TAB — Mejora de armas
============================================================ */
.craft-locked-hero {
padding: 40px 24px;
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1.5px solid rgba(233,185,99,0.3);
border-radius: var(--r-xl);
text-align: center;
position: relative;
overflow: hidden;
}
.clh-particles {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.clh-particle {
position: absolute;
width: 4px;
height: 4px;
background: var(--gold);
border-radius: 50%;
opacity: 0.4;
animation: clhFloat 6s ease-in-out infinite;
left: calc(var(--i) * 10%);
bottom: -10px;
animation-delay: calc(var(--i) * -0.5s);
}
@keyframes clhFloat {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
50% { transform: translateY(-200px) scale(1.5); opacity: 0; }
}
.clh-anvil {
position: relative;
z-index: 2;
width: 110px;
height: 110px;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle, rgba(233,185,99,0.25), transparent 70%);
border-radius: 50%;
}
.clh-anvil i {
font-size: 84px;
color: var(--gold);
filter: drop-shadow(0 0 16px rgba(233,185,99,0.5));
}
.clh-lock-overlay {
position: absolute;
top: 80px;
left: 50%;
transform: translateX(60px);
z-index: 3;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--blood), #8a3033);
border: 3px solid #1a0810;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(225,80,90,0.5);
}
.clh-lock-overlay i {
font-size: 22px;
color: white;
}
.clh-title {
font-family: var(--font-title);
font-size: 26px;
font-weight: 900;
letter-spacing: 0.18em;
color: var(--gold);
margin-bottom: 4px;
text-shadow: 0 0 18px rgba(233,185,99,0.4);
position: relative;
z-index: 2;
}
.clh-sub {
font-family: var(--font-cormorant);
font-style: italic;
font-size: 16px;
color: var(--text-muted);
margin-bottom: 28px;
position: relative;
z-index: 2;
}
.clh-features {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 24px;
position: relative;
z-index: 2;
}
.clh-feature {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(233,185,99,0.2);
border-radius: var(--r-md);
text-align: left;
}
.clh-feature i {
font-size: 22px;
color: var(--gold);
flex-shrink: 0;
}
.clh-feature > div {
font-size: 13px;
color: var(--text);
line-height: 1.4;
}
.clh-date-box {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 22px;
background: linear-gradient(135deg, rgba(225,80,90,0.18), rgba(225,80,90,0.05));
border: 1.5px solid rgba(225,80,90,0.4);
border-radius: var(--r-lg);
position: relative;
z-index: 2;
}
.clh-date-box i {
font-size: 30px;
color: var(--blood);
}
.clhd-lbl {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--text-muted);
text-transform: uppercase;
font-weight: 700;
text-align: left;
}
.clhd-date {
font-family: var(--font-title);
font-size: 18px;
font-weight: 900;
color: var(--blood);
letter-spacing: 0.06em;
margin-top: 2px;
}
/* Mobile adjustments */
body.mobile-mode .craft-slots {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
max-width: 100%;
}
body.mobile-mode .craft-slot { max-width: none; }
body.mobile-mode .craft-slot.is-empty > i { font-size: 32px; }
body.mobile-mode .cs-img { width: 56px; height: 56px; }
body.mobile-mode .cs-fa { font-size: 36px; }
body.mobile-mode .cs-name { font-size: 11px; }
body.mobile-mode .craft-reward-selector {
grid-template-columns: 1fr;
}
/* 2026-05-19: rediseño mobile — tabs en grid 2 cols compacto, no apilados.
El 5to tab (si total impar) ocupa el ancho completo para no quedar solo. */
body.mobile-mode .craft-tabs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin-bottom: 10px;
}
body.mobile-mode .ct-tab {
padding: 9px 6px;
font-size: 10.5px;
letter-spacing: 0.03em;
gap: 5px;
min-height: 42px;
border-width: 1px;
border-radius: 10px;
}
body.mobile-mode .ct-tab i { font-size: 13px; }
body.mobile-mode .ct-tab span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
body.mobile-mode .ct-tab:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
body.mobile-mode .ct-lock-badge {
width: 16px;
height: 16px;
font-size: 9px !important;
}
/* Recetas: nombres más legibles, padding compacto */
body.mobile-mode .cri-name {
font-size: 10.5px;
line-height: 1.15;
word-break: break-word;
hyphens: auto;
}
body.mobile-mode .cri-qty {
font-size: 14px;
margin-bottom: 1px;
}
body.mobile-mode .cri {
min-width: 0;
padding: 8px 6px;
}
body.mobile-mode .craft-header-card {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
body.mobile-mode .ch-attempts {
border-top: 1px dashed rgba(233,185,99,0.2);
padding-top: 14px;
}
body.mobile-mode .craft-materials-grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
body.mobile-mode .cri-icon {
width: 40px;
height: 40px;
}
body.mobile-mode .cqm-qty-row {
grid-template-columns: repeat(5, 1fr);
}
body.mobile-mode .clh-title { font-size: 22px; }
body.mobile-mode .clh-anvil { width: 90px; height: 90px; }
body.mobile-mode .clh-anvil i { font-size: 64px; }
/* ============================================================
CRAFTING RESULT MODAL
============================================================ */
.craft-result-modal {
width: 90%;
max-width: 420px;
padding: 32px 28px 24px;
background: linear-gradient(180deg, rgba(20,12,40,0.98), rgba(10,4,20,1));
border: 2px solid rgba(255,255,255,0.1);
border-radius: var(--r-xl);
text-align: center;
position: relative;
overflow: hidden;
}
.craft-result-modal.is-success {
border-color: rgba(95,214,132,0.5);
box-shadow: 0 0 40px rgba(95,214,132,0.25), 0 12px 40px rgba(0,0,0,0.5);
}
.craft-result-modal.is-fail {
border-color: rgba(225,80,90,0.5);
box-shadow: 0 0 40px rgba(225,80,90,0.2), 0 12px 40px rgba(0,0,0,0.5);
}
.crm-glow {
position: absolute;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 60%);
pointer-events: none;
z-index: 0;
}
.craft-result-modal.is-success .crm-glow {
background: radial-gradient(circle, rgba(95,214,132,0.18), transparent 60%);
}
.craft-result-modal.is-fail .crm-glow {
background: radial-gradient(circle, rgba(225,80,90,0.18), transparent 60%);
}
.crm-icon {
position: relative;
z-index: 1;
margin-bottom: 16px;
}
.crm-icon i {
font-size: 80px;
filter: drop-shadow(0 0 20px currentColor);
}
.craft-result-modal.is-success .crm-icon i { color: #5fd684; }
.craft-result-modal.is-fail .crm-icon i { color: var(--blood); }
.crm-title {
position: relative;
z-index: 1;
font-family: var(--font-title);
font-size: 22px;
font-weight: 900;
letter-spacing: 0.06em;
margin-bottom: 8px;
}
.craft-result-modal.is-success .crm-title { color: #5fd684; }
.craft-result-modal.is-fail .crm-title { color: var(--blood); }
.crm-msg {
position: relative;
z-index: 1;
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.5;
margin-bottom: 18px;
padding: 0 8px;
}
.crm-reward {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 14px 24px;
background: linear-gradient(135deg, rgba(233,185,99,0.18), rgba(233,185,99,0.05));
border: 1.5px solid rgba(233,185,99,0.5);
border-radius: var(--r-lg);
margin-bottom: 18px;
box-shadow: 0 0 22px rgba(233,185,99,0.2);
}
.crm-reward > i {
font-size: 38px;
color: var(--gold);
filter: drop-shadow(0 0 10px rgba(233,185,99,0.5));
}
.crm-reward-info { text-align: left; }
.crm-reward-amt {
font-family: var(--font-mono);
font-size: 26px;
font-weight: 900;
color: var(--gold);
line-height: 1;
text-shadow: 0 0 14px rgba(233,185,99,0.4);
}
.crm-reward-lbl {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 4px;
font-weight: 700;
}
.crm-close-btn {
position: relative;
z-index: 1;
width: 100%;
padding: 12px;
}
/* ============================================================
WORLD BOSS — card + modal
============================================================ */
.wb-card {
position: relative;
display: block;
padding: 22px 24px;
margin-bottom: 18px;
background: linear-gradient(135deg, rgba(80,15,25,0.95) 0%, rgba(35,8,18,0.98) 100%);
border: 2px solid rgba(225,80,90,0.55);
border-radius: var(--r-xl);
cursor: pointer;
overflow: hidden;
transition: all .25s;
box-shadow: 0 12px 36px rgba(225,80,90,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}
.wb-card:hover {
transform: translateY(-3px);
border-color: rgba(225,80,90,0.85);
box-shadow: 0 18px 48px rgba(225,80,90,0.4);
}
.wb-card-bg {
position: absolute; inset: 0;
background: radial-gradient(ellipse at 80% 20%, rgba(255,90,100,0.18), transparent 60%);
pointer-events: none;
}
.wb-card-particles {
position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.wb-spark {
position: absolute;
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(255,120,90,0.7);
box-shadow: 0 0 10px rgba(255,90,90,0.8);
bottom: 0;
left: calc((var(--i) / 8) * 100%);
animation: wbSpark 5s linear infinite;
animation-delay: calc(var(--i) * 0.4s);
opacity: 0;
}
@keyframes wbSpark {
0% { transform: translateY(0) scale(0.5); opacity: 0; }
20% { opacity: 1; }
100% { transform: translateY(-200px) scale(1.2); opacity: 0; }
}
.wb-eyebrow {
position: relative; z-index: 1;
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px;
background: rgba(225,80,90,0.25);
border: 1px solid rgba(225,80,90,0.55);
border-radius: 99px;
font-family: var(--font-cinzel, 'Cinzel', serif);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.14em;
color: #ffd0d3;
margin-bottom: 14px;
animation: wbPulse 2s ease-in-out infinite;
}
.wb-eyebrow > i { font-size: 13px; color: #ff8088; }
@keyframes wbPulse {
0%, 100% { box-shadow: 0 0 0 rgba(225,80,90,0); }
50% { box-shadow: 0 0 16px rgba(225,80,90,0.5); }
}
.wb-content {
position: relative; z-index: 1;
display: flex;
align-items: center;
gap: 18px;
}
.wb-portrait {
width: 72px; height: 72px;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle, rgba(225,80,90,0.4), rgba(80,15,25,0.6));
border: 2px solid rgba(225,80,90,0.6);
border-radius: 50%;
flex-shrink: 0;
font-size: 38px;
color: #ff8088;
filter: drop-shadow(0 0 16px rgba(225,80,90,0.6));
}
.wb-info { flex: 1; min-width: 0; }
.wb-name {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 800;
font-size: 22px;
color: #fff;
letter-spacing: 0.02em;
margin-bottom: 6px;
text-shadow: 0 0 14px rgba(255,80,90,0.4);
}
.wb-meta {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 10px;
}
.wb-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 99px;
font-size: 11.5px;
color: rgba(220,210,200,0.85);
}
.wb-pill > i { font-size: 12px; }
.wb-hp-wrap { width: 100%; }
.wb-hp-bar {
width: 100%;
height: 12px;
background: rgba(0,0,0,0.55);
border-radius: 99px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
margin-bottom: 4px;
}
.wb-hp-fill {
height: 100%;
background: linear-gradient(90deg, #5fdca5, #f0c97c, #e1505a);
background-size: 300% 100%;
background-position: 100% 0;
border-radius: 99px;
box-shadow: 0 0 12px rgba(225,80,90,0.5);
transition: width 0.4s ease;
}
.wb-hp-fill.is-low { background-position: 50% 0; }
.wb-hp-fill.is-critical { background-position: 0 0; }
.wb-hp-text {
display: flex; justify-content: space-between;
font-family: var(--font-mono, monospace);
font-size: 11.5px;
color: rgba(220,210,200,0.7);
}
.wb-hp-text > span:first-child {
display: inline-flex; align-items: center; gap: 4px;
}
.wb-hp-text > span:first-child > i { color: #ff8088; }
.wb-hp-pct { font-weight: 700; color: #fff; }
.wb-cta {
display: flex; align-items: center; gap: 8px;
margin-top: 10px;
padding: 10px 14px;
background: linear-gradient(90deg, rgba(225,80,90,0.18), rgba(225,80,90,0.04));
border: 1px solid rgba(225,80,90,0.35);
border-radius: var(--r-md);
font-size: 12.5px;
color: rgba(255,210,210,0.92);
}
.wb-cta > i:first-child { color: #ff8088; }
.wb-cta > i:last-child { margin-left: auto; opacity: 0.7; }
/* World Boss Modal */
.wb-modal-overlay {
background: rgba(0,0,0,0.78);
}
.wb-modal {
width: 92%;
max-width: 540px;
max-height: 88vh;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(35,12,22,0.98), rgba(15,4,10,1));
border: 2px solid rgba(225,80,90,0.45);
border-radius: var(--r-xl);
position: relative;
overflow: hidden;
box-shadow: 0 32px 70px rgba(0,0,0,0.7), 0 0 60px rgba(225,80,90,0.2);
}
.wb-modal-close {
position: absolute;
top: 10px; right: 10px;
z-index: 5;
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
color: var(--text);
cursor: pointer;
font-size: 16px;
}
.wb-modal-close:hover { background: rgba(225,80,90,0.3); border-color: rgba(225,80,90,0.6); }
.wb-modal-hero {
padding: 32px 24px 18px;
text-align: center;
background: radial-gradient(ellipse at top, rgba(225,80,90,0.18), transparent 60%);
border-bottom: 1px solid rgba(225,80,90,0.2);
}
.wb-modal-portrait {
width: 88px; height: 88px;
margin: 0 auto 10px;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle, rgba(225,80,90,0.4), rgba(35,8,18,0.8));
border: 3px solid rgba(225,80,90,0.6);
border-radius: 50%;
font-size: 46px;
color: #ff8088;
filter: drop-shadow(0 0 18px rgba(225,80,90,0.65));
animation: wbPortraitPulse 2.5s ease-in-out infinite;
}
@keyframes wbPortraitPulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 18px rgba(225,80,90,0.65)); }
50% { transform: scale(1.04); filter: drop-shadow(0 0 26px rgba(225,80,90,0.85)); }
}
.wb-modal-name {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 800;
font-size: 24px;
color: #fff;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.wb-modal-meta {
display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
}
.wb-modal-body {
flex: 1;
overflow-y: auto;
padding: 18px 22px;
}
.wb-last-hit {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
margin-bottom: 16px;
background: linear-gradient(90deg, rgba(255,170,80,0.15), rgba(225,80,90,0.08));
border: 1px solid rgba(255,170,80,0.4);
border-radius: var(--r-md);
}
.wb-last-hit > i { font-size: 26px; color: #ffaa50; }
.wb-lh-num {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 800;
font-size: 22px;
color: #ffaa50;
}
.wb-lh-lbl {
font-size: 11.5px;
color: rgba(220,210,200,0.6);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.wb-section-title {
display: flex; align-items: center; gap: 8px;
margin: 14px 0 10px;
font-family: var(--font-cinzel, 'Cinzel', serif);
font-size: 14px;
font-weight: 700;
color: var(--gold);
letter-spacing: 0.05em;
}
.wb-section-title > i { font-size: 16px; }
.wb-section-meta {
margin-left: auto;
font-size: 11px;
font-family: var(--font-mono, monospace);
color: rgba(220,210,200,0.6);
letter-spacing: 0.04em;
}
.wb-rewards-section { margin-bottom: 6px; }
.wb-rewards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.wb-reward-cell {
padding: 12px 10px;
background: rgba(15,5,20,0.65);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
text-align: center;
}
.wb-reward-cell.rank-1 { border-color: rgba(255,215,0,0.5); background: linear-gradient(180deg, rgba(255,215,0,0.12), rgba(15,5,20,0.65)); }
.wb-reward-cell.rank-2 { border-color: rgba(192,192,192,0.5); background: linear-gradient(180deg, rgba(192,192,192,0.12), rgba(15,5,20,0.65)); }
.wb-reward-cell.rank-3 { border-color: rgba(205,127,50,0.5); background: linear-gradient(180deg, rgba(205,127,50,0.12), rgba(15,5,20,0.65)); }
.wb-rank {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 800;
font-size: 18px;
color: var(--gold);
margin-bottom: 6px;
}
.wb-reward-cell.rank-1 .wb-rank { color: #ffd700; }
.wb-reward-cell.rank-2 .wb-rank { color: #c0c0c0; }
.wb-reward-cell.rank-3 .wb-rank { color: #cd7f32; }
.wb-rwd {
display: flex; align-items: center; justify-content: center; gap: 4px;
font-size: 12px;
font-weight: 700;
color: var(--text);
margin-top: 3px;
}
.wb-rwd > i { font-size: 13px; color: var(--gold); }
.wb-leaderboard {
display: flex;
flex-direction: column;
gap: 4px;
}
.wb-lb-empty {
padding: 20px;
text-align: center;
color: rgba(220,210,200,0.5);
font-style: italic;
font-size: 13px;
}
.wb-lb-row {
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(15,5,20,0.45);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-sm);
}
.wb-lb-row.is-me {
background: rgba(233,185,99,0.12);
border-color: rgba(233,185,99,0.4);
box-shadow: 0 0 16px rgba(233,185,99,0.18);
}
.wb-lb-row.rank-top { border-color: rgba(255,215,0,0.3); }
.wb-lb-rank {
font-family: var(--font-cinzel, 'Cinzel', serif);
font-weight: 800;
font-size: 14px;
color: var(--gold);
text-align: center;
}
.wb-lb-info { min-width: 0; }
.wb-lb-name {
font-size: 13px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wb-lb-you {
color: var(--gold);
font-weight: 600;
font-size: 11px;
}
.wb-lb-meta {
font-size: 10.5px;
color: rgba(220,210,200,0.55);
margin-top: 1px;
}
.wb-lb-damage {
font-family: var(--font-mono, monospace);
font-size: 13px;
font-weight: 700;
color: #ff8088;
}
.wb-lb-row.is-me .wb-lb-damage { color: var(--gold); }
.wb-modal-actions {
padding: 14px 22px 18px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.wb-attack-btn {
background: linear-gradient(135deg, #c83040 0%, #e1505a 50%, #c83040 100%);
background-size: 200% 100%;
border-color: rgba(225,80,90,0.7);
box-shadow: 0 8px 24px rgba(225,80,90,0.4);
}
.wb-attack-btn:hover:not(:disabled) {
background-position: 100% 0;
box-shadow: 0 12px 32px rgba(225,80,90,0.55);
transform: translateY(-1px);
}
/* Mobile responsive */
@media (max-width: 720px) {
.wb-card { padding: 16px 14px; }
.wb-content { gap: 12px; }
.wb-portrait { width: 56px; height: 56px; font-size: 28px; }
.wb-name { font-size: 17px; }
.wb-pill { font-size: 10.5px; padding: 2px 8px; }
.wb-cta { font-size: 11.5px; padding: 8px 10px; }
.wb-modal-portrait { width: 70px; height: 70px; font-size: 34px; }
.wb-modal-name { font-size: 19px; }
.wb-rewards-grid { grid-template-columns: 1fr; }
.wb-rwd { font-size: 11px; }
}
/* ============================================================
FREE GEMS SCREEN
============================================================ */
.fg-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 22px;
}
.fgs-cell {
padding: 16px 14px;
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: var(--r-lg);
text-align: center;
transition: transform 0.2s;
}
.fgs-cell:hover { transform: translateY(-2px); }
.fgs-cell.is-gems { border-color: rgba(184,132,255,0.4); box-shadow: 0 0 18px rgba(184,132,255,0.15); }
.fgs-cell.is-gold { border-color: rgba(233,185,99,0.4); box-shadow: 0 0 18px rgba(233,185,99,0.15); }
.fgs-cell > i {
font-size: 26px;
color: var(--gold);
margin-bottom: 8px;
}
.fgs-cell.is-gems > i { color: #b884ff; }
.fgs-cell.is-gold > i { color: var(--gold); }
.fgs-num {
font-family: var(--font-title);
font-size: 22px;
font-weight: 900;
color: var(--text);
line-height: 1;
margin-bottom: 4px;
}
.fgs-cell.is-gems .fgs-num { color: #b884ff; }
.fgs-cell.is-gold .fgs-num { color: var(--gold); }
.fgs-divider {
font-size: 14px;
color: var(--text-dim);
font-weight: 600;
}
.fgs-lbl {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
/* Tasks */
.fg-tasks {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.fg-task-card {
display: flex;
gap: 16px;
padding: 18px;
background: linear-gradient(180deg, rgba(33,20,58,0.8), rgba(15,8,30,0.95));
border: 1.5px solid rgba(233,185,99,0.2);
border-radius: var(--r-xl);
position: relative;
transition: all 0.2s;
}
.fg-task-card:hover {
border-color: rgba(233,185,99,0.4);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.fg-task-card.is-claimed {
opacity: 0.6;
border-color: rgba(95,214,132,0.3);
}
.fg-task-icon {
width: 64px;
height: 64px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(184,132,255,0.2), rgba(184,132,255,0.05));
border: 1.5px solid rgba(184,132,255,0.4);
border-radius: var(--r-lg);
box-shadow: 0 0 18px rgba(184,132,255,0.15);
}
.fg-task-icon.is-gold {
background: linear-gradient(135deg, rgba(233,185,99,0.2), rgba(233,185,99,0.05));
border-color: rgba(233,185,99,0.4);
box-shadow: 0 0 18px rgba(233,185,99,0.15);
}
.fg-task-icon i {
font-size: 32px;
color: #b884ff;
}
.fg-task-icon.is-gold i { color: var(--gold); }
.fg-task-body {
flex: 1;
min-width: 0;
}
.fg-task-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
}
.fg-task-title {
font-family: var(--font-title);
font-size: 15px;
font-weight: 800;
color: var(--text);
letter-spacing: 0.04em;
}
.fg-task-desc {
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.5;
margin-bottom: 12px;
}
.fg-task-reward {
margin-bottom: 12px;
}
.fg-reward-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 99px;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 800;
}
.fg-reward-pill.gems {
background: rgba(184,132,255,0.15);
color: #b884ff;
border: 1px solid rgba(184,132,255,0.4);
}
.fg-reward-pill.gold {
background: rgba(233,185,99,0.15);
color: var(--gold);
border: 1px solid rgba(233,185,99,0.4);
}
.fg-reward-pill i { font-size: 14px; }
.fg-task-action { margin-top: 4px; }
.fg-task-action .btn { width: 100%; padding: 12px; }
/* Status badges */
.fg-status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 99px;
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.1em;
font-weight: 800;
text-transform: uppercase;
flex-shrink: 0;
}
.fg-status-badge i { font-size: 12px; }
.fg-status-badge.is-done {
background: rgba(95,214,132,0.18);
color: #5fd684;
border: 1px solid rgba(95,214,132,0.4);
}
.fg-status-badge.is-ready {
background: rgba(233,185,99,0.18);
color: var(--gold);
border: 1px solid rgba(233,185,99,0.5);
animation: fgPulseGold 2s ease-in-out infinite;
}
@keyframes fgPulseGold {
0%, 100% { box-shadow: 0 0 0 rgba(233,185,99,0); }
50% { box-shadow: 0 0 14px rgba(233,185,99,0.5); }
}
.fg-status-badge.is-pending {
background: rgba(86,200,255,0.15);
color: var(--cyan);
border: 1px solid rgba(86,200,255,0.4);
}
.fg-status-badge.is-rejected {
background: rgba(225,80,90,0.15);
color: var(--blood);
border: 1px solid rgba(225,80,90,0.4);
}
/* Submit row (manual review) */
.fg-submit-row {
display: flex;
gap: 8px;
}
.fg-submit-input {
flex: 1;
padding: 11px 14px;
background: rgba(0,0,0,0.4);
border: 1.5px solid rgba(233,185,99,0.3);
border-radius: var(--r-md);
color: var(--text);
font-family: var(--font-mono);
font-size: 12.5px;
outline: none;
min-width: 0;
}
.fg-submit-input:focus {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(233,185,99,0.15);
}
.fg-submit-row .btn { width: auto; flex-shrink: 0; padding: 11px 16px; }
/* Pending card */
.fg-pending-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
background: linear-gradient(90deg, rgba(86,200,255,0.12), rgba(86,200,255,0.03));
border: 1px solid rgba(86,200,255,0.35);
border-radius: var(--r-md);
}
.fg-pending-card > i {
font-size: 24px;
color: var(--cyan);
flex-shrink: 0;
animation: fgSpin 3s linear infinite;
}
@keyframes fgSpin {
0% { transform: rotate(0); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
.fg-pending-title {
font-size: 13px;
font-weight: 700;
color: var(--cyan);
margin-bottom: 4px;
}
.fg-pending-sub {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.4;
word-break: break-all;
}
.fg-pending-sub code {
background: rgba(0,0,0,0.4);
padding: 1px 5px;
border-radius: 3px;
font-size: 10.5px;
color: var(--text);
}
/* Reject message */
.fg-reject-msg {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: rgba(225,80,90,0.12);
border: 1px solid rgba(225,80,90,0.4);
border-radius: var(--r-md);
font-size: 12px;
color: var(--blood);
margin-bottom: 10px;
}
.fg-reject-msg i { font-size: 14px; flex-shrink: 0; }
/* Progress block (auto_check) */
.fg-progress-block {
margin-bottom: 12px;
}
.fg-progress-meta {
display: flex;
justify-content: space-between;
font-size: 11.5px;
font-family: var(--font-mono);
color: var(--text-muted);
margin-bottom: 6px;
}
.fg-progress-pct { color: var(--gold); font-weight: 700; }
.fg-progress-bar {
height: 8px;
background: rgba(0,0,0,0.5);
border-radius: 99px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.05);
}
.fg-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold), #ffaa50);
border-radius: 99px;
transition: width 0.5s ease;
box-shadow: 0 0 12px rgba(233,185,99,0.4);
}
/* Reward modal */
.fg-reward-modal {
width: 90%;
max-width: 380px;
padding: 38px 28px 24px;
background: linear-gradient(180deg, rgba(20,12,40,0.98), rgba(10,4,20,1));
border: 2px solid rgba(233,185,99,0.5);
border-radius: var(--r-xl);
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 0 50px rgba(233,185,99,0.3), 0 12px 40px rgba(0,0,0,0.6);
}
.fgrm-glow {
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(233,185,99,0.25), transparent 60%);
pointer-events: none;
}
.fgrm-icon {
position: relative;
z-index: 1;
margin-bottom: 14px;
}
.fgrm-icon i {
font-size: 90px;
filter: drop-shadow(0 0 24px currentColor);
}
.fgrm-icon.is-gems i { color: #b884ff; }
.fgrm-icon.is-gold i { color: var(--gold); }
.fgrm-title {
position: relative;
z-index: 1;
font-family: var(--font-title);
font-size: 18px;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--text);
margin-bottom: 14px;
}
.fgrm-amt {
position: relative;
z-index: 1;
font-family: var(--font-title);
font-size: 42px;
font-weight: 900;
color: var(--gold);
text-shadow: 0 0 24px rgba(233,185,99,0.5);
line-height: 1;
}
.fgrm-lbl {
position: relative;
z-index: 1;
font-family: var(--font-title);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
margin-top: 6px;
}
/* Mobile adjustments */
body.mobile-mode .fg-summary {
grid-template-columns: 1fr;
gap: 8px;
}
body.mobile-mode .fg-task-card {
padding: 14px;
gap: 12px;
}
body.mobile-mode .fg-task-icon {
width: 52px;
height: 52px;
}
body.mobile-mode .fg-task-icon i { font-size: 26px; }
body.mobile-mode .fg-task-title { font-size: 13.5px; }
body.mobile-mode .fg-submit-row {
flex-direction: column;
}
body.mobile-mode .fg-submit-row .btn { width: 100%; }
/* ============================================================
EVENTS SCREEN — leaderboards + banners
============================================================ */
.ev-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.ev-card {
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1.5px solid rgba(233,185,99,0.3);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: 0 10px 32px rgba(0,0,0,0.4);
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.ev-card.is-clickable { cursor: pointer; }
.ev-card.is-clickable:hover {
transform: translateY(-3px);
border-color: rgba(233,185,99,0.6);
box-shadow: 0 14px 38px rgba(233,185,99,0.2), 0 12px 32px rgba(0,0,0,0.4);
}
.ev-card.is-clickable:hover .ev-card-cta {
transform: translateX(4px);
color: var(--gold);
}
/* Upcoming events: tag de "PRÓXIMAMENTE" + estilo distintivo */
.ev-card.is-upcoming,
.ev-detail-modal.is-upcoming {
border-color: rgba(157,108,255,0.5);
box-shadow: 0 10px 32px rgba(0,0,0,0.4), 0 0 24px rgba(157,108,255,0.2);
}
.ev-card.is-upcoming:hover {
border-color: rgba(157,108,255,0.85);
box-shadow: 0 14px 38px rgba(157,108,255,0.3), 0 12px 32px rgba(0,0,0,0.4);
}
.ev-upcoming-tag {
position: absolute;
top: 10px;
right: 10px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: linear-gradient(135deg, #9d6cff, #7c4ddc);
color: #fff;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.08em;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(157,108,255,0.45);
text-transform: uppercase;
pointer-events: none;
}
.ev-upcoming-tag i { font-size: 11px; }
.ev-card.is-upcoming { position: relative; }
.ev-card-cta {
margin-left: auto;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(0,0,0,0.5);
border: 1.5px solid rgba(233,185,99,0.5);
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
flex-shrink: 0;
transition: transform 0.2s, color 0.2s;
}
.ev-card-cta i { font-size: 18px; }
.ev-card-tagline {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
background: rgba(233,185,99,0.06);
border-top: 1px dashed rgba(233,185,99,0.2);
color: var(--gold);
font-size: 12.5px;
font-family: var(--font-cormorant);
font-style: italic;
}
.ev-card-tagline i { font-size: 14px; }
.ev-banner {
position: relative;
height: 200px;
background: linear-gradient(135deg, #2a1840, #1a0a30);
background-size: cover;
background-position: center;
border-bottom: 2px solid rgba(233,185,99,0.4);
overflow: hidden;
}
.ev-banner-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(10,4,20,0.85) 100%);
}
.ev-banner-content {
position: relative;
z-index: 1;
padding: 22px 24px;
display: flex;
align-items: center;
gap: 16px;
height: 100%;
}
.ev-icon {
width: 64px;
height: 64px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(233,185,99,0.3), rgba(233,185,99,0.1));
border: 2px solid rgba(233,185,99,0.6);
border-radius: 50%;
box-shadow: 0 0 24px rgba(233,185,99,0.3);
}
.ev-icon i {
font-size: 32px;
color: var(--gold);
filter: drop-shadow(0 0 8px rgba(233,185,99,0.5));
}
.ev-banner-text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
padding-bottom: 6px;
}
.ev-name {
font-family: var(--font-title);
font-size: 26px;
font-weight: 900;
letter-spacing: 0.04em;
color: var(--text);
text-shadow: 0 2px 8px rgba(0,0,0,0.7);
margin-bottom: 6px;
line-height: 1.1;
}
.ev-countdown {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: rgba(0,0,0,0.6);
border: 1px solid rgba(233,185,99,0.4);
border-radius: 99px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--gold);
width: fit-content;
}
.ev-countdown i { font-size: 14px; }
/* Body */
.ev-body {
padding: 20px 24px;
}
.ev-desc {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 20px;
}
.ev-section-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
margin-bottom: 12px;
}
.ev-section-title i { font-size: 15px; }
.evlb-live {
margin-left: auto;
font-family: var(--font-cormorant);
font-style: italic;
font-size: 11.5px;
color: var(--green);
letter-spacing: 0;
text-transform: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 5px;
}
.evlb-live::before {
content: '';
width: 8px;
height: 8px;
background: var(--green);
border-radius: 50%;
box-shadow: 0 0 8px var(--green);
animation: evLive 1.5s infinite;
}
@keyframes evLive {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* Rules */
.ev-rules { margin-bottom: 20px; }
.ev-rules-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.ev-rules-list li {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 12px;
background: rgba(0,0,0,0.3);
border-left: 3px solid rgba(233,185,99,0.4);
border-radius: var(--r-sm);
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.5;
}
.ev-rules-list li i {
color: var(--gold);
font-size: 13px;
flex-shrink: 0;
margin-top: 2px;
}
/* Prizes grid */
.ev-prizes { margin-bottom: 22px; }
.ev-prizes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
}
.ev-prize-cell {
padding: 12px 10px;
background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.6));
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
text-align: center;
transition: transform 0.2s;
}
.ev-prize-cell:hover { transform: translateY(-2px); }
.ev-prize-cell.is-gold {
border-color: rgba(233,185,99,0.6);
background: linear-gradient(135deg, rgba(233,185,99,0.18), rgba(233,185,99,0.05));
box-shadow: 0 0 18px rgba(233,185,99,0.2);
}
.ev-prize-cell.is-silver {
border-color: rgba(192,192,192,0.5);
background: linear-gradient(135deg, rgba(192,192,192,0.15), rgba(192,192,192,0.04));
}
.ev-prize-cell.is-bronze {
border-color: rgba(205,127,50,0.5);
background: linear-gradient(135deg, rgba(205,127,50,0.15), rgba(205,127,50,0.04));
}
.evp-rank {
font-family: var(--font-title);
font-size: 14px;
font-weight: 900;
color: var(--text-muted);
margin-bottom: 4px;
}
.ev-prize-cell.is-gold .evp-rank { color: var(--gold); }
.ev-prize-cell.is-silver .evp-rank { color: #c0c0c0; }
.ev-prize-cell.is-bronze .evp-rank { color: #cd7f32; }
.evp-amount {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 800;
color: var(--gold);
margin-bottom: 2px;
}
.evp-amount i { font-size: 14px; }
.evp-curr {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
font-weight: 700;
margin-bottom: 2px;
}
.evp-usd {
font-family: var(--font-mono);
font-size: 11px;
color: #5fd684;
font-weight: 700;
margin-top: 4px;
padding-top: 4px;
border-top: 1px dashed rgba(255,255,255,0.08);
}
/* Leaderboard */
.ev-leaderboard-host { margin-top: 12px; }
.evlb-me {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(184,132,255,0.18), rgba(184,132,255,0.04));
border: 1.5px solid rgba(184,132,255,0.4);
border-radius: var(--r-lg);
margin-bottom: 14px;
}
.evlb-me.is-top10 {
background: linear-gradient(135deg, rgba(233,185,99,0.22), rgba(233,185,99,0.05));
border-color: rgba(233,185,99,0.6);
box-shadow: 0 0 24px rgba(233,185,99,0.2);
}
.evlb-me-rank {
font-family: var(--font-title);
font-size: 28px;
font-weight: 900;
color: #b884ff;
flex-shrink: 0;
min-width: 60px;
text-align: center;
}
.evlb-me.is-top10 .evlb-me-rank { color: var(--gold); text-shadow: 0 0 10px rgba(233,185,99,0.4); }
.evlb-me-info { flex: 1; min-width: 0; }
.evlb-me-label {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
.evlb-me-name {
font-family: var(--font-title);
font-size: 15px;
font-weight: 800;
color: var(--text);
margin-top: 2px;
}
.evlb-me-stats {
display: flex;
gap: 10px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--text-muted);
flex-shrink: 0;
}
.evlb-me-stats .evlb-stat {
display: inline-flex;
align-items: center;
gap: 3px;
}
.evlb-me-stats .evlb-stat i { font-size: 13px; color: var(--gold); }
.evlb-me-score {
text-align: right;
flex-shrink: 0;
padding-left: 12px;
border-left: 1px solid rgba(255,255,255,0.1);
}
.evlb-score-num {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 900;
color: var(--gold);
line-height: 1;
}
.evlb-score-lbl {
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 2px;
font-family: var(--font-title);
font-weight: 700;
}
/* Leader rows */
.evlb-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.evlb-row {
display: grid;
grid-template-columns: 60px 1fr auto;
align-items: center;
gap: 14px;
padding: 12px 14px;
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
transition: all 0.2s;
}
.evlb-row:hover { transform: translateX(4px); border-color: rgba(233,185,99,0.3); }
.evlb-row.is-me {
background: linear-gradient(90deg, rgba(184,132,255,0.15), rgba(184,132,255,0.03));
border-color: rgba(184,132,255,0.5);
}
.evlb-row.rank-gold {
background: linear-gradient(90deg, rgba(233,185,99,0.15), rgba(233,185,99,0.03));
border-color: rgba(233,185,99,0.5);
}
.evlb-row.rank-silver {
background: linear-gradient(90deg, rgba(192,192,192,0.1), rgba(192,192,192,0.02));
border-color: rgba(192,192,192,0.4);
}
.evlb-row.rank-bronze {
background: linear-gradient(90deg, rgba(205,127,50,0.12), rgba(205,127,50,0.03));
border-color: rgba(205,127,50,0.4);
}
.evlb-rank {
display: flex;
align-items: center;
gap: 4px;
font-family: var(--font-title);
font-size: 14px;
font-weight: 900;
color: var(--text-muted);
}
.evlb-row.rank-gold .evlb-rank { color: var(--gold); }
.evlb-row.rank-silver .evlb-rank { color: #c0c0c0; }
.evlb-row.rank-bronze .evlb-rank { color: #cd7f32; }
.evlb-rank i { font-size: 14px; }
.evlb-name-col { min-width: 0; }
.evlb-name {
font-family: var(--font-title);
font-size: 13.5px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
}
.evlb-you {
font-family: var(--font-cormorant);
font-style: italic;
color: #b884ff;
font-weight: 500;
font-size: 11.5px;
}
.evlb-stats {
display: flex;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
.evlb-stats .evlb-stat {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 7px;
background: rgba(0,0,0,0.4);
border-radius: 99px;
}
.evlb-stats .evlb-stat i { font-size: 12px; color: var(--gold); }
.evlb-score-col {
text-align: right;
flex-shrink: 0;
min-width: 110px;
}
.evlb-score {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 800;
color: var(--gold);
margin-bottom: 4px;
}
.evlb-prize-info {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
padding: 2px 8px;
background: rgba(95,214,132,0.1);
border: 1px solid rgba(95,214,132,0.3);
border-radius: 99px;
}
.evlb-prize-info i { color: var(--gold); font-size: 11px; }
.evlb-prize-usd {
color: #5fd684;
font-weight: 700;
margin-left: 4px;
}
/* ============================================================
EVENT DETAIL MODAL
============================================================ */
.ev-detail-modal {
width: 95%;
max-width: 720px;
max-height: 92vh;
overflow-y: auto;
padding: 0;
background: linear-gradient(180deg, rgba(20,12,40,0.98), rgba(10,4,20,1));
border: 1.5px solid rgba(233,185,99,0.4);
border-radius: var(--r-xl);
position: relative;
}
.ev-modal-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0,0,0,0.7);
border: 1.5px solid rgba(255,255,255,0.15);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.ev-modal-close:hover {
background: rgba(225,80,90,0.3);
border-color: var(--blood);
color: var(--blood);
}
.ev-modal-close i { font-size: 18px; }
.ev-modal-banner {
position: relative;
height: 220px;
background: linear-gradient(135deg, #2a1840, #1a0a30);
background-size: cover;
background-position: center;
border-radius: var(--r-xl) var(--r-xl) 0 0;
overflow: hidden;
}
.ev-modal-banner-content {
position: relative;
z-index: 1;
padding: 22px 24px;
display: flex;
align-items: flex-end;
gap: 16px;
height: 100%;
}
.ev-modal-name {
font-family: var(--font-title);
font-size: 28px;
font-weight: 900;
letter-spacing: 0.04em;
color: var(--text);
text-shadow: 0 2px 10px rgba(0,0,0,0.8);
margin-bottom: 8px;
line-height: 1.1;
}
.ev-modal-body {
padding: 22px 24px 26px;
}
/* ============================================================
EVENTS — MOBILE
============================================================ */
/* Cards del listado */
body.mobile-mode .ev-grid { gap: 16px; }
body.mobile-mode .ev-card { border-radius: var(--r-lg); }
body.mobile-mode .ev-banner {
height: 140px;
border-radius: var(--r-lg) var(--r-lg) 0 0;
}
body.mobile-mode .ev-banner-content {
padding: 14px 14px;
gap: 12px;
}
body.mobile-mode .ev-icon {
width: 46px;
height: 46px;
border-width: 1.5px;
}
body.mobile-mode .ev-icon i { font-size: 22px; }
body.mobile-mode .ev-name {
font-size: 17px;
margin-bottom: 4px;
line-height: 1.15;
}
body.mobile-mode .ev-countdown {
font-size: 11px;
padding: 3px 9px;
}
body.mobile-mode .ev-countdown i { font-size: 12px; }
body.mobile-mode .ev-card-cta {
width: 32px;
height: 32px;
}
body.mobile-mode .ev-card-cta i { font-size: 15px; }
body.mobile-mode .ev-card-tagline {
padding: 10px 12px;
font-size: 11.5px;
text-align: center;
}
body.mobile-mode .ev-card-tagline i { font-size: 13px; }
/* Modal de detalle full-screen */
body.mobile-mode .ev-detail-modal {
width: 100%;
max-width: 100%;
max-height: 100vh;
height: 100vh;
border-radius: 0;
border: none;
}
body.mobile-mode .ev-modal-close {
top: 10px;
right: 10px;
width: 38px;
height: 38px;
}
body.mobile-mode .ev-modal-banner {
height: 180px;
border-radius: 0;
}
body.mobile-mode .ev-modal-banner-content {
padding: 16px 16px;
gap: 12px;
}
body.mobile-mode .ev-modal-name {
font-size: 20px;
margin-bottom: 6px;
line-height: 1.15;
}
body.mobile-mode .ev-modal-body {
padding: 16px 14px 80px;
}
body.mobile-mode .ev-desc { font-size: 13px; line-height: 1.5; }
/* Reglas */
body.mobile-mode .ev-section-title {
font-size: 11px;
letter-spacing: 0.12em;
margin-top: 18px;
}
body.mobile-mode .ev-rules-list li {
padding: 8px 10px;
font-size: 12px;
}
body.mobile-mode .evlb-live { font-size: 10.5px; }
/* Premios — 2 columnas con cells más compactas */
body.mobile-mode .ev-prizes-grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
body.mobile-mode .ev-prize-cell {
padding: 10px 8px;
}
body.mobile-mode .evp-rank { font-size: 13px; }
body.mobile-mode .evp-amount { font-size: 13px; }
body.mobile-mode .evp-amount i { font-size: 13px; }
body.mobile-mode .evp-curr { font-size: 9.5px; }
body.mobile-mode .evp-usd { font-size: 10.5px; }
/* "Tu posición" — stack vertical en mobile */
body.mobile-mode .evlb-me {
flex-wrap: wrap;
gap: 10px;
padding: 12px 14px;
}
body.mobile-mode .evlb-me-rank {
font-size: 24px;
min-width: 48px;
}
body.mobile-mode .evlb-me-info {
flex: 1;
min-width: 120px;
}
body.mobile-mode .evlb-me-name { font-size: 13.5px; }
body.mobile-mode .evlb-me-label { font-size: 9.5px; }
body.mobile-mode .evlb-me-stats {
width: 100%;
border-top: 1px dashed rgba(255,255,255,0.1);
padding-top: 10px;
margin-top: 4px;
order: 5;
font-size: 11px;
flex-wrap: wrap;
}
body.mobile-mode .evlb-me-stats .evlb-stat {
padding: 3px 9px;
background: rgba(0,0,0,0.4);
border-radius: 99px;
display: inline-flex;
align-items: center;
gap: 4px;
}
body.mobile-mode .evlb-me-score {
padding-left: 0;
border-left: none;
text-align: right;
}
body.mobile-mode .evlb-score-num { font-size: 20px; }
body.mobile-mode .evlb-score-lbl { font-size: 9.5px; }
/* Filas del leaderboard — vertical stack, premio debajo */
body.mobile-mode .evlb-list {
gap: 8px;
}
body.mobile-mode .evlb-row {
grid-template-columns: 46px 1fr;
gap: 10px;
padding: 10px 12px;
align-items: start;
}
body.mobile-mode .evlb-rank {
font-size: 13px;
flex-direction: column;
gap: 2px;
align-items: center;
padding-top: 4px;
}
body.mobile-mode .evlb-rank i { font-size: 16px; }
body.mobile-mode .evlb-name-col {
display: flex;
flex-direction: column;
gap: 4px;
}
body.mobile-mode .evlb-name {
font-size: 12.5px;
margin-bottom: 0;
}
body.mobile-mode .evlb-stats {
display: flex;
flex-wrap: wrap;
gap: 4px;
font-size: 10.5px;
}
body.mobile-mode .evlb-stats .evlb-stat {
padding: 2px 6px;
}
body.mobile-mode .evlb-stats .evlb-stat i { font-size: 11px; }
body.mobile-mode .evlb-score-col {
grid-column: 2;
min-width: auto;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
body.mobile-mode .evlb-score {
font-size: 12.5px;
margin-bottom: 0;
}
body.mobile-mode .evlb-prize-info {
font-size: 10.5px;
padding: 2px 7px;
}
body.mobile-mode .evlb-prize-info i { font-size: 10px; }
body.mobile-mode .evlb-prize-usd { margin-left: 2px; }
/* ============================================================
COMBAT STAGE — cinematic redesign
============================================================ */
.combat-stage {
--flash-color: transparent;
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 24px 60px rgba(0,0,0,0.5);
border: 2px solid rgba(233,185,99,0.3);
isolation: isolate;
}
.combat-stage::after {
content: '';
position: absolute;
inset: 0;
background: var(--flash-color);
pointer-events: none;
z-index: 8;
transition: background 0.08s;
}
/* Background scene */
.cs-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #2a1840, #0a0414);
background-size: cover;
background-position: center;
filter: brightness(0.45) contrast(1.1) saturate(1.1);
z-index: 0;
}
.cs-bg-fog {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 30% 100%, rgba(184,132,255,0.12), transparent 60%),
radial-gradient(ellipse 60% 80% at 70% 0%, rgba(225,80,90,0.12), transparent 60%),
linear-gradient(180deg, rgba(10,4,20,0.4) 0%, rgba(10,4,20,0.7) 100%);
z-index: 1;
}
.cs-bg-particles {
position: absolute;
inset: 0;
z-index: 2;
overflow: hidden;
pointer-events: none;
}
.cs-bg-spark {
position: absolute;
width: 3px;
height: 3px;
background: var(--gold);
border-radius: 50%;
box-shadow: 0 0 8px var(--gold);
left: calc(var(--i) * 9%);
bottom: -10px;
opacity: 0;
animation: csSpark 5s linear infinite;
animation-delay: calc(var(--i) * -0.4s);
}
@keyframes csSpark {
0% { transform: translateY(0) scale(0.5); opacity: 0; }
20% { opacity: 0.8; }
80% { opacity: 0.4; }
100% { transform: translateY(-400px) scale(1.2); opacity: 0; }
}
/* Top header */
.cs-top {
position: relative;
z-index: 3;
display: flex;
justify-content: space-between;
padding: 14px 18px;
gap: 10px;
}
.cs-turn-badge, .cs-zone-badge {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 14px;
background: rgba(0,0,0,0.7);
border: 1.5px solid rgba(233,185,99,0.45);
border-radius: 99px;
font-family: var(--font-title);
font-size: 11.5px;
letter-spacing: 0.1em;
color: var(--gold);
font-weight: 700;
backdrop-filter: blur(6px);
}
.cs-turn-badge i, .cs-zone-badge i { font-size: 13px; }
.cs-turn-badge b { color: var(--text); font-size: 13px; margin-left: 2px; }
/* Battlefield */
.cs-field {
position: relative;
z-index: 3;
padding: 16px 24px 24px;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
/* Fighter rows */
.cs-fighter {
position: relative;
display: flex;
align-items: center;
gap: 18px;
}
.cs-fighter-enemy {
flex-direction: row-reverse;
text-align: right;
margin-left: auto;
/* 2026-06-02b: cap a 640px (antes 90% sin cap → en pantallas grandes
las barras se estiraban 1300px+). El min(640px, 90%) hace que en
desktop sea 640px máximo, en mobile responsivo al 90% del parent.
Sigue desacoplado del contenido (no stretch con badges). */
width: min(640px, 90%);
max-width: 90%;
}
.cs-fighter-player {
margin-right: auto;
width: min(640px, 90%);
max-width: 90%;
}
/* 2026-06-02: bloquear que el contenido de los badges fuerce reflow del
layout — el bloque info tiene min-width:0 para shrinking pero los badges
(inline-flex) ignoraban eso. Forzamos cs-buffs a 100% del info y permitimos
que cs-buff individuales hagan break si son demasiado largos. */
.cs-fighter-info .cs-buffs { width: 100%; min-width: 0; }
.cs-fighter-info .cs-buff,
.cs-fighter-info .cs-debuff { max-width: 100%; overflow: hidden; }
/* Portraits */
.cs-portrait-wrap {
position: relative;
width: 130px;
height: 130px;
flex-shrink: 0;
}
.cs-portrait-ring {
position: absolute;
inset: -8px;
border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0deg, var(--ring-c, var(--gold)) 90deg, transparent 180deg, var(--ring-c, var(--gold)) 270deg, transparent 360deg);
animation: csRingSpin 6s linear infinite;
opacity: 0.6;
z-index: 0;
}
.cs-portrait-ring.is-player { --ring-c: var(--gold); }
.cs-portrait-ring.is-enemy { --ring-c: var(--blood); animation-direction: reverse; }
@keyframes csRingSpin {
to { transform: rotate(360deg); }
}
.cs-portrait {
position: relative;
z-index: 1;
width: 130px;
height: 130px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(20,12,40,0.95), rgba(10,4,20,1));
border: 3px solid var(--por-c, var(--gold));
overflow: hidden;
box-shadow: 0 8px 28px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.4);
animation: csIdleBob 3s ease-in-out infinite;
}
.cs-portrait.is-player { --por-c: var(--gold); }
.cs-portrait.is-enemy {
--por-c: var(--blood);
animation-delay: 1.5s;
}
.cs-portrait.is-boss {
--por-c: #ffaa50;
border-width: 4px;
box-shadow: 0 8px 28px rgba(0,0,0,0.6), 0 0 30px rgba(255,170,80,0.35), inset 0 0 30px rgba(0,0,0,0.4);
}
@keyframes csIdleBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.cs-portrait i { font-size: 64px; color: var(--por-c); }
.cs-portrait .race-portrait-img,
.cs-portrait .race-portrait-fa {
width: 100%;
height: 100%;
border-radius: 50%;
}
/* Damage popup */
.cs-dmg-popup {
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-title);
font-size: 38px;
font-weight: 900;
pointer-events: none;
z-index: 5;
text-shadow: 0 0 12px currentColor, 2px 2px 0 #000;
-webkit-text-stroke: 1.5px #000;
}
.cs-dmg-popup.is-damage { color: #ff5a5a; }
.cs-dmg-popup.is-heal { color: #5fd684; }
/* Fighter info */
.cs-fighter-info {
flex: 1;
min-width: 0;
}
.cs-info-right { text-align: right; }
.cs-fighter-name {
font-family: var(--font-title);
font-size: 22px;
font-weight: 900;
color: var(--text);
text-shadow: 0 2px 8px rgba(0,0,0,0.85);
margin-bottom: 4px;
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 8px;
}
.cs-info-right .cs-fighter-name { justify-content: flex-end; }
.cs-fighter-level {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
margin-bottom: 10px;
background: rgba(233,185,99,0.15);
border: 1px solid rgba(233,185,99,0.4);
padding: 3px 10px;
border-radius: 99px;
width: fit-content;
}
.cs-info-right .cs-fighter-level { margin-left: 0; }
/* 2026-05-10: contenedor para level + evasion juntos */
.cs-fighter-meta {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.cs-fighter-meta .cs-fighter-level { margin-bottom: 0; }
.cs-info-right.cs-info-right .cs-fighter-meta { justify-content: flex-end; }
.cs-fighter-evasion {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono, monospace);
font-size: 10.5px;
letter-spacing: 0.06em;
font-weight: 700;
color: #ffd07a;
background: rgba(255,167,71,0.15);
border: 1px solid rgba(255,167,71,0.45);
padding: 3px 9px;
border-radius: 99px;
cursor: help;
white-space: nowrap;
}
.cs-fighter-evasion i { font-size: 11px; color: #ff9c4a; }
.cs-boss-tag {
background: linear-gradient(135deg, #ffaa50, #c66e1f);
color: #1a0a30;
font-family: var(--font-title);
font-size: 9.5px;
font-weight: 900;
letter-spacing: 0.18em;
padding: 3px 9px;
border-radius: 99px;
text-transform: uppercase;
box-shadow: 0 0 14px rgba(255,170,80,0.4);
}
/* HP/MP bars — grandes y prominentes */
.cs-hp-bar-wrap, .cs-mp-bar-wrap {
position: relative;
margin-bottom: 8px;
}
.cs-hp-bar {
height: 22px;
background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.7));
border: 2px solid rgba(255,255,255,0.15);
border-radius: 99px;
overflow: hidden;
position: relative;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.cs-hp-fill {
height: 100%;
border-radius: 99px;
transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
}
.cs-hp-fill.is-player {
background: linear-gradient(180deg, #95ea96 0%, #5fd684 50%, #3fa55b 100%);
box-shadow: 0 0 18px rgba(95,214,132,0.6), inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.2);
}
.cs-hp-fill.is-enemy {
background: linear-gradient(180deg, #ff7a7a 0%, #c2253b 50%, #8a0a20 100%);
box-shadow: 0 0 18px rgba(225,80,90,0.6), inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.2);
}
.cs-hp-fill::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(90deg, rgba(255,255,255,0.2) 0 8px, transparent 8px 22px);
animation: csBarShimmer 1.5s linear infinite;
pointer-events: none;
}
@keyframes csBarShimmer {
to { background-position: 30px 0; }
}
.cs-hp-num {
font-family: var(--font-mono);
font-size: 14px;
color: var(--text);
margin-top: 5px;
font-weight: 800;
text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.04em;
}
.cs-hp-num::before {
content: 'HP';
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.18em;
color: #5fd684;
font-weight: 900;
background: rgba(95,214,132,0.18);
border: 1px solid rgba(95,214,132,0.5);
padding: 2px 7px;
border-radius: 99px;
}
.cs-fighter-enemy .cs-hp-num::before {
color: #ff8a8a;
background: rgba(225,80,90,0.18);
border-color: rgba(225,80,90,0.5);
}
.cs-info-right .cs-hp-num {
justify-content: flex-end;
flex-direction: row-reverse;
}
.cs-mp-bar {
height: 14px;
background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.7));
border: 1.5px solid rgba(255,255,255,0.12);
border-radius: 99px;
overflow: hidden;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.cs-mp-fill {
height: 100%;
background: linear-gradient(180deg, #8de3ff 0%, #4cc4ff 50%, #2090c4 100%);
border-radius: 99px;
transition: width 0.4s ease;
box-shadow: 0 0 12px rgba(76,196,255,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
position: relative;
}
.cs-mp-fill::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 6px, transparent 6px 18px);
animation: csBarShimmer 1.8s linear infinite;
}
.cs-mp-num {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text);
margin-top: 5px;
font-weight: 800;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
letter-spacing: 0.04em;
}
.cs-mp-num::before {
content: 'MP';
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.18em;
color: #4cc4ff;
font-weight: 900;
background: rgba(76,196,255,0.18);
border: 1px solid rgba(76,196,255,0.5);
padding: 2px 7px;
border-radius: 99px;
}
.cs-mp-num i { font-size: 13px; color: #4cc4ff; }
/* Buffs */
.cs-buffs {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 8px;
}
.cs-buff {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
background: rgba(184,132,255,0.18);
border: 1px solid rgba(184,132,255,0.4);
border-radius: 99px;
font-size: 10.5px;
color: #d3b8ff;
font-family: var(--font-mono);
}
.cs-buff i { color: #b884ff; font-size: 11px; }
.cs-buff span { color: var(--text-dim); font-weight: 700; }
/* 2026-06-02 T2 · Debuffs y DOTs */
.cs-buffs-enemy { justify-content: flex-end; }
.cs-debuff {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px; border-radius: 99px;
font-size: 10.5px; font-family: var(--font-mono);
background: rgba(248, 113, 113, 0.16);
border: 1px solid rgba(248, 113, 113, 0.38);
color: #fca5a5;
}
.cs-debuff i { font-size: 11px; color: #f87171; }
.cs-debuff span { color: var(--text-dim); font-weight: 700; }
.cs-debuff-stun { background: rgba(96, 165, 250, 0.18); border-color: rgba(96, 165, 250, 0.4); color: #93c5fd; }
.cs-debuff-stun i { color: #60a5fa; }
/* DOT colores por tipo */
.cs-dot { background: rgba(168, 85, 247, 0.18); border-color: rgba(168, 85, 247, 0.4); color: #d8b4fe; }
.cs-dot i { color: #a855f7; }
.cs-dot-poison { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.42); color: #86efac; }
.cs-dot-poison i { color: #22c55e; }
.cs-dot-burn { background: rgba(249, 115, 22, 0.18); border-color: rgba(249, 115, 22, 0.42); color: #fdba74; }
.cs-dot-burn i { color: #f97316; }
.cs-dot-curse { background: rgba(168, 85, 247, 0.18); border-color: rgba(168, 85, 247, 0.42); color: #d8b4fe; }
.cs-dot-curse i { color: #a855f7; }
.cs-dot-bleed { background: rgba(220, 38, 38, 0.18); border-color: rgba(220, 38, 38, 0.42); color: #fca5a5; }
.cs-dot-bleed i { color: #dc2626; }
/* Hit chain (Hunter) — log line */
.cap-log-line.is-chain { border-left: 2px solid #f59e0b; padding-left: 6px; }
/* DOT log lines */
.cap-log-line.is-dot.is-dot-applied { border-left: 2px solid #a855f7; padding-left: 6px; }
.cap-log-line.is-dot.is-dot-tick { opacity: 0.92; }
.cap-log-line.is-dot.is-dot-poison i { color: #22c55e; }
.cap-log-line.is-dot.is-dot-burn i { color: #f97316; }
.cap-log-line.is-dot.is-dot-curse i { color: #a855f7; }
.cap-log-line.is-dot.is-dot-bleed i { color: #dc2626; }
/* Mob modal · DOT stat row */
.mdm3-stat.is-dot { background: rgba(168, 85, 247, 0.08); border-color: rgba(168, 85, 247, 0.28); }
.mdm3-stat.is-dot .mdm3-stat-ic i { color: #a855f7; }
.mdm3-stat.is-dot-poison { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.28); }
.mdm3-stat.is-dot-poison .mdm3-stat-ic i { color: #22c55e; }
.mdm3-stat.is-dot-burn { background: rgba(249, 115, 22, 0.08); border-color: rgba(249, 115, 22, 0.28); }
.mdm3-stat.is-dot-burn .mdm3-stat-ic i { color: #f97316; }
.mdm3-stat.is-dot-curse { background: rgba(168, 85, 247, 0.08); border-color: rgba(168, 85, 247, 0.28); }
.mdm3-stat.is-dot-curse .mdm3-stat-ic i { color: #a855f7; }
.mdm3-stat.is-dot-bleed { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.28); }
.mdm3-stat.is-dot-bleed .mdm3-stat-ic i { color: #dc2626; }
/* VS divider */
.cs-vs-divider {
position: relative;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
margin: 4px 0;
}
.cs-vs-line {
position: absolute;
inset: 50% 0 50% 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0.5;
transform: translateY(-1px);
}
.cs-vs-circle {
position: relative;
z-index: 1;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), #c89a3e);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
font-size: 13px;
font-weight: 900;
color: #1a0a30;
letter-spacing: 0.06em;
box-shadow: 0 0 26px rgba(233,185,99,0.6), 0 4px 14px rgba(0,0,0,0.5);
animation: csVsPulse 2s ease-in-out infinite;
}
@keyframes csVsPulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 26px rgba(233,185,99,0.6), 0 4px 14px rgba(0,0,0,0.5); }
50% { transform: scale(1.08); box-shadow: 0 0 36px rgba(233,185,99,0.85), 0 4px 14px rgba(0,0,0,0.5); }
}
/* Quick log feed — altura mínima fija para 5 líneas, así el panel no se mueve
cuando aparecen logs (QoL: los botones de acción quedan en posición estable) */
.cs-quick-log {
position: relative;
z-index: 3;
margin: 0 18px 12px;
padding: 10px 14px;
background: rgba(0,0,0,0.65);
border: 1px solid rgba(233,185,99,0.25);
border-radius: var(--r-md);
font-size: 12px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 4px;
backdrop-filter: blur(4px);
min-height: 130px; /* ~5 líneas × 24px + padding vertical */
}
.cs-quick-log.is-empty {
justify-content: center;
}
.cs-quick-log-placeholder {
text-align: center;
color: var(--text-muted);
font-style: italic;
font-size: 12px;
padding: 20px 0;
}
.cs-quick-log-placeholder i {
margin-right: 6px;
opacity: 0.5;
}
.cs-quick-log .cap-log-line {
padding: 2px 0;
border: none;
background: transparent;
}
/* Action bar */
.cs-action-bar {
position: relative;
z-index: 3;
padding: 14px 18px 18px;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
border-top: 1px solid rgba(233,185,99,0.2);
display: flex;
flex-direction: column;
gap: 12px;
}
/* Big attack button */
.cs-attack-btn {
position: relative;
width: 100%;
padding: 16px 24px;
background: linear-gradient(180deg, #c2253b, #8a0a20);
border: 2px solid rgba(225,80,90,0.6);
border-radius: var(--r-lg);
color: white;
font-family: var(--font-title);
font-size: 16px;
font-weight: 900;
letter-spacing: 0.16em;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
transition: all 0.15s;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
box-shadow: 0 6px 18px rgba(225,80,90,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
overflow: hidden;
}
.cs-attack-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(225,80,90,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.cs-attack-btn:active { transform: scale(0.98); }
.cs-attack-btn i { font-size: 22px; }
.cs-ab-glow {
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
animation: csAtkGlow 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes csAtkGlow {
0%, 100% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
}
/* Skills row */
.cs-skills-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
gap: 8px;
}
.cs-skill-btn {
position: relative;
background: linear-gradient(180deg, rgba(33,20,58,0.85), rgba(15,8,30,0.95));
border: 1.5px solid rgba(184,132,255,0.4);
border-radius: var(--r-md);
padding: 10px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.15s;
text-align: left;
}
.cs-skill-btn:hover:not(.is-disabled) {
border-color: #b884ff;
background: linear-gradient(180deg, rgba(184,132,255,0.18), rgba(15,8,30,0.95));
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(184,132,255,0.25);
}
.cs-skill-btn.is-ultimate {
border-color: rgba(233,185,99,0.55);
background: linear-gradient(180deg, rgba(233,185,99,0.18), rgba(15,8,30,0.95));
}
.cs-skill-btn.is-ultimate:hover:not(.is-disabled) {
border-color: var(--gold);
box-shadow: 0 6px 22px rgba(233,185,99,0.35);
}
.cs-skill-btn.is-disabled {
opacity: 0.45;
cursor: not-allowed;
filter: grayscale(0.6);
}
.cs-skill-ico-wrap {
position: relative;
width: 44px;
height: 44px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-sm);
overflow: hidden;
}
.cs-skill-ico-wrap > i { font-size: 22px; color: #b884ff; }
.cs-skill-btn.is-ultimate .cs-skill-ico-wrap > i { color: var(--gold); }
.cs-skill-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.cs-skill-cd-ring {
position: absolute;
inset: 0;
background: conic-gradient(rgba(0,0,0,0.85) var(--p, 0%), transparent var(--p, 0%));
pointer-events: none;
}
.cs-skill-cd-num {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
font-size: 18px;
font-weight: 900;
color: var(--text);
text-shadow: 0 0 6px #000;
z-index: 1;
}
.cs-skill-crown {
position: absolute;
top: -6px;
right: -6px;
width: 18px;
height: 18px;
background: var(--gold);
border: 1.5px solid #1a0a30;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.cs-skill-crown i { font-size: 10px !important; color: #1a0a30 !important; }
.cs-skill-text { flex: 1; min-width: 0; }
.cs-skill-name {
font-family: var(--font-title);
font-size: 11.5px;
font-weight: 800;
color: var(--text);
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3px;
}
.cs-skill-meta {
display: flex;
gap: 6px;
font-size: 10.5px;
color: var(--text-muted);
font-family: var(--font-mono);
}
.cs-skill-mp {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--cyan);
}
.cs-skill-mp i { font-size: 11px; }
.cs-skill-lv { color: var(--text-dim); }
/* Flee button */
.cs-flee-btn {
width: 100%;
padding: 10px 16px;
background: rgba(0,0,0,0.4);
border: 1.5px dashed rgba(255,255,255,0.15);
color: var(--text-muted);
border-radius: var(--r-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: all 0.15s;
}
.cs-flee-btn:hover {
background: rgba(225,80,90,0.15);
border-color: var(--blood);
color: var(--blood);
}
.cs-flee-btn i { font-size: 14px; }
/* 2026-05-19: Cinturón de Pociones en barra de combate PvE */
.cs-belt-row {
display: flex;
gap: 6px;
align-items: center;
padding: 4px 6px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(196, 102, 232, 0.3);
border-radius: 10px;
}
.cs-belt-btn {
position: relative;
width: 42px;
height: 42px;
border-radius: 10px;
display: grid;
place-items: center;
border: 1px solid rgba(196, 102, 232, 0.45);
background: linear-gradient(180deg, rgba(196, 102, 232, 0.20), rgba(0,0,0,0.5));
color: #f0c8ff;
cursor: pointer;
font-size: 20px;
transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
padding: 0;
}
.cs-belt-btn.is-filled:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(196, 102, 232, 0.45);
filter: brightness(1.15);
}
.cs-belt-btn:active { transform: scale(0.94); }
.cs-belt-btn.is-empty {
border-color: rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.4);
color: rgba(255, 255, 255, 0.25);
cursor: not-allowed;
}
.cs-belt-slot-num {
position: absolute;
top: 2px;
right: 4px;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 800;
color: rgba(255,255,255,0.55);
pointer-events: none;
}
.cs-belt-btn.is-filled .cs-belt-slot-num { color: rgba(255,255,255,0.85); }
@media (max-width: 720px) {
.cs-belt-row { padding: 3px 5px; gap: 4px; }
.cs-belt-btn { width: 38px; height: 38px; font-size: 18px; }
}
/* Full log collapsible */
.cs-full-log {
position: relative;
z-index: 3;
margin: 0 18px 16px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
overflow: hidden;
}
.cs-full-log summary {
padding: 10px 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
list-style: none;
user-select: none;
}
.cs-full-log summary::-webkit-details-marker { display: none; }
.cs-full-log summary i:first-child { font-size: 14px; color: var(--gold); }
.cs-full-log summary span { flex: 1; }
.cs-fl-caret { font-size: 14px; transition: transform 0.2s; }
.cs-full-log[open] .cs-fl-caret { transform: rotate(180deg); }
.cs-full-log-list {
max-height: 240px;
overflow-y: auto;
padding: 10px 14px;
border-top: 1px dashed rgba(255,255,255,0.08);
display: flex;
flex-direction: column;
gap: 4px;
}
/* MOBILE — stack everything cleanly */
body.mobile-mode .combat-stage { border-radius: var(--r-lg); }
body.mobile-mode .cs-top { padding: 10px 12px; gap: 6px; flex-wrap: wrap; }
body.mobile-mode .cs-turn-badge, body.mobile-mode .cs-zone-badge {
font-size: 10.5px;
padding: 4px 10px;
}
body.mobile-mode .cs-field { padding: 12px 14px 16px; gap: 6px; }
body.mobile-mode .cs-fighter { gap: 12px; max-width: 100%; }
body.mobile-mode .cs-portrait-wrap, body.mobile-mode .cs-portrait { width: 92px; height: 92px; }
body.mobile-mode .cs-portrait i { font-size: 46px; }
body.mobile-mode .cs-fighter-name { font-size: 17px; }
body.mobile-mode .cs-fighter-level { font-size: 10px; padding: 2px 8px; margin-bottom: 8px; }
body.mobile-mode .cs-hp-bar { height: 18px; }
body.mobile-mode .cs-mp-bar { height: 12px; }
body.mobile-mode .cs-hp-num, body.mobile-mode .cs-mp-num { font-size: 12px; }
body.mobile-mode .cs-hp-num::before, body.mobile-mode .cs-mp-num::before { font-size: 9px; padding: 1px 6px; }
body.mobile-mode .cs-vs-circle { width: 42px; height: 42px; font-size: 12px; }
body.mobile-mode .cs-dmg-popup { font-size: 28px; }
body.mobile-mode .cs-action-bar { padding: 12px 14px 14px; gap: 8px; }
body.mobile-mode .cs-attack-btn { padding: 14px; font-size: 14px; letter-spacing: 0.12em; }
body.mobile-mode .cs-skills-row { grid-template-columns: 1fr 1fr; gap: 6px; }
body.mobile-mode .cs-skill-btn { padding: 8px; }
body.mobile-mode .cs-skill-ico-wrap { width: 38px; height: 38px; }
body.mobile-mode .cs-skill-name { font-size: 11px; }
body.mobile-mode .cs-quick-log { margin: 0 14px 10px; padding: 8px 12px; font-size: 11.5px; }
body.mobile-mode .cs-full-log { margin: 0 14px 12px; }
/* 2026-05-23: Celulares chicos (≤400px) — reducir aún más para que entre todo
sin scroll excesivo. Aplica al combate PvE/PvP en mobile-mode. */
@media (max-width: 400px) {
body.mobile-mode .cs-field { padding: 8px 10px 10px; gap: 4px; }
body.mobile-mode .cs-fighter { gap: 8px; }
body.mobile-mode .cs-portrait-wrap,
body.mobile-mode .cs-portrait { width: 72px; height: 72px; }
body.mobile-mode .cs-portrait i { font-size: 36px; }
body.mobile-mode .cs-fighter-name { font-size: 14px; }
body.mobile-mode .cs-fighter-level { font-size: 9px; padding: 1px 6px; margin-bottom: 4px; }
body.mobile-mode .cs-hp-bar { height: 13px; }
body.mobile-mode .cs-mp-bar { height: 9px; }
body.mobile-mode .cs-hp-num,
body.mobile-mode .cs-mp-num { font-size: 10.5px; }
body.mobile-mode .cs-hp-num::before,
body.mobile-mode .cs-mp-num::before { font-size: 8px; padding: 1px 5px; }
body.mobile-mode .cs-vs-circle { width: 32px; height: 32px; font-size: 10px; }
body.mobile-mode .cs-dmg-popup { font-size: 22px; }
/* Action bar más compacto */
body.mobile-mode .cs-action-bar { padding: 8px 10px 10px; gap: 6px; }
body.mobile-mode .cs-attack-btn { padding: 10px; font-size: 12.5px; letter-spacing: 0.08em; }
body.mobile-mode .cs-skill-btn { padding: 5px; }
body.mobile-mode .cs-skill-ico-wrap { width: 30px; height: 30px; }
body.mobile-mode .cs-skill-name { font-size: 10px; }
/* Log */
body.mobile-mode .cs-quick-log { margin: 0 10px 6px; padding: 6px 10px; font-size: 10.5px; min-height: 36px; }
body.mobile-mode .cs-quick-log-placeholder { font-size: 11px; }
body.mobile-mode .cs-full-log { margin: 0 10px 8px; }
/* Round header */
body.mobile-mode .cs-round-header { padding: 4px 10px; font-size: 11px; }
body.mobile-mode .cs-round-info { gap: 6px; }
}
/* Celulares MUY chicos (≤340px) — última compresión */
@media (max-width: 340px) {
body.mobile-mode .cs-portrait-wrap,
body.mobile-mode .cs-portrait { width: 60px; height: 60px; }
body.mobile-mode .cs-portrait i { font-size: 28px; }
body.mobile-mode .cs-fighter-name { font-size: 13px; }
body.mobile-mode .cs-hp-bar { height: 11px; }
body.mobile-mode .cs-mp-bar { height: 8px; }
body.mobile-mode .cs-hp-num,
body.mobile-mode .cs-mp-num { font-size: 10px; }
body.mobile-mode .cs-attack-btn { padding: 9px; font-size: 11.5px; }
body.mobile-mode .cs-skill-ico-wrap { width: 26px; height: 26px; }
}
/* ===== Packs Screen ===== */
.packs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
padding: 4px;
}
.pack-card {
background: linear-gradient(180deg, rgba(20,12,30,0.92), rgba(15,8,25,0.95));
border: 1px solid var(--pk-color, rgba(212,175,55,0.3));
border-radius: 14px;
padding: 16px 16px 14px;
position: relative;
overflow: hidden;
box-shadow: 0 0 22px var(--pk-glow, rgba(212,175,55,0.2)), inset 0 1px 0 rgba(255,255,255,0.04);
transition: transform 0.2s, box-shadow 0.2s;
}
.pack-card::before {
content: '';
position: absolute;
top: -50%; left: -50%; right: -50%; bottom: -50%;
background: radial-gradient(circle at 50% 0%, var(--pk-glow), transparent 60%);
opacity: 0.4;
pointer-events: none;
}
.pack-card:hover { transform: translateY(-2px); box-shadow: 0 4px 30px var(--pk-glow), inset 0 1px 0 rgba(255,255,255,0.06); }
.pk-ribbon {
position: absolute;
top: 12px; right: -34px;
background: var(--pk-color);
color: #0a0414;
padding: 4px 36px;
font-family: var(--font-mono, monospace);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
transform: rotate(35deg);
display: flex; align-items: center; gap: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
z-index: 2;
}
.pk-ribbon i { font-size: 11px; }
.pk-art {
display: flex; align-items: center; justify-content: center;
height: 90px; margin-bottom: 10px;
font-size: 56px;
color: var(--pk-color);
filter: drop-shadow(0 0 14px var(--pk-glow));
position: relative; z-index: 1;
}
.pk-title {
font-family: 'Cinzel', serif;
font-size: 18px;
font-weight: 800;
color: var(--pk-color);
text-align: center;
margin-bottom: 2px;
letter-spacing: 0.04em;
text-shadow: 0 0 8px var(--pk-glow);
}
.pk-sub {
font-size: 11px;
color: var(--text-dim);
text-align: center;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pk-row {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 10px;
background: rgba(255,255,255,0.03);
border-radius: 6px;
margin-bottom: 4px;
font-size: 12px;
}
.pk-row-l { color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.pk-row-l i { color: var(--pk-color); font-size: 13px; }
.pk-row-r { color: var(--text); font-family: var(--font-mono, monospace); }
.pk-row-r b { color: var(--pk-color); font-weight: 800; font-size: 13px; }
.pk-row-yield .pk-row-r b { color: #5fd684; }
.pk-stats-title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pk-color);
margin: 10px 0 6px;
font-weight: 700;
}
.pk-stats-grid {
display: flex; flex-wrap: wrap; gap: 4px;
margin-bottom: 12px;
}
.pk-stat-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
border-radius: 99px;
background: rgba(212,175,55,0.08);
border: 1px solid rgba(212,175,55,0.2);
color: var(--text);
font-size: 10.5px;
font-family: var(--font-mono, monospace);
font-weight: 600;
}
.pk-stat-pill i { color: var(--pk-color); font-size: 10.5px; }
.pk-cta { margin-top: 8px; }
.pk-buy {
background: linear-gradient(180deg, var(--pk-color), color-mix(in srgb, var(--pk-color), #000 30%));
color: #0a0414;
border: 1px solid var(--pk-color);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.04em;
text-shadow: none;
box-shadow: 0 0 12px var(--pk-glow);
display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 10px;
}
.pk-buy:hover { transform: translateY(-1px); box-shadow: 0 0 20px var(--pk-glow); }
.pk-discount {
text-align: center;
font-size: 10px;
color: var(--text-dim);
margin-top: 6px;
letter-spacing: 0.05em;
}
.badge-gem {
background: rgba(184,132,255,0.12);
border: 1px solid rgba(184,132,255,0.4);
color: #d8b4ff;
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 99px;
font-family: var(--font-mono, monospace);
font-size: 13px; font-weight: 700;
}
.badge-gem i { color: #b884ff; }
@media (max-width: 768px) {
.packs-grid { grid-template-columns: 1fr; gap: 12px; }
.pack-card { padding: 14px; }
.pk-art { height: 70px; font-size: 44px; }
.pk-title { font-size: 16px; }
}
/* ===== Slot Picker Modal ===== */
.slot-picker-overlay {
position: fixed; inset: 0;
background: rgba(8, 4, 18, 0.78);
backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
z-index: 9000;
padding: 16px;
}
.slot-picker-modal {
background: linear-gradient(180deg, rgba(28,16,46,0.96), rgba(15,8,25,0.98));
border: 1px solid rgba(212,175,55,0.3);
border-radius: 14px;
width: 100%; max-width: 580px;
max-height: 90vh;
display: flex; flex-direction: column;
box-shadow: 0 20px 50px rgba(0,0,0,0.6);
position: relative;
overflow: hidden;
}
.sp-header {
display: flex; gap: 14px; align-items: flex-start;
padding: 22px 24px 18px;
border-bottom: 1px solid rgba(212,175,55,0.15);
background: linear-gradient(180deg, rgba(212,175,55,0.06), transparent);
}
.sp-header-icon {
flex-shrink: 0;
width: 52px; height: 52px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.06));
border: 1px solid rgba(212,175,55,0.35);
display: flex; align-items: center; justify-content: center;
font-size: 26px;
color: var(--gold);
box-shadow: 0 0 14px rgba(212,175,55,0.2);
}
.sp-title {
font-family: 'Cinzel', serif;
font-size: 19px;
font-weight: 700;
color: var(--gold);
margin-bottom: 4px;
letter-spacing: 0.04em;
}
.sp-desc {
font-size: 12.5px;
color: var(--text-dim);
line-height: 1.45;
}
.sp-current {
padding: 16px 24px 0;
}
.sp-section-label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--gold);
font-weight: 700;
margin-bottom: 8px;
}
.sp-current-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
background: rgba(212,175,55,0.04);
border: 1px solid rgba(212,175,55,0.2);
border-radius: 10px;
}
.sp-current-empty {
display: flex; align-items: center; gap: 10px;
padding: 14px;
background: rgba(255,255,255,0.02);
border: 1px dashed rgba(255,255,255,0.1);
border-radius: 10px;
color: var(--text-dim);
font-style: italic;
font-size: 13px;
}
.sp-current-empty i { font-size: 18px; opacity: 0.5; }
.sp-list-section {
padding: 16px 24px 22px;
flex: 1;
overflow-y: auto;
min-height: 0;
}
.sp-list {
display: flex; flex-direction: column; gap: 6px;
}
.sp-empty {
text-align: center;
padding: 26px 18px;
color: var(--text-dim);
font-style: italic;
background: rgba(255,255,255,0.02);
border: 1px dashed rgba(255,255,255,0.08);
border-radius: 8px;
}
.sp-list-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
transition: background 0.15s, border-color 0.15s;
}
.sp-list-item:hover {
background: rgba(212,175,55,0.05);
border-color: rgba(212,175,55,0.25);
}
.sp-list-item.is-current {
background: rgba(212,175,55,0.08);
border-color: rgba(212,175,55,0.4);
}
.sp-item-icon {
flex-shrink: 0;
width: 42px; height: 42px;
border-radius: 8px;
background: rgba(0,0,0,0.4);
border: 1px solid currentColor;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
overflow: hidden;
position: relative;
}
.sp-item-icon .item-modal-img-real {
position: absolute; inset: 0;
background-size: cover; background-position: center;
}
.sp-item-info {
flex: 1; min-width: 0;
}
.sp-item-name {
font-weight: 700; font-size: 13.5px;
margin-bottom: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-item-stats {
font-size: 11px;
color: var(--text-dim);
display: flex; flex-wrap: wrap; gap: 4px 5px;
font-family: var(--font-mono, monospace);
margin-top: 4px;
}
/* 2026-05-22: chip por stat con label de texto. Antes solo iconos = confuso. */
.sp-stat {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
background: rgba(0,0,0,0.32);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 4px;
font-size: 10.5px;
line-height: 1;
white-space: nowrap;
color: #d8d3e8;
}
.sp-stat i { font-size: 11px; color: var(--gold); }
.sp-stat b { color: #b8b0c8; font-weight: 700; letter-spacing: 0.04em; }
/* Fallback para chips legacy con solo icono (rest of inventory.js) */
.sp-item-stats > i:not(.sp-stat i) { font-size: 11px; margin-right: 1px; color: var(--gold); }
.sp-equipped-tag {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(180deg, var(--gold), #b8941e);
display: flex; align-items: center; justify-content: center;
color: #0a0414;
font-size: 14px;
box-shadow: 0 0 10px rgba(212,175,55,0.5);
}
.sp-equip-btn { padding: 6px 12px; font-size: 11.5px; flex-shrink: 0; }
/* Slot picker modal — footer + header text + close (2026-05-08) */
.slot-picker-modal .sp-header-text { flex: 1; min-width: 0; }
.slot-picker-modal .sp-close {
position: absolute;
top: 14px; right: 14px;
width: 30px; height: 30px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 50%;
color: var(--text-muted);
font-size: 20px;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.15s;
}
.slot-picker-modal .sp-close:hover {
background: rgba(255,255,255,0.1);
color: var(--text);
border-color: rgba(255,255,255,0.2);
}
.sp-footer-actions {
padding: 14px 24px 18px;
border-top: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
.sp-footer-actions .btn { min-height: 42px; }
.race-slot-picker-modal .sp-header-icon {
background: linear-gradient(135deg, rgba(184,132,255,0.20), rgba(122,76,240,0.08));
border-color: rgba(184,132,255,0.5);
color: #c39dff;
box-shadow: 0 0 14px rgba(184,132,255,0.25);
}
.race-slot-picker-modal .sp-title { color: #c39dff; }
.race-slot-picker-modal .sp-list-item .sp-item-icon { color: #c39dff; }
.race-slot-picker-modal .sp-list-item.is-current {
background: rgba(184,132,255,0.10);
border-color: rgba(184,132,255,0.5);
}
@media (max-width: 600px) {
.slot-picker-modal { max-height: 95vh; }
.sp-header { padding: 16px 18px 14px; }
.sp-current, .sp-list-section { padding-left: 18px; padding-right: 18px; }
.sp-title { font-size: 17px; }
.sp-desc { font-size: 12px; }
}
/* ============================================================================
RIP — Race Item Picker (2026-05-15)
Modal rediseñado para seleccionar items de raza por slot.
Cards individuales con stats como chips coloreados.
============================================================================ */
.rip-modal {
max-width: 520px;
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
background: linear-gradient(180deg, rgba(33,20,58,0.97), rgba(15,8,30,0.99));
border: 1px solid rgba(184,132,255,0.3);
}
.rip-header {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px 14px;
border-bottom: 1px solid rgba(184,132,255,0.18);
background: linear-gradient(180deg, rgba(184,132,255,0.10), transparent);
}
.rip-header-icon {
width: 52px;
height: 52px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(184,132,255,0.20), rgba(122,76,240,0.08));
border: 1px solid rgba(184,132,255,0.45);
display: grid;
place-items: center;
font-size: 26px;
color: #c39dff;
box-shadow: 0 0 14px rgba(184,132,255,0.25);
flex-shrink: 0;
}
.rip-header-text { flex: 1; min-width: 0; }
.rip-title {
font-family: var(--font-title);
font-size: 19px;
font-weight: 800;
color: #c39dff;
line-height: 1;
}
.rip-sub {
font-size: 11.5px;
font-weight: 700;
color: rgba(255,255,255,0.5);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 4px;
}
.rip-body {
flex: 1;
overflow-y: auto;
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.rip-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 36px 18px;
color: rgba(255,255,255,0.45);
text-align: center;
font-size: 13px;
}
.rip-empty > i { font-size: 42px; color: rgba(184,132,255,0.45); }
.rip-card {
background: linear-gradient(180deg, rgba(28,19,52,0.7), rgba(10,5,24,0.85));
border: 1.5px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.rip-card.rb-common { border-color: rgba(180,180,200,0.45); box-shadow: 0 0 14px rgba(180,180,200,0.10); }
.rip-card.rb-uncommon { border-color: rgba(95,214,132,0.5); box-shadow: 0 0 14px rgba(95,214,132,0.14); }
.rip-card.rb-rare { border-color: rgba(90,166,255,0.55); box-shadow: 0 0 14px rgba(90,166,255,0.16); }
.rip-card.rb-epic { border-color: rgba(184,132,255,0.6); box-shadow: 0 0 16px rgba(184,132,255,0.22); }
.rip-card.rb-legendary { border-color: rgba(255,170,80,0.65); box-shadow: 0 0 18px rgba(255,170,80,0.26); }
.rip-card.rb-mythic { border-color: rgba(255,90,120,0.65); box-shadow: 0 0 18px rgba(255,90,120,0.28); }
.rip-card.is-equipped {
background: linear-gradient(180deg, rgba(255,200,87,0.15), rgba(15,8,30,0.95));
border-color: rgba(255,200,87,0.6) !important;
box-shadow: 0 0 18px rgba(255,200,87,0.30) !important;
}
.rip-card-top {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 12px;
align-items: center;
}
.rip-card-icon {
width: 56px;
height: 56px;
border-radius: 10px;
display: grid;
place-items: center;
font-size: 32px;
background: rgba(0,0,0,0.45);
border: 1.5px solid rgba(255,255,255,0.08);
}
.rip-card-icon.r-common { color: #b4b4c8; border-color: rgba(180,180,200,0.4); }
.rip-card-icon.r-uncommon { color: #5fd684; border-color: rgba(95,214,132,0.45); }
.rip-card-icon.r-rare { color: #5aa6ff; border-color: rgba(90,166,255,0.5); }
.rip-card-icon.r-epic { color: #c39dff; border-color: rgba(184,132,255,0.55); }
.rip-card-icon.r-legendary { color: #ffaa50; border-color: rgba(255,170,80,0.6); }
.rip-card-icon.r-mythic { color: #ff8898; border-color: rgba(255,90,120,0.6); }
.rip-card-head { min-width: 0; }
.rip-card-name {
font-family: var(--font-title);
font-size: 15.5px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 4px;
}
.rip-card-name.r-common { color: #e2e2eb; }
.rip-card-name.r-uncommon { color: #5fd684; }
.rip-card-name.r-rare { color: #5aa6ff; }
.rip-card-name.r-epic { color: #c39dff; }
.rip-card-name.r-legendary { color: #ffc857; }
.rip-card-name.r-mythic { color: #ff8898; }
.rip-card-meta {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.rip-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.75);
}
.rip-pill > i { font-size: 11px; }
.rip-pill.r-common { background: rgba(180,180,200,0.15); border-color: rgba(180,180,200,0.4); color: #e2e2eb; }
.rip-pill.r-uncommon { background: rgba(95,214,132,0.15); border-color: rgba(95,214,132,0.4); color: #5fd684; }
.rip-pill.r-rare { background: rgba(90,166,255,0.15); border-color: rgba(90,166,255,0.4); color: #5aa6ff; }
.rip-pill.r-epic { background: rgba(184,132,255,0.18); border-color: rgba(184,132,255,0.45); color: #c39dff; }
.rip-pill.r-legendary { background: rgba(255,170,80,0.18); border-color: rgba(255,170,80,0.45); color: #ffc857; }
.rip-pill.r-mythic { background: rgba(255,90,120,0.18); border-color: rgba(255,90,120,0.45); color: #ff8898; }
.rip-pill-lvl { background: rgba(78,195,247,0.14); border-color: rgba(78,195,247,0.4); color: #5fcfff; }
.rip-pill-lvl.rip-pill-locked { background: rgba(255,90,120,0.18); border-color: rgba(255,90,120,0.45); color: #ff8898; }
.rip-pill-eq {
background: linear-gradient(135deg, rgba(255,200,87,0.30), rgba(255,200,87,0.10));
border-color: rgba(255,200,87,0.55);
color: #ffd97a;
}
.rip-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.04em;
white-space: nowrap;
border-radius: 8px;
}
.rip-action-btn > i { font-size: 13px; }
.rip-action-btn.is-unequip {
background: rgba(255,90,120,0.10);
border: 1px solid rgba(255,90,120,0.45);
color: #ff8898;
}
.rip-action-btn.is-unequip:hover {
background: rgba(255,90,120,0.18);
border-color: rgba(255,90,120,0.7);
}
.rip-action-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.rip-card-desc {
font-size: 12px;
color: rgba(255,255,255,0.6);
line-height: 1.4;
font-style: italic;
padding: 8px 10px;
background: rgba(0,0,0,0.25);
border-radius: 6px;
border-left: 2px solid rgba(184,132,255,0.4);
}
.rip-card-stats {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.rip-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 9px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 700;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.8);
white-space: nowrap;
}
.rip-chip > i { font-size: 12px; }
.rip-chip-atk { background: rgba(232,90,106,0.12); border-color: rgba(232,90,106,0.4); color: #ff7e8e; }
.rip-chip-def { background: rgba(90,166,255,0.12); border-color: rgba(90,166,255,0.4); color: #7dbfff; }
.rip-chip-hp { background: rgba(255,95,160,0.12); border-color: rgba(255,95,160,0.4); color: #ff8ec0; }
.rip-chip-mp { background: rgba(95,180,255,0.12); border-color: rgba(95,180,255,0.4); color: #88ccff; }
.rip-chip-str { background: rgba(255,170,80,0.12); border-color: rgba(255,170,80,0.4); color: #ffc285; }
.rip-chip-agi { background: rgba(95,214,132,0.12); border-color: rgba(95,214,132,0.4); color: #8de8a8; }
.rip-chip-int { background: rgba(184,132,255,0.14); border-color: rgba(184,132,255,0.4); color: #c39dff; }
.rip-chip-vit { background: rgba(255,200,87,0.12); border-color: rgba(255,200,87,0.4); color: #ffd97a; }
.rip-chip-crit { background: rgba(255,210,74,0.14); border-color: rgba(255,210,74,0.45); color: #ffdf66; }
.rip-chip-eva { background: rgba(125,211,252,0.12); border-color: rgba(125,211,252,0.4); color: #a8e5ff; }
.rip-chip-gold { background: rgba(233,168,43,0.14); border-color: rgba(233,168,43,0.45); color: #ffc857; }
@media (max-width: 600px) {
.rip-modal { max-width: 100%; max-height: 92vh; }
.rip-header { padding: 14px 18px 12px; }
.rip-header-icon { width: 44px; height: 44px; font-size: 22px; }
.rip-title { font-size: 16px; }
.rip-card { padding: 10px; }
.rip-card-top { grid-template-columns: 48px 1fr auto; gap: 10px; }
.rip-card-icon { width: 48px; height: 48px; font-size: 26px; }
.rip-card-name { font-size: 14px; }
.rip-action-btn { padding: 6px 10px; font-size: 11.5px; }
.rip-action-btn > span { display: none; }
.rip-chip { font-size: 11px; padding: 3px 7px; }
}
/* ===== Tutorial Modal — bienvenida con 11 pasos ===== */
.tut-overlay {
position: fixed; inset: 0;
background: rgba(8, 4, 18, 0.88);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
z-index: 10000;
padding: 20px;
}
.tut-modal {
background: linear-gradient(180deg, rgba(28,16,46,0.97), rgba(15,8,25,0.99));
border: 1px solid var(--tut-color, rgba(212,175,55,0.5));
border-radius: 18px;
width: 100%; max-width: 520px;
padding: 22px 26px 22px;
position: relative;
box-shadow: 0 30px 70px rgba(0,0,0,0.7), 0 0 40px var(--tut-color);
overflow: hidden;
}
.tut-modal::before {
content: '';
position: absolute;
top: -100%; left: -50%; right: -50%; bottom: 50%;
background: radial-gradient(ellipse at 50% 100%, var(--tut-color), transparent 65%);
opacity: 0.18;
pointer-events: none;
}
.tut-progress-row {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
position: relative; z-index: 1;
}
.tut-step-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-dim);
font-family: var(--font-mono, monospace);
font-weight: 700;
}
.tut-skip-btn {
background: transparent;
border: 1px solid rgba(255,255,255,0.12);
color: var(--text-dim);
font-size: 11px;
padding: 4px 10px;
border-radius: 99px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.tut-skip-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }
.tut-progress-bar {
height: 4px;
background: rgba(255,255,255,0.06);
border-radius: 99px;
overflow: hidden;
margin-bottom: 22px;
position: relative; z-index: 1;
}
.tut-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--tut-color), color-mix(in srgb, var(--tut-color), #fff 30%));
border-radius: 99px;
transition: width 0.4s ease;
box-shadow: 0 0 10px var(--tut-color);
}
.tut-icon-wrap {
position: relative;
width: 80px; height: 80px;
margin: 4px auto 18px;
}
.tut-icon-glow {
position: absolute; inset: 0;
border-radius: 50%;
background: radial-gradient(circle, var(--tut-color), transparent 65%);
opacity: 0.5;
filter: blur(14px);
animation: tut-pulse 2.4s ease-in-out infinite;
}
@keyframes tut-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.1); }
}
.tut-icon {
position: absolute; inset: 0;
border-radius: 50%;
background: linear-gradient(135deg, color-mix(in srgb, var(--tut-color), #000 30%), color-mix(in srgb, var(--tut-color), #000 60%));
border: 2px solid var(--tut-color);
display: flex; align-items: center; justify-content: center;
font-size: 36px;
color: #fff;
text-shadow: 0 0 12px var(--tut-color);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.tut-title {
font-family: 'Cinzel', serif;
font-size: 22px;
font-weight: 800;
color: var(--tut-color);
text-align: center;
margin-bottom: 12px;
letter-spacing: 0.03em;
text-shadow: 0 0 14px var(--tut-color);
position: relative; z-index: 1;
}
.tut-body {
font-size: 14px;
line-height: 1.6;
color: var(--text);
text-align: center;
margin-bottom: 18px;
min-height: 100px;
position: relative; z-index: 1;
}
.tut-body b { color: var(--tut-color); }
.tut-body i { color: var(--text-dim); font-style: italic; }
.tut-dots {
display: flex; justify-content: center; gap: 5px;
margin-bottom: 18px;
position: relative; z-index: 1;
}
.tut-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
transition: all 0.3s;
}
.tut-dot.past { background: rgba(212,175,55,0.4); }
.tut-dot.active {
background: var(--tut-color);
width: 22px; border-radius: 99px;
box-shadow: 0 0 8px var(--tut-color);
}
.tut-actions {
display: flex; gap: 10px;
align-items: center;
position: relative; z-index: 1;
}
.tut-actions .btn { flex: 1; padding: 11px 16px; font-size: 13.5px; gap: 6px; }
.tut-actions .is-hidden { visibility: hidden; pointer-events: none; }
.tut-actions .tut-next {
background: linear-gradient(180deg, var(--tut-color), color-mix(in srgb, var(--tut-color), #000 35%));
border-color: var(--tut-color);
color: #0a0414;
font-weight: 800;
box-shadow: 0 0 16px var(--tut-color);
}
.tut-actions .tut-next:hover { transform: translateY(-1px); box-shadow: 0 4px 22px var(--tut-color); }
@media (max-width: 600px) {
.tut-modal { padding: 18px 18px; max-height: 92vh; overflow-y: auto; }
.tut-icon-wrap { width: 64px; height: 64px; }
.tut-icon { font-size: 28px; }
.tut-title { font-size: 18px; }
.tut-body { font-size: 13px; min-height: 80px; }
}
/* ===== Skill Tree drop celebration (combat reward) ===== */
.cap-reward.is-skill-drop {
background: linear-gradient(135deg, rgba(184,132,255,0.2), rgba(122,76,240,0.15));
border: 1px solid rgba(184,132,255,0.55);
box-shadow: 0 0 18px rgba(184,132,255,0.4);
}
.cap-reward.is-skill-drop i { color: #d8b4ff; filter: drop-shadow(0 0 8px rgba(184,132,255,0.6)); }
.cap-reward.is-skill-drop .cap-reward-num { color: #d8b4ff; }
.cap-skill-drop-banner {
margin: 12px 0 4px;
padding: 12px 16px;
background: linear-gradient(90deg, rgba(184,132,255,0.18), rgba(122,76,240,0.1));
border: 1px solid rgba(184,132,255,0.5);
border-radius: 10px;
display: flex; align-items: center; gap: 12px;
box-shadow: 0 0 22px rgba(184,132,255,0.35);
animation: skill-drop-pulse 2s ease-in-out infinite;
}
@keyframes skill-drop-pulse {
0%, 100% { box-shadow: 0 0 18px rgba(184,132,255,0.3); }
50% { box-shadow: 0 0 32px rgba(184,132,255,0.7); }
}
.cap-skill-drop-banner > i {
font-size: 28px;
color: #d8b4ff;
filter: drop-shadow(0 0 10px rgba(184,132,255,0.7));
}
.cap-skill-drop-eyebrow {
font-size: 11px;
font-family: var(--font-mono, monospace);
font-weight: 800;
color: #d8b4ff;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.cap-skill-drop-text {
font-size: 14px;
color: #fff;
font-weight: 700;
margin-top: 2px;
}
/* ===== Skill Tree (admin beta) ===== */
.st-header-row {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.st-points {
background: rgba(212,175,55,0.1);
border: 1px solid rgba(212,175,55,0.4);
color: var(--gold);
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
}
.st-points b { font-size: 18px; font-weight: 800; font-family: 'Cinzel', serif; }
.st-actions { display: flex; gap: 6px; }
.st-tabs {
display: flex;
gap: 6px;
margin-bottom: 12px;
overflow-x: auto;
padding-bottom: 2px;
}
.st-tab {
flex: 1; min-width: 130px;
display: flex; flex-direction: column; align-items: center;
gap: 4px;
padding: 10px 14px;
background: rgba(255,255,255,0.03);
border: 1.5px solid rgba(255,255,255,0.08);
border-radius: 8px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
color: var(--text);
}
.st-tab:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }
.st-tab.active {
border-color: var(--st-color);
background: color-mix(in srgb, var(--st-color), transparent 88%);
box-shadow: 0 0 16px color-mix(in srgb, var(--st-color), transparent 60%);
}
.st-tab i { font-size: 22px; color: var(--st-color); }
.st-tab span { font-size: 13px; font-weight: 700; }
.st-tab-count {
font-size: 10px !important;
font-family: var(--font-mono, monospace);
color: var(--text-dim) !important;
font-weight: 600 !important;
}
.st-tab.active .st-tab-count { color: var(--st-color) !important; }
.st-canvas-wrap {
position: relative;
background: linear-gradient(180deg, rgba(15,8,25,0.92), rgba(8,4,18,0.98));
border: 1px solid rgba(212,175,55,0.18);
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
overflow-x: auto;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
transition: background-image 0.3s ease;
}
.st-canvas-wrap[data-branch="warrior"] { background-image: url('/assets/skill-tree/warrior.webp'); }
.st-canvas-wrap[data-branch="merchant"] { background-image: url('/assets/skill-tree/merchant.webp'); }
.st-canvas-wrap[data-branch="explorer"] { background-image: url('/assets/skill-tree/explorer.webp'); }
.st-canvas-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(8,4,18,0.88) 0%, rgba(8,4,18,0.78) 50%, rgba(8,4,18,0.92) 100%);
border-radius: 12px;
z-index: 1;
}
.st-canvas {
min-width: 920px;
position: relative;
z-index: 2;
}
/* ===== Mobile vs desktop SVG variants ===== */
.st-canvas-mobile { display: none; }
@media (max-width: 768px) {
.st-canvas-desktop { display: none !important; }
.st-canvas-mobile {
display: block;
position: relative;
z-index: 2;
width: 100%;
}
.st-canvas-wrap {
padding: 14px 6px;
max-height: none;
overflow: visible;
min-width: 0;
}
/* Si el SVG es más ancho que el viewport, scrollea horizontal con touch */
.st-canvas-mobile {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* === Tier groups === */
.stl-tier {
margin-bottom: 18px;
}
.stl-tier-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 4px 10px;
border-bottom: 1px solid color-mix(in srgb, var(--st-color), transparent 70%);
margin-bottom: 10px;
}
.stl-tier-num {
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--st-color);
}
.stl-tier-progress {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: rgba(255,255,255,0.55);
background: rgba(0,0,0,0.4);
padding: 3px 9px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.08);
}
.stl-tier-cards {
display: flex;
flex-direction: column;
gap: 8px;
}
/* === Cards === */
.stl-card {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: linear-gradient(180deg, rgba(20,12,32,0.85), rgba(12,6,22,0.92));
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
cursor: pointer;
transition: all 0.15s ease;
position: relative;
overflow: hidden;
}
.stl-card:active { transform: scale(0.98); }
.stl-card-icon {
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
background: rgba(0,0,0,0.5);
border: 2px solid rgba(255,255,255,0.08);
flex-shrink: 0;
color: rgba(255,255,255,0.4);
}
.stl-card-body {
min-width: 0;
}
.stl-card-name {
font-size: 15px;
font-weight: 700;
color: #f5e6c8;
margin-bottom: 3px;
line-height: 1.2;
}
.stl-card-desc {
font-size: 12px;
color: rgba(255,255,255,0.6);
line-height: 1.3;
margin-bottom: 6px;
}
.stl-card-pips {
display: flex;
gap: 3px;
margin-top: 4px;
}
.stl-pip {
width: 14px;
height: 5px;
border-radius: 2px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.05);
}
.stl-pip.is-on {
background: var(--st-color);
border-color: var(--st-color);
box-shadow: 0 0 6px var(--st-color);
}
.stl-card-prereq {
font-size: 10.5px;
color: rgba(255,200,87,0.75);
margin-top: 5px;
display: flex;
align-items: center;
gap: 4px;
}
.stl-card-action {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
padding: 0 4px;
}
.stl-card-level {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 700;
color: rgba(255,255,255,0.7);
}
.stl-card-action i {
font-size: 22px;
color: rgba(255,255,255,0.3);
}
/* Estados */
.stl-card-locked {
opacity: 0.6;
}
.stl-card-locked .stl-card-icon { color: rgba(255,255,255,0.2); }
.stl-card-locked .stl-card-action i { color: rgba(255,200,87,0.5); }
.stl-card-available {
border-color: var(--st-color);
border-style: dashed;
}
.stl-card-available .stl-card-icon {
color: var(--st-color);
border-color: var(--st-color);
box-shadow: 0 0 8px color-mix(in srgb, var(--st-color), transparent 60%);
}
.stl-card-available .stl-card-action i { color: var(--st-color); }
.stl-card-allocated {
border-color: var(--st-color);
background: linear-gradient(135deg,
color-mix(in srgb, var(--st-color), transparent 88%),
rgba(12,6,22,0.92));
}
.stl-card-allocated .stl-card-icon {
color: #fff;
background: color-mix(in srgb, var(--st-color), #000 50%);
border-color: var(--st-color);
}
.stl-card-allocated .stl-card-level { color: var(--st-color); }
.stl-card-allocated .stl-card-action i { color: var(--st-color); }
.stl-card-maxed {
border-color: var(--st-color);
background: linear-gradient(135deg,
color-mix(in srgb, var(--st-color), transparent 75%),
rgba(12,6,22,0.92));
box-shadow: 0 0 12px color-mix(in srgb, var(--st-color), transparent 70%);
}
.stl-card-maxed .stl-card-icon {
color: #fff;
background: var(--st-color);
border-color: #fff;
}
.stl-card-maxed .stl-card-level { color: #fff; }
.stl-card-maxed .stl-card-action i { color: #fff; }
/* ===== Skill Tree CTA card (en pantalla de personaje) ===== */
.stats-section-tree-cta { position: relative; }
.stats-section-badge {
margin-left: auto;
background: linear-gradient(135deg, #ffc857, #d4af37);
color: #1a0a0a;
font-size: 10px;
font-weight: 800;
padding: 3px 8px;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stree-cta-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(95,214,132,0.1), rgba(255,200,87,0.06), rgba(232,90,106,0.08));
border: 1px solid rgba(212,175,55,0.3);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.stree-cta-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 0% 0%, rgba(232,90,106,0.15), transparent 40%),
radial-gradient(circle at 50% 100%, rgba(255,200,87,0.12), transparent 40%),
radial-gradient(circle at 100% 50%, rgba(95,214,132,0.15), transparent 40%);
pointer-events: none;
}
.stree-cta-card:hover {
border-color: var(--gold);
background: linear-gradient(135deg, rgba(95,214,132,0.15), rgba(255,200,87,0.1), rgba(232,90,106,0.12));
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(212,175,55,0.18);
}
.stree-cta-icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(212,175,55,0.08));
border: 1px solid rgba(212,175,55,0.4);
color: var(--gold);
font-size: 22px;
position: relative;
z-index: 1;
}
.stree-cta-info {
flex: 1;
min-width: 0;
position: relative;
z-index: 1;
}
.stree-cta-title {
font-size: 14px;
font-weight: 700;
color: #f5e6c8;
margin-bottom: 2px;
}
.stree-cta-sub {
font-size: 11px;
color: rgba(255,255,255,0.55);
line-height: 1.3;
}
.stree-cta-arrow {
flex: 0 0 auto;
font-size: 18px;
color: rgba(212,175,55,0.6);
position: relative;
z-index: 1;
transition: transform 0.2s ease;
}
.stree-cta-card:hover .stree-cta-arrow {
transform: translateX(3px);
color: var(--gold);
}
.st-node { cursor: pointer; }
/* Hover: efecto via filter (no transform — conflictúa con el translate del SVG) */
.st-node:hover .st-node-bg {
filter: drop-shadow(0 0 14px var(--branch-color)) brightness(1.2);
stroke-width: 3;
}
.st-node:hover .st-node-icon { transform: scale(1.1); }
.st-node-bg {
fill: rgba(0,0,0,0.5);
stroke: rgba(255,255,255,0.15);
stroke-width: 2;
transition: stroke 0.15s, fill 0.15s, filter 0.15s, stroke-width 0.15s;
}
.st-node-icon {
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
font-size: 32px;
color: rgba(255,255,255,0.5);
transition: transform 0.15s, color 0.15s;
}
.st-node-level {
font-family: 'JetBrains Mono', monospace;
font-size: 15px; font-weight: 700;
fill: rgba(255,255,255,0.7);
}
/* States */
.st-node-locked .st-node-bg { fill: rgba(0,0,0,0.7); stroke: rgba(255,255,255,0.05); }
.st-node-locked .st-node-icon { color: rgba(255,255,255,0.15); }
.st-node-locked .st-node-level { fill: rgba(255,255,255,0.2); }
.st-node-available .st-node-bg {
fill: rgba(30,20,45,0.75);
stroke: var(--branch-color);
stroke-dasharray: 4 3;
filter: drop-shadow(0 0 6px var(--branch-color));
}
.st-node-available .st-node-icon { color: rgba(255,255,255,0.88); opacity: 1; }
.st-node-available .st-node-level { fill: rgba(255,255,255,0.75); opacity: 1; }
.st-node-allocated .st-node-bg {
fill: color-mix(in srgb, var(--branch-color), #000 50%);
stroke: var(--branch-color);
filter: drop-shadow(0 0 8px var(--branch-color));
}
.st-node-allocated .st-node-icon { color: #fff; }
.st-node-allocated .st-node-level { fill: var(--branch-color); font-weight: 800; }
.st-node-maxed .st-node-bg {
fill: var(--branch-color);
stroke: #fff;
stroke-width: 3;
filter: drop-shadow(0 0 14px var(--branch-color));
}
.st-node-maxed .st-node-icon { color: #fff; }
.st-node-maxed .st-node-level { fill: #fff; font-weight: 800; }
.st-summary {
background: rgba(212,175,55,0.04);
border: 1px solid rgba(212,175,55,0.2);
border-radius: 10px;
padding: 14px 18px;
}
.st-summary-title {
font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--gold); font-weight: 700; margin-bottom: 10px;
display: flex; align-items: center; gap: 6px;
}
.st-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 6px;
}
.st-bonus-row {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px;
background: rgba(255,255,255,0.025);
border-radius: 6px;
font-size: 12.5px;
}
.st-bonus-row i { color: var(--mint); font-size: 14px; flex-shrink: 0; }
.st-bonus-key { flex: 1; color: var(--text); }
.st-bonus-val {
font-family: var(--font-mono, monospace);
font-weight: 800;
color: var(--gold);
}
/* ===== Race Change Modal (pergamino) ===== */
.race-change-modal {
background: linear-gradient(180deg, rgba(30,18,46,0.97), rgba(15,8,25,0.99));
border: 1px solid rgba(212,175,55,0.45);
border-radius: 16px;
padding: 22px 20px 20px;
width: 100%;
max-width: 540px;
position: relative;
box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 36px rgba(212,175,55,0.2);
max-height: 90vh;
overflow-y: auto;
}
.rc-title {
font-family: 'Cinzel', serif;
font-size: 22px;
font-weight: 700;
color: #f5e6c8;
text-align: center;
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.rc-title i { color: var(--gold); font-size: 22px; }
.rc-sub {
font-size: 12.5px;
color: rgba(255,255,255,0.62);
line-height: 1.45;
text-align: center;
margin-bottom: 16px;
padding: 0 4px;
}
.race-change-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 540px) {
.race-change-grid { grid-template-columns: 1fr; }
}
.race-change-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
padding: 14px 10px;
background: linear-gradient(180deg, rgba(20,12,32,0.85), rgba(12,6,22,0.92));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
cursor: pointer;
transition: all 0.15s ease;
font-family: inherit;
color: inherit;
}
.race-change-card:not(:disabled):hover {
border-color: var(--gold);
background: linear-gradient(180deg, rgba(28,18,40,0.95), rgba(18,10,28,0.98));
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(212,175,55,0.18);
}
.race-change-card:not(:disabled):active { transform: translateY(0); }
.race-change-card.is-current,
.race-change-card:disabled {
opacity: 0.45;
cursor: not-allowed;
border-color: rgba(255,255,255,0.04);
}
.rcc-icon {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(212,175,55,0.05));
border: 1px solid rgba(212,175,55,0.35);
color: var(--gold);
font-size: 26px;
margin-bottom: 4px;
}
.rcc-name {
font-family: 'Cinzel', serif;
font-size: 15px;
font-weight: 700;
color: #f5e6c8;
letter-spacing: 0.04em;
}
.rcc-current {
font-size: 10px;
color: rgba(255,255,255,0.45);
font-family: 'Inter', sans-serif;
font-weight: 500;
letter-spacing: 0;
}
.rcc-desc {
font-size: 11px;
color: rgba(255,255,255,0.55);
line-height: 1.3;
margin-bottom: 4px;
}
.rcc-bonuses {
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 2px;
}
.rcc-bonus {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 7px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
font-family: 'JetBrains Mono', monospace;
}
.rcc-bonus i { font-size: 11px; }
.rcc-bonus-str { background: rgba(232,90,106,0.2); color: #f08090; border: 1px solid rgba(232,90,106,0.4); }
.rcc-bonus-agi { background: rgba(95,214,132,0.2); color: #5fd684; border: 1px solid rgba(95,214,132,0.4); }
.rcc-bonus-int { background: rgba(157,108,255,0.22); color: #c2a8ff; border: 1px solid rgba(157,108,255,0.4); }
.rcc-bonus-vit { background: rgba(255,200,87,0.2); color: #ffc857; border: 1px solid rgba(255,200,87,0.4); }
/* ===== Respec confirmation modal ===== */
.st-respec-modal {
background: linear-gradient(180deg, rgba(38,18,28,0.97), rgba(20,8,14,0.99));
border: 1px solid rgba(232,90,106,0.55);
border-radius: 16px;
padding: 28px 24px 22px;
width: 100%;
max-width: 420px;
position: relative;
box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 30px rgba(232,90,106,0.25);
text-align: center;
}
.strespec-icon {
display: flex;
align-items: center;
justify-content: center;
width: 66px;
height: 66px;
margin: 0 auto 14px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(232,90,106,0.25), rgba(232,90,106,0.08));
border: 2px solid rgba(232,90,106,0.5);
color: #e85a6a;
font-size: 30px;
box-shadow: 0 0 18px rgba(232,90,106,0.4);
}
.strespec-title {
font-family: 'Cinzel', serif;
font-size: 20px;
font-weight: 700;
color: #f5e6c8;
margin-bottom: 6px;
letter-spacing: 0.04em;
}
.strespec-sub {
font-size: 13px;
color: rgba(255,255,255,0.65);
line-height: 1.4;
margin-bottom: 18px;
}
.strespec-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
.strespec-card {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 12px 10px;
}
.strespec-card-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.5);
margin-bottom: 6px;
}
.strespec-card-val {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 18px;
font-weight: 700;
}
.strespec-card-cost { border-color: rgba(157,108,255,0.4); }
.strespec-card-cost .strespec-card-val { color: #c2a8ff; }
.strespec-card-cost .strespec-card-val i { color: #c2a8ff; }
.strespec-card-refund { border-color: rgba(95,214,132,0.4); }
.strespec-card-refund .strespec-card-val { color: #5fd684; }
.strespec-card-refund .strespec-card-val i { color: #5fd684; }
.strespec-actions {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 10px;
}
.strespec-actions .btn-block { margin: 0; }
/* ============================================================
Reset 1 Point — skill picker grid
============================================================ */
.sk1-skill-grid {
display: flex;
flex-direction: column;
gap: 14px;
max-height: 50vh;
overflow-y: auto;
padding: 4px 2px;
margin: 4px 0 6px;
}
.sk1-skill-grid::-webkit-scrollbar { width: 6px; }
.sk1-skill-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 3px; }
.sk1-skill-grid::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(157,108,255,0.4), rgba(123,97,255,0.4));
border-radius: 3px;
}
.sk1-tree-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.sk1-tree-label {
font-family: 'Cinzel', serif;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(220, 200, 255, 0.7);
font-weight: 600;
padding: 0 4px 4px;
border-bottom: 1px solid rgba(157, 108, 255, 0.18);
margin-bottom: 2px;
}
.sk1-skill-btn {
display: grid;
grid-template-columns: 38px 1fr 18px;
align-items: center;
gap: 12px;
width: 100%;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 10px 12px;
cursor: pointer;
text-align: left;
color: var(--text);
transition: all 0.18s ease;
font-family: inherit;
}
.sk1-skill-btn:hover:not(.is-disabled):not(:disabled) {
background: linear-gradient(180deg, rgba(157,108,255,0.14), rgba(157,108,255,0.06));
border-color: rgba(157,108,255,0.45);
transform: translateY(-1px);
box-shadow: 0 6px 18px -8px rgba(157,108,255,0.5);
}
.sk1-skill-btn:hover:not(.is-disabled):not(:disabled) .sk1-skill-arrow {
color: #c2a8ff;
transform: rotate(-30deg);
}
.sk1-skill-btn > i:first-child {
font-size: 22px;
color: #c2a8ff;
text-align: center;
width: 38px;
height: 38px;
line-height: 38px;
background: rgba(157,108,255,0.1);
border-radius: 8px;
border: 1px solid rgba(157,108,255,0.22);
}
.sk1-skill-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sk1-skill-name {
font-weight: 700;
font-size: 14px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sk1-skill-meta {
font-size: 12px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.sk1-skill-after {
color: #5fd684;
font-weight: 600;
}
.sk1-skill-arrow {
font-size: 16px;
color: rgba(255,255,255,0.35);
transition: all 0.18s ease;
}
.sk1-skill-btn.is-disabled,
.sk1-skill-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
filter: grayscale(0.4);
}
/* Node modal */
.st-node-modal {
background: linear-gradient(180deg, rgba(28,16,46,0.97), rgba(15,8,25,0.99));
border: 1px solid var(--st-color);
border-radius: 16px;
padding: 24px 22px 22px;
width: 100%;
max-width: 460px;
position: relative;
box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px color-mix(in srgb, var(--st-color), transparent 70%);
}
.stn-icon {
display: flex; align-items: center; justify-content: center;
width: 64px; height: 64px;
margin: 0 auto 12px;
border-radius: 50%;
background: linear-gradient(135deg, var(--st-color), color-mix(in srgb, var(--st-color), #000 50%));
color: #fff;
font-size: 28px;
box-shadow: 0 0 24px var(--st-color);
}
.stn-name {
text-align: center;
font-family: 'Cinzel', serif;
font-size: 22px;
font-weight: 800;
color: var(--st-color);
letter-spacing: 0.04em;
}
.stn-branch {
text-align: center;
font-size: 11.5px;
color: var(--text-dim);
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.stn-desc {
text-align: center;
font-size: 14px;
color: var(--text);
background: rgba(255,255,255,0.03);
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 14px;
line-height: 1.55;
}
.stn-desc b { color: var(--st-color); }
.stn-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
margin-bottom: 12px;
}
.stn-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
padding: 10px;
text-align: center;
}
.stn-card-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
.stn-card-val { font-family: 'Cinzel', serif; font-size: 18px; font-weight: 800; color: var(--st-color); margin-top: 4px; }
.stn-prereq {
background: rgba(220,20,60,0.08);
border: 1px solid rgba(220,20,60,0.3);
border-radius: 8px;
padding: 8px 12px;
margin-bottom: 12px;
font-size: 12px;
color: var(--blood);
display: flex; align-items: center; gap: 8px;
}
.stn-prereq.is-met {
background: rgba(67,233,123,0.06);
border-color: rgba(67,233,123,0.3);
color: var(--mint);
}
.stn-allocate { padding: 12px !important; font-weight: 800 !important; }
.stn-allocate:disabled { opacity: 0.5; cursor: not-allowed; }
/* ===== Offerwalls (BitcoTasks iframe + stats + history) ===== */
.ow-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.ow-stat-card {
background: linear-gradient(180deg, rgba(30,15,45,.6), rgba(15,8,25,.8));
border: 1px solid rgba(212,175,55,0.2);
border-radius: 10px;
padding: 16px;
text-align: center;
}
.ow-stat-card > i { font-size: 22px; opacity: 0.9; }
.ow-stat-card .ows-val {
font-family: 'Cinzel', serif;
font-size: 28px;
font-weight: 800;
color: var(--text);
margin-top: 4px;
}
.ow-stat-card .ows-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
margin-top: 2px;
}
.ow-stat-card.ow-stat-gold {
border-color: rgba(212,175,55,0.5);
background: linear-gradient(180deg, rgba(212,175,55,0.08), rgba(15,8,25,0.9));
}
.ow-stat-card.ow-stat-gold .ows-val,
.ow-stat-card.ow-stat-gold > i { color: var(--gold); }
.ow-stat-card.ow-stat-blood { border-color: rgba(220,20,60,0.4); }
.ow-stat-card.ow-stat-blood .ows-val,
.ow-stat-card.ow-stat-blood > i { color: var(--blood); }
.ow-stat-card.ow-stat-global {
border-color: rgba(0,184,212,0.45);
background: linear-gradient(180deg, rgba(0,184,212,0.10), rgba(15,8,25,0.9));
position: relative;
overflow: hidden;
}
.ow-stat-card.ow-stat-global::before {
content: '';
position: absolute;
top: -2px; right: -2px;
width: 8px; height: 8px;
background: #00b8d4;
border-radius: 50%;
box-shadow: 0 0 8px #00b8d4, 0 0 16px rgba(0,184,212,0.6);
animation: ow-global-pulse 2s ease-in-out infinite;
}
@keyframes ow-global-pulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.4); }
}
.ow-stat-card.ow-stat-global .ows-val,
.ow-stat-card.ow-stat-global > i { color: #4dd0e1; }
.ow-tips-card {
background: rgba(0,184,212,0.06);
border: 1px solid rgba(0,184,212,0.3);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 16px;
}
.ow-tips-title {
display: flex; align-items: center; gap: 6px;
font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
color: #4ec3ff; font-weight: 700; margin-bottom: 8px;
}
.ow-tips-title i { color: #4ec3ff; }
.ow-tips-list { margin: 0; padding-left: 22px; }
.ow-tips-list li { font-size: 12.5px; color: var(--text); line-height: 1.5; margin-bottom: 4px; }
.ow-tips-list b { color: #4ec3ff; }
.ow-iframe-wrap {
background: rgba(15,8,25,0.6);
border: 1px solid rgba(212,175,55,0.18);
border-radius: 10px;
overflow: hidden;
margin-bottom: 16px;
}
@media (max-width: 768px) {
.ow-iframe-wrap iframe { height: 600px !important; }
}
.ow-history-list { display: flex; flex-direction: column; gap: 6px; }
.ow-hist-row {
display: grid;
grid-template-columns: 38px 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
}
.ow-hist-row.is-cb {
background: rgba(220,20,60,0.06);
border-color: rgba(220,20,60,0.2);
}
.ow-hist-icon { font-size: 22px; color: var(--mint); display: flex; justify-content: center; }
.is-cb .ow-hist-icon { color: var(--blood); }
.ow-hist-name { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; color: var(--text); }
.ow-hist-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--text-dim); }
.ow-hist-meta i { font-size: 11px; opacity: 0.7; margin-right: 2px; }
.ow-test-tag {
background: rgba(0,184,212,0.2); color: #4ec3ff;
padding: 1px 6px; border-radius: 4px; font-size: 9.5px;
font-weight: 700; letter-spacing: 0.05em;
}
.ow-hist-reward {
font-family: var(--font-mono, monospace);
font-size: 15px; font-weight: 800;
color: var(--gold);
display: flex; align-items: center; gap: 4px;
}
.ow-hist-reward i { color: var(--gold); }
.ow-hist-reward.is-cb { color: var(--blood); }
.ow-hist-reward.is-cb i { color: var(--blood); }
/* ===== Market: stacked listings (mismo item + precio + multiples vendedores) ===== */
.mi-stack-pill {
background: rgba(184, 132, 255, 0.14) !important;
border: 1px solid rgba(184, 132, 255, 0.4) !important;
color: #d8b4ff !important;
display: inline-flex; align-items: center; gap: 4px;
}
.mi-stack-pill i { color: #b884ff !important; }
.mi-seller-more {
margin-left: 4px;
font-size: 11px;
color: #b884ff;
font-weight: 700;
}
/* ===== TON Deposit ===== */
.ton-deposit-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
margin-bottom: 14px;
background: linear-gradient(135deg, rgba(0, 152, 234, 0.18), rgba(0, 80, 140, 0.1));
border: 1.5px solid rgba(0, 152, 234, 0.5);
border-radius: 12px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ton-deposit-card:hover {
transform: translateY(-2px);
border-color: #0098EA;
box-shadow: 0 6px 28px rgba(0, 152, 234, 0.35);
}
.ton-glow {
position: absolute; top: -50%; left: -10%; right: -10%; bottom: -50%;
background: radial-gradient(ellipse at 0% 50%, rgba(0, 152, 234, 0.4), transparent 60%);
pointer-events: none;
z-index: 0;
}
.ton-deposit-card > * { position: relative; z-index: 1; }
.ton-cta-icon { flex-shrink: 0; filter: drop-shadow(0 0 12px rgba(0, 152, 234, 0.5)); }
.ton-cta-info { flex: 1; min-width: 0; }
.ton-cta-title {
font-family: 'Cinzel', serif;
font-size: 17px;
font-weight: 800;
color: #4ec3ff;
margin-bottom: 2px;
letter-spacing: 0.04em;
}
.ton-cta-sub {
font-size: 12px;
color: rgba(255, 255, 255, 0.72);
line-height: 1.4;
}
.ton-cta-arrow { color: #4ec3ff; font-size: 22px; flex-shrink: 0; }
.ton-modal {
background: linear-gradient(180deg, rgba(20, 26, 50, 0.97), rgba(8, 12, 24, 0.99));
border: 1px solid rgba(0, 152, 234, 0.5);
border-radius: 16px;
padding: 28px 24px 22px;
width: 100%;
max-width: 460px;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 36px rgba(0, 152, 234, 0.25);
}
.ton-modal-icon {
display: flex; justify-content: center;
margin-bottom: 12px;
filter: drop-shadow(0 0 18px rgba(0, 152, 234, 0.6));
}
.ton-modal-icon.ton-pulse svg circle { animation: ton-pulse 2s ease-in-out infinite; }
@keyframes ton-pulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.25); }
}
.ton-modal-title {
text-align: center;
font-family: 'Cinzel', serif;
font-size: 26px;
font-weight: 800;
color: #4ec3ff;
letter-spacing: 0.04em;
}
.ton-modal-sub {
text-align: center;
font-size: 13px;
color: var(--text-dim);
margin-bottom: 16px;
}
.ton-quick-amounts { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.ton-quick-btn {
flex: 1; min-width: 56px;
padding: 8px 0;
background: rgba(0, 152, 234, 0.1);
border: 1px solid rgba(0, 152, 234, 0.3);
color: #4ec3ff;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 700;
transition: background 0.15s, border-color 0.15s;
}
.ton-quick-btn:hover { background: rgba(0, 152, 234, 0.2); border-color: #4ec3ff; }
.ton-preview {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(0, 152, 234, 0.2);
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 12px;
}
.ton-prev-row {
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; padding: 4px 0;
}
.ton-prev-row span { color: var(--text-dim); }
.ton-prev-row b { color: #4ec3ff; font-family: var(--font-mono, monospace); }
.ton-bonus { color: var(--gold); font-size: 11px; }
.ton-countdown {
text-align: center;
font-family: var(--font-mono, monospace);
color: #ff8d63;
margin-bottom: 14px;
font-size: 13px;
font-weight: 600;
}
.ton-countdown b { color: #ffc857; font-size: 15px; }
.ton-field {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 10px;
}
.ton-field.is-warn { border-color: rgba(255, 200, 87, 0.5); background: rgba(255, 200, 87, 0.06); }
.ton-field-label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-dim);
margin-bottom: 6px;
font-weight: 700;
display: flex; gap: 6px; align-items: center;
}
.ton-field-tag {
background: linear-gradient(180deg, #ff5c7c, #b71c4d);
color: #fff;
padding: 1px 6px;
border-radius: 4px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.06em;
}
.ton-field-row { display: flex; gap: 8px; align-items: center; }
.ton-mono {
flex: 1;
font-family: var(--font-mono, monospace);
font-size: 12px;
color: var(--text);
word-break: break-all;
background: rgba(0, 0, 0, 0.4);
padding: 6px 10px;
border-radius: 6px;
display: block;
}
.ton-memo-big {
font-size: 16px !important;
text-align: center;
letter-spacing: 0.15em;
color: #ffc857 !important;
font-weight: 800;
}
.ton-warn-text {
font-size: 11px;
color: #ff8d63;
margin-top: 6px;
line-height: 1.4;
}
.ton-status {
text-align: center;
padding: 12px;
margin-top: 12px;
background: rgba(0, 152, 234, 0.08);
border: 1px solid rgba(0, 152, 234, 0.25);
border-radius: 8px;
font-size: 13px;
color: #4ec3ff;
}
@media (max-width: 600px) {
.ton-deposit-card { padding: 12px 14px; gap: 10px; }
.ton-cta-title { font-size: 15px; }
.ton-cta-sub { font-size: 11px; }
.ton-modal { padding: 22px 18px 18px; }
}
/* ===== Attribute info button + modal ===== */
.attr-info {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid rgba(184, 132, 255, 0.3);
background: rgba(184, 132, 255, 0.06);
color: #b884ff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
margin-right: 6px;
transition: background 0.15s, border-color 0.15s, transform 0.12s;
flex-shrink: 0;
padding: 0;
}
.attr-info:hover {
background: rgba(184, 132, 255, 0.18);
border-color: #b884ff;
transform: scale(1.08);
}
.attr-info i { color: inherit; }
.attr-info-modal {
background: linear-gradient(180deg, rgba(28,16,46,0.97), rgba(15,8,25,0.99));
border: 1px solid var(--ai-color, rgba(212,175,55,0.4));
border-radius: 16px;
padding: 24px 22px 20px;
width: 100%;
max-width: 460px;
position: relative;
box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 28px var(--ai-color, rgba(212,175,55,0.25));
}
.attr-info-modal .ai-icon {
display: flex; align-items: center; justify-content: center;
width: 64px; height: 64px;
margin: 0 auto 12px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ai-color), color-mix(in srgb, var(--ai-color), #000 50%));
color: #fff;
font-size: 28px;
box-shadow: 0 0 24px var(--ai-color);
}
.ai-title {
text-align: center;
font-family: 'Cinzel', serif;
font-size: 22px;
font-weight: 800;
color: var(--ai-color);
margin-bottom: 4px;
letter-spacing: 0.04em;
}
.ai-desc {
text-align: center;
font-size: 12.5px;
color: var(--text-dim);
margin-bottom: 16px;
line-height: 1.45;
}
.ai-row {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 8px;
}
.ai-row-next { border-color: var(--ai-color); background: color-mix(in srgb, var(--ai-color), transparent 92%); }
.ai-row-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-dim);
margin-bottom: 6px;
font-weight: 700;
}
.ai-row-label b { color: var(--text); font-size: 14px; font-family: var(--font-mono, monospace); }
.ai-row-next .ai-row-label b { color: var(--ai-color); font-size: 18px; }
.ai-bonus-line {
display: flex; align-items: center; gap: 6px;
font-size: 13px;
padding: 3px 0;
color: var(--text);
}
.ai-bonus-line i { color: var(--ai-color); font-size: 14px; flex-shrink: 0; }
.ai-bonus-line.is-next i { color: var(--ai-color); }
.ai-bonus-line b { color: var(--text); font-family: var(--font-mono, monospace); }
.ai-cap { color: var(--text-dim); font-size: 10.5px; font-style: italic; }
.ai-delta {
margin-left: 6px;
background: color-mix(in srgb, var(--ai-color), transparent 75%);
color: var(--ai-color);
padding: 1px 6px;
border-radius: 99px;
font-size: 10.5px;
font-weight: 700;
}
.ai-arrow {
text-align: center;
font-size: 18px;
color: var(--ai-color);
margin: -2px 0 -2px;
opacity: 0.7;
}
.ai-permpoint {
margin-top: 10px;
padding: 8px 12px;
background: rgba(255,255,255,0.03);
border-radius: 8px;
font-size: 11.5px;
color: var(--text-dim);
line-height: 1.5;
}
.ai-permpoint b { color: var(--ai-color); }
.ai-permpoint i { margin-right: 4px; color: var(--ai-color); }
/* ===== Stamina pills (combat + zone monster row) ===== */
.cmc-pill-stam, .zmm-stat-stamina {
color: #ffc857 !important;
border-color: rgba(255, 200, 87, 0.4) !important;
background: rgba(255, 141, 51, 0.08) !important;
}
.cmc-pill-stam i, .zmm-stat-stamina i { color: #ffc857 !important; }
/* Badge "stamina por ataque" pegado al botón Atacar de cada monstruo */
.cmc-attack-stam {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 7px;
margin-left: 8px;
border-radius: 99px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255, 200, 87, 0.5);
color: #ffc857;
font-size: 11px;
font-weight: 700;
font-family: var(--font-mono, monospace);
letter-spacing: 0.02em;
}
.cmc-attack-stam i { font-size: 11px; color: #ffc857; }
/* 2026-05-08: descuento de stamina activo (skill tree) — verde + tachado base */
.cmc-attack-stam.has-discount {
border-color: rgba(95, 214, 132, 0.65);
color: #6fe095;
background: rgba(95, 214, 132, 0.12);
box-shadow: 0 0 6px rgba(95,214,132,0.18);
}
.cmc-attack-stam.has-discount i { color: #6fe095; }
.cmc-attack-stam .cmc-stam-old {
margin-left: 4px;
font-size: 9.5px;
color: rgba(255,255,255,0.55);
text-decoration: line-through;
font-weight: 600;
}
/* ===== Forgot Password — modal & link ===== */
.ldn-forgot-line {
text-align: center;
margin-top: 6px;
margin-bottom: 8px;
}
.ldn-forgot-line a {
font-size: 12px;
color: rgba(232,216,176,0.6);
text-decoration: none;
letter-spacing: 0.04em;
transition: color 0.15s;
}
.ldn-forgot-line a:hover {
color: var(--gold);
text-decoration: underline;
}
.fp-modal {
background: linear-gradient(180deg, rgba(28,16,46,0.97), rgba(15,8,25,0.99));
border: 1px solid rgba(212,175,55,0.4);
border-radius: 14px;
padding: 28px 28px 22px;
width: 100%;
max-width: 420px;
position: relative;
box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 30px rgba(212,175,55,0.18);
}
.fp-icon {
width: 60px; height: 60px;
margin: 0 auto 14px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(184,148,30,0.4));
border: 1px solid rgba(212,175,55,0.5);
display: flex; align-items: center; justify-content: center;
font-size: 28px;
color: var(--gold);
box-shadow: 0 0 20px rgba(212,175,55,0.3);
}
.fp-title {
font-family: 'Cinzel', serif;
font-size: 22px;
font-weight: 800;
color: var(--gold);
text-align: center;
margin-bottom: 6px;
letter-spacing: 0.04em;
}
.fp-sub {
font-size: 12.5px;
color: var(--text-dim);
text-align: center;
margin-bottom: 18px;
line-height: 1.45;
}
.fp-modal .ldn-field { margin-bottom: 10px; }
.fp-modal .ldn-field input[readonly] { opacity: 0.6; cursor: not-allowed; }
.fp-submit { margin-top: 8px !important; padding: 11px !important; }
.fp-cancel { margin-top: 6px !important; font-size: 12px !important; padding: 8px !important; }
@media (max-width: 600px) {
.fp-modal { padding: 22px 20px 18px; }
.fp-title { font-size: 19px; }
}
/* ===== Guild Tabs (Members/Requests/Donors) ===== */
.guild-tabs {
display: flex;
gap: 4px;
margin: 18px 0 10px;
border-bottom: 1px solid rgba(184,132,255,0.2);
overflow-x: auto;
}
.guild-tab {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
cursor: pointer;
border-bottom: 2px solid transparent;
font-size: 13px;
font-weight: 600;
color: var(--text-dim);
white-space: nowrap;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.guild-tab:hover { color: var(--text); background: rgba(184,132,255,0.05); }
.guild-tab.is-active {
color: var(--gold);
border-bottom-color: var(--gold);
}
.guild-tab i { font-size: 14px; }
.guild-tab-count {
background: rgba(255,255,255,0.08);
color: var(--text);
border-radius: 99px;
padding: 2px 8px;
font-size: 11px;
font-weight: 700;
font-family: var(--font-mono, monospace);
min-width: 22px;
text-align: center;
}
.guild-tab.is-active .guild-tab-count {
background: var(--gold);
color: #1a0f00;
}
.guild-tab-count.is-pulse {
background: linear-gradient(180deg, #ff5c7c, #b71c4d);
color: #fff;
box-shadow: 0 0 8px rgba(255,92,124,0.6);
animation: req-pulse 1.5s ease-in-out infinite;
}
@keyframes req-pulse {
0%, 100% { box-shadow: 0 0 6px rgba(255,92,124,0.5); }
50% { box-shadow: 0 0 14px rgba(255,92,124,0.95); }
}
.guild-tab-pane { display: none; padding: 6px 0; }
.guild-tab-pane.is-active { display: block; }
.guild-section-meta-row {
font-size: 11.5px;
color: var(--text-dim);
margin-bottom: 8px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.guild-section-meta-row .is-highlight {
color: var(--gold);
font-weight: 700;
}
.guild-empty-state {
text-align: center;
padding: 32px 18px;
color: var(--text-dim);
background: rgba(255,255,255,0.02);
border: 1px dashed rgba(255,255,255,0.08);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font-size: 13px;
}
.guild-empty-state i { font-size: 36px; opacity: 0.3; }
/* ===== Top Donors leaderboard ===== */
.guild-donors-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.gdn-row {
display: grid;
grid-template-columns: 50px 1fr auto auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
transition: background 0.15s, border-color 0.15s;
}
.gdn-row:hover { background: rgba(212,175,55,0.05); border-color: rgba(212,175,55,0.2); }
.gdn-row.is-podium {
background: linear-gradient(90deg, rgba(212,175,55,0.08), rgba(255,255,255,0.02));
border-color: rgba(212,175,55,0.3);
}
.gdn-rank {
font-family: 'Cinzel', serif;
font-size: 18px;
font-weight: 800;
color: var(--text-dim);
text-align: center;
}
.is-podium .gdn-rank { font-size: 22px; }
.gdn-info { min-width: 0; }
.gdn-name {
font-size: 14px;
font-weight: 700;
color: var(--text);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.gdn-meta {
font-size: 11px;
color: var(--text-dim);
font-weight: 400;
font-family: var(--font-mono, monospace);
}
.gdn-vip {
display: inline-flex;
align-items: center;
gap: 3px;
background: linear-gradient(180deg, #ffc857, #b8941e);
color: #1a0f00;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.06em;
padding: 2px 7px;
border-radius: 99px;
box-shadow: 0 0 6px rgba(255,200,87,0.4);
}
.gdn-bar {
height: 4px;
background: rgba(255,255,255,0.06);
border-radius: 99px;
overflow: hidden;
}
.gdn-bar-fill {
height: 100%;
background: linear-gradient(90deg, #d99548, #ffc857);
border-radius: 99px;
}
.gdn-amount { text-align: right; }
.gdn-total {
font-family: var(--font-mono, monospace);
font-size: 14px;
font-weight: 800;
color: var(--gold);
}
.gdn-total i { color: var(--gold); margin-right: 2px; }
.gdn-count {
font-size: 10.5px;
color: var(--text-dim);
margin-top: 2px;
}
/* Columna "Hoy donó" — entre la barra y el total */
.gdn-today {
text-align: center;
padding: 4px 8px;
border-radius: 8px;
border: 1px solid rgba(108,212,255,0.2);
background: rgba(108,212,255,0.06);
min-width: 64px;
}
.gdn-today.no-donated {
border-color: rgba(255,255,255,0.06);
background: rgba(255,255,255,0.02);
opacity: 0.5;
}
.gdn-today-label {
font-family: var(--font-title);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
font-weight: 700;
margin-bottom: 1px;
}
.gdn-today.has-donated .gdn-today-label { color: var(--cyan); }
.gdn-today-amount {
font-family: var(--font-mono, monospace);
font-size: 12.5px;
font-weight: 800;
color: var(--text);
}
.gdn-today.has-donated .gdn-today-amount { color: var(--cyan); }
.gdn-today.no-donated .gdn-today-amount { color: var(--text-dim); }
.gdn-meta-today { font-size: 12.5px; }
@media (max-width: 600px) {
.gdn-row { grid-template-columns: 36px 1fr auto auto; padding: 8px 10px; gap: 8px; }
.gdn-rank { font-size: 14px; }
.is-podium .gdn-rank { font-size: 18px; }
.gdn-name { font-size: 13px; }
.gdn-total { font-size: 13px; }
.gdn-today { min-width: 48px; padding: 3px 6px; }
.gdn-today-label { font-size: 8.5px; }
.gdn-today-amount { font-size: 11px; }
}
/* ===== Clan Chat — panel embebido en la pantalla del clan ===== */
.guild-chat-panel {
background: linear-gradient(180deg, rgba(20,12,30,0.6), rgba(15,8,25,0.85));
border: 1px solid rgba(184,132,255,0.2);
border-radius: 10px;
overflow: hidden;
margin-top: 8px;
}
.guild-chat-body {
height: 280px;
max-height: 280px;
overflow-y: auto;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
scrollbar-width: thin;
scrollbar-color: rgba(184,132,255,0.4) transparent;
}
.guild-chat-body::-webkit-scrollbar { width: 6px; }
.guild-chat-body::-webkit-scrollbar-thumb { background: rgba(184,132,255,0.35); border-radius: 99px; }
.gc-msg {
display: block;
padding: 4px 8px;
border-radius: 6px;
line-height: 1.45;
word-wrap: break-word;
background: rgba(255,255,255,0.02);
border-left: 2px solid transparent;
transition: background 0.15s;
}
.gc-msg.is-own {
background: rgba(212,175,55,0.06);
border-left-color: rgba(212,175,55,0.5);
}
.gc-msg:hover { background: rgba(255,255,255,0.04); }
.gc-time {
font-size: 10px;
color: var(--text-dim);
font-family: var(--font-mono, monospace);
margin-right: 6px;
opacity: 0.7;
}
.gc-role {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 0 4px;
border-radius: 3px;
font-size: 8.5px;
font-weight: 800;
letter-spacing: 0.04em;
margin-right: 4px;
vertical-align: middle;
}
.gc-role i { font-size: 8.5px; }
.gc-role-admin { background: linear-gradient(180deg, #ff3860, #b71c4d); color: #fff; box-shadow: 0 0 4px rgba(255,56,96,0.5); }
.gc-role-mod { background: linear-gradient(180deg, #00b8d4, #006e87); color: #fff; }
.gc-sender {
font-weight: 700;
color: var(--text);
margin-right: 4px;
}
.gc-body { color: var(--text); }
.guild-chat-input-row {
display: flex;
gap: 6px;
padding: 8px;
border-top: 1px solid rgba(184,132,255,0.18);
background: rgba(15,8,25,0.6);
}
.guild-chat-input {
flex: 1;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
padding: 8px 12px;
color: var(--text);
font-size: 13px;
font-family: inherit;
outline: none;
transition: border-color 0.15s, background 0.15s;
}
.guild-chat-input:focus {
border-color: rgba(184,132,255,0.5);
background: rgba(255,255,255,0.06);
}
.guild-chat-send {
flex-shrink: 0;
padding: 0 14px;
font-size: 14px;
}
@media (max-width: 600px) {
.guild-chat-body { height: 220px; max-height: 220px; font-size: 12.5px; }
.gc-time { font-size: 9.5px; }
}
/* ===== Win 5 ELDOR — Card destacado (en grid de eventos) + Modal ===== */
.ev-card-win5 {
border: 1.5px solid #ffc857 !important;
box-shadow: 0 0 22px rgba(255,200,87,0.35), inset 0 1px 0 rgba(255,255,255,0.06) !important;
position: relative;
}
.ev-card-win5::before {
content: '5 ELDOR · $5 USDT';
position: absolute;
top: 10px; left: 10px;
background: linear-gradient(180deg, #ffc857, #b8941e);
color: #1a0f00;
font-family: 'Cinzel', serif;
font-weight: 800;
font-size: 10.5px;
letter-spacing: 0.08em;
padding: 4px 10px;
border-radius: 99px;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
z-index: 3;
text-transform: uppercase;
animation: win5-pulse 2s ease-in-out infinite;
}
.ev-card-win5 .ev-card-tagline {
color: #ffc857 !important;
background: rgba(255,200,87,0.06) !important;
border-top: 1px solid rgba(255,200,87,0.25) !important;
}
.ev-card-win5 .ev-card-tagline i { color: #ffc857 !important; }
.win5-modal {
max-width: 600px;
width: 100%;
max-height: 92vh;
overflow: hidden;
display: flex; flex-direction: column;
background: linear-gradient(180deg, rgba(28,16,46,0.97), rgba(15,8,25,0.99));
border: 1px solid rgba(255,200,87,0.4);
border-radius: 16px;
box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.win5-modal-body {
padding: 18px 22px 20px;
overflow-y: auto;
flex: 1;
}
/* ===== Win 5 Announcement Modal (2026-05-13) — modal de anuncio del evento ===== */
.win5-anno-overlay {
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(8,4,16,0.78);
backdrop-filter: blur(6px);
z-index: 10000;
}
.win5-anno-modal {
max-width: 420px;
width: 100%;
background: linear-gradient(180deg, rgba(28,16,46,0.98), rgba(15,8,25,0.99));
border: 1.5px solid rgba(255,200,87,0.55);
border-radius: 16px;
overflow: hidden;
position: relative;
box-shadow: 0 25px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,200,87,0.10) inset;
}
.win5-anno-modal .ev-modal-close {
position: absolute;
top: 10px; right: 10px;
width: 30px; height: 30px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
color: #fff;
font-size: 14px;
cursor: pointer;
z-index: 3;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s;
}
.win5-anno-modal .ev-modal-close:hover {
background: rgba(0,0,0,0.85);
}
.win5-anno-banner {
position: relative;
height: 160px;
background-size: cover;
background-position: center;
background-color: #1a1028;
}
.win5-anno-banner-shade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(15,8,25,0.85) 100%);
}
.win5-anno-tag {
position: absolute;
top: 12px; left: 12px;
background: linear-gradient(135deg, #ffc857, #ff8a3d);
color: #2a1408;
font-family: var(--font-title, 'Cinzel'), serif;
font-size: 10.5px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 5px 11px;
border-radius: 99px;
display: inline-flex;
align-items: center;
gap: 5px;
z-index: 2;
box-shadow: 0 4px 12px rgba(255,138,61,0.45);
}
.win5-anno-tag i { font-size: 13px; }
.win5-anno-body {
padding: 18px 22px 20px;
text-align: center;
}
.win5-anno-title {
font-family: var(--font-title, 'Cinzel'), serif;
font-size: 24px;
font-weight: 900;
color: #ffc857;
letter-spacing: 0.04em;
margin: 0 0 4px;
text-shadow: 0 2px 14px rgba(255,200,87,0.4);
}
.win5-anno-subtitle {
font-size: 13px;
color: var(--text-muted, #aaa);
margin-bottom: 14px;
letter-spacing: 0.02em;
}
.win5-anno-text {
font-size: 14px;
line-height: 1.55;
color: var(--text, #e0d8c8);
margin-bottom: 12px;
}
.win5-anno-text b { color: #ffc857; }
.win5-anno-ends {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--text-muted, #aaa);
background: rgba(255,200,87,0.06);
border: 1px solid rgba(255,200,87,0.25);
border-radius: 99px;
padding: 5px 14px;
margin: 0 auto 12px;
}
.win5-anno-ends i { color: #ffc857; font-size: 13px; }
.win5-anno-ends b { color: var(--text, #e0d8c8); }
.win5-anno-hint {
font-size: 12px;
color: var(--text-muted, #999);
margin-bottom: 16px;
font-style: italic;
line-height: 1.45;
}
.win5-anno-hint b {
color: var(--gold, #e9b963);
font-style: normal;
}
.win5-anno-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.win5-anno-cta i { margin-right: 6px; }
@media (max-width: 480px) {
.win5-anno-banner { height: 130px; }
.win5-anno-title { font-size: 21px; }
.win5-anno-body { padding: 14px 16px 16px; }
}
/* (clases viejas del card destacado — mantenidas porque se reusan dentro del modal) */
.win5-card {
position: relative;
background: linear-gradient(135deg, rgba(40,15,10,0.92), rgba(20,8,18,0.98));
border: 2px solid #ff8a3d;
border-radius: 16px;
padding: 22px 22px 18px;
margin-bottom: 22px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(255,138,61,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}
.win5-glow {
position: absolute;
top: -50%; left: -10%; right: -10%; bottom: -50%;
background: radial-gradient(ellipse at 20% 0%, rgba(255,138,61,0.35), transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(255,200,87,0.25), transparent 55%);
pointer-events: none;
z-index: 0;
}
.win5-card > * { position: relative; z-index: 1; }
/* Hero con banner real */
.win5-hero {
position: relative;
margin: -22px -22px 14px;
height: 220px;
background-size: cover;
background-position: center;
border-radius: 14px 14px 0 0;
overflow: hidden;
box-shadow: inset 0 -40px 50px -20px rgba(15,8,25,0.95);
}
.win5-hero-overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 70%;
background: linear-gradient(180deg, transparent 0%, rgba(15,8,25,0.4) 50%, rgba(15,8,25,0.95) 100%);
pointer-events: none;
}
.win5-hero-badge {
position: absolute;
top: 14px; right: 14px;
display: inline-flex; align-items: center; gap: 5px;
background: rgba(0,0,0,0.65);
border: 1px solid rgba(255,200,87,0.55);
color: #ffc857;
padding: 6px 12px;
border-radius: 99px;
font-size: 11.5px;
font-family: var(--font-mono, monospace);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
backdrop-filter: blur(4px);
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.win5-hero-badge i { color: #ffc857; }
@media (max-width: 600px) {
.win5-hero { margin: -16px -14px 12px; height: 160px; }
.win5-hero-badge { font-size: 10px; padding: 4px 10px; }
}
.win5-header {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: start;
margin-bottom: 14px;
}
.win5-badge {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(255,138,61,0.15);
border: 1px solid rgba(255,138,61,0.45);
color: #ffaa66;
padding: 5px 10px;
border-radius: 99px;
font-size: 10.5px;
font-family: var(--font-mono, monospace);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
align-self: center;
}
.win5-title-block { text-align: left; }
.win5-title {
font-family: 'Cinzel', serif;
font-size: 28px;
font-weight: 900;
color: #ffc857;
letter-spacing: 0.04em;
text-shadow: 0 0 14px rgba(255,200,87,0.5);
line-height: 1.05;
}
.win5-subtitle {
font-size: 13px;
color: rgba(255,255,255,0.7);
margin-top: 3px;
letter-spacing: 0.03em;
}
.win5-prize-tag {
background: linear-gradient(180deg, #ffc857, #b8941e);
color: #1a0f00;
border-radius: 14px;
padding: 10px 14px;
text-align: center;
box-shadow: 0 6px 20px rgba(255,200,87,0.45);
min-width: 90px;
}
.win5-prize-amount {
font-family: 'Cinzel', serif;
font-size: 32px;
font-weight: 900;
line-height: 1;
}
.win5-prize-label {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
margin-top: 2px;
}
.win5-prize-usd {
font-size: 9.5px;
font-weight: 700;
background: rgba(0,0,0,0.18);
padding: 2px 7px;
border-radius: 99px;
display: inline-block;
margin-top: 5px;
}
.win5-tagline {
font-size: 14.5px;
color: rgba(255,255,255,0.85);
text-align: center;
margin: 8px 0 16px;
font-style: italic;
line-height: 1.4;
}
.win5-section-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #ffaa66;
font-weight: 700;
margin-bottom: 8px;
display: flex; align-items: center; gap: 6px;
}
.win5-section-title i { color: #ffaa66; }
.win5-how { margin-bottom: 16px; }
.win5-rules {
margin: 0; padding-left: 22px;
list-style: decimal;
font-size: 13px;
color: rgba(255,255,255,0.85);
line-height: 1.55;
}
.win5-rules li { margin-bottom: 5px; }
.win5-rules b { color: #ffc857; }
.win5-progress-block {
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,138,61,0.3);
border-radius: 12px;
padding: 14px;
margin-bottom: 14px;
}
.win5-progress-row {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 8px;
}
.win5-progress-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #ffaa66;
font-weight: 700;
}
.win5-progress-count {
font-family: var(--font-mono, monospace);
font-size: 14px;
color: rgba(255,255,255,0.7);
}
.win5-progress-count b {
color: #ffc857;
font-size: 22px;
font-weight: 800;
}
.win5-progress-bar {
height: 10px;
background: rgba(255,255,255,0.08);
border-radius: 99px;
overflow: hidden;
margin-bottom: 10px;
}
.win5-progress-fill {
height: 100%;
background: linear-gradient(90deg, #ff8a3d, #ffc857);
border-radius: 99px;
transition: width 0.5s ease;
box-shadow: 0 0 12px rgba(255,200,87,0.6);
}
.win5-progress-stats {
display: flex; flex-wrap: wrap; gap: 14px;
font-size: 11.5px;
color: rgba(255,255,255,0.7);
font-family: var(--font-mono, monospace);
}
.win5-progress-stats i { color: #ffaa66; margin-right: 3px; }
.win5-progress-stats b { color: #ffc857; }
.win5-cta { margin-bottom: 14px; }
.win5-btn {
font-size: 14px !important;
font-weight: 800 !important;
padding: 13px !important;
letter-spacing: 0.04em;
}
.win5-btn-ready {
background: linear-gradient(180deg, #ffc857, #b8941e) !important;
color: #1a0f00 !important;
border: none !important;
box-shadow: 0 0 20px rgba(255,200,87,0.6) !important;
animation: win5-pulse 1.8s ease-in-out infinite;
}
@keyframes win5-pulse {
0%, 100% { box-shadow: 0 0 18px rgba(255,200,87,0.55); }
50% { box-shadow: 0 0 32px rgba(255,200,87,0.95); }
}
.win5-btn-done {
background: rgba(67,233,123,0.18) !important;
color: var(--mint) !important;
border: 1px solid rgba(67,233,123,0.4) !important;
}
.win5-go-refer {
display: block;
text-align: center;
margin-top: 8px;
color: #ffaa66;
font-size: 12.5px;
cursor: pointer;
transition: color 0.15s;
text-decoration: none;
}
.win5-go-refer:hover { color: #ffc857; }
.win5-warning {
display: flex; gap: 10px;
padding: 12px 14px;
background: rgba(220,20,60,0.1);
border: 1px solid rgba(220,20,60,0.4);
border-radius: 10px;
align-items: flex-start;
}
.win5-warning > i {
color: var(--blood);
font-size: 22px;
flex-shrink: 0;
margin-top: 2px;
}
.win5-warning-title {
font-size: 12.5px;
font-weight: 800;
color: var(--blood);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.win5-warning-body {
font-size: 12px;
color: rgba(255,255,255,0.75);
line-height: 1.45;
}
.win5-warning-body b { color: var(--blood); }
@media (max-width: 600px) {
.win5-card { padding: 16px 14px 14px; }
.win5-header { grid-template-columns: 1fr; gap: 10px; text-align: center; }
.win5-title-block { text-align: center; }
.win5-prize-tag { justify-self: center; }
.win5-title { font-size: 24px; }
.win5-prize-amount { font-size: 28px; }
.win5-progress-stats { flex-direction: column; gap: 6px; }
}
/* =====================================================================
DUNGEONS — Transición + pantalla principal + interludio + pre-boss
===================================================================== */
/* Sprite de monstruo en combate (reemplaza el icono cuando hay PNG dedicado) */
.cs-portrait .cs-monster-sprite {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
}
.cs-portrait.is-boss .cs-monster-sprite {
filter: drop-shadow(0 0 18px rgba(232,90,106,0.6))
drop-shadow(0 6px 18px rgba(0,0,0,0.6));
animation: cs-boss-breath 3.2s ease-in-out infinite;
}
@keyframes cs-boss-breath {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
/* ===== Transición de viaje cinematográfica ===== */
.dgn-transition {
position: fixed;
inset: 0;
background: radial-gradient(ellipse at center, #1a0d2e 0%, #050210 80%);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
overflow: hidden;
}
.dgn-transition-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
opacity: 0.98;
}
.dgn-transition-video-fallback {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
opacity: 0.98;
}
.dgn-transition .dgn-vignette { z-index: 2; }
.dgn-transition .dgn-lightning { z-index: 3; }
.dgn-transition-content { z-index: 4; position: relative; }
/* BG de combate con video (loop ambiental) */
.dgn-bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.6;
z-index: 0;
filter: blur(0.5px) saturate(0.9);
}
/* ========================================================
DUNGEON ARENA — combate inmersivo en tercera persona
======================================================== */
.dgn-arena {
position: relative;
min-height: calc(100vh - 60px);
background: #0a0518;
color: #fff;
overflow: hidden;
display: flex;
flex-direction: column;
}
.dgn-arena-bg-still {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.dgn-arena-bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
opacity: 0.85;
}
.dgn-arena-vignette {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 90%),
linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.7) 100%);
z-index: 2;
pointer-events: none;
}
/* Header de info en la arena */
.dgn-arena-header {
position: relative;
z-index: 5;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 18px;
background: linear-gradient(180deg, rgba(8,4,18,0.85), transparent);
}
.dgn-arena-dungeon-name {
font-family: var(--font-title);
font-weight: 800;
font-size: 18px;
letter-spacing: 0.04em;
color: var(--dgn-accent, #9d6cff);
text-shadow: 0 0 14px var(--dgn-accent, rgba(157,108,255,0.55)), 0 2px 6px rgba(0,0,0,0.8);
}
.dgn-arena-floor-info {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: rgba(255,255,255,0.85);
margin-top: 2px;
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.dgn-arena-floor-info i { color: var(--dgn-accent, #9d6cff); }
.dgn-arena-bag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(8,4,18,0.7);
border: 1px solid var(--dgn-accent, rgba(157,108,255,0.45));
border-radius: 999px;
cursor: pointer;
transition: all 0.15s;
font-family: var(--font-mono);
font-weight: 700;
font-size: 13px;
color: #fff;
}
.dgn-arena-bag:hover { background: rgba(157,108,255,0.18); transform: translateY(-1px); }
.dgn-arena-bag i { color: var(--gold); font-size: 16px; }
.dgn-arena-bag-items { color: var(--dgn-accent); margin-left: 4px; }
/* Stage: player izq, monstruo der */
.dgn-arena-stage {
position: relative;
z-index: 4;
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
gap: 0;
padding: 0 24px 32px;
}
.dgn-fighter {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
justify-content: flex-end;
}
.dgn-fighter-bars {
width: 100%;
max-width: 340px;
margin-bottom: 12px;
z-index: 5;
}
.dgn-fighter-name-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
text-shadow: 0 2px 6px rgba(0,0,0,0.85);
}
.dgn-fighter-name {
font-family: var(--font-title);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.04em;
color: #fff;
}
.dgn-fighter-level {
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
color: var(--dgn-accent, #9d6cff);
}
.dgn-boss-tag {
display: inline-block;
padding: 1px 8px;
margin-left: 6px;
background: linear-gradient(135deg, #6a45c4, #e85a6a);
color: #fff;
font-family: var(--font-title);
font-weight: 800;
font-size: 9px;
letter-spacing: 0.18em;
border-radius: 4px;
}
.dgn-fighter-hp-bar, .dgn-fighter-mp-bar {
position: relative;
height: 18px;
background: rgba(0,0,0,0.7);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 999px;
overflow: hidden;
margin-bottom: 4px;
}
.dgn-fighter-hp-fill {
position: absolute;
inset: 0 auto 0 0;
height: 100%;
width: 100%;
transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dgn-fighter-hp-fill.is-player {
background: linear-gradient(180deg, #ef6b6b 0%, #c4451e 100%);
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 0 8px rgba(232,90,106,0.4);
}
.dgn-fighter-hp-fill.is-monster {
background: linear-gradient(180deg, #b96bef 0%, #6a45c4 100%);
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 0 8px rgba(157,108,255,0.4);
}
.dgn-fighter-mp-bar { height: 12px; }
.dgn-fighter-mp-fill {
position: absolute;
inset: 0 auto 0 0;
height: 100%;
width: 100%;
background: linear-gradient(180deg, #4ec3f7 0%, #1e60c4 100%);
transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 6px rgba(78,195,247,0.35);
}
.dgn-fighter-hp-num {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-weight: 800;
font-size: 11px;
color: #fff;
text-shadow: 0 0 4px rgba(0,0,0,0.95), 0 0 4px rgba(0,0,0,0.95);
letter-spacing: 0.04em;
z-index: 1;
}
.dgn-fighter-mp-num {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-weight: 700;
font-size: 9.5px;
color: #fff;
text-shadow: 0 0 3px rgba(0,0,0,0.95);
z-index: 1;
}
/* Sprite del combatiente */
.dgn-fighter-sprite-wrap {
position: relative;
width: 100%;
max-width: 380px;
height: 380px;
display: flex;
align-items: flex-end;
justify-content: center;
}
.dgn-fighter-sprite-img {
max-width: 100%;
max-height: 100%;
width: auto;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 16px 24px rgba(0,0,0,0.7));
}
.dgn-fighter-sprite-monster .dgn-fighter-sprite-img {
/* Por default los sprites de monstruos vienen mirando a la izquierda
o derecha. Si miran a la izquierda (hacia el player), no flip.
Si miran a la derecha, deberían flippearse acá pero como vienen
sueltos lo dejamos sin flip por defecto. */
}
/* Animación idle suave */
.dgn-fighter-sprite-img {
animation: dgn-fighter-breath 3.6s ease-in-out infinite;
}
@keyframes dgn-fighter-breath {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-4px) scale(1.01); }
}
/* Boss: animación más dramática + glow */
.dgn-fighter-sprite-monster .dgn-fighter-sprite-img[src*="aria"],
.dgn-fighter-sprite-monster .dgn-fighter-sprite-img[src*="vigia"] {
animation: dgn-boss-breath 2.8s ease-in-out infinite;
filter: drop-shadow(0 0 24px rgba(232,90,106,0.5))
drop-shadow(0 16px 24px rgba(0,0,0,0.7));
}
@keyframes dgn-boss-breath {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-8px) scale(1.04); }
}
/* Popups de daño/heal flotantes */
.dgn-popup-zone {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 6;
}
.dgn-popup {
position: absolute;
font-family: var(--font-title);
font-weight: 900;
font-size: 28px;
letter-spacing: 0.04em;
text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,1);
pointer-events: none;
white-space: nowrap;
}
.dgn-popup-damage { color: #ff5f6e; text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 0 12px rgba(255,80,80,0.7); }
.dgn-popup-heal { color: #5fd684; text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 0 12px rgba(80,220,140,0.7); }
.dgn-popup-crit { color: #ffc857; font-size: 36px; text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 0 16px rgba(255,200,87,0.85); }
/* VFX overlay (slash, magic blast, crit) */
.dgn-vfx-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: auto;
pointer-events: none;
z-index: 7;
mix-blend-mode: screen;
}
.dgn-vfx-slash { width: 90%; }
.dgn-vfx-magic { width: 100%; }
.dgn-vfx-crit { width: 70%; }
/* Action bar inferior */
.dgn-arena-actions {
position: relative;
z-index: 5;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 14px 16px;
background: linear-gradient(0deg, rgba(8,4,18,0.95), rgba(8,4,18,0.7) 50%, transparent);
border-top: 1px solid rgba(157,108,255,0.25);
}
.dgn-act {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 11px 18px;
background: rgba(0,0,0,0.7);
border: 1.5px solid var(--dgn-accent, rgba(157,108,255,0.4));
border-radius: 10px;
font-family: var(--font-title);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.06em;
color: #fff;
cursor: pointer;
position: relative;
transition: all 0.15s;
}
.dgn-act:hover:not(:disabled) {
transform: translateY(-2px);
background: rgba(157,108,255,0.15);
border-color: var(--dgn-accent, #9d6cff);
box-shadow: 0 6px 18px rgba(157,108,255,0.35);
}
.dgn-act-attack {
background: linear-gradient(135deg, rgba(196,69,30,0.25), rgba(232,90,106,0.18));
border-color: rgba(232,90,106,0.5);
}
.dgn-act-attack:hover { box-shadow: 0 6px 18px rgba(232,90,106,0.4); }
.dgn-act-attack i { color: #ff5f6e; }
.dgn-act-skill i { color: #4ec3f7; }
.dgn-act-flee {
background: rgba(0,0,0,0.55);
border-color: rgba(255,255,255,0.25);
}
.dgn-act-flee i { color: rgba(255,255,255,0.65); }
.dgn-act-name { display: inline-block; }
.dgn-act-mp {
font-family: var(--font-mono);
font-size: 10px;
color: #4ec3f7;
margin-left: 4px;
}
.dgn-act-cd {
position: absolute;
top: -6px;
right: -6px;
background: rgba(0,0,0,0.95);
border: 1.5px solid #ffc857;
color: #ffc857;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
}
.dgn-act.is-disabled, .dgn-act:disabled {
opacity: 0.45;
cursor: not-allowed;
filter: grayscale(0.5);
}
/* Mobile arena — todo compacto, sin scroll */
@media (max-width: 720px) {
.dgn-arena {
min-height: calc(100dvh - 60px); /* dvh = dynamic viewport height (mobile chrome) */
height: calc(100dvh - 60px);
}
.dgn-arena-header {
padding: 8px 12px;
flex-shrink: 0;
}
.dgn-arena-dungeon-name { font-size: 13px; line-height: 1.1; }
.dgn-arena-floor-info { font-size: 10.5px; margin-top: 1px; }
.dgn-arena-bag { padding: 5px 9px; font-size: 11px; }
.dgn-arena-bag i { font-size: 13px; }
.dgn-arena-stage {
flex: 1;
min-height: 0; /* permite que el grid se comprima */
padding: 4px 6px;
grid-template-columns: 1fr 1fr;
align-items: end;
gap: 4px;
}
.dgn-fighter {
min-height: 0; /* permite shrink */
overflow: visible;
}
.dgn-fighter-bars {
max-width: 100%;
padding: 0 2px;
margin-bottom: 4px;
}
.dgn-fighter-sprite-wrap {
height: auto;
flex: 1;
min-height: 0;
max-height: calc(100dvh - 240px); /* asegura que action bar quede visible */
}
.dgn-fighter-sprite-img {
max-height: 100%;
height: auto;
width: auto;
max-width: 90%;
}
.dgn-fighter-name { font-size: 11px; line-height: 1.1; }
.dgn-fighter-level { font-size: 9.5px; }
.dgn-boss-tag { font-size: 7px; padding: 0px 4px; }
.dgn-fighter-hp-bar { height: 15px; margin-bottom: 3px; }
.dgn-fighter-mp-bar { height: 11px; margin-bottom: 0; }
.dgn-fighter-hp-num { font-size: 10px; line-height: 1; }
.dgn-fighter-mp-num { font-size: 9px; line-height: 1; }
.dgn-fighter-name-row { margin-bottom: 2px; }
.dgn-popup { font-size: 18px; }
.dgn-popup-crit { font-size: 24px; }
/* Action bar en grid: fila 1 ataque solo, fila 2 las 3 skills, fila 3 huir */
.dgn-arena-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 8px 6px 10px;
gap: 6px;
flex-shrink: 0;
}
.dgn-act {
padding: 10px 8px;
font-size: 11.5px;
min-width: 0;
justify-content: center;
}
.dgn-act > i { font-size: 14px; }
.dgn-act .dgn-act-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dgn-act-mp { font-size: 8.5px; }
.dgn-act-cd {
width: 18px; height: 18px; font-size: 10px;
top: -5px; right: -5px;
}
/* Attack ocupa toda la fila (ancho completo) */
.dgn-act-attack {
grid-column: 1 / -1;
padding: 12px 14px;
font-size: 13px;
}
.dgn-act-attack > i { font-size: 18px; }
/* Flee también full width al final */
.dgn-act-flee {
grid-column: 1 / -1;
padding: 8px 10px;
font-size: 11px;
}
/* Las skills toman 1 columna cada una automáticamente */
.dgn-act-skill { padding: 9px 6px; }
}
@media (max-width: 480px) {
.dgn-arena-header { padding: 6px 10px; }
.dgn-arena-bag { padding: 4px 8px; font-size: 10.5px; }
.dgn-fighter-sprite-img { max-width: 85%; }
.dgn-fighter-name { font-size: 10px; }
.dgn-act { padding: 7px 6px; font-size: 10.5px; }
.dgn-act > span:not(.dgn-act-mp):not(.dgn-act-cd) {
max-width: 60px;
}
}
@media (max-width: 380px) {
/* En pantallas muy chicas, el botón solo muestra el icono + nombre corto */
.dgn-act > i { font-size: 13px; }
.dgn-act-mp { display: none; }
.dgn-fighter-sprite-img { max-width: 80%; }
}
.dgn-clouds {
position: absolute;
inset: -20%;
background: radial-gradient(ellipse, rgba(157,108,255,0.35), transparent 60%);
filter: blur(40px);
animation: dgn-cloud-drift 20s ease-in-out infinite;
pointer-events: none;
}
.dgn-clouds-1 { animation-duration: 18s; opacity: 0.7; }
.dgn-clouds-2 {
background: radial-gradient(ellipse, rgba(80,40,120,0.4), transparent 60%);
animation-duration: 24s;
animation-direction: reverse;
transform: translate(20%, -10%);
opacity: 0.8;
}
.dgn-clouds-3 {
background: radial-gradient(ellipse, rgba(40,20,80,0.5), transparent 65%);
animation-duration: 30s;
transform: translate(-30%, 15%);
opacity: 0.6;
}
@keyframes dgn-cloud-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(8%, -5%) scale(1.08); }
}
.dgn-vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.85) 100%);
pointer-events: none;
}
.dgn-vignette-strong {
background: radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.95) 90%);
}
.dgn-lightning {
position: absolute;
inset: 0;
background: rgba(180, 140, 255, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity 0.05s linear;
mix-blend-mode: screen;
}
.dgn-lightning.flash {
opacity: 1;
transition: none;
}
.dgn-transition-content {
position: relative;
z-index: 2;
text-align: center;
padding: 32px;
}
.dgn-transition-tag {
font-family: var(--font-title);
font-size: 12px;
letter-spacing: 0.4em;
color: var(--dgn-accent, #9d6cff);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 12px;
}
.dgn-transition-title {
font-family: var(--font-title);
font-weight: 900;
font-size: 56px;
letter-spacing: 0.04em;
color: #fff;
text-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 40px var(--dgn-accent, #9d6cff);
margin-bottom: 14px;
}
.dgn-transition-sub {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: rgba(255,255,255,0.75);
margin-bottom: 32px;
}
.dgn-transition-loader {
width: 220px;
height: 4px;
margin: 0 auto;
background: rgba(255,255,255,0.08);
border-radius: 999px;
overflow: hidden;
}
.dgn-transition-bar {
width: 0%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--dgn-accent, #9d6cff), transparent);
animation: dgn-loader-bar 2.5s ease-in-out infinite;
}
@keyframes dgn-loader-bar {
0% { width: 0%; margin-left: 0%; }
50% { width: 80%; margin-left: 10%; }
100% { width: 0%; margin-left: 100%; }
}
/* ===== Dungeon main screen ===== */
.dgn-screen {
position: relative;
min-height: calc(100vh - 60px);
background: #0a0518;
color: #fff;
overflow: hidden;
}
.dgn-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.55;
filter: blur(2px) saturate(0.85);
z-index: 0;
}
.dgn-bg-floor {
background: radial-gradient(ellipse at center, rgba(80,40,120,0.55), rgba(10,5,24,0.95)),
linear-gradient(180deg, rgba(157,108,255,0.18), transparent 70%);
}
.dgn-bg-boss {
background: radial-gradient(ellipse at center, rgba(180,40,80,0.55), rgba(10,5,24,0.95)),
linear-gradient(180deg, rgba(232,90,106,0.25), transparent 70%);
}
/* Header de dungeon */
.dgn-header {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
background: linear-gradient(180deg, rgba(10,5,24,0.85), transparent);
border-bottom: 1px solid var(--dgn-accent, rgba(157,108,255,0.4));
}
.dgn-header-name {
font-family: var(--font-title);
font-weight: 800;
font-size: 18px;
letter-spacing: 0.04em;
color: var(--dgn-accent, #9d6cff);
text-shadow: 0 0 12px var(--dgn-accent, rgba(157,108,255,0.55));
}
.dgn-header-floor {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: rgba(255,255,255,0.7);
margin-top: 2px;
}
.dgn-header-floor i { color: var(--dgn-accent, #9d6cff); }
.dgn-floor-boss {
display: inline-block;
padding: 2px 8px;
background: linear-gradient(135deg, #6a45c4, #e85a6a);
color: #fff;
font-weight: 800;
letter-spacing: 0.1em;
border-radius: 999px;
font-size: 10px;
}
.dgn-bag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(0,0,0,0.5);
border: 1px solid var(--dgn-accent, rgba(157,108,255,0.4));
border-radius: 999px;
cursor: pointer;
transition: all 0.15s;
font-family: var(--font-mono);
font-weight: 700;
font-size: 13px;
}
.dgn-bag:hover { background: rgba(157,108,255,0.18); transform: translateY(-1px); }
.dgn-bag i { color: var(--gold); font-size: 16px; }
.dgn-bag-items { color: var(--dgn-accent, #9d6cff); margin-left: 4px; }
/* ===== Interludio entre pisos ===== */
.dgn-interlude { padding: 0; }
.dgn-interlude-content {
position: relative;
z-index: 2;
max-width: 540px;
margin: 32px auto;
padding: 24px;
background: linear-gradient(180deg, rgba(28,16,52,0.92), rgba(10,5,24,0.96));
border: 1.5px solid var(--dgn-accent, rgba(157,108,255,0.45));
border-radius: 16px;
text-align: center;
box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 24px var(--dgn-accent);
}
.dgn-interlude-icon {
width: 70px;
height: 70px;
margin: 0 auto 12px;
border-radius: 50%;
background: rgba(95,214,132,0.18);
border: 2px solid #5fd684;
display: flex; align-items: center; justify-content: center;
font-size: 36px;
color: #5fd684;
box-shadow: 0 0 20px rgba(95,214,132,0.4);
}
.dgn-interlude-title {
font-family: var(--font-title);
font-weight: 800;
font-size: 26px;
letter-spacing: 0.04em;
}
.dgn-interlude-sub {
font-size: 13px;
color: rgba(255,255,255,0.65);
margin-top: 4px;
}
/* Loot box visual */
.dgn-interlude-loot, .dgn-bag-summary, .dgn-end-rewards, .dgn-preboss-loot {
margin: 18px 0 12px;
padding: 14px;
background: rgba(0,0,0,0.45);
border: 1px solid var(--border-soft);
border-radius: 12px;
text-align: left;
}
.dgn-loot-title, .dgn-bag-summary-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-muted);
font-weight: 700;
margin-bottom: 8px;
}
.dgn-loot-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 13px;
}
.dgn-loot-row > i { font-size: 16px; }
.dgn-loot-row .ph-coin { color: var(--gold); }
.dgn-loot-row .ph-star { color: #5fd684; }
.dgn-loot-row .ph-package { color: var(--cyan); }
.dgn-loot-big { font-size: 16px; font-weight: 700; }
.dgn-stats-row {
display: flex;
flex-direction: column;
gap: 6px;
margin: 14px 0;
}
.dgn-stat-bar {
position: relative;
height: 22px;
background: rgba(0,0,0,0.6);
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--border-soft);
}
.dgn-stat-bar-fill {
position: absolute;
inset: 0 auto 0 0;
background: var(--gold);
transition: width 0.3s ease;
}
.dgn-stat-hp .dgn-stat-bar-fill { background: linear-gradient(90deg, #c4451e, #e85a6a); }
.dgn-stat-mp .dgn-stat-bar-fill { background: linear-gradient(90deg, #1e60c4, #4ec3f7); }
.dgn-stat-bar-label {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 100%;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
color: #fff;
text-shadow: 0 0 4px rgba(0,0,0,0.8);
}
/* Pociones grid */
.dgn-potions-title {
text-align: left;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-muted);
font-weight: 700;
margin: 14px 0 8px;
}
.dgn-potions-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
margin-bottom: 10px;
}
.dgn-potion-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 6px;
background: rgba(0,0,0,0.45);
border: 1.5px solid var(--border-soft);
border-radius: 10px;
cursor: pointer;
transition: all 0.15s;
color: #fff;
font-size: 11px;
}
.dgn-potion-btn:hover { border-color: #5fd684; transform: translateY(-2px); background: rgba(95,214,132,0.08); }
.dgn-potion-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dgn-potion-btn > i { font-size: 22px; color: #5fd684; }
.dgn-potion-name { text-align: center; font-weight: 600; }
.dgn-potion-qty { font-family: var(--font-mono); color: var(--text-muted); }
.dgn-no-potions {
padding: 12px;
text-align: center;
color: var(--text-muted);
font-size: 12px;
font-style: italic;
}
.dgn-interlude-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 18px;
}
.dgn-bag-summary-row {
display: flex; align-items: center; gap: 8px; font-family: var(--font-mono);
font-weight: 700; color: var(--gold); font-size: 14px;
}
.dgn-bag-summary-items { color: var(--cyan); margin-left: auto; font-size: 12px; }
/* ===== Pre-boss decision ===== */
.dgn-preboss-content {
position: relative; z-index: 2;
max-width: 580px;
margin: 32px auto;
padding: 28px;
background: linear-gradient(180deg, rgba(50,16,30,0.95), rgba(10,5,24,0.98));
border: 2px solid #e85a6a;
border-radius: 16px;
text-align: center;
box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 32px rgba(232,90,106,0.5);
}
.dgn-preboss-icon {
font-size: 56px;
color: #e85a6a;
text-shadow: 0 0 18px rgba(232,90,106,0.7);
animation: dgn-skull-pulse 2.5s ease-in-out infinite;
}
@keyframes dgn-skull-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
.dgn-preboss-warning {
font-family: var(--font-title);
font-weight: 900;
font-size: 14px;
letter-spacing: 0.3em;
color: #e85a6a;
margin: 12px 0 8px;
}
.dgn-preboss-title {
font-family: var(--font-title);
font-weight: 800;
font-size: 32px;
letter-spacing: 0.04em;
color: #fff;
text-shadow: 0 0 14px rgba(232,90,106,0.5);
}
.dgn-preboss-body {
font-size: 14px;
color: rgba(255,255,255,0.8);
line-height: 1.6;
margin: 16px 0;
}
.dgn-preboss-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 18px;
}
.dgn-preboss-actions .btn {
flex-direction: column;
height: auto;
padding: 14px 10px;
gap: 4px;
}
.dgn-preboss-actions .btn > i { font-size: 24px; margin-bottom: 4px; }
.dgn-action-main {
font-weight: 800;
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.dgn-action-sub {
font-size: 10.5px;
color: rgba(255,255,255,0.6);
font-weight: 500;
}
/* ===== End screen ===== */
.dgn-end-content {
position: relative; z-index: 2;
max-width: 480px;
margin: 32px auto;
padding: 28px;
background: linear-gradient(180deg, rgba(28,16,52,0.95), rgba(10,5,24,0.98));
border: 2px solid var(--dgn-result, var(--dgn-accent));
border-radius: 16px;
text-align: center;
box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 32px var(--dgn-result, var(--dgn-accent));
}
.dgn-end-icon {
width: 80px; height: 80px;
margin: 0 auto 12px;
border-radius: 50%;
background: rgba(0,0,0,0.4);
border: 2px solid var(--dgn-result);
display: flex; align-items: center; justify-content: center;
font-size: 44px;
color: var(--dgn-result);
}
.dgn-end-title {
font-family: var(--font-title);
font-weight: 900;
font-size: 28px;
letter-spacing: 0.06em;
color: var(--dgn-result);
text-shadow: 0 0 14px var(--dgn-result);
}
.dgn-end-sub {
font-size: 14px;
color: rgba(255,255,255,0.7);
margin-top: 4px;
margin-bottom: 14px;
}
.dgn-end-bossdrop {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
margin-top: 8px;
background: rgba(255,200,87,0.15);
border: 1px solid #ffc857;
border-radius: 999px;
color: #ffc857;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.05em;
}
.dgn-end-defeated {
display: flex;
align-items: center;
gap: 10px;
color: #e85a6a;
font-size: 13px;
background: rgba(232,90,106,0.08);
border-color: rgba(232,90,106,0.4) !important;
}
.dgn-end-defeated > i { font-size: 24px; flex-shrink: 0; }
.dgn-end-back {
margin-top: 18px;
}
/* ===== Modal de loadout: elegir 3 skills antes de entrar ===== */
.dgn-loadout-modal {
max-width: 580px;
background: linear-gradient(180deg, #1c1334 0%, #0a0518 100%);
border: 1.5px solid rgba(157,108,255,0.5);
border-radius: 16px;
padding: 24px 22px 18px;
position: relative;
box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 24px rgba(157,108,255,0.3);
}
.dgn-loadout-title {
font-family: var(--font-title);
font-weight: 800;
font-size: 20px;
letter-spacing: 0.04em;
color: #fff;
text-align: center;
margin-bottom: 4px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.dgn-loadout-title > i { color: #b884ff; font-size: 24px; }
.dgn-loadout-sub {
text-align: center;
font-size: 13px;
color: rgba(255,255,255,0.7);
margin-bottom: 12px;
line-height: 1.4;
}
.dgn-loadout-sub b { color: #b884ff; }
.dgn-loadout-counter-wrap {
display: flex;
justify-content: center;
margin-bottom: 14px;
}
.dgn-loadout-counter {
font-family: var(--font-mono);
font-weight: 800;
font-size: 15px;
color: #b884ff;
padding: 6px 16px;
background: rgba(157,108,255,0.12);
border: 1px solid rgba(157,108,255,0.35);
border-radius: 999px;
letter-spacing: 0.05em;
}
.dgn-loadout-counter b { color: #5fd684; font-size: 17px; }
.dgn-loadout-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 16px;
max-height: 50vh;
overflow-y: auto;
}
.dgn-loadout-skill {
position: relative;
padding: 14px 10px 10px;
background: rgba(0,0,0,0.45);
border: 1.5px solid var(--border-soft);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
cursor: pointer;
transition: all 0.15s;
color: #fff;
}
.dgn-loadout-skill:hover:not(:disabled) {
border-color: rgba(157,108,255,0.5);
transform: translateY(-2px);
background: rgba(157,108,255,0.08);
}
.dgn-loadout-skill.is-picked {
border-color: #5fd684;
background: rgba(95,214,132,0.12);
box-shadow: 0 0 18px rgba(95,214,132,0.35);
}
.dgn-loadout-skill.is-ultimate {
background: linear-gradient(180deg, rgba(255,200,87,0.12), rgba(0,0,0,0.45));
}
.dgn-loadout-skill.is-ultimate.is-picked {
border-color: #ffc857;
background: rgba(255,200,87,0.15);
box-shadow: 0 0 18px rgba(255,200,87,0.4);
}
.dgn-loadout-skill.is-locked {
opacity: 0.35;
cursor: not-allowed;
}
.dgn-ls-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(157,108,255,0.18);
border: 1.5px solid rgba(157,108,255,0.4);
display: flex; align-items: center; justify-content: center;
font-size: 22px;
color: #b884ff;
margin-bottom: 6px;
}
.dgn-loadout-skill.is-ultimate .dgn-ls-icon {
background: rgba(255,200,87,0.18);
border-color: rgba(255,200,87,0.5);
color: #ffc857;
}
.dgn-ls-name {
font-family: var(--font-title);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.03em;
margin-bottom: 4px;
line-height: 1.2;
}
.dgn-ls-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
justify-content: center;
font-family: var(--font-mono);
font-size: 9.5px;
color: rgba(255,255,255,0.65);
}
.dgn-ls-check {
position: absolute;
top: -8px; right: -8px;
width: 24px; height: 24px;
background: #5fd684;
color: #062613;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
box-shadow: 0 4px 10px rgba(95,214,132,0.5);
}
.dgn-loadout-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.dgn-loadout-actions .btn { width: 100%; max-width: 360px; }
.dgn-loadout-skip-link {
background: transparent;
border: none;
color: rgba(255,255,255,0.55);
font-size: 12px;
cursor: pointer;
padding: 4px 8px;
text-decoration: underline;
transition: color 0.15s;
}
.dgn-loadout-skip-link:hover { color: rgba(255,255,255,0.85); }
/* Toggle states (clases que se aplican via JS — sin re-render) */
.dgn-loadout-skill .dgn-ls-check { display: none; }
.dgn-loadout-skill.is-picked .dgn-ls-check { display: flex; }
.dgn-loadout-skill.is-locked { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
@media (max-width: 540px) {
.dgn-loadout-modal { padding: 18px 14px 14px; }
.dgn-loadout-title { font-size: 17px; }
.dgn-loadout-sub { font-size: 12px; }
.dgn-loadout-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.dgn-ls-icon { width: 38px; height: 38px; font-size: 18px; }
.dgn-ls-name { font-size: 11px; }
.dgn-ls-meta { font-size: 9px; }
}
/* dgnm modal updates (dungeon entry) */
.dgnm-rules {
list-style: none;
padding: 0;
margin: 0;
}
.dgnm-rules li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 6px 0;
font-size: 13px;
color: rgba(255,255,255,0.85);
line-height: 1.4;
}
.dgnm-rules li > i {
font-size: 16px;
color: var(--dgn-accent, #9d6cff);
flex-shrink: 0;
margin-top: 1px;
}
.dgnm-cooldown {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
margin: 12px 0;
background: rgba(232,90,106,0.12);
border: 1px solid rgba(232,90,106,0.4);
border-radius: 10px;
color: #e85a6a;
font-size: 13px;
font-weight: 600;
}
.dgnm-cooldown > i { font-size: 18px; }
/* ============================================================
Loot preview en modal de mazmorra
============================================================ */
.dgnm-loot-section {
margin-top: 14px;
padding: 12px;
background: rgba(0,0,0,0.32);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
}
.dgnm-loot-section.dgnm-boss-section {
margin-top: 10px;
border-left: 3px solid var(--dgn-accent, #9d6cff);
background: linear-gradient(180deg, rgba(0,0,0,0.40), rgba(157,108,255,0.06));
}
.dgnm-loot-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--dgn-accent, #9d6cff);
}
.dgnm-loot-title > i { font-size: 16px; }
.dgnm-loot-title .dgnm-boss-name {
margin-left: auto;
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.7);
text-transform: none;
letter-spacing: 0;
}
.dgnm-loot-sub {
font-size: 11px;
color: rgba(255,255,255,0.55);
margin: 4px 0 10px;
}
.dgnm-loot-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: 6px;
}
.dgnm-loot-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 4px;
padding: 6px 4px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 8px;
text-align: center;
transition: transform 0.15s ease, border-color 0.15s ease;
}
.dgnm-loot-item:hover {
transform: translateY(-1px);
border-color: rgba(255,255,255,0.22);
}
.dgnm-loot-icon {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.dgnm-loot-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.dgnm-loot-name {
font-size: 9.5px;
font-weight: 600;
line-height: 1.15;
color: rgba(255,255,255,0.85);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-word;
}
/* Rareza por color de borde + ícono */
.dgnm-loot-item.rarity-common { border-color: rgba(180,180,180,0.30); }
.dgnm-loot-item.rarity-common .dgnm-loot-icon { color: #c8c8c8; }
.dgnm-loot-item.rarity-uncommon { border-color: rgba(80,200,120,0.45); background: rgba(80,200,120,0.06); }
.dgnm-loot-item.rarity-uncommon .dgnm-loot-icon { color: #5fcb88; }
.dgnm-loot-item.rarity-rare { border-color: rgba(80,160,255,0.50); background: rgba(80,160,255,0.07); }
.dgnm-loot-item.rarity-rare .dgnm-loot-icon { color: #6aaaff; }
.dgnm-loot-item.rarity-epic { border-color: rgba(180,100,255,0.50); background: rgba(180,100,255,0.07); }
.dgnm-loot-item.rarity-epic .dgnm-loot-icon { color: #c084ff; }
.dgnm-loot-item.rarity-legendary { border-color: rgba(255,180,80,0.55); background: rgba(255,180,80,0.08); }
.dgnm-loot-item.rarity-legendary .dgnm-loot-icon { color: #ffc070; }
.dgnm-loot-item.is-boss-drop {
position: relative;
box-shadow: 0 0 8px rgba(255,180,80,0.18);
}
.dgnm-boss-rewards {
display: flex;
flex-direction: column;
gap: 8px;
}
.dgnm-boss-gold {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: rgba(255,200,80,0.10);
border: 1px solid rgba(255,200,80,0.28);
border-radius: 8px;
color: #ffd47a;
font-size: 12px;
font-weight: 700;
align-self: flex-start;
}
.dgnm-boss-gold > i { font-size: 14px; }
.dgnm-boss-gold b { color: #ffe8a8; font-size: 13px; }
.dgnm-boss-drop-label {
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.65);
margin-bottom: 6px;
}
/* Mobile tweaks */
@media (max-width: 540px) {
.dgn-transition-title { font-size: 36px; }
.dgn-transition-sub { font-size: 13px; }
.dgn-interlude-content, .dgn-preboss-content, .dgn-end-content {
margin: 16px;
padding: 20px 16px;
}
.dgn-interlude-actions, .dgn-preboss-actions {
grid-template-columns: 1fr;
}
.dgn-header { padding: 10px 12px; }
.dgn-header-name { font-size: 14px; }
.dgn-header-floor { font-size: 11px; }
.dgn-end-title { font-size: 22px; }
.dgn-preboss-title { font-size: 24px; }
.dgnm-loot-grid {
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
.dgnm-loot-icon { width: 26px; height: 26px; font-size: 16px; }
.dgnm-loot-name { font-size: 9px; }
}
/* ============================================================================
TRAVEL TRANSITION — overlay con video al viajar entre zonas
Reutiliza el video del sistema de dungeon (pantalla_viaje.mp4) pero con
diseño más liviano (sin lightning) — duración 2.4s.
============================================================================ */
.travel-transition {
--travel-accent: #d4af37;
position: fixed;
inset: 0;
z-index: 9999;
background: #050208;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
}
.travel-transition-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.travel-transition-fallback {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
opacity: 0.6;
}
.travel-vignette {
position: absolute;
inset: 0;
z-index: 2;
background:
radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.85) 100%),
linear-gradient(180deg, rgba(10,4,20,0.4) 0%, transparent 30%, transparent 70%, rgba(10,4,20,0.6) 100%);
}
.travel-content {
position: relative;
z-index: 4;
text-align: center;
padding: 24px;
max-width: 90%;
}
.travel-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-cinzel, serif);
font-size: 14px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--travel-accent);
opacity: 0.85;
margin-bottom: 12px;
text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.travel-eyebrow i { font-size: 16px; }
.travel-title {
font-family: var(--font-cinzel, serif);
font-weight: 800;
font-size: clamp(32px, 7vw, 60px);
letter-spacing: 0.06em;
color: #f8e9c4;
text-shadow:
0 0 24px rgba(212,175,55,0.55),
0 4px 18px rgba(0,0,0,0.9);
line-height: 1.05;
margin-bottom: 20px;
}
.travel-progress {
width: min(280px, 60vw);
height: 3px;
margin: 0 auto;
background: rgba(255,255,255,0.1);
border-radius: 999px;
overflow: hidden;
}
.travel-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, transparent, var(--travel-accent), transparent);
animation: travel-progress-anim 2.2s ease-in-out forwards;
}
@keyframes travel-progress-anim {
0% { width: 0%; }
100% { width: 100%; }
}
/* ============================================================================
COMBAT-ACTIVE — durante un combate ocultar las stats/listas de la zona
para que solo se vea el arena (más inmersivo).
============================================================================ */
.combat-active > .page-header,
.combat-active > .combat-info-card,
.combat-active > .combat-section-title,
.combat-active > .combat-monsters-list,
.combat-active > .combat-players-list {
display: none !important;
}
/* ============================================================================
COMBAT RESULT OVERLAY — cartel de victoria/derrota como overlay absoluto
sobre el .combat-stage (no requiere scroll). Mantiene la card original
(.cap-result) pero la centra y le pone un backdrop oscurecido.
============================================================================ */
.combat-stage { position: relative; }
/* 2026-05-07: en desktop usamos position:fixed para que el modal pueda escapar
el .combat-stage (que tiene overflow:hidden) y crecer todo lo que el viewport
permita. En mobile mantenemos absolute (el stage YA ocupa toda la pantalla). */
.combat-result-overlay {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
padding: 4vh 16px 4vh;
pointer-events: none;
}
.combat-result-overlay > * { pointer-events: auto; }
.combat-result-backdrop {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0.88) 70%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 0;
pointer-events: auto;
}
.combat-result-overlay .cap-result {
position: relative;
z-index: 1;
max-width: 480px;
width: 100%;
margin: 0;
/* 2026-05-07: viewport completo disponible (fixed). Subido a 92vh con
scroll interno por si el contenido (loot largo, unique drop, level up,
skill point) excede el espacio. */
max-height: 92vh;
overflow-y: auto;
scrollbar-gutter: stable;
background: linear-gradient(180deg, rgba(28,16,45,0.96), rgba(12,6,22,0.99));
border: 2px solid rgba(255,255,255,0.08);
box-shadow:
0 18px 48px rgba(0,0,0,0.7),
0 0 0 1px rgba(0,0,0,0.4);
}
/* Custom scrollbar más sutil */
.combat-result-overlay .cap-result::-webkit-scrollbar { width: 8px; }
.combat-result-overlay .cap-result::-webkit-scrollbar-track { background: transparent; }
.combat-result-overlay .cap-result::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.15);
border-radius: 99px;
}
.combat-result-overlay .cap-result::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
.combat-result-overlay.is-victory .cap-result {
border-color: rgba(63,214,146,0.55);
box-shadow:
0 18px 48px rgba(0,0,0,0.7),
0 0 60px rgba(63,214,146,0.3);
}
.combat-result-overlay.is-draw .cap-result {
border-color: rgba(86,200,255,0.55);
box-shadow:
0 18px 48px rgba(0,0,0,0.7),
0 0 50px rgba(86,200,255,0.25);
}
.combat-result-overlay.is-defeat .cap-result {
border-color: rgba(225,80,90,0.55);
box-shadow:
0 18px 48px rgba(0,0,0,0.7),
0 0 50px rgba(225,80,90,0.25);
}
@media (max-width: 720px) {
.combat-result-overlay { padding: 8px; }
.combat-result-overlay .cap-result {
padding: 26px 18px 20px;
max-height: 92%;
overflow-y: auto;
}
}
/* ============================================================================
v1.2.0 ANNOUNCEMENT MODAL — one-shot, force-read 15s
2026-05-07: balance-freeze announcement.
============================================================================ */
.v120-overlay {
background: radial-gradient(ellipse at center,
rgba(15,8,30,0.92) 0%,
rgba(0,0,0,0.96) 70%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 99999 !important;
}
.v120-modal {
position: relative;
max-width: 540px;
width: 100%;
max-height: 92vh;
overflow-y: auto;
padding: 28px 28px 22px;
background: linear-gradient(160deg,
rgba(36,18,68,0.98) 0%,
rgba(20,10,38,0.99) 50%,
rgba(12,6,24,1) 100%);
border: 2px solid rgba(212,175,55,0.55);
border-radius: 18px;
box-shadow:
0 30px 80px rgba(0,0,0,0.85),
0 0 80px rgba(212,175,55,0.20),
inset 0 0 0 1px rgba(255,255,255,0.04);
scrollbar-gutter: stable;
}
.v120-modal::-webkit-scrollbar { width: 6px; }
.v120-modal::-webkit-scrollbar-track { background: transparent; }
.v120-modal::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 99px; }
/* Estrellas decorativas de fondo */
.v120-stars {
position: absolute;
inset: 0;
border-radius: 18px;
pointer-events: none;
background-image:
radial-gradient(2px 2px at 18% 12%, rgba(212,175,55,0.6), transparent),
radial-gradient(1.5px 1.5px at 82% 18%, rgba(157,108,255,0.7), transparent),
radial-gradient(1.5px 1.5px at 25% 78%, rgba(255,255,255,0.4), transparent),
radial-gradient(2px 2px at 88% 72%, rgba(212,175,55,0.4), transparent),
radial-gradient(1px 1px at 12% 50%, rgba(157,108,255,0.5), transparent);
animation: v120-twinkle 3s ease-in-out infinite alternate;
opacity: 0.7;
}
@keyframes v120-twinkle {
from { opacity: 0.4; }
to { opacity: 0.85; }
}
.v120-badge {
display: inline-flex;
align-items: center;
gap: 6px;
position: relative;
margin: 0 auto 14px;
padding: 5px 14px;
background: linear-gradient(90deg, rgba(212,175,55,0.18), rgba(157,108,255,0.18));
border: 1px solid rgba(212,175,55,0.5);
border-radius: 99px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: var(--gold);
font-family: 'Cinzel', serif;
width: fit-content;
}
.v120-badge i { font-size: 14px; }
/* 2026-05-10: variante "event" — badge con tonos rojo/naranja para evento del día */
.v120-badge--event {
background: linear-gradient(90deg, rgba(255,108,71,0.22), rgba(255,180,71,0.22));
border: 1px solid rgba(255,140,71,0.6);
color: #ffcb71;
animation: v120-event-pulse 2.2s ease-in-out infinite;
}
.v120-badge--event i { color: #ff8d4a; }
@keyframes v120-event-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,140,71,0); }
50% { box-shadow: 0 0 18px 2px rgba(255,140,71,0.45); }
}
/* 2026-05-19: Anuncio del Cinturón de Pociones — variante violeta */
.v120-modal--belt {
border: 1px solid rgba(196,102,232,0.35);
box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 60px rgba(196,102,232,0.15);
}
.v120-badge--belt {
background: linear-gradient(90deg, rgba(196,102,232,0.25), rgba(155,71,255,0.25));
border: 1px solid rgba(196,102,232,0.6);
color: #f0c8ff;
animation: v120-belt-pulse 2.2s ease-in-out infinite;
}
.v120-badge--belt i { color: #d484ff; }
@keyframes v120-belt-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(196,102,232,0); }
50% { box-shadow: 0 0 18px 2px rgba(196,102,232,0.5); }
}
.v120-belt-hero {
display: flex;
align-items: center;
justify-content: center;
margin: 6px 0 4px;
}
.v120-belt-icon {
font-size: 54px;
color: #d484ff;
filter: drop-shadow(0 0 18px rgba(196,102,232,0.6));
animation: v120-belt-float 3s ease-in-out infinite;
}
@keyframes v120-belt-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.v120-version {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 0 12px;
position: relative;
}
.v120-version .v120-old {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text-muted);
text-decoration: line-through;
opacity: 0.6;
}
.v120-version i {
color: var(--gold);
font-size: 16px;
filter: drop-shadow(0 0 4px rgba(212,175,55,0.6));
}
.v120-version .v120-new {
font-family: 'Cinzel', serif;
font-size: 18px;
font-weight: 700;
color: var(--gold);
text-shadow: 0 0 10px rgba(212,175,55,0.4);
}
.v120-title {
font-family: 'Cinzel', serif;
font-size: 30px;
font-weight: 800;
text-align: center;
background: linear-gradient(180deg, #fef3c7 0%, #d4af37 50%, #92722a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 4px;
position: relative;
letter-spacing: 0.02em;
}
.v120-subtitle {
text-align: center;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(220, 200, 255, 0.65);
margin: 0 0 18px;
position: relative;
font-weight: 600;
}
.v120-blocks {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 0 16px;
position: relative;
}
.v120-block {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 14px 14px 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
}
.v120-block-icon {
flex-shrink: 0;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 10px;
background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(157,108,255,0.16));
border: 1px solid rgba(212,175,55,0.35);
color: var(--gold);
font-size: 18px;
}
.v120-block-text { flex: 1; min-width: 0; }
.v120-block-title {
font-family: 'Cinzel', serif;
font-size: 14px;
font-weight: 700;
color: var(--gold);
margin: 0 0 4px;
letter-spacing: 0.02em;
}
.v120-block-body {
font-size: 13px;
line-height: 1.55;
color: rgba(230, 220, 255, 0.85);
}
.v120-block-body b { color: #fff; font-weight: 700; }
.v120-invest {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0 0 18px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(157,108,255,0.14), rgba(212,175,55,0.10));
border: 1px solid rgba(157,108,255,0.4);
border-radius: 12px;
position: relative;
}
.v120-invest-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #9d6cff, #6a3edc);
border-radius: 10px;
color: #fff;
font-size: 18px;
box-shadow: 0 4px 14px rgba(157,108,255,0.45);
}
.v120-invest-content { flex: 1; }
.v120-invest-title {
font-family: 'Cinzel', serif;
font-size: 14px;
font-weight: 700;
color: #d4b8ff;
margin: 0 0 4px;
}
.v120-invest-body {
font-size: 13px;
line-height: 1.55;
color: rgba(230, 220, 255, 0.88);
}
.v120-invest-body b { color: #fff; }
/* Botón de cierre — disabled hasta terminar el countdown */
.v120-close-btn {
position: relative;
margin: 0;
height: 50px;
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 0.04em;
font-size: 14px;
transition: all 0.3s ease;
}
.v120-close-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: linear-gradient(180deg, rgba(80,60,40,0.7), rgba(50,35,20,0.85));
color: rgba(255,255,255,0.7);
border-color: rgba(212,175,55,0.25);
box-shadow: none;
}
.v120-close-btn.v120-close-ready {
animation: v120-pulse 1.6s ease-in-out infinite;
}
@keyframes v120-pulse {
0%, 100% { box-shadow: 0 4px 14px rgba(212,175,55,0.4); }
50% { box-shadow: 0 4px 24px rgba(212,175,55,0.7); }
}
/* 2026-05-07: action row con 2 botones (Ignorar / Ir a Descuentos) */
.v120-action-row {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 10px;
margin-top: 4px;
}
.v120-ignore-btn,
.v120-go-btn {
position: relative;
margin: 0;
height: 50px;
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 0.04em;
font-size: 13.5px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.v120-ignore-btn:disabled,
.v120-go-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: linear-gradient(180deg, rgba(80,60,40,0.7), rgba(50,35,20,0.85));
color: rgba(255,255,255,0.7);
border-color: rgba(212,175,55,0.25);
box-shadow: none;
}
.v120-ignore-btn.v120-close-ready,
.v120-go-btn:not(:disabled) {
animation: v120-pulse 1.6s ease-in-out infinite;
}
@media (max-width: 540px) {
.v120-action-row { grid-template-columns: 1fr; }
.v120-action-row .v120-ignore-btn { order: 2; }
.v120-action-row .v120-go-btn { order: 1; }
}
@media (max-width: 720px) {
.v120-modal { padding: 22px 18px 18px; max-height: 96vh; }
.v120-title { font-size: 24px; }
.v120-block { padding: 12px; gap: 10px; }
.v120-block-icon { width: 32px; height: 32px; font-size: 15px; }
.v120-block-title { font-size: 13px; }
.v120-block-body { font-size: 12.5px; }
.v120-invest-body { font-size: 12.5px; }
}
/* ============================================================================
BATTLE PASS — temporada de 30 días, 50 niveles, tracks free + premium
============================================================================ */
/* HERO header — temporada + nivel actual + barra XP + botón premium */
.bp-hero {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, rgba(28,16,45,0.96), rgba(12,6,22,0.99));
border: 1.5px solid rgba(212,175,55,0.4);
border-radius: 14px;
padding: 18px 20px;
margin-bottom: 18px;
box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
.bp-hero.is-premium {
border-color: rgba(255,200,87,0.7);
box-shadow: 0 6px 30px rgba(255,200,87,0.2);
}
.bp-hero-glow {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 80% 0%, rgba(212,175,55,0.18), transparent 70%);
pointer-events: none;
}
.bp-hero-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}
.bp-hero-left { flex: 1 1 240px; min-width: 0; }
.bp-hero-right { flex: 1 1 280px; min-width: 0; text-align: right; }
.bp-season-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-cinzel, serif);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 6px;
}
.bp-prem-badge {
background: linear-gradient(135deg, #ffc857, #d4af37);
color: #2a1a06;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
margin-left: 6px;
display: inline-flex;
align-items: center;
gap: 3px;
}
.bp-prem-badge i { font-size: 10px; }
.bp-season-title {
font-family: var(--font-cinzel, serif);
font-size: clamp(22px, 4vw, 32px);
font-weight: 800;
color: #f8e9c4;
line-height: 1.1;
margin-bottom: 6px;
}
.bp-season-meta {
font-size: 13px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.bp-season-meta > span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.bp-season-meta b { color: var(--gold); font-family: var(--font-mono, monospace); }
.bp-daily-reset {
background: rgba(108,212,255,0.10);
border: 1px solid rgba(108,212,255,0.3);
border-radius: 99px;
padding: 3px 10px;
font-size: 12px;
}
.bp-daily-reset i { color: #6cd4ff; }
.bp-daily-reset b { color: #c5edff !important; }
.bp-level-big {
font-family: var(--font-cinzel, serif);
font-size: 14px;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 6px;
}
.bp-level-big span {
font-size: 32px;
color: var(--gold);
font-weight: 800;
margin: 0 4px;
}
.bp-xp-bar {
height: 10px;
background: rgba(255,255,255,0.08);
border-radius: 999px;
overflow: hidden;
margin-bottom: 4px;
}
.bp-xp-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold), #ffc857);
border-radius: 999px;
transition: width 0.5s ease;
}
.bp-xp-text {
font-family: var(--font-mono, monospace);
font-size: 12px;
color: var(--text-muted);
}
.bp-buy-prem-btn {
margin-top: 14px;
font-weight: 800;
letter-spacing: 0.05em;
position: relative;
z-index: 1;
}
.bp-buy-prem-sub {
display: block;
font-weight: 500;
font-size: 11px;
opacity: 0.9;
margin-top: 2px;
letter-spacing: 0;
}
.bp-prem-active-banner {
margin-top: 14px;
background: linear-gradient(90deg, rgba(255,200,87,0.18), transparent);
border: 1px solid rgba(255,200,87,0.4);
border-radius: 10px;
padding: 10px 14px;
color: #ffc857;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
/* LEVELS LIST — desktop tabla (lvl | free | premium), mobile stack */
.bp-levels-wrap {
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
margin-bottom: 18px;
}
.bp-levels-header {
display: grid;
grid-template-columns: 80px 1fr 1fr;
gap: 0;
background: rgba(212,175,55,0.08);
border-bottom: 1px solid rgba(212,175,55,0.25);
padding: 10px 12px;
}
.bp-lh-cell {
font-family: var(--font-cinzel, serif);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.15em;
color: var(--gold);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.bp-lh-prem i { font-size: 14px; }
.bp-levels-list {
max-height: 800px;
overflow-y: auto;
}
.bp-row {
display: grid;
grid-template-columns: 80px 1fr 1fr;
gap: 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
background: rgba(0,0,0,0.15);
transition: background 0.2s;
}
.bp-row:nth-child(even) { background: rgba(0,0,0,0.05); }
.bp-row.is-current { background: rgba(212,175,55,0.10); }
.bp-row.is-milestone { background: linear-gradient(90deg, rgba(212,175,55,0.15), rgba(212,175,55,0.05)); }
.bp-row.is-milestone.is-current { background: linear-gradient(90deg, rgba(212,175,55,0.25), rgba(212,175,55,0.10)); }
.bp-row-lvl {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 12px 8px;
border-right: 1px solid rgba(255,255,255,0.05);
background: rgba(0,0,0,0.25);
position: relative;
}
.bp-row-lvl i { color: var(--gold); font-size: 14px; margin-bottom: 2px; }
.bp-row-lvl-num {
font-family: var(--font-cinzel, serif);
font-size: 20px;
font-weight: 800;
color: var(--text-soft);
}
.bp-row.is-reached .bp-row-lvl-num { color: #5fd684; }
.bp-row.is-current .bp-row-lvl-num { color: var(--gold); }
.bp-cell {
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: space-between;
border-right: 1px solid rgba(255,255,255,0.05);
min-width: 0;
}
.bp-cell:last-child { border-right: none; }
.bp-cell.is-empty {
display: flex;
align-items: center;
justify-content: center;
opacity: 0.4;
}
.bp-cell-empty-tag {
font-family: var(--font-cinzel, serif);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
}
.bp-cell-rewards {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
justify-content: center;
}
.bp-rw {
position: relative;
width: 44px;
height: 44px;
border-radius: 8px;
background: rgba(0,0,0,0.5);
border: 1.5px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 22px;
}
.bp-rw-img {
position: absolute;
inset: 4px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.bp-rw-qty {
position: absolute;
bottom: -4px;
right: -4px;
background: rgba(0,0,0,0.9);
color: var(--gold);
font-size: 10px;
font-weight: 800;
padding: 1px 5px;
border-radius: 99px;
border: 1px solid var(--gold);
}
.bp-rw-random {
border-color: var(--rw-color);
color: var(--rw-color);
}
.bp-rw-rarity {
position: absolute;
bottom: -3px;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.08em;
background: rgba(0,0,0,0.85);
padding: 1px 4px;
border-radius: 4px;
color: var(--rw-color);
}
.bp-rw-gold { color: var(--gold); border-color: rgba(212,175,55,0.4); }
.bp-rw-gems { color: #5aa6ff; border-color: rgba(90,166,255,0.4); }
/* Cofres con color por rareza — el cofre uncommon se ve VERDE para distinguirlo del común */
.bp-rw.is-box.r-common { color: #a8a8b3; border-color: rgba(168,168,179,0.4); background: radial-gradient(circle at 30% 30%, rgba(168,168,179,0.15), rgba(0,0,0,0.5)); }
.bp-rw.is-box.r-uncommon { color: #5fd684; border-color: rgba(95,214,132,0.55); background: radial-gradient(circle at 30% 30%, rgba(95,214,132,0.20), rgba(0,0,0,0.5)); box-shadow: 0 0 8px rgba(95,214,132,0.25); }
.bp-rw.is-box.r-rare { color: #5aa6ff; border-color: rgba(90,166,255,0.55); background: radial-gradient(circle at 30% 30%, rgba(90,166,255,0.18), rgba(0,0,0,0.5)); box-shadow: 0 0 8px rgba(90,166,255,0.25); }
.bp-rw.is-box.r-epic { color: #b884ff; border-color: rgba(184,132,255,0.55); background: radial-gradient(circle at 30% 30%, rgba(184,132,255,0.18), rgba(0,0,0,0.5)); box-shadow: 0 0 8px rgba(184,132,255,0.25); }
.bp-rw.is-box.r-legendary { color: #ffc857; border-color: rgba(255,200,87,0.55); background: radial-gradient(circle at 30% 30%, rgba(255,200,87,0.18), rgba(0,0,0,0.5)); box-shadow: 0 0 8px rgba(255,200,87,0.3); }
.bp-rw.is-box.r-mythic { color: #ff5a8d; border-color: rgba(255,90,141,0.55); background: radial-gradient(circle at 30% 30%, rgba(255,90,141,0.18), rgba(0,0,0,0.5)); box-shadow: 0 0 8px rgba(255,90,141,0.3); }
.bp-rw.is-box i { color: inherit; }
/* Cuando el cofre tiene PNG (común/raro/legendario), aplicar tinte por rareza al PNG */
.bp-rw.is-box.r-uncommon .bp-rw-img { filter: hue-rotate(80deg) saturate(1.4); }
/* Item NO-cofre con rarity declarada (ej: items uncommon del battle pass premium).
Pinta el borde y el fondo según la rareza para que el jugador entienda visualmente. */
.bp-rw:not(.is-box).r-uncommon { color: #5fd684; border-color: rgba(95,214,132,0.65); background: radial-gradient(circle at 30% 30%, rgba(95,214,132,0.22), rgba(0,0,0,0.5)); box-shadow: 0 0 10px rgba(95,214,132,0.35); }
.bp-rw:not(.is-box).r-rare { color: #5aa6ff; border-color: rgba(90,166,255,0.65); background: radial-gradient(circle at 30% 30%, rgba(90,166,255,0.22), rgba(0,0,0,0.5)); box-shadow: 0 0 10px rgba(90,166,255,0.35); }
.bp-rw:not(.is-box).r-epic { color: #b884ff; border-color: rgba(184,132,255,0.65); background: radial-gradient(circle at 30% 30%, rgba(184,132,255,0.22), rgba(0,0,0,0.5)); box-shadow: 0 0 10px rgba(184,132,255,0.35); }
.bp-rw:not(.is-box).r-legendary { color: #ffc857; border-color: rgba(255,200,87,0.65); background: radial-gradient(circle at 30% 30%, rgba(255,200,87,0.22), rgba(0,0,0,0.5)); box-shadow: 0 0 10px rgba(255,200,87,0.4); }
.bp-rw:not(.is-box).r-mythic { color: #ff5a8d; border-color: rgba(255,90,141,0.65); background: radial-gradient(circle at 30% 30%, rgba(255,90,141,0.22), rgba(0,0,0,0.5)); box-shadow: 0 0 10px rgba(255,90,141,0.4); }
.bp-rw:not(.is-box).r-uncommon i { color: #5fd684; }
.bp-rw:not(.is-box).r-rare i { color: #5aa6ff; }
.bp-rw:not(.is-box).r-epic i { color: #b884ff; }
.bp-rw:not(.is-box).r-legendary i { color: #ffc857; }
.bp-rw:not(.is-box).r-mythic i { color: #ff5a8d; }
.bp-rw-num {
position: absolute;
bottom: -8px;
font-size: 10px;
font-weight: 800;
background: rgba(0,0,0,0.85);
padding: 1px 6px;
border-radius: 99px;
white-space: nowrap;
}
.bp-cell-claim-btn {
background: linear-gradient(135deg, var(--gold), #ffc857);
color: #2a1a06;
border: none;
font-family: var(--font-cinzel, serif);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: transform 0.15s, box-shadow 0.15s;
width: 100%;
}
.bp-cell-claim-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(212,175,55,0.4); }
.bp-cell-claim-btn:active { transform: translateY(0); }
.bp-cell-action {
font-family: var(--font-cinzel, serif);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
padding: 6px 8px;
border-radius: 6px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.bp-cell-action.is-claimed { background: rgba(95,214,132,0.1); color: #5fd684; border: 1px solid rgba(95,214,132,0.3); }
.bp-cell-action.is-locked { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid rgba(255,255,255,0.08); }
.bp-cell.is-claimed .bp-rw { opacity: 0.5; }
/* CAPS info */
.bp-caps {
background: rgba(0,0,0,0.25);
border: 1px solid var(--border);
border-radius: 14px;
padding: 14px 16px;
margin-bottom: 18px;
}
.bp-caps-hint {
font-size: 12px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 6px;
margin-top: -4px;
margin-bottom: 10px;
font-style: italic;
}
.bp-caps-hint i { color: #6cd4ff; font-style: normal; font-size: 13px; }
.bp-caps-title {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-cinzel, serif);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 12px;
}
.bp-caps-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 8px;
}
.bp-cap-row {
display: grid;
grid-template-columns: 24px 1fr auto auto;
gap: 8px;
align-items: center;
padding: 6px 8px;
background: rgba(0,0,0,0.25);
border-radius: 6px;
}
.bp-cap-row > i { color: var(--gold); font-size: 16px; }
.bp-cap-info { min-width: 0; }
.bp-cap-label { font-size: 12px; color: var(--text-soft); margin-bottom: 3px; line-height: 1.2; }
.bp-cap-bar { height: 5px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; }
.bp-cap-fill { height: 100%; background: linear-gradient(90deg, var(--gold), #ffc857); }
.bp-cap-num { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; color: var(--gold); }
.bp-cap-perxp { font-size: 10px; color: var(--text-muted); padding: 2px 5px; background: rgba(255,255,255,0.05); border-radius: 4px; }
/* MOBILE — stack vertical en lugar de tabla */
@media (max-width: 720px) {
.bp-levels-header {
grid-template-columns: 60px 1fr 1fr;
padding: 8px;
}
.bp-row {
grid-template-columns: 60px 1fr 1fr;
}
.bp-row-lvl-num { font-size: 16px; }
.bp-cell { padding: 8px 6px; gap: 6px; }
.bp-rw { width: 36px; height: 36px; font-size: 18px; }
.bp-cell-claim-btn { font-size: 10px; padding: 5px 6px; }
.bp-cell-action { font-size: 9px; padding: 5px 4px; }
.bp-cap-row { grid-template-columns: 20px 1fr auto auto; gap: 6px; }
.bp-cap-label { font-size: 11px; }
.bp-hero { padding: 14px; }
.bp-hero-right { text-align: left; }
}
/* =====================================================================
COMBAT MONSTER CARD v2 — 2026-05-11 (afinado para coincidir con maqueta)
Portrait cuadrado con bordes redondeados + skull badge esquina sup-izq
+ barra "Nv X" interna abajo. Chips compactas. Botón ATACAR rojo
brillante vertical. Boss: borde dorado alrededor de toda la card.
===================================================================== */
.combat-monster-card.cmc-v2 {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
background: rgba(12,7,24,0.92);
border: 1px solid rgba(225,80,90,0.18);
border-radius: 14px;
padding: 12px 12px;
margin-bottom: 12px;
position: relative;
overflow: hidden;
transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.combat-monster-card.cmc-v2::before {
content: '';
position: absolute;
inset: 0;
border-radius: 14px;
pointer-events: none;
background: radial-gradient(ellipse at 90% 50%, rgba(225,80,90,0.05), transparent 60%);
}
.combat-monster-card.cmc-v2:hover {
border-color: rgba(225,80,90,0.40);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.combat-monster-card.cmc-v2.is-boss {
background: rgba(12,7,24,0.95);
border: 1.5px solid rgba(255,200,87,0.58);
box-shadow: 0 0 0 1px rgba(255,200,87,0.10), 0 4px 18px rgba(255,200,87,0.12);
}
.combat-monster-card.cmc-v2.is-boss::before {
background: radial-gradient(ellipse at 50% 50%, rgba(255,200,87,0.06), transparent 70%);
}
.combat-monster-card.cmc-v2.is-boss:hover {
border-color: rgba(255,200,87,0.78);
box-shadow: 0 0 24px rgba(255,200,87,0.20), 0 6px 22px rgba(0,0,0,0.5);
}
.combat-monster-card.cmc-v2.is-level-locked,
.combat-monster-card.cmc-v2.is-overlevel,
.combat-monster-card.cmc-v2.is-boss-locked {
opacity: 0.72;
border-color: rgba(255,80,90,0.30);
}
.cmc-v2-clickarea {
display: grid;
grid-template-columns: 96px 1fr;
gap: 14px;
align-items: center;
cursor: pointer;
min-width: 0;
position: relative;
z-index: 1;
}
.cmc-v2-clickarea:focus { outline: none; }
.cmc-v2-clickarea:focus-visible {
outline: 2px solid rgba(184,132,255,0.65);
outline-offset: 4px;
border-radius: 8px;
}
.cmc-v2-portrait {
position: relative;
width: 96px;
height: 96px;
border-radius: 10px;
background:
radial-gradient(circle at 30% 25%, rgba(184,132,255,0.10), rgba(8,4,16,0.95) 75%),
rgba(8,4,16,1);
border: 1.5px solid rgba(225,80,90,0.55);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.6), inset 0 0 20px rgba(0,0,0,0.4);
}
.cmc-v2-portrait.is-boss {
border-color: rgba(255,200,87,0.65);
box-shadow: 0 4px 14px rgba(255,200,87,0.25), inset 0 0 20px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,200,87,0.15);
}
/* ===== Portrait "infinito" — cuando el mob tiene imagen ===== */
/* La card pierde sus paddings del lado izquierdo (top/left/bottom) y el portrait
se apoya a 3 bordes de la card. Se estira en altura para llenar toda la card. */
.combat-monster-card.cmc-v2.has-portrait {
padding: 0 12px 0 0;
}
.combat-monster-card.cmc-v2.has-portrait .cmc-v2-clickarea {
align-items: stretch;
gap: 12px;
}
.combat-monster-card.cmc-v2.has-portrait .cmc-v2-info {
padding: 12px 0;
justify-content: center;
}
.combat-monster-card.cmc-v2.has-portrait .cmc-v2-portrait {
border: none;
box-shadow: none;
height: auto;
min-height: 96px;
align-self: stretch;
/* Border-radius solo del lado izquierdo para que matchee con la curva de la card */
border-radius: 13px 4px 4px 13px;
position: relative;
}
.combat-monster-card.cmc-v2.has-portrait .cmc-v2-portrait::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 30%;
background: linear-gradient(90deg, transparent 0%, rgba(12,7,24,0.55) 100%);
pointer-events: none;
border-radius: 0 4px 4px 0;
}
.cmc-v2-portrait-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cmc-v2-portrait-fallback {
font-size: 40px;
color: rgba(255,255,255,0.40);
filter: drop-shadow(0 0 8px rgba(0,0,0,0.5));
display: none;
}
.cmc-v2-portrait.no-img .cmc-v2-portrait-fallback { display: block; }
.cmc-v2-portrait.no-img .cmc-v2-portrait-img { display: none; }
.cmc-v2-portrait.is-boss .cmc-v2-portrait-fallback { color: var(--gold, #ffc857); }
/* Skull/Crown badge — esquina sup-izq, círculo rojo (común) o dorado (boss) */
.cmc-v2-portrait-badge {
position: absolute;
top: 5px;
left: 5px;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #c63240 0%, #7a1d28 100%);
border: 1.5px solid rgba(8,4,16,0.95);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 11px;
z-index: 2;
box-shadow: 0 2px 6px rgba(198,50,64,0.45);
}
.cmc-v2-portrait-badge.is-boss {
background: linear-gradient(135deg, #ffd54a 0%, #c08818 100%);
color: #1a0f00;
box-shadow: 0 2px 6px rgba(255,200,87,0.5);
}
/* Barra "Nv X" — full width abajo dentro del portrait */
.cmc-v2-lvl-bar {
position: absolute;
left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.78);
color: #fff;
font-family: 'Cinzel', serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-align: center;
padding: 3px 0;
backdrop-filter: blur(4px);
border-top: 1px solid rgba(225,80,90,0.30);
z-index: 2;
}
.cmc-v2-portrait.is-boss .cmc-v2-lvl-bar {
border-top-color: rgba(255,200,87,0.45);
background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(40,28,10,0.85));
}
.cmc-v2-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.cmc-v2-name-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.cmc-v2-name {
font-family: 'Cinzel', serif;
font-size: 17px;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 280px;
}
.cmc-v2-boss-chip {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
background: linear-gradient(135deg, rgba(95,214,132,0.18), rgba(95,214,132,0.10));
border: 1px solid rgba(95,214,132,0.55);
color: #5fd684;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.10em;
}
.cmc-v2-warn-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border-radius: 4px;
background: rgba(225,80,90,0.14);
border: 1px solid rgba(225,80,90,0.45);
color: #ff8d9a;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
white-space: nowrap;
}
.cmc-v2-warn-chip i { font-size: 11px; }
.cmc-v2-warn-chip.is-penalty {
background: rgba(255,113,67,0.14);
border-color: rgba(255,113,67,0.45);
color: #ffae8c;
}
.cmc-v2-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.cmc-v2-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 99px;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.05);
color: rgba(255,255,255,0.92);
font-family: 'JetBrains Mono', monospace;
font-size: 11.5px;
font-weight: 600;
white-space: nowrap;
}
.cmc-v2-chip i {
font-size: 11px;
color: rgba(255,255,255,0.55);
opacity: 0.9;
}
.cmc-v2-chip.is-penalty {
color: #ffae8c;
border-color: rgba(255,113,67,0.30);
}
.cmc-v2-chip-cap {
background: rgba(255,200,87,0.08);
border-color: rgba(255,200,87,0.30);
}
.cmc-v2-chip-cap i { color: var(--gold, #ffc857); }
.cmc-v2-chip-gold i { color: var(--gold, #ffc857); }
.cmc-v2-chip-cap.is-full {
background: rgba(225,80,90,0.18);
border-color: rgba(225,80,90,0.5);
color: #ff8d9a;
}
.cmc-v2-chip-cap.is-full i { color: #ff8d9a; }
.cmc-v2-loot-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px;
border-radius: 99px;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.05);
color: rgba(255,255,255,0.88);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
cursor: pointer;
width: fit-content;
transition: background 0.15s, border-color 0.15s;
letter-spacing: 0;
}
.cmc-v2-loot-btn:hover {
background: rgba(40,24,80,0.85);
border-color: rgba(184,132,255,0.40);
}
.cmc-v2-loot-btn i {
font-size: 13px;
color: var(--gold, #ffc857);
}
.cmc-v2-loot-count {
margin-left: auto;
padding: 0 6px;
color: rgba(255,255,255,0.55);
font-size: 11px;
font-weight: 700;
}
.cmc-v2-training-label {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: 6px;
background: rgba(108,212,255,0.12);
border: 1px solid rgba(108,212,255,0.40);
color: #8edaff;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
font-weight: 700;
width: fit-content;
}
.cmc-v2-training-label i { font-size: 11px; }
.cmc-v2-lock-msg {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 9px;
margin-top: 2px;
background: rgba(225,80,90,0.10);
border: 1px solid rgba(225,80,90,0.30);
border-radius: 6px;
color: #ff8d9a;
font-size: 11px;
line-height: 1.3;
}
.cmc-v2-lock-msg i { font-size: 13px; flex-shrink: 0; }
.cmc-v2-lock-msg.is-grind {
background: rgba(184,132,255,0.10);
border-color: rgba(184,132,255,0.32);
color: #c5a4ff;
}
/* =====================================================================
BOTÓN ATACAR v3 — Horizontal (2026-05-11)
Layout: icono espada izquierda + label centro + stamina pill derecha.
Forma shield-notch con clip-path. Sheen animado en hover.
===================================================================== */
.cmc-v2-attack-btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 96px;
height: 96px;
min-width: 96px;
padding: 0;
border: none;
background: transparent;
color: #fff;
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.12em;
cursor: pointer;
transition: transform 0.18s ease, filter 0.18s ease;
align-self: center;
overflow: hidden;
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
/* Forma shield-notch: bevel en las 4 esquinas */
clip-path: polygon(
8px 0%, calc(100% - 8px) 0%,
100% 8px, 100% calc(100% - 8px),
calc(100% - 8px) 100%, 8px 100%,
0% calc(100% - 8px), 0% 8px
);
/* Capa base de color — el botón hereda el rojo desde aquí */
background:
/* Highlight superior */
linear-gradient(180deg, rgba(255,255,255,0.20), transparent 25%),
/* Sombra interior abajo */
linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.45) 100%),
/* Color principal con curva no-linear */
radial-gradient(ellipse at 50% 30%, #d8364c 0%, #a02230 60%, #6c121e 100%);
/* "Border" simulado con outline doble (clip-path no permite border real) */
box-shadow:
inset 0 0 0 1px rgba(255,160,170,0.35),
inset 0 0 0 2px rgba(0,0,0,0.55),
0 4px 14px rgba(160,34,48,0.40),
0 0 0 1px rgba(0,0,0,0.45);
}
.cmc-v2-attack-btn::before {
/* Decoración: línea sutil arriba estilo "engrave" */
content: '';
position: absolute;
top: 6px;
left: 12px;
right: 12px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,200,200,0.35), transparent);
pointer-events: none;
}
.cmc-v2-attack-btn::after {
/* Decoración: línea sutil abajo */
content: '';
position: absolute;
bottom: 6px;
left: 12px;
right: 12px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,200,200,0.20), transparent);
pointer-events: none;
}
.cmc-v2-attack-sheen {
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(120deg,
transparent 0%,
transparent 40%,
rgba(255,255,255,0.30) 50%,
transparent 60%,
transparent 100%);
pointer-events: none;
transition: left 0.55s ease;
}
.cmc-v2-attack-btn:not(:disabled):hover {
transform: translateY(-1px);
filter: brightness(1.12) saturate(1.10);
box-shadow:
inset 0 0 0 1px rgba(255,180,190,0.50),
inset 0 0 0 2px rgba(0,0,0,0.55),
0 6px 20px rgba(180,40,55,0.55),
0 0 18px rgba(220,60,80,0.35),
0 0 0 1px rgba(0,0,0,0.45);
}
.cmc-v2-attack-btn:not(:disabled):hover .cmc-v2-attack-sheen {
left: 130%;
}
.cmc-v2-attack-btn:not(:disabled):active { transform: translateY(0); }
.cmc-v2-attack-icon {
font-size: 22px;
color: #ffe4e8;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.50));
transform: rotate(-25deg);
z-index: 1;
flex-shrink: 0;
}
.cmc-v2-attack-label {
line-height: 1;
font-size: 12px;
letter-spacing: 0.10em;
z-index: 1;
flex-shrink: 0;
}
.cmc-v2-stam {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 9px;
background: rgba(0,0,0,0.55);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 800;
letter-spacing: 0;
flex-shrink: 0;
/* Pill con notch en las puntas para coherencia con el botón */
clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 50%, calc(100% - 4px) 100%, 4px 100%, 0% 50%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.cmc-v2-stam i {
font-size: 11px;
color: #ffd54a;
filter: drop-shadow(0 0 4px rgba(255,213,74,0.65));
}
.cmc-v2-stam-lock { font-size: 16px; opacity: 0.5; z-index: 1; }
/* ===== Estados ===== */
.cmc-v2-attack-btn.is-locked,
.cmc-v2-attack-btn:disabled {
background:
linear-gradient(180deg, rgba(255,255,255,0.05), transparent 25%),
radial-gradient(ellipse at 50% 30%, #3a2b3a 0%, #251a26 70%, #14101a 100%);
color: rgba(255,255,255,0.40);
cursor: not-allowed;
text-shadow: none;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.06),
inset 0 0 0 2px rgba(0,0,0,0.55),
0 0 0 1px rgba(0,0,0,0.45);
filter: none;
}
.cmc-v2-attack-btn:disabled .cmc-v2-attack-icon { color: rgba(255,255,255,0.40); }
.cmc-v2-attack-btn:disabled::before,
.cmc-v2-attack-btn:disabled::after { opacity: 0.3; }
/* Overlevel: dorado (peleable pero con XP -90%) */
.cmc-v2-attack-btn.is-overlevel:not(:disabled) {
background:
linear-gradient(180deg, rgba(255,255,255,0.22), transparent 25%),
radial-gradient(ellipse at 50% 30%, #f0b441 0%, #b8801a 60%, #7a4f08 100%);
color: #fff8d6;
text-shadow: 0 1px 3px rgba(80,40,0,0.7);
box-shadow:
inset 0 0 0 1px rgba(255,220,140,0.55),
inset 0 0 0 2px rgba(0,0,0,0.55),
0 4px 14px rgba(184,128,26,0.50),
0 0 18px rgba(240,180,65,0.20),
0 0 0 1px rgba(0,0,0,0.45);
}
.cmc-v2-attack-btn.is-overlevel .cmc-v2-attack-icon { color: #fff8d6; }
.cmc-v2-attack-btn.is-grind:not(:disabled) {
background:
linear-gradient(180deg, rgba(255,255,255,0.16), transparent 25%),
radial-gradient(ellipse at 50% 30%, #8a55ee 0%, #5226a4 60%, #2e1466 100%);
box-shadow:
inset 0 0 0 1px rgba(200,160,255,0.45),
inset 0 0 0 2px rgba(0,0,0,0.55),
0 4px 14px rgba(80,42,180,0.45),
0 0 0 1px rgba(0,0,0,0.45);
}
/* Boss: rojo más vivo + glow constante sutil */
.cmc-v2.is-boss .cmc-v2-attack-btn:not(:disabled):not(.is-overlevel):not(.is-grind) {
background:
linear-gradient(180deg, rgba(255,255,255,0.22), transparent 25%),
radial-gradient(ellipse at 50% 30%, #ee3a52 0%, #b02232 60%, #74142a 100%);
box-shadow:
inset 0 0 0 1px rgba(255,180,190,0.50),
inset 0 0 0 2px rgba(0,0,0,0.55),
0 4px 16px rgba(200,40,60,0.55),
0 0 22px rgba(220,60,80,0.18),
0 0 0 1px rgba(0,0,0,0.45);
}
/* =====================================================================
2026-05-30: Boss card art — imagen cinemática que ocupa TODO el card
(incluyendo detrás del botón ATACAR), con gradient negro a la izquierda.
Las capas (::before imagen, ::after gradient) van en el OUTER card
.combat-monster-card.cmc-v2.has-card-art para que cubran clickarea+attack-col.
El CSS variable --card-art se setea inline en el HTML del card.
===================================================================== */
.combat-monster-card.cmc-v2.has-card-art {
position: relative;
overflow: hidden;
}
/* Capa 1: la imagen del boss — cubre TODO el card */
.combat-monster-card.cmc-v2.has-card-art::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--card-art);
background-size: cover;
background-position: right center;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
opacity: 0.95;
}
/* Capa 2: gradient negro a la izquierda (fade para legibilidad del texto) */
.combat-monster-card.cmc-v2.has-card-art::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(8,5,12,1) 0%,
rgba(8,5,12,0.96) 28%,
rgba(8,5,12,0.78) 45%,
rgba(8,5,12,0.35) 65%,
rgba(8,5,12,0) 100%);
pointer-events: none;
z-index: 1;
}
/* Contenido del card por encima del art (clickarea + columna del botón ATACAR).
También aseguramos que el clickarea no tape el art con su propio bg. */
.combat-monster-card.cmc-v2.has-card-art .cmc-v2-clickarea,
.combat-monster-card.cmc-v2.has-card-art .cmc-v2-attack-col {
position: relative;
z-index: 2;
}
/* El clickarea con .has-portrait tenía bg propio — para bosses con card-art
lo hacemos transparente así se ve la imagen detrás. */
.combat-monster-card.cmc-v2.has-card-art .cmc-v2-clickarea {
background: transparent;
}
/* 2026-05-30: Corner ornaments dorados — SOLO para bosses (diferenciación visual).
Las 4 esquinas con L-brackets dorados que destacan al boss frente a mobs normales.
Para que se vean (clip-path los cortaría), los corners van como spans en el HTML
y los posicionamos justo en el borde del polígono (después del bevel de 8px). */
.cmc-v2-corner {
position: absolute;
width: 10px; height: 10px;
z-index: 3;
pointer-events: none;
border-color: #ffd54a;
border-style: solid; border-width: 0;
filter: drop-shadow(0 0 4px rgba(255,213,74,0.7));
}
.cmc-v2-corner.is-tl { top: 5px; left: 5px; border-top-width: 1.5px; border-left-width: 1.5px; }
.cmc-v2-corner.is-tr { top: 5px; right: 5px; border-top-width: 1.5px; border-right-width: 1.5px; }
.cmc-v2-corner.is-bl { bottom: 5px; left: 5px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.cmc-v2-corner.is-br { bottom: 5px; right: 5px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
/* En bosses no-locked, las esquinas brillan suavemente (pulso lento) */
@keyframes cmcCornerPulse {
0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 4px rgba(255,213,74,0.7)); }
50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(255,213,74,0.95)); }
}
.cmc-v2.is-boss .cmc-v2-attack-btn:not(:disabled) .cmc-v2-corner {
animation: cmcCornerPulse 2.4s ease-in-out infinite;
}
/* Wrapper del botón + cap-below */
.cmc-v2-attack-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
align-self: center;
}
/* Cap-below está oculto en PC (el chip va dentro de las stats) */
.cmc-v2-cap-below { display: none; }
/* =====================================================================
MONSTER DETAIL MODAL (MDM) — 2026-05-11
Modal centrado tipo "ficha de criatura". Reemplaza el panel lateral.
===================================================================== */
.mdm-overlay {
position: fixed;
inset: 0;
background: rgba(5,2,12,0.86);
backdrop-filter: blur(8px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
overflow-y: auto;
}
.mdm-modal {
position: relative;
width: 100%;
max-width: 420px;
background: linear-gradient(160deg, rgba(40,20,80,0.96) 0%, rgba(14,8,30,0.99) 55%, rgba(8,4,16,1) 100%);
border: 1px solid rgba(184,132,255,0.40);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(184,132,255,0.10);
max-height: calc(100vh - 32px);
display: flex;
flex-direction: column;
}
.mdm-modal.is-boss {
border-color: rgba(255,200,87,0.55);
box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,200,87,0.15), 0 0 40px rgba(255,200,87,0.10);
}
.mdm-close {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.12);
color: #fff;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
transition: background 0.15s;
}
.mdm-close:hover { background: rgba(0,0,0,0.85); }
.mdm-art {
position: relative;
width: 100%;
aspect-ratio: 4/3;
background:
radial-gradient(ellipse at 50% 30%, rgba(184,132,255,0.30), transparent 65%),
linear-gradient(180deg, rgba(40,20,80,0.85), rgba(8,4,16,1));
overflow: hidden;
flex-shrink: 0;
}
.mdm-modal.is-boss .mdm-art {
background:
radial-gradient(ellipse at 50% 30%, rgba(255,200,87,0.35), transparent 65%),
linear-gradient(180deg, rgba(40,28,10,0.85), rgba(8,4,16,1));
}
.mdm-art-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mdm-art-fallback {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
font-size: 110px;
color: rgba(255,255,255,0.20);
}
.mdm-art.no-img .mdm-art-fallback { display: flex; }
.mdm-art.no-img .mdm-art-img { display: none; }
.mdm-modal.is-boss .mdm-art-fallback { color: rgba(255,200,87,0.30); }
.mdm-art-gradient {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 55%;
background: linear-gradient(180deg, transparent 0%, rgba(8,4,16,0.7) 60%, rgba(8,4,16,0.95) 100%);
pointer-events: none;
}
.mdm-art-header {
position: absolute;
top: 14px;
left: 16px;
right: 56px;
display: flex;
align-items: center;
gap: 8px;
z-index: 2;
}
.mdm-art-skull {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #c63240, #7a1d28);
border-radius: 50%;
color: #fff;
font-size: 14px;
flex-shrink: 0;
}
.mdm-modal.is-boss .mdm-art-skull {
background: linear-gradient(135deg, #ffc857, #c08818);
color: #1a0f00;
}
.mdm-art-name {
font-family: 'Cinzel', serif;
font-size: 18px;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 6px rgba(0,0,0,0.9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mdm-art-rarity {
position: absolute;
top: 46px;
left: 16px;
padding: 3px 10px;
border-radius: 4px;
border: 1px solid;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
z-index: 2;
}
.mdm-art-lvl-pill {
position: absolute;
left: 16px;
bottom: 14px;
padding: 4px 12px;
background: rgba(0,0,0,0.80);
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
border-radius: 99px;
backdrop-filter: blur(4px);
z-index: 2;
}
.mdm-body {
padding: 16px 18px 18px;
overflow-y: auto;
flex: 1;
}
.mdm-hp { margin-bottom: 14px; }
.mdm-hp-bar {
height: 8px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(225,80,90,0.30);
border-radius: 99px;
overflow: hidden;
}
.mdm-hp-fill {
height: 100%;
background: linear-gradient(90deg, #ff4a6a 0%, #c63240 100%);
box-shadow: 0 0 12px rgba(225,80,90,0.55);
border-radius: 99px;
}
.mdm-hp-text {
text-align: center;
margin-top: 5px;
color: #ff7a90;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 700;
}
.mdm-desc {
margin: 0 0 16px;
color: rgba(255,255,255,0.70);
font-size: 13px;
line-height: 1.45;
font-style: italic;
}
.mdm-section { margin-bottom: 16px; }
.mdm-section:last-of-type { margin-bottom: 12px; }
.mdm-section-title {
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: rgba(255,200,87,0.85);
margin-bottom: 8px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(184,132,255,0.15);
}
.mdm-stat-row {
display: grid;
grid-template-columns: 20px 1fr auto;
gap: 10px;
align-items: center;
padding: 6px 0;
font-size: 13px;
}
.mdm-stat-row i {
font-size: 14px;
color: rgba(184,132,255,0.85);
}
.mdm-stat-row.is-maxed i,
.mdm-stat-row.is-maxed .mdm-stat-val {
color: #ff8d9a;
}
.mdm-stat-lbl {
color: rgba(255,255,255,0.75);
}
.mdm-stat-val {
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
color: #fff;
}
.mdm-loot-grid {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.mdm-loot-item {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(20,12,40,0.85);
border: 2px solid rgba(184,132,255,0.25);
border-radius: 8px;
font-size: 22px;
color: var(--gold, #ffc857);
transition: transform 0.15s;
}
.mdm-loot-item:hover { transform: scale(1.08); }
.mdm-loot-item.r-uncommon { border-color: rgba(95,214,132,0.6); color: #5fd684; }
.mdm-loot-item.r-rare { border-color: rgba(108,212,255,0.6); color: #6cd4ff; }
.mdm-loot-item.r-epic { border-color: rgba(184,132,255,0.7); color: #b884ff; }
.mdm-loot-item.r-legendary { border-color: rgba(255,200,87,0.7); color: #ffd54a; }
.mdm-loot-item.r-mythic { border-color: rgba(255,80,140,0.7); color: #ff5a8e; }
.mdm-loot-more {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 6px 10px;
background: transparent;
border: none;
color: var(--gold, #ffc857);
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.04em;
}
.mdm-loot-more:hover { color: #fff; }
.mdm-attack-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
margin-top: 14px;
padding: 14px;
border: none;
border-radius: 12px;
background: linear-gradient(180deg, #c63240 0%, #8d1e2a 100%);
color: #fff;
font-family: 'Cinzel', serif;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.10em;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
box-shadow: 0 5px 16px rgba(198,50,64,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}
.mdm-attack-btn:not(:disabled):hover {
transform: translateY(-1px);
filter: brightness(1.10);
box-shadow: 0 8px 22px rgba(198,50,64,0.65);
}
.mdm-attack-btn:disabled,
.mdm-attack-btn.is-locked {
background: linear-gradient(180deg, #3a2030 0%, #2a1620 100%);
color: rgba(255,255,255,0.5);
cursor: not-allowed;
box-shadow: none;
}
.mdm-attack-btn.is-overlevel {
background: linear-gradient(180deg, #c4720d 0%, #8a4f08 100%);
}
.mdm-attack-btn.is-grind {
background: linear-gradient(180deg, #6c3fd4 0%, #4a2890 100%);
}
.mdm-attack-btn i { font-size: 18px; }
.mdm-attack-stam {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 99px;
background: rgba(0,0,0,0.30);
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
}
.mdm-attack-stam i { color: #ffd54a; font-size: 12px; }
/* Mobile tweaks — los overrides reales están en mobile.css usando body.mobile-mode */
/* ============================================================================
NOTIFICATION TOAST POPUP (2026-05-14)
Toast emergente cuando llega una notificación nueva. Aparece desde la esquina
superior derecha, se queda 5s con barra de progreso, click = abrir + marcar leída.
============================================================================ */
.notif-toast-host {
position: fixed;
top: 70px;
right: 16px;
z-index: 9000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
max-width: calc(100vw - 32px);
width: 360px;
}
.notif-toast {
position: relative;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px 14px;
background: linear-gradient(180deg, rgba(28,19,52,0.96), rgba(10,5,24,0.98));
border: 1px solid var(--border-soft);
border-left: 3px solid #b884ff;
border-radius: 12px;
box-shadow:
0 14px 36px rgba(0,0,0,0.55),
0 0 24px rgba(0,0,0,0.35);
pointer-events: auto;
cursor: pointer;
opacity: 0;
transform: translateX(110%);
transition: opacity 0.28s ease, transform 0.32s cubic-bezier(.2,.9,.3,1.1);
overflow: hidden;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
min-width: 280px;
}
.notif-toast.is-visible {
opacity: 1;
transform: translateX(0);
}
.notif-toast.is-leaving {
opacity: 0;
transform: translateX(110%);
}
.notif-toast:hover { filter: brightness(1.08); }
/* Color variants — border-left + icono según tipo */
.notif-toast.is-mint { border-left-color: #5fd684; }
.notif-toast.is-mint .notif-toast-icon { color: #5fd684; background: rgba(95,214,132,0.12); border-color: rgba(95,214,132,0.35); }
.notif-toast.is-gold { border-left-color: #ffc857; }
.notif-toast.is-gold .notif-toast-icon { color: #ffc857; background: rgba(255,200,87,0.12); border-color: rgba(255,200,87,0.4); }
.notif-toast.is-blue { border-left-color: #4ec3f7; }
.notif-toast.is-blue .notif-toast-icon { color: #4ec3f7; background: rgba(78,195,247,0.12); border-color: rgba(78,195,247,0.35); }
.notif-toast.is-blood { border-left-color: #e85a6a; }
.notif-toast.is-blood .notif-toast-icon { color: #ff8898; background: rgba(232,90,106,0.12); border-color: rgba(232,90,106,0.35); }
.notif-toast.is-violet { border-left-color: #b884ff; }
.notif-toast.is-violet .notif-toast-icon { color: #b884ff; background: rgba(184,132,255,0.12); border-color: rgba(184,132,255,0.35); }
.notif-toast.is-default .notif-toast-icon { color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); }
.notif-toast-icon {
width: 38px; height: 38px;
border-radius: 10px;
display: grid; place-items: center;
font-size: 18px;
border: 1px solid rgba(255,255,255,0.1);
flex: 0 0 auto;
}
.notif-toast-body { flex: 1; min-width: 0; padding-right: 18px; }
.notif-toast-title {
font-family: var(--font-title);
font-weight: 800;
font-size: 13.5px;
color: #fff;
margin-bottom: 3px;
line-height: 1.25;
letter-spacing: 0.02em;
}
.notif-toast-text {
font-size: 12.5px;
color: rgba(255,255,255,0.78);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.notif-toast-close {
position: absolute;
top: 6px; right: 8px;
width: 22px; height: 22px;
border-radius: 6px;
background: transparent;
border: none;
color: rgba(255,255,255,0.45);
cursor: pointer;
display: grid; place-items: center;
font-size: 12px;
transition: all 0.15s ease;
}
.notif-toast-close:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
/* Barra de progreso al pie del toast (cuenta regresiva visual) */
.notif-toast-progress {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: currentColor;
opacity: 0.5;
transform-origin: left center;
animation: notif-toast-progress var(--toast-duration, 5000ms) linear forwards;
}
.notif-toast.is-mint .notif-toast-progress { background: #5fd684; }
.notif-toast.is-gold .notif-toast-progress { background: #ffc857; }
.notif-toast.is-blue .notif-toast-progress { background: #4ec3f7; }
.notif-toast.is-blood .notif-toast-progress { background: #e85a6a; }
.notif-toast.is-violet .notif-toast-progress { background: #b884ff; }
@keyframes notif-toast-progress {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@media (max-width: 480px) {
.notif-toast-host {
top: 64px;
right: 8px;
left: 8px;
width: auto;
max-width: none;
}
.notif-toast { min-width: 0; padding: 10px 12px 12px; gap: 8px; }
.notif-toast-icon { width: 34px; height: 34px; font-size: 16px; }
.notif-toast-title { font-size: 12.5px; }
.notif-toast-text { font-size: 11.5px; }
}
/* 2026-05-14: toast bloqueado durante combate (PvE/PvP). Shake + hint. */
.notif-toast.is-combat-blocked {
animation: notif-combat-shake 0.45s ease;
border-color: #e85a6a !important;
box-shadow: 0 0 0 2px rgba(232, 90, 106, 0.35), 0 6px 22px rgba(0,0,0,.5) !important;
}
@keyframes notif-combat-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
.notif-combat-block-hint {
margin-top: 6px;
padding: 6px 10px;
background: rgba(232, 90, 106, 0.16);
border: 1px solid rgba(232, 90, 106, 0.45);
border-radius: 8px;
font-size: 11px;
font-weight: 700;
color: #ff9aa6;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.02em;
animation: notif-combat-fade .2s ease;
}
.notif-combat-block-hint i { font-size: 13px; }
@keyframes notif-combat-fade {
from { opacity: 0; transform: translateY(-3px); }
to { opacity: 1; transform: translateY(0); }
}
/* =====================================================================
DESMANTELAR (2026-05-16 v2) — Mesa de Trabajo profesional
====================================================================== */
.dism-workbench {
background: linear-gradient(180deg, rgba(20,12,40,0.5), rgba(15,8,30,0.65));
border: 1px solid rgba(168, 85, 247, 0.25);
border-radius: 14px;
overflow: hidden;
margin-top: 14px;
}
.dism-wb-header {
padding: 14px 18px 12px;
background: linear-gradient(90deg, rgba(168,85,247,0.15), transparent);
border-bottom: 1px solid rgba(168,85,247,0.15);
}
.dism-wb-title {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-title);
font-size: 18px;
font-weight: 800;
color: #e9d5ff;
letter-spacing: 0.04em;
}
.dism-wb-title i { font-size: 22px; color: #a855f7; }
.dism-wb-badge {
background: linear-gradient(135deg,#7c3aed,#a855f7);
color:#fff;
font-size: 9px;
letter-spacing: 0.1em;
padding: 3px 8px;
border-radius: 99px;
font-weight: 800;
}
.dism-wb-sub {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
.dism-wb-body {
display: grid;
grid-template-columns: 290px 1fr;
gap: 0;
min-height: 480px;
}
.dism-wb-list {
background: rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.05);
display: flex;
flex-direction: column;
}
.dism-wb-list-head {
padding: 10px 14px;
font-family: var(--font-title);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(168,85,247,0.85);
border-bottom: 1px solid rgba(255,255,255,0.05);
display: flex;
justify-content: space-between;
align-items: center;
}
.dism-wb-count {
background: rgba(168,85,247,0.2);
color: #e9d5ff;
border-radius: 99px;
padding: 2px 8px;
font-size: 10px;
}
.dism-wb-items {
flex: 1;
overflow-y: auto;
max-height: 540px;
}
.dism-wb-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
cursor: pointer;
border-left: 3px solid transparent;
transition: background 0.15s, border-color 0.15s;
}
.dism-wb-row:hover { background: rgba(255,255,255,0.04); }
.dism-wb-row.is-selected {
background: linear-gradient(90deg, rgba(168,85,247,0.18) 0%, transparent 100%);
border-left-color: var(--rar-col, #a855f7);
}
.dism-wb-row-icon {
width: 38px; height: 38px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px; /* iconify-icon fallback size */
}
.dism-wb-row-icon .item-image {
width: 100% !important; height: 100% !important;
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.dism-wb-row-icon iconify-icon.gi { width: 1em; height: 1em; }
.dism-wb-row-info { flex: 1; min-width: 0; }
.dism-wb-row-name {
font-family: var(--font-title);
font-size: 13px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dism-wb-row-meta {
display: flex; gap: 6px;
font-size: 10px;
margin-top: 2px;
}
.dism-wb-rarity {
text-transform: uppercase;
font-size: 9px;
font-weight: 800;
padding: 1px 6px;
border-radius: 3px;
letter-spacing: 0.06em;
}
.dism-wb-stage {
padding: 22px;
display: flex;
flex-direction: column;
}
.dism-wb-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: rgba(255,255,255,0.35);
padding: 30px;
}
.dism-wb-empty i {
font-size: 80px;
color: rgba(168,85,247,0.3);
margin-bottom: 16px;
}
.dism-wb-empty-text {
font-size: 13px;
max-width: 320px;
}
.dism-wb-detail {
display: flex;
flex-direction: column;
gap: 16px;
}
.dism-wb-detail-head {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 14px;
border-bottom: 1.5px solid;
}
.dism-wb-detail-icon {
width: 72px; height: 72px;
border: 2px solid;
border-radius: 10px;
flex-shrink: 0;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-size: 44px; /* iconify-icon inherits this for fallback */
}
.dism-wb-detail-icon iconify-icon.gi { width: 1em; height: 1em; }
.dism-wb-detail-img {
width: 100% !important; height: 100% !important;
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.dism-wb-detail-info { flex: 1; min-width: 0; }
.dism-wb-detail-name {
font-family: var(--font-title);
font-size: 22px;
font-weight: 800;
letter-spacing: 0.02em;
}
.dism-wb-detail-meta {
display: flex; gap: 10px;
margin-top: 6px;
font-size: 12px;
align-items: center;
}
.dism-wb-rewards {
background: rgba(0,0,0,0.35);
border: 1px solid rgba(168,85,247,0.18);
border-radius: 10px;
padding: 14px 16px;
}
.dism-rewards-title {
font-family: var(--font-title);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(233,213,255,0.75);
margin-bottom: 10px;
}
.dism-rewards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 4px 18px;
}
.dism-reward-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
padding: 6px 0;
border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.dism-reward-name {
color: var(--text);
display: flex; align-items: center; gap: 8px;
}
.dism-reward-emoji { font-size: 15px; }
.dism-reward-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
font-size: 18px;
color: #c4b5fd;
}
.dism-reward-ic iconify-icon.gi { width: 1em; height: 1em; }
.dism-reward-gold .dism-reward-ic { color: #fcd34d; }
.dism-reward-gems .dism-reward-ic { color: #c084fc; }
.dism-reward-val {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
}
.dism-reward-avg {
font-size: 14px;
font-weight: 700;
color: #e9d5ff;
}
.dism-reward-range {
font-size: 11px;
color: var(--text-muted);
}
.dism-chance { color: #fbbf24; }
.dism-reward-gold .dism-reward-avg { color: #fcd34d; }
.dism-reward-gems .dism-reward-avg { color: #a855f7; }
.dism-wb-action { margin-top: 6px; }
.dism-wb-action .ml-2 { margin-left: 6px; }
.dism-wb-warn {
text-align: center;
font-size: 11px;
color: var(--text-muted);
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.dism-result {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 10px;
font-size: 14px;
font-weight: 600;
}
/* ===== Dismantle result modal (loot drop look) ===== */
.dism-result-modal {
position: relative;
max-width: 420px;
padding: 22px 22px 18px;
background: linear-gradient(160deg, #1a1226 0%, #0e0817 100%);
border: 1px solid rgba(168,85,247,0.4);
border-radius: 16px;
overflow: hidden;
z-index: 1;
}
.dism-result-glow {
position: absolute;
inset: -50%;
pointer-events: none;
opacity: 0.7;
z-index: 0;
}
.dism-result-head {
position: relative;
z-index: 1;
text-align: center;
margin-bottom: 14px;
}
.dism-result-title {
font-family: 'Cinzel', serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.5px;
margin-top: 6px;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.dism-result-item {
font-size: 16px;
font-weight: 700;
margin-top: 8px;
}
.dism-result-rarity {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
padding: 3px 10px;
border-radius: 10px;
margin-top: 4px;
text-transform: uppercase;
}
.dism-result-list {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 6px;
margin: 16px 0;
padding: 12px;
background: rgba(0,0,0,0.35);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.06);
}
.dism-result-row {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 10px;
padding: 6px 8px;
background: rgba(255,255,255,0.03);
border-radius: 6px;
border-left: 2px solid rgba(168,85,247,0.5);
}
.dism-result-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
text-align: center;
color: #c4b5fd;
}
.dism-result-icon iconify-icon.gi { width: 1em; height: 1em; }
.dism-result-name {
font-size: 13px;
font-weight: 500;
color: var(--text);
}
.dism-result-qty {
font-size: 14px;
font-weight: 700;
color: #4ade80;
font-variant-numeric: tabular-nums;
}
.dism-result-gold { border-left-color: #fbbf24; }
.dism-result-gold .dism-result-qty,
.dism-result-gold .dism-result-icon { color: #fcd34d; }
.dism-result-gems { border-left-color: #a855f7; }
.dism-result-gems .dism-result-qty,
.dism-result-gems .dism-result-icon { color: #c084fc; }
.dism-result-modal .btn { position: relative; z-index: 1; }
body.mobile-mode .dism-result-modal { max-width: 92%; padding: 18px 16px 14px; }
/* ===== Dismantle history ===== */
.dism-history-wrap {
margin-top: 18px;
background: linear-gradient(180deg, rgba(20,12,32,0.72) 0%, rgba(12,8,20,0.85) 100%);
border: 1px solid rgba(168,85,247,0.18);
border-radius: 14px;
overflow: hidden;
}
.dism-history-head {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: linear-gradient(90deg, rgba(168,85,247,0.18) 0%, transparent 100%);
border-bottom: 1px solid rgba(255,255,255,0.05);
font-family: var(--font-title);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.05em;
color: #e9d5ff;
}
.dism-history-head i { font-size: 18px; color: #a855f7; }
.dism-history-body { padding: 8px; }
.dism-history-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.dism-h-row {
display: grid;
grid-template-columns: 42px 1fr auto;
gap: 12px;
align-items: center;
padding: 8px 12px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.04);
border-left: 3px solid var(--rar-col, #888);
border-radius: 8px;
transition: background 0.15s;
}
.dism-h-row:hover { background: rgba(255,255,255,0.045); }
.dism-h-icon {
width: 42px; height: 42px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
font-size: 26px;
}
.dism-h-icon .item-image {
width: 100% !important; height: 100% !important;
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.dism-h-icon iconify-icon.gi { width: 1em; height: 1em; }
.dism-h-main { min-width: 0; }
.dism-h-name {
font-weight: 700;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dism-h-meta {
display: flex;
gap: 8px;
align-items: center;
font-size: 11px;
margin-top: 2px;
}
.dism-h-time { color: var(--text-muted); }
.dism-h-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: flex-end;
max-width: 320px;
}
.dism-h-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: rgba(168,85,247,0.12);
border: 1px solid rgba(168,85,247,0.25);
border-radius: 12px;
font-size: 11px;
font-weight: 600;
color: #e9d5ff;
}
.dism-h-chip iconify-icon.gi { font-size: 14px; width: 1em; height: 1em; }
.dism-h-chip i { font-size: 12px; }
.dism-h-chip b { font-variant-numeric: tabular-nums; }
.dism-h-gold {
background: rgba(252,211,77,0.12);
border-color: rgba(252,211,77,0.35);
color: #fcd34d;
}
.dism-h-gems {
background: rgba(192,132,252,0.12);
border-color: rgba(192,132,252,0.35);
color: #c084fc;
}
body.mobile-mode .dism-h-row {
grid-template-columns: 38px 1fr;
gap: 8px;
}
body.mobile-mode .dism-h-chips {
grid-column: 1 / -1;
justify-content: flex-start;
max-width: 100%;
margin-top: 4px;
}
body.mobile-mode .dism-wb-body { grid-template-columns: 1fr; }
body.mobile-mode .dism-wb-list {
border-right: none;
border-bottom: 1px solid rgba(255,255,255,0.05);
max-height: 240px;
}
body.mobile-mode .dism-wb-stage { padding: 14px; }
body.mobile-mode .dism-wb-detail-name { font-size: 18px; }
body.mobile-mode .dism-rewards-grid { grid-template-columns: 1fr; }
/* =====================================================================
2026-05-17: BUG REPORT SCREEN
===================================================================== */
.bug-hero {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 16px;
background: linear-gradient(135deg, rgba(95,214,132,0.10), rgba(0,0,0,0.4));
border-color: rgba(95,214,132,0.35);
margin-bottom: 14px;
}
.bug-hero-icon {
width: 52px; height: 52px;
background: rgba(95,214,132,0.18);
border: 1px solid rgba(95,214,132,0.5);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
color: #5fd684;
flex-shrink: 0;
}
.bug-hero-body { flex: 1; min-width: 0; }
.bug-hero-title {
font-family: var(--font-title);
font-size: 17px;
font-weight: 800;
color: #fff;
letter-spacing: 0.02em;
}
.bug-hero-sub { font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 4px; }
.bug-rules {
list-style: none;
margin: 10px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: rgba(255,255,255,0.72);
}
.bug-rules li { display: flex; align-items: center; gap: 6px; }
.bug-rules li i { font-size: 13px; color: #5fd684; }
.bug-rules li .ph-x-circle, .bug-rules li .ph-warning { color: #fbbf24; }
.bug-form-card { padding: 18px; }
.bug-field { margin-bottom: 14px; }
.bug-field label { display: block; font-size: 12px; font-weight: 700; color: #e0d7ff; margin-bottom: 5px; letter-spacing: 0.04em; }
.bug-required { color: #ff5050; font-weight: 800; }
.bug-textarea { font-family: inherit; resize: vertical; min-height: 110px; }
.bug-char-counter { font-size: 10px; color: var(--text-muted); text-align: right; margin-top: 2px; }
.bug-image-row { display: flex; align-items: center; gap: 10px; }
.bug-img-preview {
margin-top: 8px;
width: 100%;
max-height: 200px;
height: 160px;
background: rgba(0,0,0,0.4) center/contain no-repeat;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
}
.bug-history-card { padding: 18px; margin-top: 14px; }
.bug-history-list { display: flex; flex-direction: column; gap: 8px; }
.bug-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 12px;
padding: 10px 14px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
align-items: flex-start;
}
.bug-row-status {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
border-radius: 99px;
border: 1px solid;
height: 22px;
}
.bug-row-main { min-width: 0; }
.bug-row-title { font-weight: 700; font-size: 13.5px; color: #fff; }
.bug-row-meta { display: flex; gap: 8px; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.bug-row-cat { text-transform: capitalize; }
.bug-row-note {
margin-top: 6px;
padding: 6px 10px;
background: rgba(78,195,247,0.10);
border-left: 2px solid rgba(78,195,247,0.5);
border-radius: 4px;
font-size: 12px;
color: rgba(255,255,255,0.85);
}
.bug-reward-paid {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
padding: 3px 9px;
background: linear-gradient(135deg, rgba(192,132,252,0.20), rgba(168,85,247,0.25));
border: 1px solid rgba(192,132,252,0.55);
border-radius: 99px;
font-size: 11px;
font-weight: 700;
color: #c084fc;
}
body.mobile-mode .bug-row { grid-template-columns: 1fr; }
body.mobile-mode .bug-row-status { justify-self: flex-start; }
/* =====================================================================
2026-05-17: CREATOR APPLY CARD (en pantalla Creadores)
===================================================================== */
.cr-apply-card {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 18px 20px;
margin-bottom: 18px;
background: linear-gradient(135deg, rgba(184,132,255,0.10), rgba(0,0,0,0.4));
border: 1px solid rgba(184,132,255,0.35);
border-radius: 14px;
}
.cr-apply-card.is-eligible {
border-color: rgba(255,200,87,0.55);
box-shadow: 0 0 24px rgba(255,200,87,0.15);
}
.cr-apply-icon {
width: 56px; height: 56px;
background: rgba(184,132,255,0.18);
border: 1px solid rgba(184,132,255,0.55);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 30px;
color: #c4b5fd;
flex-shrink: 0;
}
.cr-apply-card.is-eligible .cr-apply-icon {
background: rgba(255,200,87,0.20);
border-color: rgba(255,200,87,0.6);
color: #ffd54a;
}
.cr-apply-body { flex: 1; min-width: 0; }
.cr-apply-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-apply-title {
font-family: var(--font-title);
font-size: 18px;
font-weight: 800;
color: #fff;
}
.cr-apply-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 99px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid;
}
.cr-apply-status.is-pending { background: rgba(95,220,255,0.15); border-color: rgba(95,220,255,0.5); color: #5fdcff; }
.cr-apply-status.is-rejected { background: rgba(225,80,90,0.15); border-color: rgba(225,80,90,0.5); color: #ff8e98; }
.cr-apply-sub { font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 4px; }
.cr-apply-note {
margin-top: 8px;
padding: 7px 10px;
background: rgba(78,195,247,0.08);
border-left: 2px solid rgba(78,195,247,0.5);
border-radius: 4px;
font-size: 12px;
color: rgba(255,255,255,0.85);
}
.cr-apply-reqs { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.cr-apply-req {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: rgba(255,255,255,0.85);
}
.cr-apply-req i { font-size: 15px; color: var(--text-muted); }
.cr-apply-req.is-ok i { color: #5fd684; }
.cr-apply-req.is-missing i { color: #fbbf24; }
.cr-apply-req-count {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 99px;
color: #fff;
}
.cr-apply-card.is-eligible .cr-apply-req-count {
border-color: rgba(255,200,87,0.45);
color: #ffd54a;
}
.cr-apply-btn { margin-top: 6px; min-width: 200px; }
body.mobile-mode .cr-apply-card { flex-direction: column; padding: 14px; }
body.mobile-mode .cr-apply-icon { width: 44px; height: 44px; font-size: 24px; }
body.mobile-mode .cr-apply-title { font-size: 16px; }
.cr-apply-modal { max-width: 540px; }
.cr-apply-modal .field { margin-bottom: 10px; }
.cr-apply-modal label { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #e0d7ff; margin-bottom: 4px; }
.cr-apply-modal label i { color: #c4b5fd; }
/* ===========================================================================
VIP v2 — rediseño 2026-05-18
30 días · +50% claim oro · regalo épico de raza · 4 pergaminos · 10 attr points
=========================================================================== */
.vip2-loading {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 60px 20px; gap: 14px; color: var(--text-muted);
}
.vip2-loading i { font-size: 32px; color: var(--gold); }
.vip2-error { padding: 20px; color: var(--blood); text-align: center; }
/* Active banner */
.vip2-active-banner {
background: linear-gradient(135deg, rgba(233,185,99,0.12), rgba(15,8,30,0.96));
border: 1px solid rgba(233,185,99,0.45);
border-radius: 16px;
padding: 18px 22px;
margin-bottom: 16px;
box-shadow: 0 0 24px rgba(233,185,99,0.10);
}
.vip2-ab-head { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; }
.vip2-ab-head > i { font-size: 38px; color: var(--gold); filter: drop-shadow(0 0 8px rgba(233,185,99,0.7)); }
.vip2-ab-title { font-family: var(--font-title); font-weight: 800; font-size: 18px; color: var(--gold); letter-spacing: 0.05em; }
.vip2-ab-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.vip2-ab-counter { text-align: right; }
.vip2-ab-counter-num { font-family: var(--font-title); font-size: 32px; font-weight: 900; color: var(--gold); line-height: 1; }
.vip2-ab-counter-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }
.vip2-ab-progress { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; margin-top: 12px; }
.vip2-ab-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), #ffd97a); box-shadow: 0 0 10px rgba(233,185,99,0.5); transition: width 0.6s ease; }
/* Hero v3 — con BG image + particles */
.vip2-hero {
position: relative;
border: 1.5px solid rgba(233,185,99,0.45);
border-radius: 18px;
padding: 38px 28px;
text-align: center;
margin-bottom: 22px;
overflow: hidden;
min-height: 280px;
isolation: isolate;
background: linear-gradient(160deg, rgba(58,40,12,0.92), rgba(15,8,30,0.98));
}
.vip2-hero.is-active { border-color: rgba(233,185,99,0.75); box-shadow: 0 0 32px rgba(233,185,99,0.22); }
.vip2-hero-bg {
position: absolute; inset: 0;
background-image: url('/assets/vip/banner_bg.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -2;
opacity: 0.85;
}
.vip2-hero-overlay {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at center, transparent 0%, rgba(15,8,30,0.55) 50%, rgba(15,8,30,0.92) 100%),
linear-gradient(180deg, rgba(15,8,30,0.20) 0%, rgba(15,8,30,0.65) 100%);
z-index: -1;
}
.vip2-hero-content { position: relative; z-index: 1; }
.vip2-hero-particles {
position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.vip2-particle {
position: absolute;
width: 5px; height: 5px;
background: radial-gradient(circle, rgba(255,210,90,0.9), transparent 70%);
border-radius: 50%;
left: calc((var(--i, 0) * 6%) + 4%);
bottom: -10px;
animation: vip2Float 4.5s ease-in infinite;
animation-delay: var(--d, 0s);
opacity: 0;
}
@keyframes vip2Float {
0% { transform: translateY(0) scale(0.8); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 0.5; }
100% { transform: translateY(-320px) scale(1.4); opacity: 0; }
}
.vip2-crown {
font-size: 48px;
color: var(--gold);
filter: drop-shadow(0 0 14px rgba(233,185,99,0.7));
margin-bottom: 8px;
animation: vip2CrownPulse 2.4s ease-in-out infinite;
}
@keyframes vip2CrownPulse {
0%,100% { transform: scale(1); filter: drop-shadow(0 0 14px rgba(233,185,99,0.7)); }
50% { transform: scale(1.06); filter: drop-shadow(0 0 22px rgba(255,210,90,0.9)); }
}
.vip2-eyebrow { font-size: 10px; font-weight: 700; color: var(--gold); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
.vip2-title { font-family: var(--font-title); font-size: 28px; font-weight: 900; color: var(--gold); letter-spacing: 0.06em; margin: 6px 0 4px; }
.vip2-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 18px; }
.vip2-price { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 18px; }
.vip2-price i { font-size: 22px; color: #67d4ff; filter: drop-shadow(0 0 6px rgba(103,212,255,0.5)); }
.vip2-price-num { font-family: var(--font-title); font-size: 30px; font-weight: 900; color: #fff; }
.vip2-price-unit { font-size: 11px; color: var(--text-muted); letter-spacing: 0.1em; font-weight: 700; align-self: center; }
.vip2-cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.vip2-buy-btn { min-width: 220px; }
.vip2-extend-note {
margin-top: 14px;
font-size: 11px;
color: var(--amber, #ffd24a);
background: rgba(255,210,74,0.06);
border: 1px solid rgba(255,210,74,0.18);
border-radius: 6px;
padding: 8px 12px;
line-height: 1.4;
}
/* Perks grid */
.vip2-perks-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
margin-bottom: 22px;
}
.vip2-perk-card {
display: grid; grid-template-columns: 44px 1fr; gap: 12px;
align-items: flex-start; padding: 14px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
transition: border-color 0.2s, transform 0.2s;
}
.vip2-perk-card:hover { transform: translateY(-2px); }
.vip2-perk-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 22px; background: rgba(255,255,255,0.04); }
.vip2-perk-card.accent-gold .vip2-perk-icon { color: var(--gold); background: rgba(233,185,99,0.12); }
.vip2-perk-card.accent-gold:hover { border-color: rgba(233,185,99,0.5); }
.vip2-perk-card.accent-mint .vip2-perk-icon { color: #5fd684; background: rgba(95,214,132,0.12); }
.vip2-perk-card.accent-mint:hover { border-color: rgba(95,214,132,0.5); }
.vip2-perk-card.accent-cyan .vip2-perk-icon { color: #5fd6e6; background: rgba(95,214,230,0.12); }
.vip2-perk-card.accent-cyan:hover { border-color: rgba(95,214,230,0.5); }
.vip2-perk-card.accent-amber .vip2-perk-icon { color: #ffd24a; background: rgba(255,210,74,0.12); }
.vip2-perk-card.accent-amber:hover { border-color: rgba(255,210,74,0.5); }
.vip2-perk-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.vip2-perk-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* Claims */
.vip2-claims-section { margin-top: 22px; }
.vip2-section-title {
font-family: var(--font-title);
font-size: 18px; font-weight: 800; color: var(--gold);
letter-spacing: 0.05em; margin-bottom: 12px;
display: flex; align-items: center; gap: 8px;
}
.vip2-section-title i { font-size: 22px; }
.vip2-claims-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
.vip2-claim-card {
background: linear-gradient(180deg, rgba(15,12,30,0.95), rgba(8,5,20,0.98));
border: 1px solid rgba(233,185,99,0.28);
border-radius: 12px;
padding: 16px;
display: flex; flex-direction: column; gap: 10px;
}
.vip2-claim-card.is-claimed { opacity: 0.62; border-color: rgba(95,214,132,0.4); }
.vip2-cc-head { display: flex; align-items: center; gap: 8px; }
.vip2-cc-head > i { font-size: 22px; color: var(--gold); }
.vip2-cc-title { font-weight: 800; font-size: 14px; flex: 1; }
.vip2-cc-tag {
font-size: 10px; padding: 3px 8px;
background: rgba(95,214,132,0.18);
color: #5fd684;
border: 1px solid rgba(95,214,132,0.4);
border-radius: 999px;
font-weight: 700; letter-spacing: 0.04em;
}
.vip2-cc-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; flex: 1; }
.vip2-cc-list { font-size: 11px; color: var(--text-dim); padding-left: 4px; }
/* Gift modal */
.vip2-gift-modal { width: 100%; max-width: 760px; max-height: 92vh; overflow-y: auto; padding: 0; }
.vip2-gm-head {
display: flex; align-items: center; gap: 14px;
padding: 18px 22px;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: linear-gradient(135deg, rgba(233,185,99,0.10), transparent);
}
.vip2-gm-head > i { font-size: 32px; color: var(--gold); }
.vip2-gm-title { font-family: var(--font-title); font-size: 20px; font-weight: 800; color: var(--gold); }
.vip2-gm-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.vip2-gm-body { padding: 16px 22px; }
.vip2-gm-slot { margin-bottom: 18px; }
.vip2-gm-slot-title {
font-family: var(--font-title);
font-size: 13px; color: var(--gold);
letter-spacing: 0.08em; text-transform: uppercase;
margin-bottom: 8px;
}
.vip2-gm-slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.vip2-gm-item {
background: rgba(0,0,0,0.42);
border: 1px solid rgba(233,185,99,0.25);
border-radius: 10px; padding: 12px;
display: flex; flex-direction: column; gap: 8px;
transition: border-color 0.2s, transform 0.2s;
}
.vip2-gm-item:hover { border-color: rgba(233,185,99,0.6); transform: translateY(-1px); }
.vip2-gm-item-name { font-weight: 700; font-size: 13px; color: #f5e1a7; }
.vip2-gm-item-stats { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; }
.vip2-gm-stat {
font-size: 10px; padding: 2px 7px;
border-radius: 5px; font-family: var(--font-mono);
background: rgba(255,255,255,0.05);
color: var(--text-muted);
border: 1px solid rgba(255,255,255,0.06);
}
.vip2-gm-stat.is-atk { color: #ff8c50; border-color: rgba(255,140,80,0.3); }
.vip2-gm-stat.is-def { color: #5fd6e6; border-color: rgba(95,214,230,0.3); }
.vip2-gm-stat.is-hp { color: #ff8090; border-color: rgba(255,128,144,0.3); }
.vip2-gm-stat.is-mp { color: #b884ff; border-color: rgba(184,132,255,0.3); }
.vip2-gm-stat.is-crit { color: #ffd24a; border-color: rgba(255,210,74,0.3); }
.vip2-gm-stat.is-dodge { color: #5fd684; border-color: rgba(95,214,132,0.3); }
.vip2-gm-stat.is-gold { color: var(--gold); border-color: rgba(233,185,99,0.3); }
/* Price sub */
.vip2-price-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 18px; letter-spacing: 0.04em; }
/* Section title genérico */
.vip2-section-title-spaced { margin-top: 28px; }
/* COUNTERS — números destacados con animación de count-up */
.vip2-counters {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin: 24px 0;
}
.vip2-counter {
background: linear-gradient(180deg, rgba(15,12,30,0.96), rgba(8,5,20,0.98));
border: 1px solid rgba(233,185,99,0.22);
border-radius: 12px;
padding: 16px 10px;
text-align: center;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.vip2-counter:hover {
transform: translateY(-3px);
border-color: rgba(233,185,99,0.55);
box-shadow: 0 6px 18px rgba(233,185,99,0.10);
}
.vip2-counter-num {
font-family: var(--font-title);
font-size: 30px;
font-weight: 900;
color: var(--gold);
line-height: 1;
text-shadow: 0 0 14px rgba(233,185,99,0.4);
}
.vip2-counter-suf { font-size: 18px; opacity: 0.7; margin-left: 1px; }
.vip2-counter-lbl {
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 6px;
line-height: 1.3;
}
/* CHAT PREVIEW — simulación del badge VIP en chat */
.vip2-chat-preview {
background: linear-gradient(180deg, rgba(15,12,30,0.96), rgba(8,5,20,0.98));
border: 1px solid rgba(233,185,99,0.22);
border-radius: 14px;
padding: 16px;
margin: 22px 0;
}
.vip2-chat-mock {
margin-top: 12px;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
overflow: hidden;
}
.vip2-chat-tabs {
display: flex;
gap: 0;
background: rgba(15,8,30,0.7);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 0 8px;
}
.vip2-chat-tab {
padding: 8px 14px;
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid transparent;
}
.vip2-chat-tab.is-active {
color: var(--gold);
border-bottom-color: var(--gold);
}
.vip2-chat-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.vip2-chat-msg {
font-size: 13px;
line-height: 1.5;
color: #d8d4cc;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
padding: 4px 0;
}
.vip2-chat-sender { font-weight: 700; color: #b8b3a8; margin-right: 4px; }
.vip2-chat-text { color: #d8d4cc; }
.vip2-chat-msg.is-vip-preview {
position: relative;
background: linear-gradient(90deg, rgba(233,185,99,0.10), rgba(233,185,99,0.02));
border-left: 3px solid var(--gold);
padding: 8px 10px;
border-radius: 6px;
margin: 4px -4px;
animation: vip2ChatPulse 2.2s ease-in-out infinite;
}
@keyframes vip2ChatPulse {
0%,100% { box-shadow: 0 0 0 rgba(233,185,99,0); }
50% { box-shadow: 0 0 16px rgba(233,185,99,0.25); }
}
.vip2-chat-vip-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 7px;
font-size: 10px;
font-weight: 800;
color: #1a1408;
background: linear-gradient(135deg, var(--gold), #ffd97a);
border-radius: 4px;
letter-spacing: 0.06em;
box-shadow: 0 0 8px rgba(233,185,99,0.5);
}
.vip2-chat-vip-badge i { font-size: 11px; }
.vip2-chat-sender-vip {
color: var(--gold) !important;
text-shadow: 0 0 8px rgba(233,185,99,0.4);
}
.vip2-chat-arrow {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
font-size: 11px;
font-style: italic;
color: var(--gold);
opacity: 0.85;
}
.vip2-chat-arrow i { animation: vip2ArrowBounce 1.4s ease-in-out infinite; }
@keyframes vip2ArrowBounce {
0%,100% { transform: translateX(0); }
50% { transform: translateX(-4px); }
}
/* COMPARE — Sin VIP vs Con VIP */
.vip2-compare { margin: 22px 0; }
.vip2-compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 12px;
}
.vip2-compare-col {
background: linear-gradient(180deg, rgba(15,12,30,0.96), rgba(8,5,20,0.98));
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
overflow: hidden;
}
.vip2-compare-col.vip2-compare-vip {
border-color: rgba(233,185,99,0.5);
box-shadow: 0 0 18px rgba(233,185,99,0.10);
}
.vip2-compare-head {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px;
font-weight: 800;
font-size: 14px;
font-family: var(--font-title);
letter-spacing: 0.08em;
text-transform: uppercase;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: rgba(0,0,0,0.3);
}
.vip2-compare-free .vip2-compare-head { color: var(--text-muted); }
.vip2-compare-free .vip2-compare-head i { color: var(--text-muted); font-size: 18px; }
.vip2-compare-vip .vip2-compare-head {
color: var(--gold);
background: linear-gradient(180deg, rgba(233,185,99,0.15), transparent);
}
.vip2-compare-vip .vip2-compare-head i {
color: var(--gold); font-size: 20px;
filter: drop-shadow(0 0 6px rgba(233,185,99,0.6));
}
.vip2-compare-row {
display: flex; justify-content: space-between; align-items: center;
padding: 9px 14px;
font-size: 12px;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.vip2-compare-row:last-child { border-bottom: none; }
.vip2-compare-row-label { color: var(--text-muted); }
.vip2-compare-row-value { font-weight: 700; }
.vip2-compare-row-value.is-positive { color: var(--gold); text-shadow: 0 0 6px rgba(233,185,99,0.3); }
.vip2-compare-row-value.is-neutral { color: var(--text-muted); opacity: 0.7; }
/* FAQ / TRUST footer */
.vip2-faq {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 10px;
margin: 26px 0 14px;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.vip2-faq-item {
display: grid; grid-template-columns: 36px 1fr; gap: 12px;
padding: 12px;
background: rgba(0,0,0,0.32);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
}
.vip2-faq-item > i { font-size: 22px; color: var(--gold); align-self: center; }
.vip2-faq-title { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.vip2-faq-text { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
/* Mobile */
body.mobile-mode .vip2-hero { padding: 28px 18px; min-height: 240px; }
body.mobile-mode .vip2-title { font-size: 22px; }
body.mobile-mode .vip2-crown { font-size: 38px; }
body.mobile-mode .vip2-price-num { font-size: 24px; }
body.mobile-mode .vip2-buy-btn { min-width: 0; width: 100%; }
body.mobile-mode .vip2-perks-grid,
body.mobile-mode .vip2-claims-grid { grid-template-columns: 1fr; }
body.mobile-mode .vip2-counters { grid-template-columns: repeat(3, 1fr); }
body.mobile-mode .vip2-counter-num { font-size: 22px; }
body.mobile-mode .vip2-counter { padding: 12px 6px; }
body.mobile-mode .vip2-compare-grid { grid-template-columns: 1fr; }
body.mobile-mode .vip2-gm-slot-grid { grid-template-columns: 1fr; }
body.mobile-mode .vip2-ab-head { grid-template-columns: 36px 1fr auto; gap: 10px; }
body.mobile-mode .vip2-ab-head > i { font-size: 28px; }
body.mobile-mode .vip2-ab-title { font-size: 15px; }
body.mobile-mode .vip2-ab-counter-num { font-size: 24px; }
body.mobile-mode .vip2-chat-msg { font-size: 12px; }
body.mobile-mode .vip2-chat-arrow { display: none; }
/* ===========================================================================
VIP PROMO MODAL — popup para users lvl 20+ no-VIP (1x/día)
Aparece al entrar al juego. Botones deshabilitados los primeros 5s.
=========================================================================== */
.vippromo-overlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,0.86);
display: flex; align-items: center; justify-content: center;
padding: 20px;
backdrop-filter: blur(4px);
}
.vippromo-modal {
position: relative;
width: 100%; max-width: 560px;
background: linear-gradient(160deg, rgba(58,40,12,0.92), rgba(15,8,30,0.98));
border: 1.5px solid rgba(233,185,99,0.55);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 60px rgba(233,185,99,0.20);
overflow: hidden;
isolation: isolate;
}
.vippromo-bg {
position: absolute; inset: 0;
background-image: url('/assets/vip/banner_bg.webp');
background-size: cover;
background-position: center;
z-index: -2;
opacity: 0.55;
}
.vippromo-overlay-grad {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at center, rgba(15,8,30,0.30) 0%, rgba(15,8,30,0.86) 60%, rgba(15,8,30,0.96) 100%),
linear-gradient(180deg, rgba(15,8,30,0.30) 0%, rgba(15,8,30,0.72) 100%);
z-index: -1;
}
.vippromo-particles {
position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.vippromo-particle {
position: absolute;
width: 4px; height: 4px;
background: radial-gradient(circle, rgba(255,210,90,0.95), transparent 70%);
border-radius: 50%;
left: calc((var(--i, 0) * 7%) + 3%);
bottom: -8px;
animation: vippromoFloat 5s ease-in infinite;
animation-delay: var(--d, 0s);
opacity: 0;
}
@keyframes vippromoFloat {
0% { transform: translateY(0) scale(0.7); opacity: 0; }
15% { opacity: 1; }
85% { opacity: 0.5; }
100% { transform: translateY(-460px) scale(1.4); opacity: 0; }
}
/* Close button con countdown */
.vippromo-close {
position: absolute;
top: 12px; right: 12px;
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 50%;
color: #d5d3cb;
cursor: pointer;
z-index: 5;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
font-size: 16px;
}
.vippromo-close:disabled { cursor: not-allowed; opacity: 0.45; }
.vippromo-close.is-ready { opacity: 1; border-color: rgba(255,255,255,0.25); }
.vippromo-close.is-ready:hover {
background: rgba(233,185,99,0.18);
border-color: rgba(233,185,99,0.6);
color: #fff;
transform: scale(1.05);
}
.vippromo-close-cd {
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800;
color: var(--gold);
font-family: var(--font-mono);
}
.vippromo-close-cd + i,
.vippromo-close:not(.is-ready) > i { display: none; }
.vippromo-close.is-ready > i { display: block; }
/* Content */
.vippromo-content {
position: relative; z-index: 1;
padding: 36px 32px 28px;
text-align: center;
}
.vippromo-crown {
font-size: 56px;
color: var(--gold);
filter: drop-shadow(0 0 18px rgba(233,185,99,0.8));
margin-bottom: 10px;
animation: vippromoCrown 2.4s ease-in-out infinite;
}
@keyframes vippromoCrown {
0%,100% { transform: scale(1) rotate(-2deg); }
50% { transform: scale(1.08) rotate(2deg); filter: drop-shadow(0 0 26px rgba(255,210,90,0.95)); }
}
.vippromo-eyebrow {
font-size: 11px;
font-weight: 800;
color: var(--gold);
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 8px;
}
.vippromo-title {
font-family: var(--font-title);
font-size: 26px;
font-weight: 900;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.7);
line-height: 1.18;
margin-bottom: 8px;
}
.vippromo-sub {
font-size: 13px;
color: rgba(245,225,167,0.85);
line-height: 1.5;
margin-bottom: 22px;
}
/* Perks list compacta */
.vippromo-perks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 22px;
text-align: left;
}
.vippromo-perk {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(233,185,99,0.22);
border-radius: 8px;
font-size: 12px;
font-weight: 600;
color: #e5dac8;
}
.vippromo-perk i {
font-size: 17px;
color: var(--gold);
filter: drop-shadow(0 0 4px rgba(233,185,99,0.5));
flex-shrink: 0;
}
/* Botones */
.vippromo-cta-row {
display: flex; gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 14px;
}
.vippromo-go-btn { min-width: 200px; }
.vippromo-go-btn:disabled,
.vippromo-later-btn:disabled {
opacity: 0.55;
cursor: wait;
}
.vippromo-foot {
font-size: 10.5px;
color: var(--text-muted);
opacity: 0.8;
letter-spacing: 0.04em;
}
/* Mobile */
body.mobile-mode .vippromo-modal { max-width: 100%; border-radius: 16px; }
body.mobile-mode .vippromo-content { padding: 28px 18px 22px; }
body.mobile-mode .vippromo-crown { font-size: 44px; }
body.mobile-mode .vippromo-title { font-size: 20px; }
body.mobile-mode .vippromo-perks { grid-template-columns: 1fr; gap: 6px; }
body.mobile-mode .vippromo-perk { font-size: 11.5px; padding: 7px 9px; }
body.mobile-mode .vippromo-go-btn { width: 100%; min-width: 0; }
body.mobile-mode .vippromo-later-btn { width: 100%; }
/* ==========================================================
INFINITE DUNGEON (2026-05-20) — Mazmorra Infinita
========================================================== */
.id-shell { padding: 12px 0; }
.id-grid {
display: grid; grid-template-columns: 1fr 320px; gap: 16px;
}
@media (max-width: 900px) {
.id-grid { grid-template-columns: 1fr; }
}
.id-panel, .id-side {
background: rgba(20,10,30,0.5);
border: 1px solid rgba(192,132,252,0.2);
border-radius: 12px;
padding: 16px;
}
.id-hero { display: flex; flex-direction: column; gap: 14px; }
.id-hero-art {
border-radius: 10px; height: 140px;
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
}
.id-hero-glow {
position: absolute; inset: 0;
background: radial-gradient(circle at center, rgba(192,132,252,0.25), transparent 60%);
}
.id-hero-body { padding: 0 4px; }
.id-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 12px 0; }
.id-stat-card {
background: rgba(192,132,252,0.08);
border: 1px solid rgba(192,132,252,0.25);
border-radius: 8px; padding: 10px; text-align: center;
}
.id-stat-label { font-size: 10px; text-transform: uppercase; color: #aaa; }
.id-stat-value { font-size: 22px; font-weight: 700; color: #c084fc; }
.id-rules { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; font-size: 13px; }
.id-rule i { margin-right: 8px; }
.id-runview { display: flex; flex-direction: column; gap: 16px; }
.id-runhdr { display: flex; align-items: center; gap: 16px; padding: 10px; background: rgba(192,132,252,0.06); border-radius: 8px; }
.id-runhdr-divider { width: 1px; height: 40px; background: rgba(192,132,252,0.3); }
.id-floor-num { font-size: 28px; font-weight: 800; color: #c084fc; }
.id-mob-preview { display: flex; gap: 14px; align-items: center; padding: 12px; background: rgba(0,0,0,0.25); border-radius: 10px; }
.id-mob-icon { font-size: 56px; min-width: 60px; }
.id-mob-name { font-weight: 700; font-size: 18px; margin-bottom: 6px; }
.id-mob-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.id-bag { padding: 12px; background: rgba(233,185,99,0.06); border: 1px solid rgba(233,185,99,0.2); border-radius: 10px; }
.id-bag-title { font-weight: 700; margin-bottom: 8px; color: #e9b963; }
.id-bag-content { display: flex; flex-direction: column; gap: 8px; }
.id-bag-gold { font-size: 18px; }
.id-bag-items { display: flex; flex-wrap: wrap; gap: 4px; }
.id-actions { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 8px; }
@media (max-width: 700px) { .id-actions { grid-template-columns: 1fr; } }
.id-combat-wrap { padding: 8px; }
.id-combat-header { text-align: center; margin-bottom: 14px; }
.id-combat-title { font-size: 20px; font-weight: 700; color: #c084fc; }
.id-combat-host { min-height: 200px; }
.id-ranking-title { font-weight: 700; margin-bottom: 12px; }
.id-ranking-list { display: flex; flex-direction: column; gap: 4px; }
.id-rank-row {
display: grid; grid-template-columns: 40px 1fr auto;
align-items: center; gap: 8px; padding: 6px 8px;
border-radius: 6px;
}
.id-rank-row.is-me { background: rgba(192,132,252,0.15); border-left: 3px solid #c084fc; }
.id-rank-pos { font-weight: 700; text-align: center; }
.id-rank-name b { font-size: 13px; }
.id-rank-floor { text-align: right; }
.id-rank-floor b { font-size: 18px; color: #c084fc; }
.id-loading { text-align: center; padding: 40px; color: #aaa; }
/* ==========================================================
INFINITE DUNGEON · Pantalla de entrada rediseñada (2026-05-20)
========================================================== */
.ida-screen {
position: relative;
min-height: calc(100vh - 80px);
padding: 24px 16px;
}
.ida-screen .ida-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
/* 2026-05-20: menos blur + más brillo → fondo más visible y nítido */
filter: blur(2px) brightness(0.75) saturate(1.15);
z-index: 0;
pointer-events: none;
}
.ida-screen .ida-vignette {
position: absolute; inset: 0;
/* Viñeta suave — solo oscurece los bordes para que los paneles destaquen */
background: radial-gradient(ellipse at center, transparent 0%, rgba(10,5,24,0.25) 55%, rgba(10,5,24,0.6) 100%);
z-index: 1;
}
/* Hero */
.ida-hero { position: relative; z-index: 2; text-align: center; padding: 30px 0 24px; }
.ida-hero-skull { position: relative; display: inline-block; margin-bottom: 12px; }
.ida-hero-skull i {
font-size: 78px; color: #c084fc;
text-shadow: 0 0 24px rgba(192,132,252,0.7);
position: relative; z-index: 2;
animation: idaSkullFloat 3s ease-in-out infinite;
}
.ida-hero-glow {
position: absolute; inset: -20px;
background: radial-gradient(circle, rgba(192,132,252,0.4), transparent 65%);
z-index: 1;
animation: idaSkullPulse 2s ease-in-out infinite;
}
@keyframes idaSkullFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes idaSkullPulse { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.15); } }
.ida-hero-title {
font-family: 'Cinzel', serif;
font-size: 42px; font-weight: 800;
color: #fff; letter-spacing: 2px;
text-shadow: 0 0 20px rgba(192,132,252,0.6), 0 2px 8px rgba(0,0,0,0.8);
margin-bottom: 8px;
}
.ida-hero-sub { color: #c4b3d4; font-size: 14.5px; text-shadow: 0 1px 6px rgba(0,0,0,0.7); max-width: 580px; margin: 0 auto; }
/* Grid 2 columnas */
.ida-grid {
position: relative; z-index: 2;
display: grid; grid-template-columns: 1fr 380px;
gap: 18px; max-width: 1280px; margin: 24px auto 0;
}
@media (max-width: 1000px) { .ida-grid { grid-template-columns: 1fr; } }
/* Panel izquierdo */
.ida-panel {
background: linear-gradient(180deg, rgba(20,10,30,0.85), rgba(12,5,22,0.92));
border: 1px solid rgba(192,132,252,0.3);
border-radius: 14px; padding: 22px;
backdrop-filter: blur(8px);
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
/* Stats personales */
.ida-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.ida-stat {
display: flex; gap: 10px; align-items: center; padding: 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(192,132,252,0.18);
border-radius: 10px; transition: all 0.2s ease;
}
.ida-stat:hover { background: rgba(192,132,252,0.08); border-color: rgba(192,132,252,0.35); transform: translateY(-2px); }
.ida-stat-icon i { font-size: 26px; }
.ida-stat-info { flex: 1; min-width: 0; }
.ida-stat-label { font-size: 10.5px; text-transform: uppercase; color: #9c8eaf; letter-spacing: 1px; margin-bottom: 2px; }
.ida-stat-val { font-family: 'Cinzel', serif; font-size: 24px; font-weight: 700; color: #fff; line-height: 1; }
/* Reglas */
.ida-rules { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.ida-rule {
display: flex; gap: 12px; align-items: flex-start;
padding: 10px 12px; background: rgba(0,0,0,0.25);
border-radius: 8px; font-size: 13px; line-height: 1.4;
}
.ida-rule i { font-size: 18px; margin-top: 1px; flex-shrink: 0; }
.ida-rule.ida-rule-danger { background: rgba(255,85,85,0.08); border-left: 3px solid #ff5555; }
.ida-rule.ida-rule-warn { background: rgba(255,140,66,0.08); border-left: 3px solid #ff8c42; }
/* CTA Button */
.ida-cta {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 16px 22px;
background: linear-gradient(135deg, #c084fc 0%, #9d6cff 50%, #6c2cb6 100%);
border: none; border-radius: 12px; color: #fff;
font-size: 16px; font-weight: 700; letter-spacing: 0.5px;
cursor: pointer; position: relative; overflow: hidden;
box-shadow: 0 4px 16px rgba(192,132,252,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
transition: all 0.25s ease;
}
.ida-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(192,132,252,0.6), inset 0 1px 0 rgba(255,255,255,0.3); }
.ida-cta i { font-size: 20px; }
.ida-cta-arrow { transition: transform 0.2s ease; }
.ida-cta:hover .ida-cta-arrow { transform: translateX(4px); }
/* Botón resume (run activa) */
.ida-cta-resume {
background: linear-gradient(135deg, #28c896 0%, #1ea882 50%, #167964 100%) !important;
box-shadow: 0 4px 16px rgba(40,200,150,0.4), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.ida-cta-resume:hover { box-shadow: 0 8px 28px rgba(40,200,150,0.6), inset 0 1px 0 rgba(255,255,255,0.3) !important; }
/* Botón bloqueado (cooldown activo) */
.ida-cta-locked {
background: linear-gradient(135deg, #3a2d4d 0%, #2a1f37 100%) !important;
cursor: not-allowed !important;
color: #9c8eaf !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.08);
}
.ida-cta-locked:hover { transform: none !important; }
.ida-cta-locked b { color: #e9b963; font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.ida-cta-hint {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin-top: 10px;
font-size: 11.5px; color: #8a7a9c;
text-align: center;
}
.ida-cta-hint i { font-size: 14px; }
/* Ranking panel */
.ida-ranking {
background: linear-gradient(180deg, rgba(20,10,30,0.85), rgba(12,5,22,0.92));
border: 1px solid rgba(233,185,99,0.25);
border-radius: 14px; padding: 18px;
backdrop-filter: blur(8px);
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.ida-ranking-header {
display: flex; align-items: center; gap: 8px;
padding-bottom: 12px; border-bottom: 1px solid rgba(233,185,99,0.15);
margin-bottom: 12px;
font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700;
}
.ida-ranking-header i { font-size: 22px; }
.ida-ranking-count {
margin-left: auto; font-size: 11px; color: #9c8eaf; font-weight: 500;
padding: 2px 8px; background: rgba(255,255,255,0.05);
border-radius: 999px; font-family: 'Inter', sans-serif;
}
.ida-ranking-empty { text-align: center; padding: 30px 16px; color: #6b5b7d; }
.ida-ranking-empty i { font-size: 40px; opacity: 0.4; display: block; margin-bottom: 8px; }
/* 2026-05-20: 8 filas visibles + scroll para ver el resto del Top 20.
Cada fila ~52px (padding 16 + avatar 36) + gap 6 entre filas. */
.ida-ranking-list {
display: flex; flex-direction: column; gap: 6px;
max-height: 470px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px; /* espacio para la scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(192,132,252,0.5) transparent;
}
.ida-ranking-list::-webkit-scrollbar { width: 6px; }
.ida-ranking-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 3px; }
.ida-ranking-list::-webkit-scrollbar-thumb {
background: rgba(192,132,252,0.4); border-radius: 3px;
}
.ida-ranking-list::-webkit-scrollbar-thumb:hover { background: rgba(192,132,252,0.7); }
/* Row de ranking */
.ida-rank-row {
display: grid; grid-template-columns: 36px 36px 1fr auto;
align-items: center; gap: 10px; padding: 8px 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 8px; transition: all 0.2s ease;
}
.ida-rank-row:hover { background: rgba(255,255,255,0.05); border-color: rgba(192,132,252,0.2); }
.ida-rank-row.is-me { background: rgba(192,132,252,0.12); border-left: 3px solid #c084fc; }
.ida-rank-row.is-top3 { background: rgba(233,185,99,0.06); border-color: rgba(233,185,99,0.15); }
.ida-rank-row.is-first {
background: linear-gradient(90deg, rgba(233,185,99,0.18), rgba(233,185,99,0.04));
border-color: rgba(233,185,99,0.35);
box-shadow: 0 0 16px rgba(233,185,99,0.18);
}
/* Posición */
.ida-rank-pos { font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700; text-align: center; color: #9c8eaf; }
.ida-rank-pos.r-1 { color: #e9b963; font-size: 22px; text-shadow: 0 0 8px rgba(233,185,99,0.6); }
.ida-rank-pos.r-2 { color: #c0c0c0; font-size: 20px; }
.ida-rank-pos.r-3 { color: #cd7f32; font-size: 20px; }
/* Avatar */
.ida-avatar {
width: 36px; height: 36px; border-radius: 50%;
background-size: cover; background-position: center;
border: 2px solid rgba(192,132,252,0.35); flex-shrink: 0;
}
.ida-avatar-fa {
background: rgba(192,132,252,0.15);
display: flex; align-items: center; justify-content: center;
color: #c084fc; font-size: 16px;
}
.ida-rank-row.is-first .ida-avatar { border-color: #e9b963; box-shadow: 0 0 8px rgba(233,185,99,0.5); }
/* Info */
.ida-rank-info { min-width: 0; }
.ida-rank-name {
display: flex; align-items: center; gap: 6px;
font-size: 13.5px; margin-bottom: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ida-rank-name b { color: #fff; }
.ida-rank-meta { display: flex; gap: 5px; font-size: 11px; color: #8a7a9c; }
.ida-rank-dot { opacity: 0.6; }
/* VIP badge */
.ida-vip {
display: inline-flex; align-items: center; gap: 3px;
padding: 1px 6px;
background: linear-gradient(135deg, #e9b963, #c89642);
color: #1a0d00; font-size: 9.5px; font-weight: 800;
letter-spacing: 0.5px; border-radius: 4px;
box-shadow: 0 0 6px rgba(233,185,99,0.5);
}
.ida-vip i { font-size: 9px; }
/* Floor count */
.ida-rank-floor { text-align: right; }
.ida-rank-floor-num { font-family: 'Cinzel', serif; font-size: 20px; font-weight: 700; color: #c084fc; line-height: 1; }
.ida-rank-row.is-first .ida-rank-floor-num { color: #e9b963; text-shadow: 0 0 8px rgba(233,185,99,0.4); }
.ida-rank-floor-lbl { font-size: 9px; color: #6b5b7d; text-transform: uppercase; letter-spacing: 0.8px; margin-top: 2px; }
/* Mobile adjustments */
@media (max-width: 600px) {
.ida-hero-title { font-size: 32px; }
.ida-stats { grid-template-columns: 1fr; }
.ida-rank-row { grid-template-columns: 32px 32px 1fr auto; gap: 8px; padding: 7px 8px; }
.ida-rank-name { font-size: 12.5px; }
.ida-rank-floor-num { font-size: 18px; }
}
/* ── Historial del jugador (debajo del grid) ── */
.ida-history {
position: relative; z-index: 2;
max-width: 1280px; margin: 18px auto 24px;
background: linear-gradient(180deg, rgba(20,10,30,0.85), rgba(12,5,22,0.92));
border: 1px solid rgba(192,132,252,0.22);
border-radius: 14px; padding: 18px;
backdrop-filter: blur(8px);
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.ida-history-header {
display: flex; align-items: center; gap: 8px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(192,132,252,0.15);
margin-bottom: 12px;
font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700;
}
.ida-history-header i { font-size: 20px; }
.ida-history-count {
margin-left: auto; font-size: 11px; color: #9c8eaf;
padding: 2px 8px; background: rgba(255,255,255,0.05);
border-radius: 999px; font-family: 'Inter', sans-serif;
}
.ida-history-list { display: flex; flex-direction: column; gap: 6px; }
.ida-hist-row {
display: grid;
grid-template-columns: 40px 1fr 200px 150px;
align-items: center; gap: 12px;
padding: 10px 14px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-left: 3px solid var(--st-color, #c084fc);
border-radius: 8px; transition: all 0.2s ease;
}
.ida-hist-row:hover { background: rgba(255,255,255,0.05); transform: translateX(2px); }
.ida-hist-status {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(0,0,0,0.4);
border: 2px solid var(--st-color, #c084fc);
}
.ida-hist-status i { font-size: 18px; color: var(--st-color, #c084fc); }
.ida-hist-info { display: flex; flex-direction: column; gap: 2px; }
.ida-hist-floor { font-size: 14px; color: #fff; }
.ida-hist-floor b { font-family: 'Cinzel', serif; font-size: 18px; color: var(--st-color, #c084fc); }
.ida-hist-status-lbl { font-size: 11px; color: #9c8eaf; }
.ida-hist-loot { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
.ida-hist-gold, .ida-hist-items { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.ida-hist-gold { color: #e9b963; }
.ida-hist-gold i { font-size: 16px; }
.ida-hist-items { color: #4ec3f7; }
.ida-hist-items i { font-size: 14px; }
.ida-hist-date { font-size: 11px; color: #6b5b7d; text-align: right; white-space: nowrap; }
@media (max-width: 800px) {
.ida-hist-row {
grid-template-columns: 36px 1fr auto;
grid-template-areas: "icon info loot" "icon date date";
gap: 6px 10px; padding: 8px 10px;
}
.ida-hist-status { grid-area: icon; }
.ida-hist-info { grid-area: info; }
.ida-hist-loot { grid-area: loot; }
.ida-hist-date { grid-area: date; font-size: 10px; text-align: left; padding-left: 0; }
}
/* ==========================================================
INFINITE DUNGEON · Modal de decisión mejorado (2026-05-20)
========================================================== */
/* Centrar verticalmente el modal en PC */
.dgn-screen.dgn-preboss-inf {
display: flex; align-items: center; justify-content: center;
min-height: calc(100vh - 60px);
}
.dgn-preboss-inf .dgn-inf-modal {
position: relative; z-index: 5;
max-width: 520px; width: 92%;
margin: 0 auto;
padding: 22px 22px 18px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(15,5,25,0.96), rgba(8,2,18,0.98));
border: 2px solid var(--tier-color, #c084fc);
box-shadow:
0 0 48px rgba(192,132,252,0.35),
inset 0 0 0 1px rgba(255,255,255,0.04);
animation: dgnInfPop 0.5s cubic-bezier(0.25, 1, 0.5, 1) both;
}
/* En mobile, dejar margen arriba para no pegar al header */
@media (max-width: 700px) {
.dgn-screen.dgn-preboss-inf {
align-items: flex-start;
padding-top: 16px;
}
}
@keyframes dgnInfPop {
0% { opacity: 0; transform: scale(0.85) translateY(20px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Streak header */
.dgn-inf-streak {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 12px;
background: rgba(255,140,66,0.08);
border: 1px solid rgba(255,140,66,0.25);
border-radius: 10px;
margin-bottom: 14px;
}
.dgn-inf-streak-label {
font-size: 10px; letter-spacing: 1.5px;
color: #ff8c42;
font-weight: 700;
}
.dgn-inf-streak-value {
display: flex; align-items: center; gap: 6px;
font-size: 28px; font-weight: 800; line-height: 1;
color: #fff;
font-family: 'Cinzel', serif;
}
.dgn-inf-streak-num { text-shadow: 0 0 12px rgba(255,140,66,0.6); }
.dgn-inf-streak-value i { font-size: 22px; animation: dgnInfFlame 1.8s ease-in-out infinite; }
@keyframes dgnInfFlame { 0%,100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.15) rotate(3deg); } }
/* Next floor section */
.dgn-inf-next { text-align: center; margin-bottom: 14px; }
.dgn-inf-next-tier {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 12px;
border: 1px solid currentColor;
border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
margin-bottom: 8px;
}
.dgn-inf-next-title {
font-family: 'Cinzel', serif;
font-size: 32px; font-weight: 800;
margin: 4px 0 12px;
text-shadow: 0 0 16px rgba(192,132,252,0.5);
}
.dgn-inf-next-hints {
display: flex; flex-direction: column; gap: 4px;
font-size: 12.5px;
margin-bottom: 10px;
}
.dgn-inf-hint { display: flex; align-items: center; justify-content: center; gap: 6px; }
/* Tracker (próximo boss / mega) */
.dgn-inf-tracker {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
padding: 8px;
background: rgba(0,0,0,0.3);
border-radius: 8px;
margin-top: 8px;
}
.dgn-inf-track-item {
display: flex; align-items: center; gap: 6px;
font-size: 11.5px;
justify-content: center;
}
.dgn-inf-track-item i { font-size: 14px; }
.dgn-inf-track-item b { color: #fff; }
/* Bag section */
.dgn-inf-bag {
background: rgba(233,185,99,0.06);
border: 1px solid rgba(233,185,99,0.2);
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 14px;
}
.dgn-inf-bag-title {
font-size: 12px; font-weight: 700; color: #e9b963;
margin-bottom: 8px;
display: flex; align-items: center; gap: 6px;
}
.dgn-inf-bag-warn {
margin-left: auto;
font-size: 10px; font-weight: 600;
color: #ff6b6b;
background: rgba(255,107,107,0.1);
padding: 2px 6px; border-radius: 4px;
}
.dgn-inf-bag-summary {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
margin-bottom: 8px;
}
.dgn-inf-bag-gold, .dgn-inf-bag-count {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
background: rgba(0,0,0,0.3);
border-radius: 6px;
font-size: 13px;
}
.dgn-inf-bag-gold b, .dgn-inf-bag-count b { font-size: 16px; color: #fff; }
.dgn-inf-bag-items {
display: flex; flex-wrap: wrap; gap: 5px;
max-height: 90px; overflow-y: auto;
padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.05);
}
.dgn-inf-bag-item {
display: flex; align-items: center; gap: 4px;
padding: 3px 7px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 5px;
font-size: 11px;
}
.dgn-inf-bag-item b { color: #e9b963; font-size: 12px; }
.dgn-inf-bag-item .game-icon { font-size: 14px; }
/* Action buttons */
.dgn-inf-actions {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.dgn-inf-actions .btn {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px !important;
text-align: left;
font-weight: 600;
}
.dgn-inf-actions .btn i { font-size: 22px; flex-shrink: 0; }
.dgn-inf-btn-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.dgn-inf-btn-main { font-size: 14px; font-weight: 700; line-height: 1.2; }
.dgn-inf-btn-sub { font-size: 11px; opacity: 0.85; line-height: 1.2; }
@media (max-width: 600px) {
.dgn-inf-actions { grid-template-columns: 1fr; }
.dgn-inf-bag-summary { grid-template-columns: 1fr; }
.dgn-inf-tracker { grid-template-columns: 1fr; }
.dgn-inf-next-title { font-size: 26px; }
}
/* ==========================================================
END SCREEN v2 (2026-05-20) — Escape exitoso / Victoria / Derrota
========================================================== */
/* Centrar el end content vertical y horizontalmente */
.dgn-screen.dgn-end {
display: flex; align-items: center; justify-content: center;
min-height: calc(100vh - 60px);
}
.dgn-end-content.dgn-end-v2 {
position: relative; z-index: 5;
width: 92%; max-width: 540px;
margin: 0 auto;
padding: 32px 28px 24px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(18,8,30,0.96), rgba(8,2,18,0.98));
border: 2px solid var(--dgn-result, #c084fc);
box-shadow:
0 0 64px rgba(192,132,252,0.3),
0 8px 32px rgba(0,0,0,0.6),
inset 0 0 0 1px rgba(255,255,255,0.04);
text-align: center;
animation: dgnEndPop 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes dgnEndPop {
0% { opacity: 0; transform: scale(0.86) translateY(20px); }
60% { opacity: 1; transform: scale(1.02); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Halo del icono */
.dgn-end-icon-wrap {
position: relative; display: inline-block;
margin: 0 auto 14px;
}
.dgn-end-icon-halo {
position: absolute; inset: -20px;
background: radial-gradient(circle, var(--dgn-result, #c084fc) 0%, transparent 65%);
opacity: 0.35; filter: blur(8px);
animation: dgnEndHalo 2.5s ease-in-out infinite;
z-index: 1;
}
@keyframes dgnEndHalo {
0%, 100% { opacity: 0.35; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.2); }
}
.dgn-end-icon {
position: relative; z-index: 2;
display: inline-flex;
width: 88px; height: 88px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
border: 2px solid var(--dgn-result, #c084fc);
align-items: center; justify-content: center;
box-shadow:
0 0 32px var(--dgn-result, #c084fc),
inset 0 0 24px rgba(255,255,255,0.05);
animation: dgnEndIconPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
@keyframes dgnEndIconPop {
0% { transform: scale(0.4) rotate(-15deg); opacity: 0; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
.dgn-end-icon i {
font-size: 44px; color: var(--dgn-result, #c084fc);
filter: drop-shadow(0 0 8px var(--dgn-result, #c084fc));
}
/* Title / subtitle */
.dgn-end-content.dgn-end-v2 .dgn-end-title {
font-family: 'Cinzel', serif;
font-size: 36px; font-weight: 800;
color: var(--dgn-result, #c084fc);
letter-spacing: 1.5px;
margin-bottom: 6px;
text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.dgn-end-content.dgn-end-v2 .dgn-end-sub {
color: #c4b3d4; font-size: 13.5px;
margin-bottom: 20px;
}
/* Floor badge (solo infinite) */
.dgn-end-floor-badge {
display: inline-block;
padding: 14px 28px;
background: linear-gradient(180deg, rgba(192,132,252,0.15), rgba(192,132,252,0.05));
border: 2px solid #c084fc;
border-radius: 14px;
margin-bottom: 22px;
position: relative;
}
.dgn-end-floor-badge.is-defeat {
background: linear-gradient(180deg, rgba(232,90,106,0.15), rgba(232,90,106,0.05));
border-color: #e85a6a;
}
.dgn-end-floor-label {
font-size: 10px; letter-spacing: 2px;
color: #c4b3d4; margin-bottom: 2px;
font-weight: 600;
}
.dgn-end-floor-num {
font-family: 'Cinzel', serif;
font-size: 56px; font-weight: 900;
color: #fff; line-height: 1;
text-shadow: 0 0 24px rgba(192,132,252,0.7);
margin: 2px 0 4px;
}
.dgn-end-floor-streak {
font-size: 11.5px; color: #ff8c42;
font-weight: 600;
display: flex; align-items: center; justify-content: center; gap: 4px;
}
/* Rewards card */
.dgn-end-rewards-v2 {
background: rgba(0,0,0,0.3);
border: 1px solid rgba(233,185,99,0.2);
border-radius: 12px;
padding: 16px;
margin-bottom: 20px;
text-align: left;
}
.dgn-end-rewards-header {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 700;
color: #e9b963;
padding-bottom: 10px;
border-bottom: 1px solid rgba(233,185,99,0.15);
margin-bottom: 12px;
}
.dgn-end-rewards-header i { font-size: 18px; }
/* Gold row con número grande */
.dgn-end-gold-row {
display: flex; align-items: center; gap: 14px;
padding: 10px 12px;
background: linear-gradient(90deg, rgba(233,185,99,0.12), transparent);
border-radius: 10px;
margin-bottom: 14px;
}
.dgn-end-gold-icon i {
font-size: 36px; color: #e9b963;
filter: drop-shadow(0 0 8px rgba(233,185,99,0.5));
}
.dgn-end-gold-num {
font-family: 'Cinzel', serif;
font-size: 28px; font-weight: 800; color: #e9b963;
line-height: 1;
}
.dgn-end-gold-lbl {
font-size: 10px; color: #9c8eaf;
text-transform: uppercase; letter-spacing: 1.5px;
margin-top: 2px;
}
/* Items header */
.dgn-end-items-header {
display: flex; justify-content: space-between; align-items: center;
font-size: 11px; color: #9c8eaf;
text-transform: uppercase; letter-spacing: 1px;
margin-bottom: 8px;
padding: 0 2px;
}
.dgn-end-items-count {
font-family: 'Cinzel', serif; font-weight: 700;
color: #fff; font-size: 13px; letter-spacing: 0;
text-transform: none;
}
/* Items grid */
.dgn-end-items-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 6px;
}
.dgn-end-item {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 6px;
}
.dgn-end-item .game-icon { font-size: 18px; flex-shrink: 0; }
.dgn-end-item-info { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.dgn-end-item-name {
font-size: 12px; font-weight: 600; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dgn-end-item-qty {
font-size: 11px; color: #e9b963; font-weight: 700;
}
/* Defeat state */
.dgn-end-defeated-v2 {
display: flex; gap: 12px; align-items: center;
background: rgba(232,90,106,0.08) !important;
border-color: rgba(232,90,106,0.3) !important;
}
.dgn-end-defeated-v2 i { font-size: 28px; color: #e85a6a; flex-shrink: 0; }
.dgn-end-defeated-v2 b { display: block; color: #e85a6a; margin-bottom: 2px; font-size: 14px; }
/* Boss drop highlight */
.dgn-end-bossdrop {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin-top: 10px; padding: 8px;
background: linear-gradient(90deg, transparent, rgba(233,185,99,0.15), transparent);
border: 1px solid rgba(233,185,99,0.3);
border-radius: 6px;
font-size: 12.5px; font-weight: 600;
color: #e9b963;
}
/* Actions */
.dgn-end-actions {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px;
}
.dgn-end-content.dgn-end-v2 .dgn-end-actions .btn {
padding: 12px 16px;
font-weight: 700;
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.dgn-end-content.dgn-end-v2 .dgn-end-back-btn:not(.btn-block) { grid-column: auto; }
.dgn-end-content.dgn-end-v2 .btn-block { grid-column: 1 / -1; }
/* Particles */
.dgn-end-particles {
position: absolute; inset: 0; z-index: 2;
pointer-events: none; overflow: hidden;
}
.dgn-end-particle {
position: absolute;
width: 6px; height: 6px;
background: var(--dgn-result, #c084fc);
border-radius: 50%;
box-shadow: 0 0 10px var(--dgn-result, #c084fc);
left: calc(20% + (var(--i) * 5%));
top: 100%;
opacity: 0;
animation: dgnEndParticle 3.5s ease-out var(--delay) infinite;
}
@keyframes dgnEndParticle {
0% { transform: translateY(0) scale(0); opacity: 0; }
20% { opacity: 0.8; }
100% { transform: translateY(-90vh) scale(1.5); opacity: 0; }
}
@media (max-width: 600px) {
.dgn-end-content.dgn-end-v2 { padding: 24px 18px 18px; }
.dgn-end-content.dgn-end-v2 .dgn-end-title { font-size: 28px; }
.dgn-end-floor-num { font-size: 44px; }
.dgn-end-actions { grid-template-columns: 1fr; }
.dgn-end-items-grid { grid-template-columns: 1fr 1fr; }
}
/* ==========================================================
SEASON 2 SCREEN — V2 ÉPICA · 2026-05-20
Prefix: s2v2-*
========================================================== */
/* ---------- HERO ÉPICO ---------- */
.s2v2-hero {
position: relative;
min-height: 460px;
border-radius: var(--r-lg);
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-bottom: 28px;
display: flex;
align-items: flex-end;
isolation: isolate;
}
.s2v2-hero-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 60%, transparent 100%),
linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 40%, rgba(0,0,0,0.85) 100%);
pointer-events: none;
}
.s2v2-hero-vignette {
position: absolute;
inset: 0;
box-shadow: inset 0 0 120px 30px rgba(0,0,0,0.7);
pointer-events: none;
}
/* Partículas doradas flotantes */
.s2v2-hero-particles {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(2px 2px at 12% 30%, rgba(255,200,87,0.5), transparent 60%),
radial-gradient(2px 2px at 78% 45%, rgba(184,132,255,0.4), transparent 60%),
radial-gradient(1px 1px at 42% 70%, rgba(255,255,255,0.6), transparent 60%),
radial-gradient(2px 2px at 92% 85%, rgba(78,195,247,0.45), transparent 60%),
radial-gradient(1px 1px at 22% 88%, rgba(255,200,87,0.5), transparent 60%);
animation: s2v2-particles-float 8s ease-in-out infinite;
}
@keyframes s2v2-particles-float {
0%, 100% { transform: translateY(0); opacity: 0.8; }
50% { transform: translateY(-6px); opacity: 1; }
}
.s2v2-hero-content {
position: relative;
z-index: 2;
padding: 32px 32px 36px;
width: 100%;
text-align: center;
}
.s2v2-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 800;
letter-spacing: 3px;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 18px;
text-shadow: 0 0 12px rgba(255,200,87,0.6);
}
.s2v2-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 8px var(--gold);
}
.s2v2-hero-kicker {
font-family: var(--font-title);
font-size: 22px;
font-weight: 800;
color: rgba(255,255,255,0.7);
letter-spacing: 6px;
text-transform: uppercase;
margin-bottom: 8px;
}
.s2v2-hero-title {
font-family: var(--font-title);
font-size: 52px;
font-weight: 900;
color: #fff;
margin: 0 0 16px;
line-height: 1.05;
text-shadow:
0 0 24px rgba(255,200,87,0.4),
0 0 50px rgba(184,132,255,0.3),
0 4px 16px rgba(0,0,0,0.85);
letter-spacing: 0.5px;
}
.s2v2-hero-tagline {
font-size: 17px;
font-style: italic;
color: rgba(255,255,255,0.92);
margin: 0 auto 22px;
max-width: 620px;
line-height: 1.5;
text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.s2v2-hero-meta {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.s2v2-meta-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,200,87,0.35);
border-radius: 99px;
color: #fff;
font-size: 13px;
font-weight: 700;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.s2v2-meta-chip:hover {
transform: translateY(-2px);
border-color: var(--gold);
}
.s2v2-meta-chip i {
font-size: 15px;
color: var(--gold);
}
/* ---------- SECTIONS ---------- */
.s2v2-section { margin-bottom: 32px; }
.s2v2-section-head {
text-align: center;
margin-bottom: 24px;
}
.s2v2-section-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 8px;
}
.s2v2-section-eyebrow i { font-size: 14px; }
.s2v2-section-title {
font-family: var(--font-title);
font-size: 30px;
font-weight: 900;
color: #fff;
margin: 0 0 6px;
text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.s2v2-section-sub {
color: var(--text-dim);
font-size: 14px;
margin: 0;
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
/* ---------- TIMELINE Day 1 ---------- */
.s2v2-timeline {
position: relative;
max-width: 720px;
margin: 0 auto;
}
.s2v2-tl-item {
display: flex;
gap: 18px;
align-items: stretch;
margin-bottom: 4px;
}
.s2v2-tl-item:last-child .s2v2-tl-line { display: none; }
.s2v2-tl-marker {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 48px;
}
.s2v2-tl-num {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--s2-col, var(--gold)), color-mix(in srgb, var(--s2-col, var(--gold)) 60%, #000));
color: #fff;
font-family: var(--font-title);
font-size: 20px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 0 16px color-mix(in srgb, var(--s2-col, var(--gold)) 50%, transparent),
0 2px 8px rgba(0,0,0,0.5);
position: relative;
z-index: 2;
}
.s2v2-tl-line {
flex: 1;
width: 3px;
background: linear-gradient(180deg,
var(--s2-col, var(--gold)),
color-mix(in srgb, var(--s2-col, var(--gold)) 30%, transparent));
margin: 4px 0;
border-radius: 2px;
opacity: 0.5;
}
.s2v2-tl-card {
flex: 1;
display: flex;
gap: 16px;
background: linear-gradient(140deg, rgba(255,255,255,0.05), rgba(0,0,0,0.5));
border: 1px solid var(--border-soft);
border-left: 3px solid var(--s2-col, var(--gold));
border-radius: var(--r-md);
padding: 18px;
margin-bottom: 18px;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.s2v2-tl-card:hover {
transform: translateY(-3px);
border-color: var(--s2-col, var(--gold));
box-shadow: 0 8px 24px color-mix(in srgb, var(--s2-col, var(--gold)) 20%, transparent);
}
.s2v2-tl-ico {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: var(--r-md);
background: color-mix(in srgb, var(--s2-col, var(--gold)) 20%, transparent);
border: 1px solid color-mix(in srgb, var(--s2-col, var(--gold)) 45%, transparent);
color: var(--s2-col, var(--gold));
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
}
.s2v2-tl-body { flex: 1; min-width: 0; }
.s2v2-tl-eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: 1.6px;
color: var(--s2-col, var(--gold));
text-transform: uppercase;
margin-bottom: 4px;
}
.s2v2-tl-title {
font-family: var(--font-title);
font-size: 18px;
font-weight: 800;
color: #fff;
margin-bottom: 6px;
}
.s2v2-tl-text {
font-size: 14px;
line-height: 1.55;
color: var(--text-dim);
}
/* ---------- STORY BANNER CTA ---------- */
.s2v2-story-section { margin-bottom: 32px; }
.s2v2-story-banner {
position: relative;
min-height: 260px;
border-radius: var(--r-lg);
overflow: hidden;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
.s2v2-story-banner-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(78,195,247,0.25), transparent 65%),
linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.85) 100%);
pointer-events: none;
}
.s2v2-story-banner-content {
position: relative;
z-index: 2;
padding: 32px 28px;
text-align: center;
max-width: 580px;
}
.s2v2-story-banner-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
color: #4ec3f7;
text-transform: uppercase;
margin-bottom: 10px;
text-shadow: 0 0 10px rgba(78,195,247,0.6);
}
.s2v2-story-banner-title {
font-family: var(--font-title);
font-size: 38px;
font-weight: 900;
color: #fff;
margin: 0 0 12px;
text-shadow:
0 0 22px rgba(78,195,247,0.45),
0 4px 14px rgba(0,0,0,0.8);
}
.s2v2-story-banner-sub {
font-size: 14px;
line-height: 1.55;
color: rgba(255,255,255,0.85);
margin: 0 0 22px;
}
.s2v2-story-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
background: linear-gradient(135deg, #4ec3f7 0%, #b884ff 100%);
color: #fff;
border: none;
border-radius: 99px;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.5px;
cursor: pointer;
box-shadow:
0 4px 18px rgba(78,195,247,0.45),
0 0 0 2px rgba(255,255,255,0.08) inset;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.s2v2-story-btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow:
0 8px 30px rgba(184,132,255,0.6),
0 0 0 2px rgba(255,255,255,0.15) inset;
}
.s2v2-story-btn i { font-size: 18px; }
.s2v2-story-btn-arrow { transition: transform 0.18s ease; }
.s2v2-story-btn:hover .s2v2-story-btn-arrow { transform: translateX(4px); }
/* ---------- FOOTER ---------- */
.s2v2-footer {
text-align: center;
padding: 28px 20px;
border: 1px dashed var(--border-soft);
border-radius: var(--r-md);
background: rgba(0,0,0,0.3);
}
.s2v2-footer-icon {
font-size: 38px;
color: var(--gold);
margin-bottom: 10px;
display: inline-block;
animation: s2v2-hourglass-spin 4s ease-in-out infinite;
}
@keyframes s2v2-hourglass-spin {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
}
.s2v2-footer-title {
font-family: var(--font-title);
font-size: 18px;
font-weight: 800;
color: #fff;
margin-bottom: 6px;
}
.s2v2-footer-body {
font-size: 13px;
color: var(--text-dim);
margin: 0;
max-width: 480px;
margin-left: auto;
margin-right: auto;
line-height: 1.55;
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
.s2v2-hero { min-height: 380px; }
.s2v2-hero-content { padding: 28px 18px; }
.s2v2-hero-kicker { font-size: 18px; letter-spacing: 4px; }
.s2v2-hero-title { font-size: 32px; }
.s2v2-hero-tagline { font-size: 14px; }
.s2v2-meta-chip { font-size: 12px; padding: 6px 11px; }
.s2v2-section-title { font-size: 24px; }
.s2v2-tl-card { padding: 14px; gap: 12px; flex-direction: column; }
.s2v2-tl-ico { width: 44px; height: 44px; font-size: 22px; }
.s2v2-tl-marker { width: 36px; }
.s2v2-tl-num { width: 36px; height: 36px; font-size: 16px; }
.s2v2-story-banner { min-height: 220px; }
.s2v2-story-banner-title { font-size: 28px; }
.s2v2-story-btn { padding: 12px 20px; font-size: 14px; }
}
/* ==========================================================
BEP20 HD-WALLET SECTION — 2026-05-21
Prefix: bep20-*
========================================================== */
.bep20-section-host { margin-top: 24px; }
.bep20-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 30px;
color: var(--text-dim);
font-size: 13px;
}
.bep20-card {
background: linear-gradient(140deg, rgba(243,186,47,0.10) 0%, rgba(0,0,0,0.5) 60%);
border: 1px solid rgba(243,186,47,0.40);
border-radius: var(--r-lg);
padding: 24px;
position: relative;
overflow: hidden;
}
.bep20-card::before {
content: '';
position: absolute;
top: -50%; right: -20%;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(243,186,47,0.18), transparent 65%);
pointer-events: none;
}
.bep20-card-head {
position: relative;
margin-bottom: 22px;
}
.bep20-card-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
color: #f3ba2f;
text-transform: uppercase;
margin-bottom: 8px;
}
.bep20-card-eyebrow i { font-size: 13px; }
.bep20-badge-new {
background: linear-gradient(135deg, #5fd684, #4ec0ff);
color: #0a1a0f;
padding: 2px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 900;
letter-spacing: 1px;
}
.bep20-card-title {
font-family: var(--font-title);
font-size: 26px;
font-weight: 900;
color: #fff;
margin: 0 0 6px;
text-shadow: 0 0 18px rgba(243,186,47,0.35);
}
.bep20-card-sub {
color: var(--text-dim);
font-size: 13px;
margin: 0;
max-width: 720px;
line-height: 1.55;
}
.bep20-wallet-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 22px;
align-items: start;
margin-bottom: 18px;
position: relative;
}
.bep20-qr-wrap {
background: #fff;
padding: 10px;
border-radius: var(--r-md);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 18px rgba(243,186,47,0.25);
}
.bep20-qr {
display: block;
width: 100%;
height: auto;
max-width: 180px;
border-radius: 4px;
}
.bep20-info {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.bep20-field {
background: rgba(0,0,0,0.35);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 12px 14px;
}
.bep20-label {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.bep20-label i { color: #f3ba2f; font-size: 13px; }
.bep20-addr-row {
display: flex;
align-items: center;
gap: 8px;
background: rgba(0,0,0,0.5);
border: 1px solid var(--border-soft);
border-radius: 6px;
padding: 8px 10px;
}
.bep20-addr {
flex: 1;
font-family: var(--font-mono);
font-size: 12px;
color: #f3ba2f;
word-break: break-all;
background: transparent;
padding: 0;
letter-spacing: 0.3px;
}
.bep20-copy-btn {
background: rgba(243,186,47,0.15);
border: 1px solid rgba(243,186,47,0.4);
color: #f3ba2f;
width: 32px;
height: 32px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
flex-shrink: 0;
}
.bep20-copy-btn:hover {
background: #f3ba2f;
color: #0a0a0a;
}
.bep20-addr-actions {
display: flex;
gap: 10px;
margin-top: 8px;
}
.bep20-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--text-dim);
text-decoration: none;
transition: color 0.15s ease;
}
.bep20-link:hover { color: #f3ba2f; }
.bep20-link i { font-size: 13px; }
.bep20-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
}
.bep20-stat {
background: rgba(0,0,0,0.3);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 10px 12px;
}
.bep20-stat-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 4px;
font-weight: 700;
}
.bep20-stat-val {
font-size: 14px;
color: #fff;
font-weight: 800;
line-height: 1.3;
}
.bep20-stat-val i { color: #4cc4ff; font-size: 12px; }
.bep20-warning {
display: flex;
gap: 12px;
align-items: flex-start;
background: rgba(225,80,90,0.10);
border: 1px solid rgba(225,80,90,0.45);
border-radius: var(--r-md);
padding: 12px 14px;
font-size: 13px;
line-height: 1.55;
color: var(--text);
margin-bottom: 18px;
}
.bep20-warning > i {
color: #ff7a85;
font-size: 24px;
flex-shrink: 0;
}
.bep20-bonus-strip {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 20px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border-soft);
}
.bep20-bonus-strip-title {
font-size: 12px;
color: var(--text-dim);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-right: 4px;
}
.bep20-bonus-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--text);
padding: 5px 10px;
background: rgba(255,200,87,0.10);
border: 1px solid rgba(255,200,87,0.3);
border-radius: 99px;
font-weight: 600;
}
.bep20-bonus-chip i { font-size: 12px; color: var(--gold); }
.bep20-bonus-chip b { color: var(--gold); font-weight: 800; }
.bep20-history-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 800;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
.bep20-history-head i { color: #f3ba2f; font-size: 14px; }
.bep20-history-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.bep20-dep-row {
display: flex;
align-items: center;
gap: 12px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border-soft);
border-left: 3px solid var(--text-dim);
border-radius: var(--r-md);
padding: 10px 12px;
font-size: 13px;
}
.bep20-dep-row.is-pending { border-left-color: #ffb84d; }
.bep20-dep-row.is-confirmed { border-left-color: #4cc4ff; }
.bep20-dep-row.is-credited { border-left-color: #5fd684; }
.bep20-dep-row.is-rejected { border-left-color: #e85a6a; }
.bep20-dep-row.is-swept { border-left-color: #b884ff; }
.bep20-dep-status {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.05);
font-size: 18px;
flex-shrink: 0;
}
.bep20-dep-row.is-pending .bep20-dep-status { color: #ffb84d; }
.bep20-dep-row.is-confirmed .bep20-dep-status { color: #4cc4ff; }
.bep20-dep-row.is-credited .bep20-dep-status { color: #5fd684; }
.bep20-dep-row.is-rejected .bep20-dep-status { color: #e85a6a; }
.bep20-dep-row.is-swept .bep20-dep-status { color: #b884ff; }
.bep20-dep-main { flex: 1; min-width: 0; }
.bep20-dep-amount {
font-size: 14px;
color: #fff;
font-weight: 700;
margin-bottom: 2px;
}
.bep20-dep-gems {
color: #4cc4ff;
font-size: 13px;
margin-left: 6px;
}
.bep20-dep-gems i { font-size: 11px; }
.bep20-dep-meta {
font-size: 11px;
color: var(--text-dim);
}
.bep20-dep-meta .is-pending { color: #ffb84d; }
.bep20-dep-meta .is-confirmed { color: #4cc4ff; }
.bep20-dep-meta .is-credited { color: #5fd684; }
.bep20-dep-meta .is-rejected { color: #e85a6a; }
.bep20-dep-link {
color: var(--text-dim);
text-decoration: none;
padding: 6px 8px;
border-radius: 6px;
transition: all 0.15s ease;
}
.bep20-dep-link:hover {
color: #f3ba2f;
background: rgba(243,186,47,0.10);
}
.bep20-history-empty {
text-align: center;
padding: 18px;
background: rgba(0,0,0,0.3);
border: 1px dashed var(--border-soft);
border-radius: var(--r-md);
color: var(--text-dim);
font-size: 13px;
}
.bep20-history-empty i {
display: block;
font-size: 28px;
margin-bottom: 6px;
color: var(--text-dim);
}
@media (max-width: 720px) {
.bep20-card { padding: 18px; }
.bep20-card-title { font-size: 22px; }
.bep20-wallet-row { grid-template-columns: 1fr; gap: 16px; }
.bep20-qr-wrap { justify-self: center; max-width: 200px; }
.bep20-stats-grid { grid-template-columns: 1fr 1fr; }
}
/* ==========================================================
TOGGLE USDT / BNB (sección BEP20) — 2026-05-21
========================================================== */
.bep20-token-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 18px;
background: rgba(0,0,0,0.4);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 6px;
}
.bep20-tok-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-md);
color: var(--text-dim);
cursor: pointer;
transition: all 0.18s ease;
text-align: left;
}
.bep20-tok-btn:hover {
background: rgba(255,255,255,0.04);
color: var(--text);
}
.bep20-tok-btn.active {
background: linear-gradient(135deg, rgba(38,161,123,0.18), rgba(243,186,47,0.18));
border-color: rgba(243,186,47,0.5);
color: #fff;
box-shadow: 0 0 16px rgba(243,186,47,0.15);
}
.bep20-tok-btn > i {
font-size: 28px;
color: var(--text-dim);
flex-shrink: 0;
}
.bep20-tok-btn.active > i { color: #f3ba2f; }
.bep20-tok-btn[data-tok="USDT"].active > i { color: #26a17b; }
.bep20-tok-info {
display: flex;
flex-direction: column;
}
.bep20-tok-name {
font-size: 16px;
font-weight: 800;
letter-spacing: 0.4px;
}
.bep20-tok-sub {
font-size: 11px;
color: var(--text-dim);
font-weight: 600;
margin-top: 2px;
}
/* ==========================================================
GRID 2-COL · Wallet + Calculadora · 2026-05-21
2026-05-21 v2: breakpoint subido a 1400px porque la wallet card
tiene mucho contenido vertical y se ve apretada en pantallas
medianas. El historial va aparte (full-width abajo).
========================================================== */
.bep20-grid-2col {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
@media (max-width: 1400px) {
.bep20-grid-2col {
grid-template-columns: 1fr;
}
}
/* En layout 2-col el .bep20-card no necesita margin-bottom (lo da el grid gap) */
.bep20-grid-2col > .bep20-card { margin-bottom: 0; }
.bep20-grid-2col > .bep20-calc-card { margin-top: 0; }
/* Historial full-width debajo del grid */
.bep20-history-card {
margin-top: 16px;
background: linear-gradient(140deg, rgba(95,214,132,0.05) 0%, rgba(0,0,0,0.45) 60%);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 18px 22px;
}
.bep20-history-card .bep20-history { margin-top: 0; }
.bep20-history-card .bep20-history-head { margin-bottom: 12px; }
/* ==========================================================
CALCULADORA — 2026-05-21 (card separado, fuera del wallet card)
========================================================== */
.bep20-calc-card {
margin-top: 16px;
background: linear-gradient(140deg, rgba(76,196,255,0.08) 0%, rgba(0,0,0,0.5) 60%);
border: 1px solid rgba(76,196,255,0.30);
border-radius: var(--r-lg);
padding: 22px;
position: relative;
overflow: hidden;
}
.bep20-calc-card::before {
content: '';
position: absolute;
top: -30%; left: -10%;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(76,196,255,0.12), transparent 65%);
pointer-events: none;
}
.bep20-calc-card .bep20-calc-head {
margin-bottom: 18px;
padding-bottom: 12px;
font-size: 14px;
}
.bep20-calc-card .bep20-calc-head > i {
color: #4cc4ff;
font-size: 18px;
}
.bep20-calc-card .bep20-calc-token-pill {
background: rgba(76,196,255,0.18);
border-color: rgba(76,196,255,0.45);
color: #4cc4ff;
}
/* Estilos compartidos por la calculadora vieja (deprecada) y la nueva en card */
.bep20-calc {
background: rgba(0,0,0,0.4);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 16px;
margin-bottom: 18px;
}
.bep20-calc-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 800;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-soft);
}
.bep20-calc-head > i { color: #f3ba2f; font-size: 16px; }
.bep20-calc-token-pill {
margin-left: auto;
padding: 3px 10px;
background: rgba(243,186,47,0.18);
border: 1px solid rgba(243,186,47,0.45);
color: #f3ba2f;
font-size: 11px;
border-radius: 99px;
letter-spacing: 0.5px;
}
.bep20-calc-body {
display: flex;
flex-direction: column;
gap: 10px;
}
.bep20-calc-input-row { display: flex; flex-direction: column; gap: 8px; }
.bep20-calc-input-label {
font-size: 11px;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.8px;
}
.bep20-calc-input-wrap {
display: flex;
align-items: center;
background: rgba(0,0,0,0.5);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 4px 14px;
transition: border-color 0.2s ease;
}
.bep20-calc-input-wrap:focus-within {
border-color: #f3ba2f;
box-shadow: 0 0 0 3px rgba(243,186,47,0.12);
}
.bep20-calc-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: #fff;
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
padding: 10px 0;
letter-spacing: 0.4px;
-moz-appearance: textfield;
}
.bep20-calc-input::-webkit-outer-spin-button,
.bep20-calc-input::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.bep20-calc-input-suffix {
font-size: 14px;
font-weight: 800;
color: #f3ba2f;
letter-spacing: 0.4px;
padding-left: 8px;
border-left: 1px solid var(--border-soft);
margin-left: 8px;
}
.bep20-calc-quick {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.bep20-calc-quick-btn {
background: rgba(255,255,255,0.05);
border: 1px solid var(--border-soft);
color: var(--text);
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
}
.bep20-calc-quick-btn:hover {
background: rgba(243,186,47,0.15);
border-color: rgba(243,186,47,0.4);
color: #f3ba2f;
}
.bep20-calc-arrow {
display: flex;
justify-content: center;
color: var(--text-dim);
font-size: 18px;
opacity: 0.6;
}
.bep20-calc-output {
background: rgba(0,0,0,0.3);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 14px 16px;
min-height: 60px;
}
.bep20-calc-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--text-dim);
font-size: 13px;
padding: 8px;
}
.bep20-calc-warn {
display: flex;
align-items: center;
gap: 8px;
color: #ff7a85;
font-size: 13px;
font-weight: 600;
}
.bep20-calc-warn i { font-size: 16px; }
.bep20-calc-result {
display: flex;
flex-direction: column;
gap: 8px;
}
.bep20-calc-result-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
}
.bep20-calc-result-row.is-bonus {
background: rgba(38,161,123,0.10);
padding: 6px 10px;
border-radius: 6px;
border: 1px solid rgba(38,161,123,0.25);
}
.bep20-calc-row-label {
color: var(--text-dim);
display: inline-flex;
align-items: center;
gap: 6px;
}
.bep20-calc-row-label i { color: #5fd684; font-size: 14px; }
.bep20-calc-row-val {
color: #fff;
font-weight: 700;
font-family: var(--font-mono);
}
.bep20-calc-row-val i { color: #4cc4ff; font-size: 12px; margin-left: 2px; }
.bep20-calc-row-val.is-bonus { color: #5fd684; }
.bep20-calc-row-val.is-bonus i { color: #5fd684; }
.bep20-calc-result-total {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
margin-top: 4px;
border-top: 1px dashed var(--border-soft);
font-size: 15px;
}
.bep20-calc-row-val.is-total {
color: var(--gold);
font-size: 20px;
font-weight: 900;
text-shadow: 0 0 12px rgba(243,186,47,0.3);
}
.bep20-calc-row-val.is-total i {
color: #4cc4ff;
font-size: 16px;
}
/* ==========================================================
PAYKASSA ACORDEÓN (Otros métodos) — 2026-05-21
========================================================== */
.dep-paykassa-accordion {
margin-top: 20px;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
overflow: hidden;
transition: border-color 0.2s ease;
}
.dep-paykassa-accordion.is-open {
border-color: rgba(243,186,47,0.25);
}
.dep-paykassa-toggle {
width: 100%;
background: transparent;
border: none;
color: var(--text);
padding: 16px 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
transition: background 0.15s ease;
}
.dep-paykassa-toggle:hover {
background: rgba(255,255,255,0.03);
}
.dep-pk-toggle-left {
display: flex;
align-items: center;
gap: 14px;
text-align: left;
flex: 1;
min-width: 0;
}
.dep-pk-toggle-left > i {
font-size: 22px;
color: var(--text-dim);
flex-shrink: 0;
}
.dep-pk-toggle-title {
font-size: 14px;
font-weight: 800;
color: var(--text);
margin-bottom: 2px;
}
.dep-pk-toggle-sub {
font-size: 11px;
color: var(--text-dim);
font-weight: 500;
letter-spacing: 0.3px;
}
.dep-pk-toggle-caret {
font-size: 18px;
color: var(--text-dim);
transition: transform 0.25s ease;
}
.dep-paykassa-accordion.is-open .dep-pk-toggle-caret {
transform: rotate(180deg);
}
.dep-paykassa-body {
padding: 0 18px 18px;
border-top: 1px solid var(--border-soft);
}
@media (max-width: 720px) {
.bep20-token-toggle { grid-template-columns: 1fr 1fr; }
.bep20-tok-btn { padding: 10px 12px; gap: 10px; }
.bep20-tok-btn > i { font-size: 22px; }
.bep20-tok-name { font-size: 14px; }
.bep20-calc-input { font-size: 18px; }
.bep20-calc-row-val.is-total { font-size: 17px; }
.dep-paykassa-toggle { padding: 14px; }
.dep-pk-toggle-title { font-size: 13px; }
.dep-pk-toggle-sub { font-size: 10px; }
}
/* =====================================================================
ACCOUNT SCREEN (2026-05-21)
===================================================================== */
.account-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 16px;
}
.account-card {
padding: 18px 20px;
display: flex;
flex-direction: column;
}
.account-card-header {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px solid var(--border-soft);
}
.account-card-header i { font-size: 22px; color: var(--gold); }
.account-card-header h3 {
margin: 0;
font-family: var(--font-title);
font-size: 15px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text);
}
.account-card-header-danger i { color: #e85a6a; }
.account-card-danger { grid-column: 1 / -1; border-color: rgba(232,90,106,0.3); }
.account-card-danger .account-card-header { border-bottom-color: rgba(232,90,106,0.25); }
.account-info-grid { display: flex; flex-direction: column; gap: 10px; }
.account-info-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 6px 0;
border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.account-info-row:last-child { border-bottom: none; }
.account-info-key {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-muted);
font-size: 13px;
}
.account-info-key i { font-size: 14px; color: var(--text-dim); }
.account-info-val {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text);
font-size: 13px;
text-align: right;
word-break: break-word;
}
.account-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 99px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.account-badge-ok { background: rgba(95,214,132,0.15); color: #5fd684; border: 1px solid rgba(95,214,132,0.35); }
.account-badge-warn { background: rgba(255,200,87,0.15); color: #ffc857; border: 1px solid rgba(255,200,87,0.35); }
.account-code {
font-family: monospace;
font-size: 12px;
background: rgba(0,0,0,0.4);
padding: 3px 8px;
border-radius: 6px;
border: 1px solid var(--border-soft);
color: var(--gold);
}
.account-copy-btn {
background: transparent;
border: 1px solid var(--border-soft);
color: var(--text-dim);
padding: 4px 8px;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
}
.account-copy-btn:hover { color: var(--gold); border-color: var(--gold); }
.account-no-char {
text-align: center;
padding: 30px 10px;
color: var(--text-dim);
}
.account-no-char i { font-size: 36px; opacity: 0.4; }
.account-no-char p { margin: 8px 0 0; font-size: 13px; }
/* Forms */
.account-form { display: flex; flex-direction: column; gap: 12px; }
.account-field { display: flex; flex-direction: column; gap: 6px; }
.account-field label {
font-family: var(--font-title);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.account-field code {
font-family: monospace;
background: rgba(0,0,0,0.4);
padding: 1px 6px;
border-radius: 4px;
color: var(--gold);
font-size: 11px;
text-transform: none;
letter-spacing: 0;
}
.account-field input {
width: 100%;
padding: 10px 12px;
background: rgba(0,0,0,0.45);
border: 1.5px solid var(--border-soft);
border-radius: 8px;
color: var(--text);
font-family: var(--font-body);
font-size: 13px;
outline: none;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.account-field input:focus {
border-color: var(--gold);
background: rgba(0,0,0,0.6);
box-shadow: 0 0 0 3px rgba(233,185,99,0.12);
}
.account-hint { color: var(--text-dim); font-size: 11px; }
.account-msg {
font-size: 12px;
min-height: 16px;
padding: 0 2px;
}
.account-msg-ok { color: #5fd684; }
.account-msg-err { color: #e85a6a; }
/* Danger zone */
.account-danger-sub {
color: #e85a6a;
font-size: 13px;
margin: 0 0 18px;
text-align: center;
font-weight: 600;
}
.account-danger-action {
display: flex;
flex-direction: column;
gap: 14px;
padding: 14px;
background: rgba(232,90,106,0.06);
border: 1px solid rgba(232,90,106,0.2);
border-radius: 10px;
}
.account-danger-info { flex: 1; }
.account-danger-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-size: 13px;
font-weight: 700;
color: #ff9aa6;
margin-bottom: 4px;
}
.account-danger-desc {
color: var(--text-muted);
font-size: 12px;
margin: 0;
line-height: 1.5;
}
.account-danger-separator {
height: 1px;
background: rgba(232,90,106,0.2);
margin: 14px 0;
}
.btn-danger-outline {
border: 1.5px solid rgba(232,90,106,0.5) !important;
color: #ff9aa6 !important;
}
.btn-danger-outline:hover {
background: rgba(232,90,106,0.1) !important;
border-color: #e85a6a !important;
color: #ff5566 !important;
}
/* Danger modals */
.account-danger-modal { max-width: 560px; }
.account-danger-modal-icon {
width: 64px;
height: 64px;
margin: 0 auto 12px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(255,200,87,0.2), rgba(232,90,106,0.1));
border: 2px solid rgba(255,200,87,0.4);
font-size: 32px;
color: #ffc857;
}
.account-danger-modal-icon-blood {
background: linear-gradient(135deg, rgba(232,90,106,0.3), rgba(150,30,40,0.15));
border-color: rgba(232,90,106,0.5);
color: #ff5566;
}
.account-danger-modal-blood .modal-title { color: #ff5566; }
.account-danger-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 16px 0;
}
.account-danger-col {
padding: 12px;
border-radius: 8px;
font-size: 12px;
}
.account-danger-col-lose {
background: rgba(232,90,106,0.08);
border: 1px solid rgba(232,90,106,0.2);
}
.account-danger-col-keep {
background: rgba(95,214,132,0.08);
border: 1px solid rgba(95,214,132,0.2);
}
.account-danger-col-title {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-title);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 8px;
}
.account-danger-col-lose .account-danger-col-title { color: #ff9aa6; }
.account-danger-col-keep .account-danger-col-title { color: #5fd684; }
.account-danger-col ul {
margin: 0;
padding-left: 18px;
color: var(--text-muted);
line-height: 1.6;
}
.account-danger-col li { margin-bottom: 3px; }
/* Mobile */
@media (max-width: 900px) {
.account-grid { grid-template-columns: 1fr; gap: 12px; }
.account-card { padding: 14px 16px; }
.account-info-key { font-size: 12px; }
.account-info-val { font-size: 12px; }
.account-danger-cols { grid-template-columns: 1fr; }
.account-danger-action { padding: 12px; }
}
/* =====================================================================
EVENTO GRIETA DEL CÓSMOS (2026-05-22)
===================================================================== */
.event-grieta-banner {
position: relative;
margin: 14px 0 18px;
border-radius: 16px;
overflow: hidden;
border: 1.5px solid rgba(184,132,255,0.55);
background: linear-gradient(135deg, rgba(40,15,70,0.95), rgba(15,5,30,0.99));
box-shadow: 0 12px 36px rgba(184,132,255,0.25), inset 0 0 0 1px rgba(184,132,255,0.15);
isolation: isolate;
}
.event-grieta-banner.is-success {
border-color: rgba(255,200,87,0.65);
box-shadow: 0 12px 36px rgba(255,200,87,0.3), inset 0 0 0 1px rgba(255,200,87,0.2);
}
.egb-bg {
position: absolute; inset: 0;
background:
radial-gradient(circle at 15% 20%, rgba(184,132,255,0.28), transparent 55%),
radial-gradient(circle at 85% 80%, rgba(78,195,247,0.18), transparent 50%);
pointer-events: none; z-index: 0;
}
.egb-glow {
position: absolute; inset: -50%;
background: conic-gradient(from 0deg, transparent, rgba(184,132,255,0.18), transparent 60%, rgba(78,195,247,0.18), transparent);
animation: egb-spin 20s linear infinite;
pointer-events: none; z-index: 0; opacity: 0.55;
}
@keyframes egb-spin { to { transform: rotate(360deg); } }
.egb-content {
position: relative; z-index: 2;
display: grid;
grid-template-columns: 1.4fr 1fr 1.2fr;
gap: 18px;
padding: 18px 22px;
align-items: center;
}
.egb-tag {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px;
background: linear-gradient(135deg, #b884ff, #6f3dd9);
color: #fff;
font-family: var(--font-title);
font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
border-radius: 99px; text-transform: uppercase;
margin-bottom: 8px;
box-shadow: 0 0 16px rgba(184,132,255,0.55);
}
.egb-tag i { font-size: 11px; }
.egb-title {
font-family: var(--font-title); font-size: 26px; font-weight: 900;
color: #fff; letter-spacing: 0.02em;
text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 0 24px rgba(184,132,255,0.45);
line-height: 1.1; margin-bottom: 6px;
}
.egb-subtitle { font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 14px; }
.egb-progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.egb-progress-bar {
width: 100%; height: 14px;
background: rgba(0,0,0,0.55);
border-radius: 99px;
border: 1px solid rgba(255,255,255,0.08);
overflow: hidden; position: relative;
}
.egb-progress-fill {
height: 100%;
background: linear-gradient(90deg, #b884ff, #4ec3f7);
border-radius: 99px;
box-shadow: 0 0 12px rgba(184,132,255,0.7);
transition: width 0.5s ease;
position: relative;
}
.egb-progress-fill::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
animation: egb-shine 2.5s ease-in-out infinite;
}
.egb-progress-fill.is-success {
background: linear-gradient(90deg, #ffc857, #ff9d4d, #ffc857);
box-shadow: 0 0 16px rgba(255,200,87,0.8);
}
@keyframes egb-shine {
0% { transform: translateX(-100%); }
50%, 100% { transform: translateX(100%); }
}
.egb-progress-text {
display: flex; align-items: baseline; gap: 4px;
font-family: var(--font-title); font-size: 12px; letter-spacing: 0.04em;
}
.egb-progress-num { color: #fff; font-weight: 900; font-size: 18px; }
.egb-progress-sep { color: var(--text-dim); margin: 0 2px; }
.egb-progress-goal { color: var(--text); font-weight: 700; }
.egb-progress-lbl { color: var(--text-dim); font-size: 10px; text-transform: uppercase; margin-left: 6px; }
.egb-mid {
text-align: center; padding: 0 12px;
border-left: 1px solid rgba(184,132,255,0.2);
border-right: 1px solid rgba(184,132,255,0.2);
}
.egb-countdown-lbl { font-family: var(--font-title); font-size: 10px; letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; }
.egb-countdown { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.egb-cd-block {
display: inline-flex; flex-direction: column; align-items: center;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(184,132,255,0.35);
border-radius: 8px;
padding: 6px 10px;
min-width: 44px;
}
.egb-cd-num { font-family: var(--font-title); font-size: 22px; font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 0 12px rgba(184,132,255,0.5); }
.egb-cd-suf { font-size: 9px; color: var(--text-dim); letter-spacing: 0.08em; margin-top: 2px; text-transform: uppercase; }
.egb-me { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.egb-me b { color: #ffc857; font-size: 14px; }
.egb-rank-chip {
display: inline-block; padding: 2px 8px;
background: linear-gradient(135deg, #ffc857, #c89640);
color: #1a0e2c;
border-radius: 99px;
font-family: var(--font-title); font-size: 10px; font-weight: 900;
margin-left: 4px;
}
.egb-top3-title { font-family: var(--font-title); font-size: 10px; letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; }
.egb-top3 { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.egb-top3-row {
display: grid; grid-template-columns: 22px 1fr auto;
gap: 6px; align-items: center;
padding: 4px 8px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px; font-size: 12px;
}
.egb-top3-row.is-me { background: rgba(184,132,255,0.15); border-color: rgba(184,132,255,0.5); }
.egb-top3-r1 { border-left: 3px solid #ffc857; }
.egb-top3-r2 { border-left: 3px solid #d8d8d8; }
.egb-top3-r3 { border-left: 3px solid #cd7f32; }
.egb-top3-rank { font-family: var(--font-title); font-size: 12px; font-weight: 900; color: var(--text); text-align: center; }
.egb-top3-r1 .egb-top3-rank { color: #ffc857; }
.egb-top3-r2 .egb-top3-rank { color: #d8d8d8; }
.egb-top3-r3 .egb-top3-rank { color: #e6a463; }
.egb-top3-name { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.egb-top3-pts { font-family: var(--font-title); font-weight: 900; color: #b884ff; }
.egb-top3-empty { text-align: center; font-size: 11px; color: var(--text-dim); font-style: italic; padding: 12px; }
.egb-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.egb-btn-enter, .egb-btn-rank { flex: 1; padding: 8px 12px; font-size: 12px; font-family: var(--font-title); letter-spacing: 0.05em; }
.egb-btn-enter { background: linear-gradient(135deg, #b884ff, #6f3dd9); }
.egb-btn-enter:hover:not(:disabled) { box-shadow: 0 0 18px rgba(184,132,255,0.6); }
.event-grieta-banner.is-resolved .egb-content { padding: 22px; grid-template-columns: 1fr; text-align: center; }
@media (max-width: 900px) {
.egb-content { grid-template-columns: 1fr; gap: 14px; }
.egb-mid { border-left: none; border-right: none; border-top: 1px solid rgba(184,132,255,0.2); border-bottom: 1px solid rgba(184,132,255,0.2); padding: 14px 0; }
.egb-title { font-size: 22px; }
.egb-cd-num { font-size: 18px; }
.egb-cd-block { min-width: 38px; padding: 5px 8px; }
}
/* MODAL DE RANKING DEL EVENTO */
.egm-modal { max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; }
.egm-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.egm-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-title); font-size: 18px; font-weight: 800; color: var(--text); }
.egm-summary { background: rgba(184,132,255,0.06); border: 1px solid rgba(184,132,255,0.2); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.egm-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; }
.egm-summary-lbl { color: var(--text-muted); }
.egm-summary-val { color: var(--text); font-weight: 700; font-family: var(--font-title); }
.egm-rewards-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: rgba(78,195,247,0.08); border: 1px solid rgba(78,195,247,0.3); border-radius: 8px; color: #b6e3ff; font-size: 12px; margin-bottom: 14px; line-height: 1.5; }
.egm-rewards-note i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.egm-rewards-table { background: rgba(0,0,0,0.35); border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; }
.egm-rt-title { font-family: var(--font-title); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.egm-rt-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12px; color: var(--text); }
.egm-rt-rank { font-family: var(--font-title); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 8px; background: rgba(255,255,255,0.06); border-radius: 4px; color: var(--text-muted); min-width: 90px; text-align: center; }
.egm-rt-rank.gold { background: linear-gradient(135deg, rgba(255,200,87,0.3), rgba(255,200,87,0.1)); color: #ffc857; border: 1px solid rgba(255,200,87,0.5); }
.egm-lb-title { font-family: var(--font-title); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--text); text-transform: uppercase; margin-bottom: 8px; }
.egm-lb { display: flex; flex-direction: column; gap: 4px; }
.egm-lb-row { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; font-size: 13px; }
.egm-lb-row.is-top { border-color: rgba(255,200,87,0.3); }
.egm-lb-row.is-me { background: rgba(184,132,255,0.15); border-color: rgba(184,132,255,0.5); }
.egm-lb-rank { font-family: var(--font-title); font-weight: 800; font-size: 14px; color: var(--text-muted); }
.egm-lb-row.is-top .egm-lb-rank { color: #ffc857; }
.egm-lb-name { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.egm-lb-meta { color: var(--text-dim); font-size: 11px; }
.egm-lb-pts { font-family: var(--font-title); font-weight: 900; font-size: 14px; color: #b884ff; min-width: 50px; text-align: right; }
.egm-lb-empty { text-align: center; font-style: italic; color: var(--text-dim); padding: 20px; }
@media (max-width: 600px) {
.egm-lb-row { grid-template-columns: 36px 1fr auto; }
.egm-lb-meta { display: none; }
}
/* ===== WIDGET DEL EVENTO DENTRO DEL ZONE MODAL ===== */
.zm-event-widget {
position: relative;
margin: 12px 0 16px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(40,15,70,0.5), rgba(15,5,30,0.6));
border: 1px solid rgba(184,132,255,0.4);
border-radius: 12px;
overflow: hidden;
}
.zm-event-widget::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 20% 30%, rgba(184,132,255,0.18), transparent 55%);
pointer-events: none;
}
.zm-event-widget > * { position: relative; z-index: 1; }
.zm-event-widget.is-resolved { text-align: center; padding: 18px; }
.zm-event-widget.is-resolved.is-success { border-color: rgba(255,200,87,0.55); }
.zm-ew-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.zm-ew-progress-row { margin-bottom: 10px; }
.zm-ew-progress-info { flex: 1; min-width: 200px; }
.zm-ew-tag {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-title);
font-size: 10px; font-weight: 800;
letter-spacing: 0.1em;
color: #b884ff;
text-transform: uppercase;
margin-bottom: 6px;
}
.zm-ew-tag i { font-size: 11px; filter: drop-shadow(0 0 6px rgba(184,132,255,0.6)); }
.zm-ew-progress-num {
display: flex;
align-items: baseline;
gap: 4px;
font-family: var(--font-title);
}
.zm-ew-num { color: #fff; font-size: 22px; font-weight: 900; }
.zm-ew-sep { color: var(--text-dim); margin: 0 2px; }
.zm-ew-goal { color: var(--text-muted); font-size: 14px; font-weight: 700; }
.zm-ew-pts { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; margin-left: 6px; }
.zm-ew-countdown { text-align: center; }
.zm-ew-cd-lbl { font-family: var(--font-title); font-size: 9px; letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px; }
.zm-ew-cd-blocks { display: flex; gap: 4px; justify-content: center; }
.zm-ew-cd-block {
display: inline-flex; flex-direction: column; align-items: center;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(184,132,255,0.35);
border-radius: 6px;
padding: 4px 8px;
min-width: 36px;
}
.zm-ew-cd-num { font-family: var(--font-title); font-size: 16px; font-weight: 900; color: #fff; line-height: 1; }
.zm-ew-cd-suf { font-size: 8px; color: var(--text-dim); margin-top: 1px; text-transform: uppercase; letter-spacing: 0.06em; }
.zm-ew-bar {
width: 100%; height: 10px;
background: rgba(0,0,0,0.5);
border-radius: 99px;
overflow: hidden;
margin-bottom: 12px;
position: relative;
}
.zm-ew-bar-fill {
height: 100%;
background: linear-gradient(90deg, #b884ff, #4ec3f7);
border-radius: 99px;
box-shadow: 0 0 10px rgba(184,132,255,0.6);
transition: width 0.5s ease;
position: relative;
}
.zm-ew-bar-fill::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
animation: egb-shine 2.5s ease-in-out infinite;
}
.zm-ew-bar-fill.is-success { background: linear-gradient(90deg, #ffc857, #ff9d4d, #ffc857); }
.zm-ew-stats-row { gap: 12px; }
.zm-ew-me {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 12px;
background: rgba(184,132,255,0.15);
border: 1px solid rgba(184,132,255,0.4);
border-radius: 10px;
}
.zm-ew-me-lbl { font-family: var(--font-title); font-size: 9px; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; }
.zm-ew-me-val { font-family: var(--font-title); font-size: 18px; font-weight: 900; color: #ffc857; }
.zm-ew-me-rank {
padding: 2px 8px;
background: linear-gradient(135deg, #ffc857, #c89640);
color: #1a0e2c;
border-radius: 99px;
font-family: var(--font-title);
font-size: 10px; font-weight: 900;
}
.zm-ew-top3 { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 180px; }
.zm-ew-t3 {
display: grid; grid-template-columns: 24px 1fr auto; gap: 6px; align-items: center;
padding: 4px 8px;
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 6px;
font-size: 11px;
}
.zm-ew-t3.is-me { background: rgba(184,132,255,0.12); border-color: rgba(184,132,255,0.45); }
.zm-ew-t3-r { font-size: 13px; text-align: center; }
.zm-ew-t3-n { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zm-ew-t3-p { font-family: var(--font-title); font-weight: 900; color: #b884ff; }
.zm-ew-empty { font-size: 11px; color: var(--text-dim); font-style: italic; padding: 8px; }
.zm-ew-rank-btn { padding: 8px 14px; font-size: 11px; font-family: var(--font-title); letter-spacing: 0.05em; }
.zm-ew-info {
margin-top: 10px;
padding: 8px 12px;
background: rgba(78,195,247,0.08);
border: 1px solid rgba(78,195,247,0.25);
border-radius: 8px;
color: #b6e3ff;
font-size: 11px;
display: flex;
gap: 8px;
align-items: flex-start;
line-height: 1.45;
}
.zm-ew-info i { font-size: 14px; margin-top: 1px; flex-shrink: 0; }
.zm-ew-result {
font-family: var(--font-title);
font-size: 18px;
font-weight: 900;
color: #fff;
margin: 6px 0;
}
.zm-event-widget.is-failed .zm-ew-result { color: #ff9aa6; }
.zm-event-widget.is-success .zm-ew-result { color: #ffc857; text-shadow: 0 0 14px rgba(255,200,87,0.4); }
.zm-ew-final { font-size: 12px; color: var(--text-muted); }
@media (max-width: 600px) {
.zm-ew-progress-row { flex-direction: column; align-items: flex-start; }
.zm-ew-countdown { width: 100%; }
.zm-ew-cd-blocks { justify-content: flex-start; }
.zm-ew-stats-row { flex-direction: column; align-items: stretch; }
.zm-ew-me { justify-content: space-between; }
.zm-ew-rank-btn { width: 100%; }
}
/* ===== HERO CARD DEL EVENTO (full-width en el mapa) ===== */
.event-hero-card {
position: relative;
width: 100%;
min-height: 200px;
margin: 8px 0 14px;
border-radius: 14px;
overflow: hidden;
border: 1.5px solid rgba(184,132,255,0.55);
background: linear-gradient(135deg, rgba(35,12,65,0.95), rgba(10,4,22,0.99));
box-shadow: 0 10px 30px rgba(184,132,255,0.3), inset 0 0 0 1px rgba(184,132,255,0.18);
cursor: pointer;
isolation: isolate;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.event-hero-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 40px rgba(184,132,255,0.4);
border-color: rgba(184,132,255,0.85);
}
.event-hero-card.is-here {
border-color: #5fd684;
box-shadow: 0 0 0 2px rgba(95,214,132,0.4), 0 10px 30px rgba(95,214,132,0.25);
}
.event-hero-card.is-success {
border-color: rgba(255,200,87,0.7);
box-shadow: 0 12px 40px rgba(255,200,87,0.35);
}
/* 2026-05-22: estado CERRADO — bg grayscale + countdown "Abre en X" */
.event-hero-card.is-closed {
border-color: rgba(120,120,140,0.5);
box-shadow: 0 10px 28px rgba(0,0,0,0.5);
cursor: not-allowed;
}
.event-hero-card.is-closed:hover { transform: none; box-shadow: 0 10px 28px rgba(0,0,0,0.5); border-color: rgba(120,120,140,0.5); }
.event-hero-card.is-closed .ehc-bg {
filter: grayscale(1) brightness(0.45);
opacity: 0.4;
}
.event-hero-card.is-closed:hover .ehc-bg { transform: none; opacity: 0.4; }
.event-hero-card.is-closed .ehc-glow { display: none; }
.event-hero-card.is-closed .ehc-veil {
background:
linear-gradient(90deg, rgba(10,4,22,0.93) 0%, rgba(10,4,22,0.75) 40%, rgba(10,4,22,0.85) 100%);
}
.ehc-closed-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 18px;
padding: 22px;
align-items: center;
min-height: 180px;
}
.ehc-closed-col { display: flex; align-items: center; gap: 16px; }
.ehc-closed-icon {
width: 56px; height: 56px;
border-radius: 14px;
background: rgba(120,120,140,0.18);
border: 1px solid rgba(120,120,140,0.4);
display: flex; align-items: center; justify-content: center;
font-size: 28px;
color: #aaadc0;
flex-shrink: 0;
}
.ehc-closed-title {
font-family: var(--font-title);
font-size: 24px;
font-weight: 900;
color: #d8d8e0;
letter-spacing: 0.02em;
margin-bottom: 4px;
text-shadow: 0 2px 10px rgba(0,0,0,0.85);
}
.ehc-closed-status {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 4px;
}
.ehc-closed-schedule {
font-size: 11px;
color: var(--text-dim);
font-style: italic;
}
.ehc-closed-schedule b { color: #c79dff; font-style: normal; }
.ehc-closed-countdown {
text-align: center;
padding: 12px 14px;
background: rgba(120,120,140,0.1);
border: 1px solid rgba(120,120,140,0.35);
border-radius: 10px;
}
.ehc-cd-label {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--text-dim);
text-transform: uppercase;
margin-bottom: 8px;
}
.ehc-closed-cd { display: flex; justify-content: center; gap: 6px; }
.ehc-cd-big {
display: inline-flex; flex-direction: column; align-items: center;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(120,120,140,0.3);
border-radius: 8px;
padding: 5px 9px;
min-width: 38px;
}
.ehc-cd-big > span {
font-family: var(--font-title);
font-size: 18px;
font-weight: 900;
color: #d8d8e0;
line-height: 1;
}
.ehc-cd-big > small {
font-size: 8px;
color: var(--text-dim);
letter-spacing: 0.08em;
margin-top: 2px;
text-transform: uppercase;
}
@media (max-width: 700px) {
.ehc-closed-grid { grid-template-columns: 1fr; gap: 12px; padding: 14px 16px; min-height: 0; }
.ehc-closed-col { gap: 12px; }
.ehc-closed-icon { width: 44px; height: 44px; font-size: 22px; }
.ehc-closed-title { font-size: 18px; }
.ehc-closed-status { font-size: 11px; }
.ehc-closed-schedule { font-size: 10px; }
.ehc-closed-countdown { padding: 10px; }
.ehc-cd-big { min-width: 32px; padding: 4px 7px; }
.ehc-cd-big > span { font-size: 14px; }
.ehc-cd-big > small { font-size: 7px; }
}
.ehc-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
opacity: 0.5;
z-index: 0;
transition: opacity 0.3s, transform 0.6s;
}
.event-hero-card:hover .ehc-bg { opacity: 0.6; transform: scale(1.03); }
.ehc-veil {
position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(10,4,22,0.92) 0%, rgba(10,4,22,0.7) 35%, rgba(10,4,22,0.6) 60%, rgba(10,4,22,0.85) 100%),
radial-gradient(circle at 80% 50%, rgba(184,132,255,0.18), transparent 60%);
z-index: 1;
}
.ehc-glow {
position: absolute; inset: -40%;
background: conic-gradient(from 0deg, transparent, rgba(184,132,255,0.16), transparent 60%, rgba(78,195,247,0.12), transparent);
animation: egb-spin 22s linear infinite;
pointer-events: none;
z-index: 0;
opacity: 0.6;
}
.ehc-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.3fr 1.4fr 1fr;
gap: 18px;
padding: 18px 22px;
align-items: center;
min-height: 200px;
}
/* Col 1 — identidad */
.ehc-col-title { display: flex; flex-direction: column; gap: 6px; }
.ehc-tag {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px;
background: linear-gradient(135deg, #b884ff, #6f3dd9);
color: #fff;
font-family: var(--font-title);
font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
border-radius: 99px; text-transform: uppercase;
align-self: flex-start;
box-shadow: 0 0 14px rgba(184,132,255,0.6);
}
.ehc-tag i { font-size: 11px; }
.ehc-name {
font-family: var(--font-title);
font-size: 26px;
font-weight: 900;
color: #fff;
letter-spacing: 0.02em;
text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 0 24px rgba(184,132,255,0.4);
line-height: 1.05;
}
.ehc-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.ehc-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 99px;
font-family: var(--font-title);
font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text);
backdrop-filter: blur(4px);
}
.ehc-pill i { font-size: 11px; }
.ehc-pill.is-pvp { color: #ff9aa6; border-color: rgba(232,90,106,0.4); }
.ehc-pill.is-safe { color: #7be8a3; border-color: rgba(95,214,132,0.4); }
.ehc-pill.is-here { color: #ffc857; border-color: rgba(255,200,87,0.45); background: rgba(255,200,87,0.12); }
.ehc-pill.is-lock { color: #ff9aa6; border-color: rgba(232,90,106,0.45); background: rgba(232,90,106,0.1); }
.ehc-desc {
color: rgba(255,255,255,0.72);
font-size: 12px;
line-height: 1.4;
margin-top: 6px;
text-shadow: 0 1px 6px rgba(0,0,0,0.8);
font-style: italic;
}
/* Col 2 — progreso + timer */
.ehc-col-stats { display: flex; flex-direction: column; gap: 12px; }
.ehc-progress-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 6px;
gap: 8px;
}
.ehc-progress-nums {
display: flex; align-items: baseline; gap: 4px;
font-family: var(--font-title);
}
.ehc-progress-cur { color: #fff; font-size: 22px; font-weight: 900; text-shadow: 0 0 10px rgba(184,132,255,0.5); }
.ehc-progress-sep { color: var(--text-dim); }
.ehc-progress-goal { color: var(--text-muted); font-size: 14px; font-weight: 700; }
.ehc-progress-lbl {
font-family: var(--font-title);
font-size: 9px; letter-spacing: 0.1em;
color: var(--text-dim);
text-transform: uppercase;
}
.ehc-progress-bar {
width: 100%; height: 10px;
background: rgba(0,0,0,0.55);
border-radius: 99px;
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
position: relative;
}
.ehc-progress-fill {
height: 100%;
background: linear-gradient(90deg, #b884ff, #4ec3f7);
border-radius: 99px;
box-shadow: 0 0 10px rgba(184,132,255,0.7);
transition: width 0.5s ease;
position: relative;
}
.ehc-progress-fill::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
animation: egb-shine 2.5s ease-in-out infinite;
}
.ehc-progress-fill.is-success {
background: linear-gradient(90deg, #ffc857, #ff9d4d, #ffc857);
box-shadow: 0 0 14px rgba(255,200,87,0.8);
}
.ehc-stats {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 8px;
}
.ehc-stat {
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
padding: 6px 10px;
backdrop-filter: blur(4px);
}
.ehc-stat-timer {
background: rgba(184,132,255,0.12);
border-color: rgba(184,132,255,0.4);
}
.ehc-stat-lbl {
font-family: var(--font-title);
font-size: 9px; letter-spacing: 0.1em;
color: var(--text-dim);
text-transform: uppercase;
}
.ehc-stat-val {
font-family: var(--font-title);
font-size: 14px;
font-weight: 800;
color: #fff;
margin-top: 2px;
}
.ehc-countdown { color: #b884ff; text-shadow: 0 0 10px rgba(184,132,255,0.5); }
.ehc-countdown [data-cd] { color: #fff; font-size: 15px; }
.ehc-rank {
display: inline-block;
padding: 1px 6px;
background: linear-gradient(135deg, #ffc857, #c89640);
color: #1a0e2c;
border-radius: 99px;
font-size: 10px;
font-weight: 900;
}
/* Col 3 — top 3 + CTA */
.ehc-col-side { display: flex; flex-direction: column; gap: 6px; }
.ehc-top3-title {
font-family: var(--font-title);
font-size: 9px; letter-spacing: 0.12em;
color: var(--text-dim);
text-transform: uppercase;
}
.ehc-top3 { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.ehc-t3 {
display: grid;
grid-template-columns: 22px 1fr auto;
gap: 6px;
align-items: center;
padding: 3px 8px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 6px;
font-size: 11px;
}
.ehc-t3.is-me { background: rgba(184,132,255,0.18); border-color: rgba(184,132,255,0.5); }
.ehc-t3-r { font-size: 13px; text-align: center; }
.ehc-t3-n { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ehc-t3-p { font-family: var(--font-title); font-weight: 900; color: #b884ff; }
.ehc-top3-empty {
text-align: center;
font-size: 11px;
color: var(--text-dim);
font-style: italic;
padding: 8px;
}
.ehc-cta-btn {
background: linear-gradient(135deg, #b884ff, #6f3dd9);
color: #fff;
border: none;
padding: 10px 14px;
font-family: var(--font-title);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.05em;
border-radius: 8px;
box-shadow: 0 4px 14px rgba(184,132,255,0.5);
}
.ehc-cta-btn:hover { box-shadow: 0 6px 22px rgba(184,132,255,0.75); }
.ehc-cta-btn:disabled, .event-hero-card.is-locked .ehc-cta-btn {
background: rgba(255,255,255,0.08);
color: var(--text-dim);
box-shadow: none;
cursor: not-allowed;
}
.ehc-resolved { text-align: center; padding: 16px; }
.ehc-resolved-title {
font-family: var(--font-title);
font-size: 20px;
font-weight: 900;
color: #ffc857;
margin-bottom: 6px;
text-shadow: 0 0 16px rgba(255,200,87,0.4);
}
.event-hero-card:not(.is-success) .ehc-resolved-title { color: #ff9aa6; text-shadow: none; }
.ehc-resolved-sub { font-size: 12px; color: var(--text-muted); }
@media (max-width: 1100px) {
.ehc-grid { grid-template-columns: 1fr 1fr; }
.ehc-col-side { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
.ehc-top3 { flex: 1; }
.ehc-cta-btn { flex-shrink: 0; }
}
/* MOBILE: card compacta, sin top3 */
@media (max-width: 700px) {
.event-hero-card { min-height: 0; margin: 6px 0 10px; border-radius: 12px; }
.ehc-grid { grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; min-height: 0; }
.ehc-name { font-size: 18px; line-height: 1.1; }
.ehc-meta { gap: 4px; }
.ehc-pill { font-size: 9px; padding: 2px 7px; }
.ehc-pill i { font-size: 10px; }
.ehc-desc { display: none; } /* descripción ocupa mucho en mobile */
.ehc-col-title { gap: 4px; }
.ehc-progress-cur { font-size: 18px; }
.ehc-progress-goal { font-size: 12px; }
.ehc-progress-lbl { font-size: 8px; }
.ehc-progress-bar { height: 8px; }
.ehc-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
.ehc-stat-timer { grid-column: 1 / -1; }
.ehc-stat { padding: 5px 8px; }
.ehc-stat-lbl { font-size: 8px; }
.ehc-stat-val { font-size: 12px; }
.ehc-countdown [data-cd] { font-size: 13px; }
.ehc-col-side { display: none; } /* ocultamos TOP 3 + CTA del lateral */
/* CTA reubicado al final */
.event-hero-card::after {
content: '';
display: block;
padding: 0 14px 12px;
}
}
/* En mobile, agregamos un CTA full-width abajo via pseudo-elemento NO funciona,
así que mejor mostramos el col-side pero solo el botón */
@media (max-width: 700px) {
.ehc-col-side { display: flex; flex-direction: column; gap: 6px; padding: 0; }
.ehc-top3-title, .ehc-top3, .ehc-top3-empty { display: none; }
.ehc-cta-btn { width: 100%; padding: 8px; font-size: 11px; }
}
/* ===== MODAL CUSTOM RECTANGULAR DEL EVENTO ===== */
.efm-overlay {
position: fixed; inset: 0;
background: rgba(5,3,15,0.88);
backdrop-filter: blur(8px);
z-index: 1500;
display: flex; align-items: center; justify-content: center;
padding: 16px;
overflow-y: auto;
}
.efm-modal {
position: relative;
width: 100%;
max-width: 1100px; /* RECTANGULAR — más ancho que alto */
max-height: 94vh;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(20,12,40,0.98), rgba(10,4,22,1));
border: 1.5px solid rgba(184,132,255,0.55);
border-radius: 16px;
box-shadow: 0 24px 64px rgba(0,0,0,0.75), 0 0 0 1px rgba(184,132,255,0.18);
overflow: hidden;
}
.efm-modal.efm-loading {
align-items: center;
justify-content: center;
min-height: 280px;
padding: 30px;
}
/* BANNER (top, fijo) */
.efm-banner {
position: relative;
height: 200px;
flex-shrink: 0;
overflow: hidden;
border-bottom: 1px solid rgba(184,132,255,0.25);
}
.efm-banner-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
opacity: 0.65;
animation: efm-bg-pan 16s ease-in-out infinite alternate;
}
@keyframes efm-bg-pan {
from { transform: scale(1.04); }
to { transform: scale(1.12); }
}
.efm-banner-veil {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,4,22,0.3) 0%, rgba(10,4,22,0.5) 50%, rgba(10,4,22,0.95) 100%);
}
.efm-close {
position: absolute;
top: 14px; right: 14px;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.2);
color: var(--text);
cursor: pointer;
z-index: 5;
display: flex; align-items: center; justify-content: center;
font-size: 17px;
backdrop-filter: blur(4px);
transition: all 0.2s;
}
.efm-close:hover { background: rgba(232,90,106,0.6); border-color: rgba(232,90,106,0.9); }
.efm-banner-content {
position: absolute;
bottom: 18px; left: 22px; right: 22px;
z-index: 2;
}
.efm-tag {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px;
background: linear-gradient(135deg, #b884ff, #6f3dd9);
color: #fff;
font-family: var(--font-title);
font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
border-radius: 99px; text-transform: uppercase;
margin-bottom: 8px;
box-shadow: 0 0 14px rgba(184,132,255,0.6);
}
.efm-title {
font-family: var(--font-title);
font-size: 34px; font-weight: 900;
color: #fff;
text-shadow: 0 3px 14px rgba(0,0,0,0.85), 0 0 28px rgba(184,132,255,0.5);
line-height: 1.05;
margin-bottom: 10px;
}
.efm-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.efm-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 99px;
font-family: var(--font-title);
font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text);
backdrop-filter: blur(4px);
}
.efm-pill i { font-size: 11px; }
.efm-pill.is-pvp { color: #ff9aa6; border-color: rgba(232,90,106,0.5); }
.efm-pill.is-safe { color: #7be8a3; border-color: rgba(95,214,132,0.5); }
.efm-pill.is-here { color: #ffc857; border-color: rgba(255,200,87,0.55); background: rgba(255,200,87,0.12); }
.efm-pill.is-lock { color: #ff9aa6; border-color: rgba(232,90,106,0.5); }
.efm-desc {
margin-top: 10px;
color: rgba(255,255,255,0.85);
font-size: 12px;
font-style: italic;
text-shadow: 0 1px 6px rgba(0,0,0,0.85);
max-width: 700px;
}
/* BODY (scrollable) */
.efm-body {
flex: 1;
overflow-y: auto;
padding: 18px 22px;
display: flex;
flex-direction: column;
gap: 16px;
}
.efm-body::-webkit-scrollbar { width: 8px; }
.efm-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
.efm-body::-webkit-scrollbar-thumb { background: rgba(184,132,255,0.4); border-radius: 4px; }
/* Stats row */
.efm-stats-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 12px;
}
.efm-stat-box {
background: rgba(0,0,0,0.45);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 12px 14px;
}
.efm-stat-progress { background: linear-gradient(135deg, rgba(184,132,255,0.12), rgba(0,0,0,0.45)); border-color: rgba(184,132,255,0.35); }
.efm-stat-timer-box { background: linear-gradient(135deg, rgba(78,195,247,0.12), rgba(0,0,0,0.45)); border-color: rgba(78,195,247,0.35); }
.efm-stat-me { background: linear-gradient(135deg, rgba(255,200,87,0.12), rgba(0,0,0,0.45)); border-color: rgba(255,200,87,0.35); }
.efm-stat-lbl {
font-family: var(--font-title);
font-size: 9px; letter-spacing: 0.12em;
color: var(--text-dim);
text-transform: uppercase;
margin-bottom: 6px;
}
.efm-stat-progress-num {
display: flex; align-items: baseline; gap: 4px;
font-family: var(--font-title);
margin-bottom: 8px;
}
.efm-cur { color: #fff; font-size: 22px; font-weight: 900; }
.efm-sep { color: var(--text-dim); }
.efm-goal { color: var(--text-muted); font-size: 14px; font-weight: 700; }
.efm-progress-bar {
width: 100%; height: 10px;
background: rgba(0,0,0,0.55);
border-radius: 99px;
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
position: relative;
}
.efm-progress-fill {
height: 100%;
background: linear-gradient(90deg, #b884ff, #4ec3f7);
border-radius: 99px;
box-shadow: 0 0 10px rgba(184,132,255,0.7);
position: relative;
}
.efm-progress-fill::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
animation: egb-shine 2.5s ease-in-out infinite;
}
.efm-progress-fill.is-success { background: linear-gradient(90deg, #ffc857, #ff9d4d, #ffc857); }
.efm-countdown {
display: flex; gap: 6px; flex-wrap: wrap;
justify-content: center; /* 2026-05-22: centrado en PC y mobile */
}
.efm-stat-timer-box { text-align: center; }
.efm-stat-timer-box .efm-stat-lbl { text-align: center; }
.efm-cd-block {
display: inline-flex; flex-direction: column; align-items: center;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(78,195,247,0.3);
border-radius: 6px;
padding: 4px 10px;
min-width: 38px;
}
.efm-cd-block > span {
font-family: var(--font-title);
font-size: 18px; font-weight: 900;
color: #fff;
line-height: 1;
}
.efm-cd-block > small {
font-size: 8px;
color: var(--text-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 2px;
}
.efm-me-pts {
font-family: var(--font-title);
font-size: 26px;
font-weight: 900;
color: #ffc857;
line-height: 1;
margin-bottom: 6px;
}
.efm-me-pts-lbl { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.efm-me-sub { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.efm-me-rank {
padding: 2px 8px;
background: linear-gradient(135deg, #ffc857, #c89640);
color: #1a0e2c;
border-radius: 99px;
font-family: var(--font-title);
font-size: 11px;
font-weight: 900;
}
.efm-me-rank-none {
font-size: 11px;
color: var(--text-dim);
font-style: italic;
}
.efm-me-kills { font-size: 11px; color: var(--text-muted); }
/* Cols section: mobs + recompensas */
.efm-cols {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 16px;
}
.efm-section {
background: rgba(0,0,0,0.3);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 14px;
}
.efm-section-title {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-title);
font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-soft);
}
.efm-section-title i { color: #b884ff; font-size: 14px; }
.efm-section-count {
margin-left: auto;
padding: 1px 8px;
background: rgba(184,132,255,0.2);
color: #b884ff;
border-radius: 99px;
font-family: var(--font-title);
font-size: 10px;
font-weight: 800;
}
/* Mobs list */
.efm-mobs { display: flex; flex-direction: column; gap: 6px; }
.efm-mob {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 10px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
transition: background 0.15s, border-color 0.15s;
}
.efm-mob:hover { background: rgba(184,132,255,0.08); border-color: rgba(184,132,255,0.3); }
.efm-mob-icon {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: rgba(184,132,255,0.18);
border: 1px solid rgba(184,132,255,0.35);
border-radius: 8px;
color: #c79dff;
font-size: 18px;
}
.efm-mob-info { min-width: 0; }
.efm-mob-name {
font-family: var(--font-title);
font-size: 13px;
font-weight: 700;
color: var(--text);
margin-bottom: 2px;
}
.efm-mob-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.efm-mob-lvl, .efm-mob-hp {
display: inline-flex; align-items: center; gap: 3px;
font-size: 10px;
color: var(--text-muted);
}
.efm-mob-lvl i { color: #ffc857; }
.efm-mob-hp i { color: #e85a6a; }
.efm-mob-pts {
text-align: center;
padding: 6px 12px;
background: linear-gradient(135deg, rgba(184,132,255,0.25), rgba(184,132,255,0.08));
border: 1px solid rgba(184,132,255,0.45);
border-radius: 8px;
min-width: 64px;
}
.efm-mob-pts-num {
display: block;
font-family: var(--font-title);
font-size: 18px;
font-weight: 900;
color: #b884ff;
line-height: 1;
}
.efm-mob-pts-lbl {
font-size: 9px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Rewards table */
.efm-rewards-list { display: flex; flex-direction: column; gap: 5px; }
.efm-rw-row {
display: grid;
grid-template-columns: 90px 1fr;
gap: 10px;
align-items: center;
padding: 7px 10px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 6px;
font-size: 12px;
}
.efm-rw-row.efm-rw-top { background: linear-gradient(90deg, rgba(255,200,87,0.1), rgba(0,0,0,0.35)); border-color: rgba(255,200,87,0.25); }
.efm-rw-rank {
font-family: var(--font-title);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.06em;
text-align: center;
padding: 3px 6px;
background: rgba(255,255,255,0.05);
border-radius: 4px;
color: var(--text-muted);
}
.efm-rw-rank.gold { background: linear-gradient(135deg, rgba(255,200,87,0.4), rgba(255,200,87,0.15)); color: #ffc857; border: 1px solid rgba(255,200,87,0.55); }
.efm-rw-rank.silver { background: linear-gradient(135deg, rgba(216,216,216,0.35), rgba(216,216,216,0.1)); color: #d8d8d8; border: 1px solid rgba(216,216,216,0.4); }
.efm-rw-rank.bronze { background: linear-gradient(135deg, rgba(205,127,50,0.35), rgba(205,127,50,0.1)); color: #e6a463; border: 1px solid rgba(205,127,50,0.4); }
.efm-rw-prize {
color: var(--text);
font-size: 11px;
line-height: 1.4;
}
.efm-rw-prize b { color: #ffc857; }
.efm-rw-note {
margin-top: 10px;
padding: 8px 10px;
background: rgba(78,195,247,0.08);
border: 1px solid rgba(78,195,247,0.25);
border-radius: 6px;
color: #b6e3ff;
font-size: 11px;
display: flex; align-items: flex-start; gap: 6px;
line-height: 1.4;
}
.efm-rw-note i { font-size: 14px; margin-top: 1px; }
.efm-rw-note b { color: #ffc857; }
/* Ranking scrolleable */
.efm-ranking {
display: flex; flex-direction: column; gap: 4px;
max-height: 280px;
overflow-y: auto;
padding-right: 4px;
}
.efm-ranking::-webkit-scrollbar { width: 6px; }
.efm-ranking::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
.efm-ranking::-webkit-scrollbar-thumb { background: rgba(184,132,255,0.4); border-radius: 3px; }
.efm-ranking-empty {
text-align: center;
font-style: italic;
color: var(--text-dim);
padding: 30px 10px;
}
.efm-rank-row {
display: grid;
grid-template-columns: 44px 1fr auto auto;
gap: 10px;
align-items: center;
padding: 7px 12px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 6px;
font-size: 12px;
}
.efm-rank-row.is-top { border-color: rgba(255,200,87,0.3); }
.efm-rank-row.is-me { background: rgba(184,132,255,0.15); border-color: rgba(184,132,255,0.45); }
.efm-rank-num {
font-family: var(--font-title);
font-weight: 800;
font-size: 13px;
color: var(--text-muted);
}
.efm-rank-row.is-top .efm-rank-num { color: #ffc857; font-size: 14px; }
.efm-rank-name { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.efm-rank-meta { color: var(--text-dim); font-size: 10px; }
.efm-rank-pts {
font-family: var(--font-title);
font-weight: 900;
font-size: 14px;
color: #b884ff;
min-width: 40px;
text-align: right;
}
/* Resolved banner */
.efm-resolved {
text-align: center;
padding: 18px;
background: linear-gradient(135deg, rgba(255,200,87,0.1), rgba(0,0,0,0.4));
border: 1px solid rgba(255,200,87,0.4);
border-radius: 10px;
}
.efm-resolved.is-failed {
background: linear-gradient(135deg, rgba(232,90,106,0.1), rgba(0,0,0,0.4));
border-color: rgba(232,90,106,0.4);
}
.efm-resolved i { font-size: 28px; color: #ffc857; margin-bottom: 6px; display: block; }
.efm-resolved.is-failed i { color: #ff9aa6; }
.efm-resolved-title {
font-family: var(--font-title);
font-size: 18px;
font-weight: 900;
color: #ffc857;
margin-bottom: 4px;
}
.efm-resolved.is-failed .efm-resolved-title { color: #ff9aa6; }
.efm-resolved-sub { font-size: 12px; color: var(--text-muted); }
/* Jugadores en la zona — summary card con botón "Ver" */
.efm-players-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: rgba(184,132,255,0.08);
border: 1px solid rgba(184,132,255,0.3);
border-radius: 10px;
}
.efm-players-info {
display: flex;
align-items: center;
gap: 12px;
}
.efm-players-info > i {
font-size: 26px;
color: #b884ff;
filter: drop-shadow(0 0 8px rgba(184,132,255,0.5));
}
.efm-players-num {
font-family: var(--font-title);
font-size: 22px;
font-weight: 900;
color: #fff;
line-height: 1;
}
.efm-players-lbl {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
.efm-view-players {
padding: 7px 14px;
font-size: 12px;
font-family: var(--font-title);
letter-spacing: 0.05em;
}
.efm-players-empty {
text-align: center;
padding: 16px;
color: var(--text-dim);
font-size: 12px;
font-style: italic;
}
.efm-players-empty i { font-size: 22px; display: block; margin-bottom: 6px; opacity: 0.5; }
@media (max-width: 600px) {
.efm-players-summary { padding: 8px 12px; }
.efm-players-info > i { font-size: 22px; }
.efm-players-num { font-size: 18px; }
.efm-players-lbl { font-size: 10px; }
}
/* Footer */
.efm-footer {
display: flex;
gap: 10px;
padding: 14px 22px;
border-top: 1px solid var(--border-soft);
background: rgba(0,0,0,0.4);
flex-shrink: 0;
}
.efm-footer > button {
flex: 1;
min-width: 130px;
padding: 11px;
font-family: var(--font-title);
letter-spacing: 0.05em;
font-size: 12px;
}
.efm-travel-btn { box-shadow: 0 0 14px rgba(232,90,106,0.4); }
/* Responsive */
@media (max-width: 900px) {
.efm-banner { height: 170px; }
.efm-title { font-size: 24px; }
.efm-stats-row { grid-template-columns: 1fr 1fr; }
.efm-stat-me { grid-column: 1 / -1; }
.efm-cols { grid-template-columns: 1fr; }
}
/* MOBILE: modal mucho más compacto */
@media (max-width: 600px) {
.efm-overlay { padding: 8px; }
.efm-modal { max-height: 96vh; border-radius: 12px; }
/* Banner más bajo */
.efm-banner { height: 130px; }
.efm-banner-content { bottom: 12px; left: 14px; right: 14px; }
.efm-close { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 15px; }
.efm-tag { font-size: 9px; padding: 3px 8px; margin-bottom: 5px; }
.efm-title { font-size: 18px; margin-bottom: 6px; line-height: 1.1; }
.efm-pills { gap: 4px; }
.efm-pill { font-size: 8px; padding: 2px 6px; }
.efm-pill i { font-size: 9px; }
.efm-desc { font-size: 10px; margin-top: 6px; line-height: 1.35; }
/* Body: menos padding */
.efm-body { padding: 10px 12px; gap: 10px; }
/* Stats: progreso + tus stats LADO A LADO en row 1, timer abajo row 2 full-width centrado */
.efm-stats-row { grid-template-columns: 1fr 1fr; gap: 6px; }
.efm-stat-progress { grid-column: 1 / 2; grid-row: 1; }
.efm-stat-me { grid-column: 2 / 3; grid-row: 1; }
.efm-stat-timer-box { grid-column: 1 / -1; grid-row: 2; }
.efm-stat-box { padding: 8px 10px; }
.efm-stat-lbl { font-size: 8px; margin-bottom: 3px; }
.efm-cur { font-size: 16px; }
.efm-goal { font-size: 11px; }
.efm-progress-bar { height: 7px; }
.efm-cd-block { padding: 3px 7px; min-width: 30px; }
.efm-cd-block > span { font-size: 13px; }
.efm-cd-block > small { font-size: 7px; }
.efm-me-pts { font-size: 18px; margin-bottom: 3px; }
.efm-me-pts-lbl { font-size: 10px; }
.efm-me-sub { gap: 6px; }
.efm-me-rank { font-size: 9px; padding: 1px 6px; }
.efm-me-kills { font-size: 9px; }
.efm-me-rank-none { font-size: 9px; }
/* Secciones compactas */
.efm-section { padding: 10px; }
.efm-section-title { font-size: 10px; margin-bottom: 8px; padding-bottom: 6px; gap: 6px; }
.efm-section-title i { font-size: 12px; }
.efm-section-count { font-size: 9px; padding: 1px 6px; }
/* Mobs más chiquitos */
.efm-mob { grid-template-columns: 28px 1fr auto; gap: 7px; padding: 6px 8px; }
.efm-mob-icon { width: 28px; height: 28px; font-size: 14px; border-radius: 6px; }
.efm-mob-name { font-size: 11px; }
.efm-mob-meta { gap: 6px; }
.efm-mob-lvl, .efm-mob-hp { font-size: 9px; }
.efm-mob-pts { padding: 4px 8px; min-width: 48px; }
.efm-mob-pts-num { font-size: 14px; }
.efm-mob-pts-lbl { font-size: 7px; }
/* Tabla recompensas compacta */
.efm-rw-row { grid-template-columns: 76px 1fr; gap: 8px; padding: 5px 8px; }
.efm-rw-rank { font-size: 9px; padding: 2px 5px; }
.efm-rw-prize { font-size: 10px; line-height: 1.3; }
.efm-rw-note { font-size: 10px; padding: 6px 8px; }
.efm-rw-note i { font-size: 12px; }
/* Ranking más chico */
.efm-ranking { max-height: 220px; }
.efm-rank-row { grid-template-columns: 32px 1fr auto; gap: 6px; padding: 5px 8px; font-size: 11px; }
.efm-rank-meta { display: none; }
.efm-rank-num { font-size: 11px; }
.efm-rank-row.is-top .efm-rank-num { font-size: 12px; }
.efm-rank-pts { font-size: 12px; min-width: 32px; }
/* Resolved banner */
.efm-resolved { padding: 14px 12px; }
.efm-resolved i { font-size: 22px; }
.efm-resolved-title { font-size: 14px; line-height: 1.25; }
.efm-resolved-sub { font-size: 11px; }
/* Footer compacto */
.efm-footer { flex-direction: column; gap: 6px; padding: 10px 12px; }
.efm-footer > button { min-width: 0; padding: 9px; font-size: 11px; width: 100%; }
}
/* =====================================================================
2026-05-25: Item Detail Modal — Obsidian Codex (.oid2-*)
Reemplaza al .item-modal viejo en Descuentos (offers.js openItemDetail).
===================================================================== */
.oid2-overlay {
position: fixed; inset: 0; z-index: 1100;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(ellipse at center, rgba(20,10,40,0.78) 0%, rgba(4,2,12,0.92) 100%);
backdrop-filter: blur(6px);
padding: 16px;
}
.oid2-modal {
position: relative;
width: 100%;
max-width: 440px;
max-height: 92vh;
overflow-y: auto;
background:
radial-gradient(ellipse at top, rgba(80,50,140,0.22) 0%, transparent 60%),
linear-gradient(180deg, #15102a 0%, #0a0418 100%);
border: 1px solid rgba(212,175,55,0.22);
border-radius: 18px;
box-shadow: 0 28px 72px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04);
color: #f5edd6;
animation: oid2-pop 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.oid2-modal::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 40px rgba(212,175,55,0.05);
}
@keyframes oid2-pop {
from { transform: translateY(12px) scale(0.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
/* Rarity ring */
.oid2-modal.r-uncommon { box-shadow: 0 28px 72px rgba(0,0,0,0.7), 0 0 0 1px rgba(95,214,132,0.4); }
.oid2-modal.r-rare { box-shadow: 0 28px 72px rgba(0,0,0,0.7), 0 0 0 1px rgba(95,180,255,0.42); }
.oid2-modal.r-epic { box-shadow: 0 28px 72px rgba(0,0,0,0.7), 0 0 0 1px rgba(184,132,255,0.5); }
.oid2-modal.r-legendary { box-shadow: 0 28px 72px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,200,87,0.55); }
.oid2-modal.r-mythic { box-shadow: 0 28px 72px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,120,140,0.55); }
.oid2-close {
position: absolute; top: 12px; right: 12px; z-index: 2;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 50%;
color: #f5edd6;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.oid2-close:hover { background: rgba(255,80,80,0.25); transform: rotate(90deg); }
.oid2-close i { font-size: 18px; }
/* Hero */
.oid2-hero {
position: relative;
padding: 32px 24px 18px;
display: flex; align-items: center; justify-content: center;
}
.oid2-hero-glow {
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
opacity: 0.55;
filter: blur(46px);
pointer-events: none;
background: radial-gradient(circle, rgba(184,132,255,0.55) 0%, transparent 70%);
}
.oid2-hero-glow.r-common { background: radial-gradient(circle, rgba(220,220,220,0.4) 0%, transparent 70%); }
.oid2-hero-glow.r-uncommon { background: radial-gradient(circle, rgba(95,214,132,0.5) 0%, transparent 70%); }
.oid2-hero-glow.r-rare { background: radial-gradient(circle, rgba(95,180,255,0.55) 0%, transparent 70%); }
.oid2-hero-glow.r-epic { background: radial-gradient(circle, rgba(184,132,255,0.6) 0%, transparent 70%); }
.oid2-hero-glow.r-legendary { background: radial-gradient(circle, rgba(255,200,87,0.6) 0%, transparent 70%); }
.oid2-hero-glow.r-mythic { background: radial-gradient(circle, rgba(255,120,140,0.6) 0%, transparent 70%); }
.oid2-image-frame {
position: relative;
width: 140px; height: 140px;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.4));
border: 1px solid rgba(212,175,55,0.2);
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.oid2-image-frame.r-uncommon { border-color: rgba(95,214,132,0.45); }
.oid2-image-frame.r-rare { border-color: rgba(95,180,255,0.45); }
.oid2-image-frame.r-epic { border-color: rgba(184,132,255,0.55); }
.oid2-image-frame.r-legendary { border-color: rgba(255,200,87,0.55); }
.oid2-image-frame.r-mythic { border-color: rgba(255,120,140,0.55); }
.oid2-image {
width: 100%; height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
image-rendering: pixelated;
}
.oid2-image-fallback {
font-size: 64px;
color: rgba(212,175,55,0.6);
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
}
.oid2-image-fallback i { font-size: 64px; }
/* Head: name + pills */
.oid2-head {
padding: 0 24px 16px;
text-align: center;
border-bottom: 1px solid rgba(212,175,55,0.12);
}
.oid2-name {
margin: 0 0 12px;
font-family: 'Cinzel', serif;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.02em;
color: #f5edd6;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.oid2-name.r-uncommon { color: #8ee5a8; }
.oid2-name.r-rare { color: #8ec4ff; }
.oid2-name.r-epic { color: #c2a8ff; }
.oid2-name.r-legendary { color: #ffd56a; }
.oid2-name.r-mythic { color: #ff90a8; }
.oid2-pills {
display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.oid2-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(245,237,214,0.8);
}
.oid2-pill i { font-size: 11px; opacity: 0.7; }
.oid2-pill.r-uncommon { background: rgba(95,214,132,0.12); border-color: rgba(95,214,132,0.4); color: #8ee5a8; }
.oid2-pill.r-rare { background: rgba(95,180,255,0.12); border-color: rgba(95,180,255,0.4); color: #8ec4ff; }
.oid2-pill.r-epic { background: rgba(184,132,255,0.15); border-color: rgba(184,132,255,0.45); color: #c2a8ff; }
.oid2-pill.r-legendary { background: rgba(255,200,87,0.15); border-color: rgba(255,200,87,0.5); color: #ffd56a; }
.oid2-pill.r-mythic { background: rgba(255,120,140,0.15); border-color: rgba(255,120,140,0.5); color: #ff90a8; }
.oid2-pill-race { background: rgba(108,212,255,0.12); border-color: rgba(108,212,255,0.35); color: #8be3ff; }
.oid2-pill-qty { background: rgba(212,175,55,0.18); border-color: rgba(212,175,55,0.45); color: #ffc857; }
/* Body */
.oid2-body { padding: 18px 22px 22px; }
.oid2-section {
margin-bottom: 16px;
}
.oid2-section:last-child { margin-bottom: 0; }
.oid2-section-title {
display: flex; align-items: center; gap: 6px;
font-family: 'Cinzel', serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(212,175,55,0.78);
margin-bottom: 10px;
}
.oid2-section-title i { font-size: 12px; color: rgba(212,175,55,0.55); }
.oid2-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.oid2-stat {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
}
.oid2-stat-icon { font-size: 16px; flex-shrink: 0; }
.oid2-stat-lbl {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
color: rgba(245,237,214,0.6);
flex: 1;
}
.oid2-stat-val {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 700;
}
.oid2-special {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
margin-bottom: 16px;
background: linear-gradient(180deg, rgba(212,175,55,0.1), rgba(212,175,55,0.04));
border: 1px solid rgba(212,175,55,0.3);
border-radius: 12px;
}
.oid2-special > i {
font-size: 26px;
color: #ffc857;
filter: drop-shadow(0 0 6px rgba(255,200,87,0.6));
}
.oid2-special-val {
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
font-weight: 800;
color: #ffd56a;
line-height: 1;
}
.oid2-special-lbl {
font-size: 11px;
color: rgba(245,237,214,0.7);
margin-top: 3px;
}
.oid2-desc {
margin: 0;
font-family: 'Cormorant Garamond', serif;
font-size: 14px;
font-style: italic;
line-height: 1.5;
color: rgba(245,237,214,0.82);
}
.oid2-empty {
display: flex; align-items: center; gap: 10px;
padding: 16px 14px;
background: rgba(108,212,255,0.06);
border: 1px dashed rgba(108,212,255,0.28);
border-radius: 10px;
font-size: 13px;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
color: rgba(245,237,214,0.7);
}
.oid2-empty i { color: #6cd4ff; font-size: 16px; flex-shrink: 0; }
@media (max-width: 480px) {
.oid2-modal { max-width: 95vw; border-radius: 14px; }
.oid2-hero { padding: 24px 18px 14px; }
.oid2-image-frame { width: 116px; height: 116px; }
.oid2-hero-glow { width: 160px; height: 160px; }
.oid2-name { font-size: 18px; }
.oid2-head { padding: 0 18px 14px; }
.oid2-body { padding: 14px 16px 18px; }
.oid2-stats-grid { gap: 6px; }
.oid2-stat { padding: 6px 8px; }
.oid2-stat-val { font-size: 12px; }
}
/* =====================================================================
2026-05-25: Loot Modal — Obsidian Codex (.lm2-*)
Reemplaza al .loot-modal viejo en combat.js openLootModal.
Las rows internas (.loot-row, .loot-row-*) se reutilizan; solo se cambia
el shell del modal y los títulos de sección.
===================================================================== */
.lm2-overlay {
position: fixed; inset: 0; z-index: 1100;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(ellipse at center, rgba(20,10,40,0.78) 0%, rgba(4,2,12,0.92) 100%);
backdrop-filter: blur(6px);
padding: 16px;
overflow: hidden;
/* Bloquea el touch del overlay para que no scrollee la página de atrás */
touch-action: none;
}
.lm2-modal {
position: relative;
width: 100%;
max-width: 540px;
max-height: calc(100vh - 32px);
display: flex;
flex-direction: column;
overflow: hidden;
background:
radial-gradient(ellipse at top, rgba(80,50,140,0.22) 0%, transparent 60%),
linear-gradient(180deg, #15102a 0%, #0a0418 100%);
border: 1px solid rgba(212,175,55,0.22);
border-radius: 18px;
box-shadow: 0 28px 72px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04);
color: #f5edd6;
animation: lm2-pop 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lm2-modal::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 40px rgba(212,175,55,0.05);
}
.lm2-modal.is-boss {
box-shadow: 0 28px 72px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,200,87,0.45);
}
@keyframes lm2-pop {
from { transform: translateY(12px) scale(0.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.lm2-close {
position: absolute; top: 12px; right: 12px; z-index: 2;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 50%;
color: #f5edd6;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.lm2-close:hover { background: rgba(255,80,80,0.25); transform: rotate(90deg); }
.lm2-close i { font-size: 18px; }
/* Hero (compacto: solo título "Loot de X") */
.lm2-hero {
position: relative;
flex-shrink: 0;
padding: 18px 48px 14px;
text-align: center;
border-bottom: 1px solid rgba(212,175,55,0.12);
}
.lm2-hero-glow {
position: absolute;
top: -20px; left: 50%; transform: translateX(-50%);
width: 160px; height: 80px;
border-radius: 50%;
opacity: 0.35;
filter: blur(36px);
pointer-events: none;
background: radial-gradient(circle, rgba(184,132,255,0.55) 0%, transparent 70%);
}
.lm2-hero-glow.is-boss {
background: radial-gradient(circle, rgba(255,200,87,0.6) 0%, transparent 70%);
opacity: 0.5;
}
.lm2-hero-name {
position: relative;
margin: 0;
font-family: 'Cinzel', serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.02em;
color: #f5edd6;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
line-height: 1.25;
}
/* Body (scroll) */
.lm2-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
/* Re-habilita scroll vertical solo dentro del body, después del touch-action:none del overlay */
touch-action: pan-y;
padding: 16px 22px 14px;
}
.lm2-section { margin-bottom: 18px; }
.lm2-section:last-child { margin-bottom: 0; }
.lm2-section-title {
display: flex; align-items: center; gap: 7px;
margin-bottom: 10px;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(212,175,55,0.85);
}
.lm2-section-title i { font-size: 14px; }
/* Overlevel banner */
.lm2-overlevel-banner {
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 14px;
margin-bottom: 16px;
background: linear-gradient(180deg, rgba(225,80,90,0.12), rgba(225,80,90,0.04));
border: 1px solid rgba(225,80,90,0.4);
border-radius: 10px;
color: #f8838e;
font-size: 13px;
line-height: 1.4;
}
.lm2-overlevel-banner i {
font-size: 18px;
color: #f8838e;
flex-shrink: 0;
margin-top: 1px;
filter: drop-shadow(0 0 4px rgba(225,80,90,0.4));
}
.lm2-overlevel-banner span { color: rgba(245,237,214,0.85); }
/* Empty state */
.lm2-empty {
display: flex; align-items: center; gap: 10px;
padding: 18px 16px;
background: rgba(108,212,255,0.06);
border: 1px dashed rgba(108,212,255,0.28);
border-radius: 10px;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 14px;
color: rgba(245,237,214,0.75);
justify-content: center;
}
.lm2-empty i { font-size: 18px; color: #6cd4ff; }
/* Footer */
.lm2-footer {
flex-shrink: 0;
padding: 14px 22px 18px;
border-top: 1px solid rgba(212,175,55,0.12);
}
.lm2-close-btn {
width: 100%;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
color: rgba(245,237,214,0.85);
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lm2-close-btn:hover {
background: rgba(255,80,80,0.12);
border-color: rgba(255,80,80,0.4);
color: #f8838e;
}
.lm2-close-btn i { font-size: 14px; }
/* Polish: ajustes a .loot-row dentro del shell Obsidian
(no rompe el modal viejo porque está scopado a .lm2-modal) */
.lm2-modal .loot-rarity-title {
font-family: 'Cinzel', serif;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 8px 0 6px;
}
@media (max-width: 600px) {
.lm2-overlay { padding: 8px; }
.lm2-modal {
max-width: 100%;
max-height: calc(100vh - 16px);
border-radius: 14px;
}
.lm2-close { top: 8px; right: 8px; width: 32px; height: 32px; }
.lm2-close i { font-size: 16px; }
.lm2-hero {
padding: 14px 42px 10px;
}
.lm2-hero-glow { width: 120px; height: 60px; }
.lm2-hero-name { font-size: 15px; }
.lm2-section-title { font-size: 10px; margin-bottom: 8px; }
.lm2-section { margin-bottom: 14px; }
.lm2-body { padding: 12px 14px 10px; }
.lm2-footer { padding: 10px 14px 12px; }
.lm2-close-btn { padding: 9px 12px; font-size: 11px; }
.lm2-overlevel-banner {
padding: 10px 12px;
font-size: 12px;
margin-bottom: 12px;
}
.lm2-overlevel-banner i { font-size: 16px; }
}
@media (max-width: 400px) {
.lm2-hero-name { font-size: 14px; }
.lm2-body { padding: 10px 12px 8px; }
}
/* =====================================================================
2026-05-26: Skill Tree Node Modal — Obsidian Codex (.stnm-*)
Reemplaza al .st2-node-modal viejo en skill_tree.js openNodeModal.
La var --stnm-color viene inline desde JS según la rama (warrior/mage/etc).
===================================================================== */
.stnm-overlay {
position: fixed; inset: 0; z-index: 1100;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(ellipse at center, rgba(20,10,40,0.78) 0%, rgba(4,2,12,0.92) 100%);
backdrop-filter: blur(6px);
padding: 16px;
overflow: hidden;
touch-action: none;
}
.stnm-modal {
position: relative;
width: 100%;
max-width: 420px;
max-height: calc(100vh - 32px);
display: flex;
flex-direction: column;
overflow: hidden;
background:
radial-gradient(ellipse at top, rgba(80,50,140,0.22) 0%, transparent 60%),
linear-gradient(180deg, #15102a 0%, #0a0418 100%);
border: 1px solid rgba(212,175,55,0.22);
border-radius: 18px;
box-shadow: 0 28px 72px rgba(0,0,0,0.7), 0 0 0 1px var(--stnm-color, rgba(212,175,55,0.25)), inset 0 1px 0 rgba(255,255,255,0.04);
color: #f5edd6;
animation: stnm-pop 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.stnm-modal::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 40px rgba(212,175,55,0.05);
}
@keyframes stnm-pop {
from { transform: translateY(12px) scale(0.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.stnm-close {
position: absolute; top: 12px; right: 12px; z-index: 2;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 50%;
color: #f5edd6;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.stnm-close:hover { background: rgba(255,80,80,0.25); transform: rotate(90deg); }
.stnm-close i { font-size: 18px; }
/* Hero */
.stnm-hero {
position: relative;
flex-shrink: 0;
padding: 22px 24px 14px;
text-align: center;
border-bottom: 1px solid rgba(212,175,55,0.12);
}
.stnm-hero-glow {
position: absolute;
top: 10px; left: 50%; transform: translateX(-50%);
width: 160px; height: 100px;
border-radius: 50%;
opacity: 0.45;
filter: blur(40px);
pointer-events: none;
background: radial-gradient(circle, var(--stnm-color, rgba(184,132,255,0.55)) 0%, transparent 70%);
}
.stnm-icon-frame {
position: relative;
width: 76px; height: 76px;
margin: 0 auto 12px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.4));
border: 1px solid var(--stnm-color, rgba(212,175,55,0.35));
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 24px color-mix(in srgb, var(--stnm-color, #b884ff) 35%, transparent);
}
.stnm-icon {
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
color: var(--stnm-color, #f5edd6);
}
.stnm-icon i, .stnm-icon iconify-icon { font-size: 40px; }
.stnm-icon img, .stnm-icon svg { width: 100%; height: 100%; object-fit: contain; }
.stnm-name {
position: relative;
margin: 0 0 10px;
font-family: 'Cinzel', serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.02em;
color: #f5edd6;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
line-height: 1.2;
}
.stnm-pills {
display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.stnm-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(245,237,214,0.8);
}
.stnm-pill i { font-size: 11px; opacity: 0.8; }
.stnm-pill-branch {
background: color-mix(in srgb, var(--stnm-color, #b884ff) 18%, transparent);
border-color: color-mix(in srgb, var(--stnm-color, #b884ff) 50%, transparent);
color: var(--stnm-color, #b884ff);
}
.stnm-pill-max {
background: rgba(95,214,132,0.18);
border-color: rgba(95,214,132,0.5);
color: #8ee5a8;
}
/* Body */
.stnm-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
padding: 16px 22px 14px;
}
/* Pips */
.stnm-pips {
display: flex; gap: 8px; justify-content: center;
margin-bottom: 16px;
}
.stnm-pip {
width: 14px; height: 14px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
transition: all 0.2s;
}
.stnm-pip.is-on {
background: var(--stnm-color, #b884ff);
border-color: var(--stnm-color, #b884ff);
box-shadow: 0 0 8px color-mix(in srgb, var(--stnm-color, #b884ff) 60%, transparent);
}
/* Stats cards */
.stnm-stats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.stnm-stat-card {
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
display: flex; flex-direction: column; gap: 4px;
}
.stnm-stat-card.is-current {
background: rgba(95,214,132,0.06);
border-color: rgba(95,214,132,0.3);
}
.stnm-stat-card.is-next {
background: color-mix(in srgb, var(--stnm-color, #b884ff) 8%, transparent);
border-color: color-mix(in srgb, var(--stnm-color, #b884ff) 40%, transparent);
}
.stnm-stat-card.is-max {
flex-direction: row; align-items: center; gap: 10px;
background: rgba(255,200,87,0.08);
border-color: rgba(255,200,87,0.4);
color: #ffd56a;
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.stnm-stat-card.is-max i { font-size: 20px; }
.stnm-tag {
display: inline-block;
padding: 2px 8px;
font-family: 'Cinzel', serif;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 99px;
width: fit-content;
}
.stnm-stat-card.is-current .stnm-tag {
background: rgba(95,214,132,0.18);
color: #8ee5a8;
border: 1px solid rgba(95,214,132,0.4);
}
.stnm-stat-card.is-next .stnm-tag {
background: color-mix(in srgb, var(--stnm-color, #b884ff) 22%, transparent);
color: var(--stnm-color, #c2a8ff);
border: 1px solid color-mix(in srgb, var(--stnm-color, #b884ff) 50%, transparent);
}
.stnm-stat-text {
font-size: 13.5px;
color: rgba(245,237,214,0.92);
line-height: 1.45;
}
.stnm-stat-text b {
color: #ffd56a;
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
}
/* Prereq */
.stnm-prereq {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 12px;
border-radius: 10px;
font-size: 12.5px;
margin-top: 4px;
}
.stnm-prereq.is-met {
background: rgba(95,214,132,0.06);
border: 1px solid rgba(95,214,132,0.3);
color: rgba(245,237,214,0.85);
}
.stnm-prereq.is-missing {
background: rgba(225,80,90,0.06);
border: 1px solid rgba(225,80,90,0.3);
color: #f8838e;
}
.stnm-prereq i {
font-size: 18px; flex-shrink: 0; margin-top: 1px;
}
.stnm-prereq.is-met i { color: #5fd684; }
.stnm-prereq.is-missing i { color: #f8838e; }
.stnm-prereq-label {
font-family: 'Cinzel', serif;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245,237,214,0.55);
margin-bottom: 2px;
}
.stnm-prereq-text { line-height: 1.35; }
.stnm-prereq-have {
font-family: 'JetBrains Mono', monospace;
color: rgba(245,237,214,0.6);
}
/* Footer */
.stnm-footer {
flex-shrink: 0;
padding: 14px 22px 18px;
border-top: 1px solid rgba(212,175,55,0.12);
}
.stnm-btn {
width: 100%;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
color: rgba(245,237,214,0.6);
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: not-allowed;
transition: all 0.2s;
}
.stnm-btn i { font-size: 16px; }
.stnm-btn.is-primary {
background: linear-gradient(180deg, color-mix(in srgb, var(--stnm-color, #b884ff) 28%, transparent), color-mix(in srgb, var(--stnm-color, #b884ff) 14%, transparent));
border-color: var(--stnm-color, #b884ff);
color: #f5edd6;
box-shadow: 0 0 16px color-mix(in srgb, var(--stnm-color, #b884ff) 25%, transparent);
cursor: pointer;
}
.stnm-btn.is-primary:hover:not(:disabled) {
background: linear-gradient(180deg, color-mix(in srgb, var(--stnm-color, #b884ff) 40%, transparent), color-mix(in srgb, var(--stnm-color, #b884ff) 20%, transparent));
transform: translateY(-1px);
}
.stnm-btn.is-maxed {
background: rgba(255,200,87,0.12);
border-color: rgba(255,200,87,0.4);
color: #ffd56a;
}
.stnm-btn.is-locked {
background: rgba(225,80,90,0.08);
border-color: rgba(225,80,90,0.35);
color: #f8838e;
}
.stnm-btn:disabled { opacity: 0.7; }
@media (max-width: 600px) {
.stnm-overlay { padding: 8px; }
.stnm-modal {
max-width: 100%;
max-height: calc(100vh - 16px);
border-radius: 14px;
}
.stnm-close { top: 8px; right: 8px; width: 32px; height: 32px; }
.stnm-close i { font-size: 16px; }
.stnm-hero { padding: 18px 18px 12px; }
.stnm-icon-frame { width: 64px; height: 64px; margin-bottom: 10px; }
.stnm-icon { width: 48px; height: 48px; }
.stnm-icon i, .stnm-icon iconify-icon { font-size: 32px; }
.stnm-name { font-size: 17px; }
.stnm-pills { gap: 5px; }
.stnm-pill { padding: 3px 8px; font-size: 10px; }
.stnm-body { padding: 12px 16px 10px; }
.stnm-footer { padding: 12px 16px 14px; }
.stnm-btn { padding: 10px 14px; font-size: 11px; }
.stnm-stat-text { font-size: 12.5px; }
}
@media (max-width: 400px) {
.stnm-name { font-size: 15px; }
.stnm-icon-frame { width: 56px; height: 56px; }
.stnm-icon { width: 40px; height: 40px; }
.stnm-icon i, .stnm-icon iconify-icon { font-size: 26px; }
}
/* =====================================================================
2026-05-26: Top Bar V2 — Obsidian Codex (.tbv2)
Override del .top-bar legacy. Para revertir, en game.js cambiar
`_renderHeader(c)` por `_renderHeaderLegacy(c)`.
===================================================================== */
.top-bar.tbv2 {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 18px;
background:
radial-gradient(ellipse at top, rgba(80,50,140,0.18) 0%, transparent 60%),
linear-gradient(180deg, #15102a 0%, #0d0620 100%);
border-bottom: 1px solid rgba(212,175,55,0.28);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
position: relative;
}
/* 2026-05-26: gradient decorativo sobre el border para reforzar el centro */
.top-bar.tbv2::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 1px;
background: linear-gradient(90deg, rgba(212,175,55,0.15) 0%, rgba(212,175,55,0.55) 50%, rgba(212,175,55,0.15) 100%);
pointer-events: none;
}
/* 2026-05-26: en desktop con sidebar V3, el sidebar ocupa grid-row 1/-1 (sube
sobre el header). El header empieza en columna 2 (después del rail). */
@media (min-width: 1101px) {
.game-shell.sv3-active .top-bar.tbv2 {
grid-column: 2 / -1;
}
}
/* Brand — centrado absoluto en el header en desktop (cuando sidebar V3 está
por arriba, el header empieza en col 2 y queremos el logo centrado en ese
área). En mobile vuelve a su lugar normal en el flex. */
.tbv2-brand {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-flex; align-items: center;
height: 44px;
padding: 0 4px;
cursor: pointer;
z-index: 1;
}
@media (max-width: 1100px) {
.tbv2-brand {
position: relative;
left: auto; top: auto;
transform: none;
height: 40px;
flex-shrink: 0;
}
}
.tbv2-brand-logo {
height: 38px;
width: auto;
display: block;
filter: drop-shadow(0 2px 8px rgba(212,175,55,0.35));
transition: transform 0.2s, filter 0.2s;
}
.tbv2-brand:hover .tbv2-brand-logo {
transform: scale(1.04);
filter: drop-shadow(0 4px 12px rgba(212,175,55,0.55));
}
/* Resource pills */
.tbv2-resources {
display: flex;
align-items: center;
gap: 8px;
}
.tbv2-res {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 700;
color: #f5edd6;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
cursor: default;
}
.tbv2-res:hover { background: rgba(0,0,0,0.55); transform: translateY(-1px); }
.tbv2-res i { font-size: 15px; line-height: 1; }
.tbv2-res-val { line-height: 1; }
.tbv2-res-gold {
border-color: rgba(212,175,55,0.32);
box-shadow: inset 0 1px 0 rgba(255,210,74,0.08);
}
.tbv2-res-gold i { color: #ffc857; filter: drop-shadow(0 0 4px rgba(255,200,87,0.45)); }
.tbv2-res-gems {
border-color: rgba(184,132,255,0.32);
box-shadow: inset 0 1px 0 rgba(184,132,255,0.08);
}
.tbv2-res-gems i { color: #c2a8ff; filter: drop-shadow(0 0 4px rgba(184,132,255,0.45)); }
.tbv2-res-eldor {
border-color: rgba(108,212,255,0.32);
box-shadow: inset 0 1px 0 rgba(108,212,255,0.08);
}
.tbv2-res-eldor i { color: #6cd4ff; filter: drop-shadow(0 0 4px rgba(108,212,255,0.45)); }
.tbv2-spacer { flex: 1 1 auto; }
/* Player block */
.tbv2-player {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 5px 12px 5px 5px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(212,175,55,0.22);
border-radius: 999px;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
max-width: 280px;
}
.tbv2-player:hover {
background: rgba(0,0,0,0.55);
border-color: rgba(212,175,55,0.45);
transform: translateY(-1px);
}
.tbv2-avatar {
position: relative;
width: 38px; height: 38px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.4));
border: 1px solid rgba(212,175,55,0.45);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.tbv2-avatar .race-portrait-img {
width: 100%; height: 100%;
background-size: cover;
background-position: center;
border-radius: inherit;
}
.tbv2-avatar iconify-icon,
.tbv2-avatar i { font-size: 24px; color: rgba(245,237,214,0.85); }
.tbv2-vip {
position: absolute;
bottom: -2px; right: -2px;
width: 16px; height: 16px;
background: linear-gradient(180deg, #ffd56a, #c89c3a);
border: 1.5px solid #0d0620;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 8px;
color: #0d0620;
}
.tbv2-player-info { min-width: 0; }
.tbv2-player-name {
font-family: 'Cinzel', serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: #f5edd6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.15;
}
.tbv2-player-meta {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(212,175,55,0.75);
margin-top: 2px;
}
/* Actions */
.tbv2-actions {
display: flex;
align-items: center;
gap: 6px;
}
.tbv2-btn {
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
color: rgba(245,237,214,0.8);
font-size: 15px;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
position: relative;
}
.tbv2-btn:hover {
background: rgba(212,175,55,0.12);
border-color: rgba(212,175,55,0.4);
color: #ffd56a;
transform: translateY(-1px);
}
.tbv2-btn i { line-height: 1; }
.tbv2-btn.ts-lang {
width: auto;
padding: 0 10px;
gap: 5px;
}
.tbv2-btn.ts-lang .ts-lang-code {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
}
/* 2026-06-02o: estilo is-hot para botón "Próximos Cambios" — pill dorado con glow + dot rojo */
.tbv2-btn.is-hot,
.top-action-btn.is-hot {
width: auto !important;
padding: 0 12px;
gap: 6px;
background: linear-gradient(135deg, rgba(255,200,87,0.22), rgba(232,90,106,0.18)) !important;
border-color: rgba(255,200,87,0.65) !important;
color: #ffe9a8 !important;
box-shadow: 0 0 14px rgba(255,200,87,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
animation: hot-pulse 2.4s ease-in-out infinite;
font-weight: 700;
}
.tbv2-btn.is-hot:hover,
.top-action-btn.is-hot:hover {
background: linear-gradient(135deg, rgba(255,200,87,0.40), rgba(232,90,106,0.30)) !important;
border-color: rgba(255,200,87,0.9) !important;
box-shadow: 0 0 22px rgba(255,200,87,0.55), inset 0 1px 0 rgba(255,255,255,0.10);
transform: translateY(-1px);
}
.tbv2-btn.is-hot i,
.top-action-btn.is-hot i { color: #ffc857; filter: drop-shadow(0 0 4px rgba(255,200,87,0.6)); }
.tbv2-hot-label {
font-family: 'Cinzel', serif;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
color: inherit;
}
.tbv2-hot-dot {
position: absolute;
top: 4px; right: 4px;
width: 9px; height: 9px;
background: #ff3a4a;
border-radius: 50%;
border: 1.5px solid #1a0410;
box-shadow: 0 0 8px rgba(255,58,74,0.85);
animation: hot-dot-blink 1.4s ease-in-out infinite;
}
@keyframes hot-pulse {
0%, 100% { box-shadow: 0 0 14px rgba(255,200,87,0.32), inset 0 1px 0 rgba(255,255,255,0.08); }
50% { box-shadow: 0 0 22px rgba(255,200,87,0.55), inset 0 1px 0 rgba(255,255,255,0.12); }
}
@keyframes hot-dot-blink {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
}
/* Mobile: ocultar label pero mantener dot + glow para no ocupar espacio en headers chicos */
@media (max-width: 600px) {
.tbv2-btn.is-hot,
.top-action-btn.is-hot {
width: 36px !important;
padding: 0;
gap: 0;
}
.tbv2-hot-label { display: none; }
}
/* 2026-06-04: estilo is-plague para botón "Peste" — paleta crimson/sickly-green */
.tbv2-btn.is-plague,
.top-action-btn.is-plague {
width: auto !important;
padding: 0 12px;
gap: 6px;
background: linear-gradient(135deg, rgba(180,30,50,0.32), rgba(95,180,80,0.20)) !important;
border: 1.5px solid rgba(255,90,110,0.7) !important;
color: #ff9aa5 !important;
box-shadow: 0 0 14px rgba(180,30,50,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
animation: plague-pulse 2.6s ease-in-out infinite;
position: relative;
font-weight: 700;
}
.tbv2-btn.is-plague:hover,
.top-action-btn.is-plague:hover {
background: linear-gradient(135deg, rgba(180,30,50,0.45), rgba(95,180,80,0.32)) !important;
border-color: rgba(255,90,110,0.95) !important;
box-shadow: 0 0 22px rgba(180,30,50,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
transform: translateY(-1px);
}
.tbv2-btn.is-plague i,
.top-action-btn.is-plague i {
color: #5fd684;
filter: drop-shadow(0 0 5px rgba(95,214,132,0.65));
}
/* dot verde tóxico en lugar de rojo */
.tbv2-btn.is-plague .tbv2-hot-dot,
.top-action-btn.is-plague .tbv2-hot-dot {
background: #5fd684;
box-shadow: 0 0 8px rgba(95,214,132,0.85);
}
@keyframes plague-pulse {
0%, 100% { box-shadow: 0 0 14px rgba(180,30,50,0.32), inset 0 1px 0 rgba(255,255,255,0.08); }
50% { box-shadow: 0 0 22px rgba(95,180,80,0.50), inset 0 1px 0 rgba(255,255,255,0.12); }
}
@media (max-width: 600px) {
.tbv2-btn.is-plague,
.top-action-btn.is-plague {
width: 36px !important;
padding: 0;
gap: 0;
}
}
.tbv2-btn.tbv2-btn-logout:hover {
background: rgba(225,80,90,0.15);
border-color: rgba(225,80,90,0.5);
color: #f8838e;
}
.tbv2-cta {
display: inline-flex;
align-items: center;
gap: 7px;
height: 36px;
padding: 0 14px;
background: linear-gradient(180deg, rgba(212,175,55,0.22), rgba(212,175,55,0.10));
border: 1px solid rgba(212,175,55,0.5);
border-radius: 10px;
color: #ffd56a;
font-family: 'Cinzel', serif;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 0 12px rgba(212,175,55,0.15);
}
.tbv2-cta:hover {
background: linear-gradient(180deg, rgba(212,175,55,0.32), rgba(212,175,55,0.16));
border-color: rgba(212,175,55,0.7);
transform: translateY(-1px);
box-shadow: 0 0 20px rgba(212,175,55,0.3);
}
.tbv2-cta i { font-size: 14px; }
/* Mobile responsive */
@media (max-width: 980px) {
.top-bar.tbv2 {
padding: 8px 12px;
gap: 10px;
}
.tbv2-spacer { flex: 0 0 0; }
.tbv2-player { display: none; }
.tbv2-brand-logo { height: 32px; }
.tbv2-resources { display: none; }
.tbv2-btn { width: 34px; height: 34px; font-size: 14px; }
.tbv2-actions { gap: 4px; }
}
@media (max-width: 480px) {
.top-bar.tbv2 { padding: 6px 10px; gap: 8px; }
.tbv2-brand-logo { height: 28px; }
.tbv2-btn { width: 32px; height: 32px; font-size: 13px; }
}
/* =====================================================================
2026-05-26: Botón "Online" en header V2 + modal de jugadores activos.
===================================================================== */
.tbv2-online {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 12px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(95,214,132,0.35);
border-radius: 10px;
color: #f5edd6;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s;
}
.tbv2-online:hover {
background: rgba(95,214,132,0.12);
border-color: rgba(95,214,132,0.55);
transform: translateY(-1px);
}
.tbv2-online-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #5fd684;
box-shadow: 0 0 6px #5fd684, 0 0 12px rgba(95,214,132,0.5);
animation: tbv2-online-pulse 2s ease-in-out infinite;
}
@keyframes tbv2-online-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 6px #5fd684, 0 0 12px rgba(95,214,132,0.5); }
50% { opacity: 0.55; box-shadow: 0 0 4px #5fd684, 0 0 6px rgba(95,214,132,0.25); }
}
.tbv2-online-lbl { color: rgba(245,237,214,0.85); }
.tbv2-online-count {
font-family: 'JetBrains Mono', monospace;
color: #8ee5a8;
font-weight: 800;
min-width: 18px;
text-align: right;
}
/* ─── Online Modal ─────────────────────────────────────────────────── */
.onlm-overlay {
position: fixed; inset: 0; z-index: 1100;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(ellipse at center, rgba(20,10,40,0.78) 0%, rgba(4,2,12,0.92) 100%);
backdrop-filter: blur(6px);
padding: 16px;
overflow: hidden;
touch-action: none;
}
.onlm-modal {
position: relative;
width: 100%;
max-width: 720px;
max-height: 70vh;
display: flex;
flex-direction: column;
overflow: hidden;
background:
radial-gradient(ellipse at top, rgba(80,50,140,0.22) 0%, transparent 60%),
linear-gradient(180deg, #15102a 0%, #0a0418 100%);
border: 1px solid rgba(95,214,132,0.35);
border-radius: 18px;
box-shadow: 0 28px 72px rgba(0,0,0,0.7), 0 0 0 1px rgba(95,214,132,0.2);
color: #f5edd6;
animation: onlm-pop 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes onlm-pop {
from { transform: translateY(12px) scale(0.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.onlm-close {
position: absolute; top: 12px; right: 12px; z-index: 2;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 50%;
color: #f5edd6;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.onlm-close:hover { background: rgba(255,80,80,0.25); transform: rotate(90deg); }
.onlm-close i { font-size: 18px; }
/* Hero compacto inline (icono + título + sub en una fila) */
.onlm-hero {
flex-shrink: 0;
padding: 12px 56px 12px 18px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid rgba(95,214,132,0.18);
}
.onlm-icon {
width: 34px; height: 34px;
flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(180deg, rgba(95,214,132,0.18), rgba(95,214,132,0.04));
border: 1px solid rgba(95,214,132,0.5);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 14px rgba(95,214,132,0.25);
}
.onlm-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: #5fd684;
box-shadow: 0 0 8px #5fd684, 0 0 14px rgba(95,214,132,0.55);
animation: tbv2-online-pulse 1.8s ease-in-out infinite;
}
.onlm-title {
margin: 0;
font-family: 'Cinzel', serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.04em;
color: #f5edd6;
line-height: 1.15;
}
.onlm-sub {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: rgba(245,237,214,0.7);
letter-spacing: 0.04em;
margin-top: 2px;
}
.onlm-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
padding: 8px 12px 12px;
/* Grid 2-col en desktop para mostrar más jugadores a la vez */
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px 8px;
align-content: start;
}
.onlm-row {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
border-radius: 8px;
transition: background 0.15s;
position: relative;
min-width: 0;
}
.onlm-row:hover { background: rgba(255,255,255,0.04); }
.onlm-row-avatar {
position: relative;
width: 28px; height: 28px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.4));
border: 1px solid rgba(255,255,255,0.1);
color: rgba(245,237,214,0.8);
flex-shrink: 0;
overflow: visible;
}
.onlm-row-avatar.r-human { color: #c4b89e; border-color: rgba(196,184,158,0.4); }
.onlm-row-avatar.r-elf { color: #8ee5a8; border-color: rgba(95,214,132,0.4); }
.onlm-row-avatar.r-ogre { color: #d77b5c; border-color: rgba(215,123,92,0.4); }
.onlm-row-avatar.r-fae { color: #f3a8e0; border-color: rgba(243,168,224,0.4); }
.onlm-row-avatar.r-drakkar { color: #ff8a8c; border-color: rgba(255,138,140,0.4); }
.onlm-row-avatar.r-undead { color: #8be3ff; border-color: rgba(139,227,255,0.4); }
.onlm-row-avatar.is-vip {
border-color: rgba(255,200,87,0.7);
box-shadow: 0 0 8px rgba(255,200,87,0.45);
}
.onlm-row-avatar i { font-size: 13px; }
.onlm-row-avatar-img {
width: 100%; height: 100%;
border-radius: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.onlm-row-vip {
position: absolute;
bottom: -3px; right: -3px;
width: 14px; height: 14px;
border-radius: 50%;
background: linear-gradient(180deg, #ffd56a, #c89c3a);
border: 1.5px solid #0d0620;
display: flex; align-items: center; justify-content: center;
font-size: 7px;
color: #2a1d05;
box-shadow: 0 0 6px rgba(255,200,87,0.55);
}
.onlm-row.is-vip .onlm-row-name.is-vip { color: #ffd56a; }
.onlm-row-info { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.onlm-row-name {
font-weight: 700;
color: #f5edd6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12.5px;
line-height: 1;
}
.onlm-row-guild {
color: #8be3ff;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
}
.onlm-row-meta {
font-size: 10.5px;
color: rgba(245,237,214,0.55);
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.02em;
flex-shrink: 0;
margin-left: auto;
padding-right: 4px;
}
.onlm-row-pulse {
width: 6px; height: 6px;
border-radius: 50%;
background: #5fd684;
box-shadow: 0 0 5px #5fd684;
flex-shrink: 0;
animation: tbv2-online-pulse 2s ease-in-out infinite;
}
.onlm-empty {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 40px 16px;
color: rgba(245,237,214,0.7);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 14px;
text-align: center;
}
.onlm-empty i { font-size: 32px; color: rgba(95,214,132,0.45); }
@media (max-width: 600px) {
.onlm-modal { max-width: 95vw; max-height: 80vh; border-radius: 14px; }
.onlm-hero { padding: 10px 50px 10px 14px; gap: 10px; }
.onlm-icon { width: 30px; height: 30px; }
.onlm-dot { width: 8px; height: 8px; }
.onlm-title { font-size: 14px; }
.onlm-sub { font-size: 10.5px; }
.onlm-body {
padding: 6px 10px 10px;
/* En mobile 1 columna — pero seguimos compactos */
grid-template-columns: 1fr;
gap: 1px;
}
.onlm-row { padding: 5px 8px; }
.onlm-row-avatar { width: 24px; height: 24px; }
.onlm-row-avatar i { font-size: 12px; }
.onlm-row-name { font-size: 12px; }
.onlm-row-meta { font-size: 10px; }
}