/* =====================================================================
Rebelion · "Cinemática + Códice antiguo" (2026-10-02)
Capa visual final del theme odin. Se carga después de atlas.css.
Para volver al diseño anterior basta quitar el de layout.blade.php.
===================================================================== */
/* Override Cinzel, Cinzel Decorative and Norse with Marcellus font */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: local('Marcellus'), url('https://fonts.gstatic.com/s/marcellus/v13/w8gM3_XYpo8Y5LTo6HQq.woff2') format('woff2');
}
@font-face {
font-family: 'Cinzel Decorative';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: local('Marcellus'), url('https://fonts.gstatic.com/s/marcellus/v13/w8gM3_XYpo8Y5LTo6HQq.woff2') format('woff2');
}
@font-face {
font-family: 'Norse';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: local('Marcellus'), url('https://fonts.gstatic.com/s/marcellus/v13/w8gM3_XYpo8Y5LTo6HQq.woff2') format('woff2');
}
/* ── 1. Paleta ─────────────────────────────────────────────────────── */
:root {
--cx-obsidian: #0E0A07;
--cx-ink: #17110C;
--cx-parchment: #2A1F15;
--cx-bronze: #9C6B3A;
--cx-bronze-dim: #6E4E2C;
--cx-gold: #D9A441;
--cx-gold-pale: #F3D58A;
--cx-seal: #8E2A22;
--cx-live: #6FD3A2;
--cx-ivory: #EADFC8;
--cx-ash: #A8977C;
--cx-line: rgba(156, 107, 58, .42);
--cx-display: "Marcellus", "Marcellus", Georgia, serif;
--cx-ornate: "Marcellus", "Marcellus", Georgia, serif;
--cx-text: "Spectral", Georgia, serif;
--cx-corner: var(--cx-gold);
/* re-map the atlas tokens so every existing component follows */
--atlas-ink: var(--cx-obsidian);
--atlas-deep: #090605;
--atlas-panel: var(--cx-ink);
--atlas-panel-soft: var(--cx-parchment);
--atlas-line: var(--cx-line);
--atlas-paper: var(--cx-ivory);
--atlas-muted: var(--cx-ash);
--atlas-copper: var(--cx-gold);
--atlas-jade: #E2B65C;
--atlas-sand: var(--cx-gold-pale);
--atlas-blood: var(--cx-seal);
}
/* ── 2. Tipografía ─────────────────────────────────────────────────── */
/* atlas.css forces one font on every element; keep that rule but make it read a variable,
so display elements can switch to Marcellus by setting --cx-font. */
body.odin-body *:not(i):not(img):not(svg):not([class^="fa"]):not([class*=" fa-"]):not(.fas):not(.far):not(.fab):not(.bi):not([class*="material-symbols"]) {
font-family: var(--cx-font, "Spectral"), Georgia, serif !important;
}
body.odin-body { --cx-font: "Spectral"; font-size: 16px; color: var(--cx-ivory); }
.odin-body h1, .odin-body h2, .odin-body h3, .odin-body h4, .odin-body h5, .odin-body h6,
.odin-nav, .odin-tools, .odin-mobile-tools, .odin-drop__btn, .odin-drop__list small,
.atlas-eyebrow, .atlas-button, .rune, .odin-link, .odin-focus__tab, .odin-sigil,
.atlas-pulse__label, .atlas-pulse article > strong, .atlas-hero__index,
.atlas-rates__copy, .atlas-rates__sigil, .odin-agenda__clock, .odin-agenda__more, .odin-agenda__live,
.odin-systems__meta, .odin-systems__more, .odin-join__card small, .odin-join__card strong,
.odin-ledger h3, .odin-who, .odin-chat__who span, .odin-unique strong, .odin-item__name,
.odin-legends__rank, .odin-legends__name a, .odin-legends__points, .odin-legends__more,
.odin-title__kicker, .odin-foot h2, .odin-foot__base, th, label, button, .btn, .badge,
.odin-rank__row, .odin-rank__pts, .odin-drops__check, .odin-drops__pager,
.cx-hero__chapter, .cx-podium, .odin-logo span {
--cx-font: "Marcellus";
}
.atlas-eyebrow::before, .cx-hero__chapter, .cx-podium__numeral { --cx-font: "Marcellus"; }
.odin-body h1, .odin-body h2 { color: #F3E6C8; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.odin-body h3 { letter-spacing: .06em; }
.odin-body p { color: #CDBF9F; }
/* ── 3. Fondo general: obsidiana con grano de pergamino ────────────── */
body.odin-body {
background-color: var(--cx-obsidian) !important;
background-image:
radial-gradient(ellipse at 50% -10%, rgba(120, 72, 28, .30), transparent 52%),
radial-gradient(ellipse at 100% 60%, rgba(142, 42, 34, .07), transparent 40%),
radial-gradient(ellipse at 0% 85%, rgba(217, 164, 65, .05), transparent 40%) !important;
}
body.odin-body::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .7 0 0 0 0 .45 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
}
/* ── 4. Marco de códice (esquinas doradas) ─────────────────────────── */
.odin-ledger, .atlas-pulse, .odin-agenda__box, .atlas-focus-panel, .odin-legends__board,
.atlas-rates, .atlas-join, .odin-drops__board, .odin-cms-content > .card, .odin-cms-layout aside .card {
border: 1px solid var(--cx-line) !important;
border-radius: 2px !important;
background:
linear-gradient(var(--cx-corner), var(--cx-corner)) left top / 18px 2px no-repeat,
linear-gradient(var(--cx-corner), var(--cx-corner)) left top / 2px 18px no-repeat,
linear-gradient(var(--cx-corner), var(--cx-corner)) right top / 18px 2px no-repeat,
linear-gradient(var(--cx-corner), var(--cx-corner)) right top / 2px 18px no-repeat,
linear-gradient(var(--cx-corner), var(--cx-corner)) left bottom / 18px 2px no-repeat,
linear-gradient(var(--cx-corner), var(--cx-corner)) left bottom / 2px 18px no-repeat,
linear-gradient(var(--cx-corner), var(--cx-corner)) right bottom / 18px 2px no-repeat,
linear-gradient(var(--cx-corner), var(--cx-corner)) right bottom / 2px 18px no-repeat,
linear-gradient(180deg, rgba(30, 21, 13, .94), rgba(18, 13, 9, .94)) !important;
background-origin: border-box !important;
box-shadow: 0 18px 40px rgba(0, 0, 0, .35) !important;
}
/* ── 5. Encabezados como capítulos ─────────────────────────────────── */
body.odin-body { counter-reset: cx-chapter; }
.atlas-section__head,
.odin-world__head {
counter-increment: cx-chapter;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
margin: 0 auto 36px !important;
max-width: 820px !important;
width: 100% !important;
position: relative !important;
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* 1. Title on TOP with golden resplandor */
.atlas-section__head h2,
.odin-world__head h2,
.cx-fort__eyebrow {
order: 1 !important;
font-family: "Marcellus", serif !important;
font-size: clamp(30px, 3.8vw, 46px) !important;
line-height: 1.15 !important;
color: #F3E6C8 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
margin: 0 auto 6px !important;
text-align: center !important;
text-shadow: 0 2px 26px rgba(231, 181, 82, .45), 0 0 54px rgba(231, 181, 82, .25), 0 0 80px rgba(231, 181, 82, .15) !important;
}
.atlas-section__head h2::after,
.odin-world__head h2::after {
display: none !important;
content: none !important;
}
.odin-world__head h2 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 14px !important;
}
.odin-world__head .cx-live-pill {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 14px !important;
font-family: "Inter", system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
line-height: 1 !important;
white-space: nowrap !important;
vertical-align: middle !important;
border: 1px solid rgba(111, 211, 162, .55) !important;
border-radius: 20px !important;
background: rgba(111, 211, 162, .12) !important;
color: #6FD3A2 !important;
box-shadow: 0 0 14px rgba(111, 211, 162, .25), inset 0 0 8px rgba(111, 211, 162, .1) !important;
text-shadow: none !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
}
.odin-world__head .cx-live-pill i {
display: inline-block !important;
position: relative !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #6FD3A2 !important;
box-shadow: 0 0 8px #6FD3A2 !important;
flex: none !important;
margin: 0 !important;
}
.odin-world__head .cx-live-pill i::after {
content: "" !important;
position: absolute !important;
inset: -4px !important;
border: 1px solid #6FD3A2 !important;
border-radius: 50% !important;
animation: cx-foot-ping 1.8s ease-out infinite !important;
}
.odin-world__head .cx-live-pill.is-off {
border-color: rgba(168, 151, 124, .4) !important;
background: rgba(168, 151, 124, .1) !important;
color: #A8977C !important;
box-shadow: none !important;
}
.odin-world__head .cx-live-pill.is-off i {
background: #8E2A22 !important;
box-shadow: none !important;
}
.odin-world__head .cx-live-pill.is-off i::after {
display: none !important;
}
/* Hero elements order: Logo -> Eyebrow -> Title -> Lead -> Actions */
.atlas-hero__brandlockup { order: 1 !important; }
.cx-hero-eyebrow { order: 2 !important; }
.atlas-hero h1, #atlas-hero-title {
order: 3 !important;
font-family: "Marcellus", serif !important;
color: #F3E6C8 !important;
text-transform: uppercase !important;
text-shadow: 0 2px 26px rgba(231, 181, 82, .45), 0 0 54px rgba(231, 181, 82, .25), 0 0 80px rgba(231, 181, 82, .15) !important;
}
.atlas-hero__lead { order: 4 !important; }
.atlas-hero__actions, .cx-hero-actions { order: 5 !important; }
/* 2. Yellow eyebrow BELOW main title */
.atlas-section__head .atlas-eyebrow,
.odin-world__head .atlas-eyebrow {
order: 2 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
color: #E7B552 !important;
font-family: "Marcellus", serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: .24em !important;
text-transform: uppercase !important;
margin: 4px auto 0 !important;
text-shadow: 0 0 14px rgba(231, 181, 82, .32) !important;
}
.atlas-eyebrow > span { width: 32px !important; height: 1px; background: var(--cx-bronze) !important; }
.atlas-section__head .atlas-eyebrow::before,
.odin-world__head .atlas-eyebrow::before {
content: none !important;
display: none !important;
}
/* 3. Ornamental divider */
.atlas-section__divider {
order: 3 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: min(560px, 92%) !important;
height: 14px !important;
margin: 14px auto 14px !important;
background: transparent !important;
opacity: .85;
}
.atlas-section__divider:empty {
background: url("../images/ele/divider.png") center / 100% 100% no-repeat !important;
}
.atlas-section__divider img {
display: block !important;
max-width: 100% !important;
height: auto !important;
object-fit: contain !important;
}
/* 4. Subtitle paragraph */
.atlas-section__head > p,
.odin-world__head > p {
order: 4 !important;
font-size: 15px !important;
color: #B8A688 !important;
line-height: 1.6 !important;
max-width: 620px !important;
margin: 0 auto !important;
text-align: center !important;
}
.odin-world__head { border-bottom: 0 !important; }
/* ── 6. Botones ────────────────────────────────────────────────────── */
.atlas-button { min-height: 64px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .18em !important; }
.atlas-button--primary, .atlas-button--primary::before { background: linear-gradient(180deg, #F0C766 0%, #D9A441 55%, #B7832B 100%) !important; }
.atlas-button--primary::after { border-color: rgba(26, 18, 9, .28) !important; }
.atlas-button--primary, .atlas-button--primary *, .atlas-button--primary .atlas-button__icon { color: #1A1209 !important; }
.atlas-button--primary:hover, .atlas-button--primary:hover::before { background: linear-gradient(180deg, #FFDD86 0%, #E7B552 55%, #C48F33 100%) !important; }
.atlas-button--primary:hover .atlas-button__icon { color: #1A1209 !important; filter: none !important; }
.atlas-button--quiet { background: linear-gradient(135deg, #C79A4E, #6E4E2C 50%, #C79A4E) !important; }
.atlas-button--quiet, .atlas-button--quiet * { color: var(--cx-gold-pale) !important; }
.rune.rune--tiny, .odin-tools .rune--tiny { background: linear-gradient(180deg, #F0C766, #D9A441 55%, #B7832B) !important; border: 1px solid var(--cx-gold-pale) !important; color: #1A1209 !important; border-radius: 0 !important; letter-spacing: .16em !important; }
.rune.rune--tiny * { color: #1A1209 !important; }
/* ── 7. Cabecera ───────────────────────────────────────────────────── */
.odin-bar { background: linear-gradient(180deg, rgba(10, 7, 5, .96), rgba(14, 10, 7, .82)) !important; border-bottom: 1px solid var(--cx-line) !important; backdrop-filter: blur(8px); }
.odin-nav > a, .odin-drop__btn { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .2em !important; color: #DCCFB4 !important; }
.odin-nav > a:hover, .odin-nav > a.active, .odin-drop__btn:hover, .odin-drop__btn[aria-expanded="true"] { color: var(--cx-gold-pale) !important; border-bottom-color: var(--cx-gold) !important; }
.odin-drop__list { border: 1px solid var(--cx-line) !important; background: rgba(17, 12, 8, .97) !important; }
/* ── 8. Cifras, nombres y textos de datos ──────────────────────────── */
.atlas-pulse article > strong, .odin-legends__points, .odin-agenda__unit b { color: var(--cx-gold-pale) !important; font-weight: 700 !important; }
.atlas-pulse__label { color: var(--cx-ash) !important; letter-spacing: .2em !important; font-size: 11px !important; }
.atlas-pulse__label i, .odin-live, .odin-global-chat__status i { background: var(--cx-live) !important; box-shadow: 0 0 10px var(--cx-live) !important; }
.odin-ledger h3 { color: var(--cx-gold-pale) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .2em !important; border-bottom-color: var(--cx-line) !important; }
.odin-who, .odin-chat__who span, .odin-unique strong, .odin-legends__name a { color: var(--cx-ivory) !important; font-weight: 700 !important; letter-spacing: .02em; }
.odin-kill > em { color: var(--cx-gold) !important; font-style: italic; }
.odin-chat__msg { color: #DCCFB4 !important; font-size: 15px !important; }
.odin-avatar { border-color: var(--cx-bronze) !important; border-radius: 50% !important; overflow: hidden !important; object-fit: cover !important; }
.odin-unique__img { border-color: var(--cx-gold) !important; border-radius: 50% !important; overflow: hidden !important; object-fit: cover !important; box-shadow: 0 0 18px rgba(217, 164, 65, .3) !important; }
.odin-ledger li, .odin-legends__list li { border-bottom-color: rgba(156, 107, 58, .18) !important; }
/* ── 9. Barra del mundo (atlas-pulse) como panel de códice ─────────── */
.atlas-pulse { position: relative; z-index: 3; margin-top: -54px !important; padding: 0 8px; backdrop-filter: blur(6px); }
.atlas-pulse article:first-child { padding-left: 25px !important; }
.atlas-pulse article { border-right-color: rgba(156, 107, 58, .25) !important; }
.atlas-pulse article > strong { font-size: 28px !important; }
/* ── 10. Portada cinemática ────────────────────────────────────────── */
.atlas-hero { min-height: min(94vh, 920px) !important; }
.atlas-hero__texture { display: none !important; }
.cx-scene { position: absolute; z-index: 0; top: -90px; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); overflow: hidden; pointer-events: none; }
.cx-scene__sky { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 38%, #5A3517 0%, #2A170C 38%, #120B07 70%, #0B0806 100%); }
.cx-scene__sun { position: absolute; left: 50%; top: 40%; width: 980px; height: 980px; margin: -490px 0 0 -490px; border-radius: 50%; background: radial-gradient(circle, rgba(243, 190, 96, .30) 0%, rgba(217, 164, 65, .10) 35%, transparent 65%); animation: cx-breathe 9s ease-in-out infinite; }
.cx-scene__layer { position: absolute; left: -4%; width: 108%; height: auto; will-change: transform; }
.cx-scene__layer--far { bottom: 26%; }
.cx-scene__layer--city { bottom: 17%; }
.cx-scene__layer--near { bottom: -2px; }
.cx-scene__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, transparent, var(--cx-obsidian)); }
.cx-dust { position: absolute; inset: 0; }
.cx-dust i { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: var(--cx-gold-pale); box-shadow: 0 0 6px rgba(243, 213, 138, .8); opacity: 0; animation: cx-rise var(--d) linear var(--delay) infinite; }
@keyframes cx-rise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: var(--o); } 85% { opacity: var(--o); } 100% { transform: translate3d(var(--drift), -78vh, 0); opacity: 0; } }
@keyframes cx-breathe { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.atlas-hero__copy { z-index: 2 !important; }
.cx-hero__chapter { display: block; margin: 0 0 12px; color: var(--cx-gold) !important; font-size: clamp(14px, 1.4vw, 19px) !important; font-weight: 700; letter-spacing: .14em; }
.atlas-hero h1 { color: #F7EBCF !important; text-shadow: 0 4px 24px rgba(0, 0, 0, .7); letter-spacing: .04em !important; }
.atlas-hero__index { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .cx-dust, .cx-scene__sun { animation: none !important; } .cx-dust i { display: none; } }
/* ── 11. Libro de héroes: podio ────────────────────────────────────── */
.cx-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; margin: 6px 0 18px; }
.cx-podium__spot { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; text-decoration: none; }
.cx-podium__crown { width: 40px; height: 26px; color: var(--cx-gold); }
.cx-podium__img { width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--cx-medal); object-fit: cover; background: #1C140D; box-shadow: 0 0 0 5px color-mix(in srgb, var(--cx-medal) 15%, transparent); }
.cx-podium__spot--1 .cx-podium__img { width: 100px; height: 100px; box-shadow: 0 0 0 6px rgba(217, 164, 65, .16), 0 0 36px rgba(217, 164, 65, .35); }
.cx-podium__name { max-width: 100%; overflow: hidden; color: var(--cx-ivory); font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cx-podium__base { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 2px; padding-top: 12px; border: 1px solid var(--cx-medal); border-bottom: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--cx-medal) 22%, #1A120A), #120D09); }
.cx-podium__spot--1 .cx-podium__base { height: 132px; }
.cx-podium__spot--2 .cx-podium__base { height: 100px; }
.cx-podium__spot--3 .cx-podium__base { height: 80px; }
.cx-podium__numeral { color: var(--cx-medal); font-size: 26px; font-weight: 700; line-height: 1; }
.cx-podium__spot--1 .cx-podium__numeral { font-size: 34px; }
.cx-podium__pts { color: var(--cx-ivory); font-size: 15px; font-weight: 700; }
.cx-podium__spot--1 { --cx-medal: #E7B552; }
.cx-podium__spot--2 { --cx-medal: #C9CED6; }
.cx-podium__spot--3 { --cx-medal: #C08552; }
.cx-podium__spot:hover .cx-podium__name { color: var(--cx-gold-pale); }
/* ── 12. Tarjetas de sistemas, unirse y pie ────────────────────────── */
.odin-systems__card { border: 1px solid var(--cx-line) !important; border-radius: 2px !important; background: linear-gradient(180deg, rgba(30, 21, 13, .9), rgba(18, 13, 9, .9)) !important; }
.odin-systems__card:hover { border-color: var(--cx-gold) !important; }
.odin-join__card { border-color: var(--cx-line) !important; background: rgba(17, 12, 8, .75) !important; }
.odin-join__card:hover { border-color: var(--cx-gold) !important; }
.odin-foot { border-top: 1px solid var(--cx-line) !important; background: linear-gradient(180deg, #0B0806, #070504) !important; }
/* ── 13. Selección y scroll ────────────────────────────────────────── */
::selection { background: rgba(217, 164, 65, .35); color: #fff7e2; }
html { scrollbar-color: #6E4E2C #0B0806; }
/* ── 14. Móvil ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.atlas-pulse { margin-top: -28px !important; }
.atlas-hero { min-height: auto !important; padding-bottom: 96px !important; }
.cx-scene { top: -70px; }
.cx-scene__layer--far { bottom: 30%; }
.cx-scene__layer--city { bottom: 20%; width: 160%; left: -30%; }
.cx-scene__layer--near { width: 160%; left: -30%; }
.atlas-section__head h2::after { width: min(300px, 100%); }
}
@media (max-width: 520px) {
.cx-podium__img { width: 58px; height: 58px; }
.cx-podium__spot--1 .cx-podium__img { width: 74px; height: 74px; }
.cx-podium__spot--1 .cx-podium__base { height: 108px; }
.cx-podium__spot--2 .cx-podium__base { height: 84px; }
.cx-podium__spot--3 .cx-podium__base { height: 68px; }
.cx-podium__name { font-size: 13px; }
}
/* chapter numeral: diamond drawn as background so the numeral stays upright */
.atlas-section__head .atlas-eyebrow::before {
width: 40px; height: 40px; border: 0 !important; transform: none !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none'%3E%3Cpath d='M20 1.5L38.5 20L20 38.5L1.5 20Z' stroke='%23D9A441' fill='%23140F0A'/%3E%3Cpath d='M20 6L34 20L20 34L6 20Z' stroke='%236E4E2C'/%3E%3C/svg%3E") center / contain no-repeat;
font-size: 13px !important; font-weight: 700; line-height: 1;
}
/* ── Últimas muertes: 4 columnas alineadas [asesino] [derrotó a] [víctima] [fecha] ── */
.odin-ledger [data-odin-world-list="kills"] > li {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr) 82px;
align-items: center;
column-gap: 12px;
row-gap: 4px;
}
.odin-ledger [data-odin-world-list="kills"] > li > .odin-kill { display: contents !important; }
.odin-ledger [data-odin-world-list="kills"] .odin-who { min-width: 0; flex: none !important; max-width: 100%; justify-self: start; }
.odin-ledger [data-odin-world-list="kills"] .odin-who--end { flex-direction: row-reverse !important; justify-content: flex-end !important; }
.odin-ledger [data-odin-world-list="kills"] .odin-kill > em { justify-self: center; padding: 3px 10px !important; }
.odin-ledger [data-odin-world-list="kills"] > li > time { justify-self: end; margin: 0 !important; padding: 0 !important; text-align: right; white-space: nowrap; }
.odin-ledger [data-odin-world-list="kills"] > li.odin-ledger__empty { display: block !important; }
/* tarjeta angosta (móvil / columnas chicas): la fecha baja a su propia fila */
@container (max-width: 380px) {
.odin-ledger [data-odin-world-list="kills"] > li { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
.odin-ledger [data-odin-world-list="kills"] > li > time { grid-column: 1 / -1; justify-self: start; padding-left: 42px !important; }
.odin-ledger [data-odin-world-list="kills"] .odin-kill > em { padding: 0 !important; }
}
.odin-ledger [data-odin-world-list="kills"] > li { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr) 70px; column-gap: 10px; }
.odin-ledger [data-odin-world-list="kills"] .odin-kill > em { padding: 3px 8px !important; }
.odin-ledger [data-odin-world-list="kills"] .odin-who { gap: 7px; }
@container (max-width: 380px) { .odin-ledger [data-odin-world-list="kills"] > li { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); } }
/* ===== Top guilds: ruling-guild showcase ===== */
.cx-shield { --cx-font: "Marcellus"; display: block; flex: none; width: 36px; height: 43px; color: var(--cx-bronze); }
.cx-shield text { font-weight: 700; }
.cx-guild-champion, .cx-guild-champion__name, .cx-guild-champion__eyebrow, .cx-guild-champion__stats dt, .cx-guild-champion__stats dd,
.cx-guild-row__rank, .cx-guild-row__name strong, .cx-guild-row__pts, .cx-guild-champion__leader small { --cx-font: "Marcellus"; }
.cx-guild-champion__rank, .cx-guild-row__rank { --cx-font: "Marcellus"; }
.cx-guild-champion { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; margin: 6px 0 16px; padding: 22px 22px 20px; overflow: hidden; border: 1px solid rgba(217, 164, 65, .55); background:
radial-gradient(ellipse 60% 90% at 18% 40%, rgba(217, 164, 65, .22), transparent 70%),
linear-gradient(135deg, rgba(142, 42, 34, .28), transparent 55%),
linear-gradient(180deg, #1D140C, #110C08); text-decoration: none; color: var(--cx-ivory); transition: border-color .25s, box-shadow .25s; }
.cx-guild-champion::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(217, 164, 65, .18); pointer-events: none; }
.cx-guild-champion::after { content: ""; position: absolute; top: -40%; left: -60%; width: 40%; height: 180%; background: linear-gradient(90deg, transparent, rgba(243, 213, 138, .10), transparent); transform: rotate(18deg); animation: cx-sheen 6s ease-in-out infinite; pointer-events: none; }
@keyframes cx-sheen { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.cx-guild-champion:hover { border-color: var(--cx-gold); box-shadow: 0 0 0 1px rgba(217, 164, 65, .25), 0 18px 40px rgba(0, 0, 0, .45); }
.cx-guild-champion__banner { position: relative; display: flex; flex-direction: column; align-items: center; }
.cx-guild-champion__crown { width: 46px; height: 30px; margin-bottom: -4px; color: var(--cx-gold); filter: drop-shadow(0 0 8px rgba(217, 164, 65, .55)); }
.cx-shield--champion { width: 118px; height: 140px; color: var(--cx-gold); filter: drop-shadow(0 0 22px rgba(217, 164, 65, .38)) drop-shadow(0 10px 16px rgba(0, 0, 0, .6)); }
.cx-shield--champion path:first-child { fill: #2A1A0D; }
.cx-shield--champion text { fill: var(--cx-gold-pale); }
.cx-guild-champion__rank { position: absolute; bottom: -8px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--cx-gold); background: #1A120A; color: var(--cx-gold-pale); font-size: 16px; font-weight: 700; transform: rotate(45deg); }
.cx-guild-champion__rank { font-size: 0; }
.cx-guild-champion__rank::after { content: "I"; font-size: 17px; transform: rotate(-45deg); }
.cx-guild-champion__body { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.cx-guild-champion__eyebrow { color: var(--cx-gold); font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
.cx-guild-champion__name { overflow: hidden; color: #F7EBCF; font-size: clamp(24px, 2.4vw, 32px); font-weight: 900; line-height: 1.05; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 18px rgba(217, 164, 65, .35); }
.cx-guild-champion__leader { display: flex; align-items: center; gap: 10px; color: var(--cx-ivory); font-size: 15px; font-weight: 700; }
.cx-guild-champion__leader .odin-avatar { width: 34px !important; height: 34px !important; border-color: var(--cx-gold) !important; }
.cx-guild-champion__leader > span { display: flex; flex-direction: column; line-height: 1.15; }
.cx-guild-champion__leader small { color: var(--cx-ash); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.cx-guild-champion__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin: 6px 0 0; }
.cx-guild-champion__stats > div { padding: 9px 10px 8px; border: 1px solid rgba(156, 107, 58, .45); background: rgba(14, 10, 7, .6); }
.cx-guild-champion__stats dt { color: var(--cx-ash); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.cx-guild-champion__stats dd { margin: 3px 0 0; color: var(--cx-gold-pale); font-size: 18px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.cx-guild-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cx-guild-list > li { padding: 0 !important; border: 0 !important; }
.cx-guild-row { display: grid; grid-template-columns: 34px 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid rgba(156, 107, 58, .28); background: linear-gradient(90deg, rgba(217, 164, 65, .06), transparent 60%); text-decoration: none; transition: border-color .2s, background .2s; }
a.cx-guild-row:hover { border-color: var(--cx-gold); background: linear-gradient(90deg, rgba(217, 164, 65, .14), transparent 70%); }
.cx-guild-row__rank { color: var(--cx-bronze); font-size: 17px; font-weight: 700; text-align: center; }
.cx-guild-row__name { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.cx-guild-row__name strong { overflow: hidden; color: var(--cx-ivory); font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cx-guild-row__name small { overflow: hidden; color: var(--cx-ash); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cx-guild-row__pts { color: var(--cx-gold-pale); font-size: 16px; font-weight: 700; white-space: nowrap; }
.cx-guild-row__pts small { margin-left: 4px; color: var(--cx-ash); font-size: 11px; font-weight: 600; }
.cx-guild-row--vacant { grid-template-columns: 34px 44px minmax(0, 1fr) auto !important; border-style: dashed; border-color: rgba(156, 107, 58, .3); background: none; opacity: .75; }
.cx-guild-row--vacant .cx-guild-row__rank, .cx-shield--vacant { color: rgba(168, 151, 124, .55); }
.cx-guild-row--vacant .cx-guild-row__name strong { color: var(--cx-ash); font-weight: 600; }
.cx-guild-row--vacant .cx-guild-row__name small { font-style: italic; }
@container (max-width: 460px) {
.cx-guild-champion { grid-template-columns: 1fr; justify-items: center; gap: 18px; padding: 20px 16px; text-align: center; }
.cx-shield--champion { width: 96px; height: 114px; }
.cx-guild-champion__body { width: 100%; align-items: center; }
.cx-guild-champion__name { max-width: 100%; }
.cx-guild-champion__stats { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.cx-guild-champion { grid-template-columns: 1fr; justify-items: center; gap: 18px; padding: 20px 16px; text-align: center; }
.cx-shield--champion { width: 96px; height: 114px; }
.cx-guild-champion__body { width: 100%; align-items: center; }
.cx-guild-champion__stats { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-guild-row { grid-template-columns: 26px 34px minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; }
.cx-guild-row--vacant { grid-template-columns: 26px 34px minmax(0, 1fr) auto !important; }
.cx-guild-row .cx-shield { width: 30px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .cx-guild-champion::after { animation: none; display: none; } }
.cx-guild-champion__stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.cx-guild-champion__stats dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-guild-champion__stats dd { font-size: 17px; }
@media (min-width: 1500px) { .cx-guild-champion__stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .cx-guild-champion { grid-template-columns: 170px minmax(0, 1fr); } }
.cx-guild-row--vacant { opacity: .75; }
/* ===== Ranking: gold / silver / bronze medal rows (top 3) ===== */
.odin-rank__row { grid-template-columns: 3.2rem 52px minmax(0, 1.3fr) minmax(0, 1.15fr) auto !important; }
.cx-medal__frame { position: relative; display: grid; place-items: center; width: 52px; height: 52px; grid-template-areas: "stack"; }
.cx-medal__frame > img, .cx-medal__frame > .odin-rank__mark { grid-area: stack; display: block; }
.cx-medal__frame > .cx-medal__crown { position: absolute; top: -12px; left: 50%; z-index: 2; transform: translateX(-50%); }
.cx-medal__frame > .cx-medal__badge { position: absolute; right: -2px; bottom: -3px; z-index: 2; }
.odin-rank__list > li + li .cx-medal { margin-top: 0; }
.cx-medal { --m: #E7B552; --m-hi: #FFE08A; --m-lo: #7A5418; position: relative; isolation: isolate; margin: 0 0 8px; padding-left: 10px !important; padding-right: 14px !important; min-height: 72px !important; overflow: hidden; border: 1px solid color-mix(in srgb, var(--m) 55%, transparent) !important; border-left: 3px solid var(--m) !important; border-radius: 8px;
background:
linear-gradient(90deg, color-mix(in srgb, var(--m) 42%, transparent) 0%, color-mix(in srgb, var(--m) 20%, transparent) 28%, color-mix(in srgb, var(--m) 6%, transparent) 62%, transparent 100%),
linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .25)),
#140E09 !important;
box-shadow: 0 0 22px color-mix(in srgb, var(--m) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--m-hi) 35%, transparent);
transition: transform .2s, box-shadow .2s; }
.cx-medal::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--m-hi) 16%, transparent) 45%, transparent 60%); background-size: 260% 100%; animation: cx-medal-sheen 5.5s ease-in-out infinite; pointer-events: none; }
@keyframes cx-medal-sheen { 0%, 55% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
.cx-medal:hover { transform: translateX(3px); box-shadow: 0 0 32px color-mix(in srgb, var(--m) 35%, transparent), inset 0 1px 0 color-mix(in srgb, var(--m-hi) 45%, transparent); }
.cx-medal--gold { --m: #E7B552; --m-hi: #FFE08A; --m-lo: #7A5418;
background:
linear-gradient(90deg, rgba(22, 16, 10, .95) 0%, rgba(20, 14, 8, .89) 35%, rgba(18, 12, 7, .82) 100%),
url('../images/ele/guild-pattern-gold.jpg') center / 360px repeat,
#140E09 !important;
}
.cx-medal--silver { --m: #82A5D8; --m-hi: #EDF3FC; --m-lo: #3B547C;
background:
linear-gradient(90deg, rgba(12, 18, 28, .95) 0%, rgba(10, 15, 24, .89) 35%, rgba(8, 12, 20, .82) 100%),
url('../images/ele/guild-pattern-blue.jpg') center / 360px repeat,
#0A0F18 !important;
}
.cx-medal--bronze { --m: #C9864F; --m-hi: #F1B88A; --m-lo: #6B3E1C;
background:
linear-gradient(90deg, rgba(26, 15, 10, .95) 0%, rgba(22, 13, 8, .89) 35%, rgba(18, 10, 7, .82) 100%),
url('../images/ele/guild-pattern-bronze.jpg') center / 360px repeat,
#140C07 !important;
}
.cx-medal b { color: var(--m-hi) !important; font-size: 1.35rem !important; text-shadow: 0 0 12px color-mix(in srgb, var(--m) 60%, transparent); }
.cx-medal .cx-medal__frame > img, .cx-medal .cx-medal__frame > .odin-rank__mark { width: 48px !important; height: 48px !important; border-radius: 50%; border: 2px solid var(--m) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--m) 22%, transparent), 0 0 16px color-mix(in srgb, var(--m) 45%, transparent); }
.cx-medal__badge { position: absolute; right: -2px; bottom: -3px; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--m-hi); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--m-hi), var(--m) 55%, var(--m-lo)); color: #1A1209; font-family: "Marcellus", serif; font-size: 11px; font-style: normal; font-weight: 900; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); --cx-font: "Marcellus"; }
.cx-medal__crown { position: absolute; top: -12px; left: 50%; z-index: 2; width: 22px; height: 15px; color: #FFD45E; transform: translateX(-50%); filter: drop-shadow(0 0 6px rgba(255, 212, 94, .7)); }
.cx-medal--gold { margin-top: 10px; overflow: visible; }
.cx-medal--gold::after { border-radius: 8px; }
.cx-medal .odin-rank__who strong { color: var(--m-hi) !important; font-size: 1.12rem !important; font-weight: 700 !important; text-shadow: 0 1px 10px color-mix(in srgb, var(--m) 45%, transparent); }
.cx-medal--silver .odin-rank__who strong { color: #F4F6FA !important; }
.cx-medal .odin-rank__who small { color: color-mix(in srgb, var(--m-hi) 70%, #A8977C) !important; }
.cx-medal .odin-rank__pts strong { color: var(--m-hi) !important; }
.cx-medal + * { }
.odin-rank__list > li:nth-child(3) .cx-medal { margin-bottom: 14px; }
@media (max-width: 900px) {
.odin-rank__row { grid-template-columns: 2.4rem 46px minmax(0, 1fr) auto !important; }
.odin-rank__row em, .odin-rank__guild { display: none !important; }
.cx-medal__frame { width: 46px; height: 46px; }
.cx-medal .cx-medal__frame > img, .cx-medal .cx-medal__frame > .odin-rank__mark { width: 42px !important; height: 42px !important; }
.cx-medal { padding-left: 8px !important; padding-right: 10px !important; }
}
@media (prefers-reduced-motion: reduce) { .cx-medal::after { animation: none; } }
/* page titles: never wider than the screen on phones */
@media (max-width: 600px) { .odin-title__copy h1 { font-size: clamp(26px, 8.4vw, 39px) !important; overflow-wrap: anywhere; } }
.odin-rank__mark { --cx-font: "Marcellus"; display: grid; place-items: center; color: var(--cx-gold-pale) !important; font-size: 18px; font-weight: 700; line-height: 1; }
.odin-rank__mark.is-hidden, .odin-rank__mark[style*="none"] { display: none !important; }
.cx-medal .odin-rank__mark { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--m) 35%, #1A120A), #120C08) !important; color: var(--m-hi) !important; font-size: 22px; }
/* ===== Ranking: prominent guild & leader column ===== */
.odin-rank__row em,
.odin-rank__guild {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
min-width: 0 !important;
font-style: normal !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
}
.odin-rank__guild-pill {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 3px 10px !important;
max-width: 100% !important;
border-radius: 5px !important;
background: rgba(10, 8, 6, .65) !important;
border: 1px solid color-mix(in srgb, var(--m, #9C6B3A) 50%, transparent) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 10px rgba(0, 0, 0, .5) !important;
backdrop-filter: blur(4px) !important;
transition: transform .2s, border-color .2s, background .2s, box-shadow .2s !important;
}
.cx-medal:hover .odin-rank__guild-pill {
background: rgba(14, 10, 7, .85) !important;
border-color: color-mix(in srgb, var(--m, #9C6B3A) 85%, transparent) !important;
box-shadow: 0 0 16px color-mix(in srgb, var(--m, #9C6B3A) 35%, transparent) !important;
transform: translateY(-1px) !important;
}
.odin-rank__guild-ico {
width: 14px !important;
height: 14px !important;
flex: none !important;
color: var(--m-hi, #FFE08A) !important;
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--m, #E7B552) 75%, transparent)) !important;
}
.odin-rank__guild-name {
font-size: .86rem !important;
font-weight: 700 !important;
letter-spacing: .03em !important;
color: var(--m-hi, #FFE08A) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
text-shadow: 0 1px 6px color-mix(in srgb, var(--m, #E7B552) 45%, transparent) !important;
}
.odin-rank__guild-info {
display: inline-flex !important;
flex-direction: column !important;
min-width: 0 !important;
line-height: 1.15 !important;
}
.odin-rank__guild-caption {
font-size: 8.5px !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: color-mix(in srgb, var(--m-hi, #FFE08A) 75%, #A8977C) !important;
font-weight: 600 !important;
}
.odin-rank__guild-empty {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 3px 10px !important;
border-radius: 5px !important;
border: 1px dashed rgba(168, 151, 124, .28) !important;
background: rgba(10, 8, 6, .4) !important;
color: rgba(234, 223, 200, .5) !important;
font-size: .78rem !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
transition: border-color .2s, color .2s !important;
}
.cx-medal:hover .odin-rank__guild-empty {
border-color: rgba(231, 181, 82, .45) !important;
color: rgba(234, 223, 200, .75) !important;
}
.odin-rank__guild-dash {
color: rgba(168, 151, 124, .5) !important;
font-weight: 700 !important;
font-size: .82rem !important;
}
.odin-rank__guild-none-txt {
color: inherit !important;
}
/* ===== Ranking: same round design for every row; top 3 only change colour ===== */
.cx-medal--plain { --m: #8A6236; --m-hi: #EADFC8; --m-lo: #4A3420;
background:
linear-gradient(90deg, rgba(16, 12, 8, .96) 0%, rgba(14, 10, 8, .90) 35%, rgba(12, 9, 7, .84) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 360px repeat,
#100C08 !important;
border-color: rgba(156, 107, 58, .38) !important; border-left-color: #9C6B3A !important; box-shadow: none; }
.cx-medal--plain::after { display: none; }
.cx-medal--plain:hover { box-shadow: 0 0 18px rgba(156, 107, 58, .25); }
.cx-medal--plain b { color: var(--cx-ash) !important; text-shadow: none; }
.cx-medal--plain .odin-rank__who strong { color: var(--cx-gold-pale) !important; text-shadow: none; }
.cx-medal--plain .odin-rank__who small { color: var(--cx-ash) !important; }
.cx-medal--plain .cx-medal__frame > img, .cx-medal--plain .cx-medal__frame > .odin-rank__mark { box-shadow: 0 0 0 3px rgba(156, 107, 58, .18) !important; }
.cx-medal--plain .cx-medal__badge { background: radial-gradient(circle at 35% 30%, #C79A62, #8A6236 55%, #4A3420); border-color: #C79A62; color: #1A1209; }
.cx-medal__badge { min-width: 20px; width: auto; padding: 0 4px; border-radius: 10px; }
.odin-rank__list > li:nth-child(3) .cx-medal { margin-bottom: 8px; }
.odin-rank__list > li:nth-child(3) .cx-medal--bronze { margin-bottom: 14px; }
.odin-rank__row.cx-medal { border-bottom-width: 1px !important; }
/* Floating quick actions: real circles + inline SVG icons */
.odin-body .odin-floating-actions .odin-float-btn { border-radius: 50% !important; }
.odin-floating-actions .odin-float-btn > svg { width: 22px !important; height: 22px !important; flex: none; }
/* ===== Footer: cinematic CTA + codex columns ===== */
.cx-foot { position: relative; margin-top: 120px; padding: 0 !important; border-top: 0 !important; background: linear-gradient(180deg, #0B0806, #070504 70%) !important; overflow: hidden; }
.cx-foot h2, .cx-foot h3, .cx-foot__eyebrow, .cx-foot__btn, .cx-foot__col a, .cx-foot__stat strong, .cx-foot__stat small, .cx-foot__motto, .cx-foot__base p { --cx-font: "Marcellus"; }
.cx-foot__eyebrow { --cx-font: "Marcellus"; }
/* main grid */
.cx-foot__main { display: grid; width: min(100% - 40px, 1240px); margin: 0 auto; padding: 64px 0 40px; grid-template-columns: 1.4fr .8fr .8fr 1.1fr; gap: 40px; }
.cx-foot__mark img { display: block; width: 220px; max-width: 100%; height: auto; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .6)); }
.cx-foot__brand p { max-width: 320px; margin: 14px 0 20px; color: var(--cx-ash); font-size: 15px; font-style: italic; line-height: 1.5; }
.cx-foot__social { display: flex; flex-wrap: wrap; gap: 10px; }
.odin-body .cx-foot__soc { --b: #D9A441; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(217, 164, 65, .45); border-radius: 50% !important; background: radial-gradient(circle at 50% 30%, #2A1C10, #120C08); color: var(--cx-gold-pale); transition: transform .2s, color .2s, border-color .2s, box-shadow .2s, background .2s; }
.cx-foot__soc svg { width: 20px; height: 20px; }
.cx-foot__soc:hover { transform: translateY(-4px) rotate(-6deg); border-color: var(--b); color: #fff; background: var(--b); box-shadow: 0 10px 24px color-mix(in srgb, var(--b) 45%, transparent); }
.cx-foot__soc--discord { --b: #5865F2; } .cx-foot__soc--facebook { --b: #1877F2; } .cx-foot__soc--tiktok { --b: #FE2C55; } .cx-foot__soc--whatsapp { --b: #25D366; }
.cx-foot h3 { position: relative; margin: 0 0 18px; padding-bottom: 12px; color: var(--cx-gold-pale); font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.cx-foot h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 2px; background: linear-gradient(90deg, var(--cx-gold), transparent); }
.cx-foot__col { display: flex; flex-direction: column; gap: 12px; }
.cx-foot__col a { display: inline-flex; align-items: center; gap: 10px; color: var(--cx-ivory); font-size: 14px; text-decoration: none; letter-spacing: .04em; transition: color .2s, transform .2s; }
.cx-foot__col a::before { content: ""; width: 6px; height: 6px; border: 1px solid var(--cx-gold); transform: rotate(45deg); transition: background .2s; }
.cx-foot__col a:hover { color: var(--cx-gold-pale); transform: translateX(4px); }
.cx-foot__col a:hover::before { background: var(--cx-gold); }
.cx-foot__status { display: flex; flex-direction: column; gap: 12px; }
.cx-foot__stat { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid rgba(156, 107, 58, .45); background: linear-gradient(90deg, rgba(217, 164, 65, .08), rgba(14, 10, 7, .6)); }
.cx-foot__stat > svg { width: 26px; height: 26px; flex: none; color: var(--cx-gold); }
.cx-foot__stat small { display: block; color: var(--cx-ash); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.cx-foot__stat strong { color: var(--cx-gold-pale); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cx-foot__stat em { margin-left: 6px; color: var(--cx-ash); font-size: 12px; font-style: normal; }
.cx-foot__dot { position: relative; width: 12px; height: 12px; flex: none; margin: 0 7px; border-radius: 50%; background: #6FD3A2; box-shadow: 0 0 10px #6FD3A2; }
.cx-foot__dot::after { content: ""; position: absolute; inset: -6px; border: 1px solid #6FD3A2; border-radius: 50%; animation: cx-foot-ping 1.8s ease-out infinite; }
.cx-foot__dot.is-off { background: #8E2A22; box-shadow: 0 0 10px #8E2A22; }
.cx-foot__dot.is-off::after { display: none; }
@keyframes cx-foot-ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.cx-foot__partners { width: min(100% - 40px, 1240px); margin: 0 auto; padding: 28px 0; border-top: 1px solid rgba(156, 107, 58, .25); text-align: center; }
.cx-foot__partners h3 { display: inline-block; }
.cx-foot__partners h3::after { left: 50%; width: 60px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--cx-gold), transparent); }
.cx-foot__partners > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cx-foot__partners a { display: grid; place-items: center; width: 170px; height: 64px; padding: 10px 16px; border: 1px solid rgba(156, 107, 58, .35); background: rgba(20, 14, 9, .7); transition: border-color .2s, transform .2s, box-shadow .2s; }
.cx-foot__partners img { max-width: 100%; max-height: 40px; object-fit: contain; filter: grayscale(1) brightness(1.1); opacity: .7; transition: filter .25s, opacity .25s; }
.cx-foot__partners a:hover { border-color: var(--cx-gold); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .5), 0 0 18px rgba(217, 164, 65, .2); }
.cx-foot__partners a:hover img { filter: none; opacity: 1; }
.cx-foot__base { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 20px 30px; background: #050403; color: var(--cx-ash); text-align: center; }
.cx-foot__orn { width: 240px; height: 14px; color: var(--cx-bronze); }
.cx-foot__base > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; }
.cx-foot__base p { margin: 0; font-size: 12px; letter-spacing: .1em; }
.cx-foot__motto { color: var(--cx-gold); }
@media (max-width: 1024px) { .cx-foot__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
.cx-foot { margin-top: 72px; }
.cx-foot__cta { min-height: 320px; padding: 56px 16px 84px; }
.cx-foot__cta p { font-size: 15px; }
.cx-foot__actions { width: 100%; flex-direction: column; }
.cx-foot__btn { width: 100%; }
.cx-foot__main { grid-template-columns: 1fr 1fr; gap: 32px 20px; width: calc(100% - 32px); padding: 44px 0 30px; }
.cx-foot__brand, .cx-foot__status { grid-column: 1 / -1; }
.cx-foot__partners { width: calc(100% - 32px); }
.cx-foot__partners a { width: calc(50% - 7px); height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .cx-foot__sun, .cx-foot__caravan, .cx-foot__sky i, .cx-foot__dot::after { animation: none; } }
.cx-foot__main, .cx-foot__main h3 { text-align: left; }
.cx-foot__col a { text-align: left; }
@media (max-width: 600px) {
.cx-foot__brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cx-foot__brand p { margin-left: auto; margin-right: auto; }
.cx-foot__social { justify-content: center; }
.cx-foot__col a { font-size: 13px; }
}
/* No chapter numerals: plain eyebrows on section heads */
.atlas-section__head .atlas-eyebrow::before { content: none !important; display: none !important; }
.atlas-section__head:not(.odin-agenda__head) .atlas-eyebrow { justify-content: center; }
.cx-foot__main { padding-top: 56px; border-top: 1px solid rgba(217, 164, 65, .3); }
.cx-foot { border-top: 1px solid rgba(217, 164, 65, .35) !important; }
/* =====================================================================
ONE BUTTON STYLE everywhere = "Discover the world"
dark fill · gold bevelled edge · thin inner gold line · Marcellus gold text
Static: no outer glow, no lift/scale. Hover effect lives INSIDE the button
(warm inner light + a gold sheen sweeping across).
===================================================================== */
:root {
--cx-btn-edge: linear-gradient(135deg, #D2A85A, #6E4E2C 50%, #D2A85A);
--cx-btn-fill: linear-gradient(145deg, #1C130C, #0F0A07 75%);
--cx-btn-fill-hover: radial-gradient(ellipse 80% 120% at 50% 100%, rgba(217, 164, 65, .22), transparent 70%), linear-gradient(145deg, #241810, #110B07 75%);
--cx-btn-sheen: linear-gradient(110deg, transparent 35%, rgba(243, 213, 138, .20) 50%, transparent 65%);
}
/* --- atlas buttons (hero, sections): primary now identical to quiet --- */
.odin-body .atlas-button,
.odin-body .atlas-button--primary,
.odin-body .atlas-button--quiet,
.odin-body .atlas-button:hover,
.odin-body .atlas-button--primary:hover,
.odin-body .atlas-button--quiet:hover { background: var(--cx-btn-edge) !important; filter: none !important; transform: none !important; box-shadow: none !important; }
.odin-body .atlas-button::before,
.odin-body .atlas-button--primary::before,
.odin-body .atlas-button--quiet::before { inset: 2px !important; background: var(--cx-btn-sheen) 220% 0 / 250% 100% no-repeat, var(--cx-btn-fill) !important; transition: background-position .8s ease !important; }
.odin-body .atlas-button:hover::before,
.odin-body .atlas-button:focus-visible::before { background: var(--cx-btn-sheen) -60% 0 / 250% 100% no-repeat, var(--cx-btn-fill-hover) !important; }
.odin-body .atlas-button::after { inset: 6px !important; border: 1px solid rgba(217, 164, 65, .35) !important; box-shadow: none !important; transition: border-color .25s ease !important; }
.odin-body .atlas-button:hover::after, .odin-body .atlas-button:focus-visible::after { border-color: rgba(243, 213, 138, .7) !important; box-shadow: inset 0 0 14px rgba(217, 164, 65, .18) !important; }
.odin-body .atlas-button, .odin-body .atlas-button *, .odin-body .atlas-button .atlas-button__icon { color: var(--cx-gold-pale) !important; }
.odin-body .atlas-button:hover .atlas-button__icon, .odin-body .atlas-button:focus-visible .atlas-button__icon { color: #FFF0C2 !important; filter: none !important; transform: none !important; }
/* --- rune buttons (header "Play now", login/register, download, beta) --- */
.odin-body .rune:not(.rune--mark):not(.odin-rank__finder) { clip-path: none !important; padding: 2px !important; border: 0 !important; background: var(--cx-btn-edge) !important; box-shadow: none !important; filter: none !important; transform: none !important; border-radius: 0 !important; }
.odin-body .rune:not(.rune--mark):not(.odin-rank__finder)::before { inset: 6px !important; z-index: 2 !important; clip-path: none !important; background: none !important; border: 1px solid rgba(217, 164, 65, .35) !important; filter: none !important; pointer-events: none; transition: border-color .25s ease; }
.odin-body .rune:not(.rune--mark):not(.odin-rank__finder) > span { margin: 0 !important; clip-path: none !important; box-shadow: none !important; background: var(--cx-btn-sheen) 220% 0 / 250% 100% no-repeat, var(--cx-btn-fill) !important; color: var(--cx-gold-pale) !important; transition: background-position .8s ease; }
.odin-body .rune:not(.rune--mark):not(.odin-rank__finder):hover > span,
.odin-body .rune:not(.rune--mark):not(.odin-rank__finder):focus-visible > span { background: var(--cx-btn-sheen) -60% 0 / 250% 100% no-repeat, var(--cx-btn-fill-hover) !important; }
.odin-body .rune:not(.rune--mark):not(.odin-rank__finder):hover::before { border-color: rgba(243, 213, 138, .7) !important; }
.odin-body .rune:not(.rune--mark):not(.odin-rank__finder), .odin-body .rune:not(.rune--mark):not(.odin-rank__finder) * { color: var(--cx-gold-pale) !important; letter-spacing: .16em; }
.odin-body .rune.rune--tiny::before { inset: 4px !important; }
.odin-body .odin-tools .rune--tiny:hover { transform: none !important; }
/* --- bootstrap .btn used by account / ranking / admin-facing pages --- */
.odin-body .btn, .odin-body button.btn, .odin-body input[type="submit"].btn {
--cx-font: "Marcellus";
position: relative; border: 1px solid #B88A45 !important; border-radius: 0 !important;
background: var(--cx-btn-sheen) 220% 0 / 250% 100% no-repeat, var(--cx-btn-fill) !important;
box-shadow: inset 0 0 0 4px #140E09, inset 0 0 0 5px rgba(217, 164, 65, .35) !important;
color: var(--cx-gold-pale) !important; font-weight: 700 !important; letter-spacing: .14em; text-transform: uppercase;
filter: none !important; transform: none !important; transition: background-position .8s ease, box-shadow .25s ease !important; }
.odin-body .btn:hover, .odin-body .btn:focus-visible, .odin-body .btn.active {
background: var(--cx-btn-sheen) -60% 0 / 250% 100% no-repeat, var(--cx-btn-fill-hover) !important;
box-shadow: inset 0 0 0 4px #1A110A, inset 0 0 0 5px rgba(243, 213, 138, .7) !important; color: #FFF0C2 !important; }
.odin-body .btn.btn-sm { box-shadow: inset 0 0 0 3px #140E09, inset 0 0 0 4px rgba(217, 164, 65, .35) !important; }
/* --- search button inside the ranking finder: same palette --- */
.odin-body .odin-rank__finder button { background: var(--cx-btn-sheen) 220% 0 / 250% 100% no-repeat, var(--cx-btn-fill) !important; color: var(--cx-gold-pale) !important; transition: background-position .8s ease; }
.odin-body .odin-rank__finder button:hover { background: var(--cx-btn-sheen) -60% 0 / 250% 100% no-repeat, var(--cx-btn-fill-hover) !important; }
/* --- round buttons: static, no outer glow, effect inside only --- */
.odin-body .odin-floating-actions .odin-float-btn,
.odin-body .odin-floating-actions .odin-float-btn:hover { transform: none !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .6) !important; }
.odin-body .odin-floating-actions .odin-float-btn { background: radial-gradient(circle at 50% 30%, #241810, #0F0A07) !important; border-color: #B88A45 !important; }
.odin-body .odin-floating-actions .odin-float-btn:hover { background: radial-gradient(circle at 50% 70%, rgba(217, 164, 65, .35), #140E09 70%) !important; border-color: #F3D58A !important; color: #FFF0C2 !important; }
.odin-body .odin-floating-actions .odin-float-discord:hover, .odin-body .odin-floating-actions .odin-float-whatsapp:hover { border-color: #F3D58A !important; color: #FFF0C2 !important; background: radial-gradient(circle at 50% 70%, rgba(217, 164, 65, .35), #140E09 70%) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .6) !important; }
.odin-body .cx-foot__soc, .odin-body .cx-foot__soc:hover { transform: none !important; box-shadow: none !important; }
.odin-body .cx-foot__soc:hover { background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--b) 55%, transparent), #140E09 75%) !important; border-color: var(--b) !important; }
.odin-body .cx-foot__partners a:hover { transform: none !important; box-shadow: inset 0 0 0 1px rgba(217, 164, 65, .35) !important; }
@media (prefers-reduced-motion: reduce) { .odin-body .atlas-button::before, .odin-body .rune > span, .odin-body .btn { transition: none !important; } }
/* ===== Wider layout: use more of the screen ===== */
:root { --atlas-width: 1760px; --atlas-gutter: clamp(16px, 2.6vw, 48px); }
.cx-foot__main, .cx-foot__partners { width: min(100% - 2 * var(--atlas-gutter), var(--atlas-width)) !important; }
@media (max-width: 900px) { :root { --atlas-gutter: 16px; } }
/* ===== Ruling guild: leader portrait medallion instead of a shield ===== */
.cx-guild-champion__portrait { display: block; width: 120px; height: 120px; border: 3px solid var(--cx-gold); border-radius: 50%; object-fit: cover; background: #1C140D; box-shadow: 0 0 0 6px rgba(217, 164, 65, .16), 0 0 30px rgba(217, 164, 65, .3); }
.cx-guild-champion__crown { margin-bottom: 4px !important; }
.cx-guild-champion__rank { bottom: -12px !important; }
.cx-guild-row { grid-template-columns: 34px 44px minmax(0, 1fr) auto !important; }
.cx-guild-row--vacant { grid-template-columns: 34px 44px minmax(0, 1fr) auto !important; }
.cx-guild-row__img { display: block; width: 44px; height: 44px; border: 2px solid var(--cx-bronze); border-radius: 50%; object-fit: cover; background: #1C140D; }
.cx-guild-row__img--vacant { border: 0; background: none; color: rgba(168, 151, 124, .55); }
@media (max-width: 520px) {
.cx-guild-champion__portrait { width: 96px; height: 96px; }
.cx-guild-row { grid-template-columns: 26px 34px minmax(0, 1fr) auto !important; }
.cx-guild-row--vacant { grid-template-columns: 26px 34px minmax(0, 1fr) auto !important; }
.cx-guild-row__img { width: 34px; height: 34px; }
}
.cx-guild-champion__leader .odin-avatar { display: none !important; }
/* ===== Floating Discord / WhatsApp: pulse ring + breathing glow (as silkroadserapis.com) ===== */
.odin-body .odin-floating-actions .odin-float-btn { --cx-glow: 217, 164, 65; }
.odin-body .odin-floating-actions .odin-float-btn::before,
.odin-body .odin-floating-actions .odin-float-btn::after { content: ""; display: block; position: absolute; inset: 0; z-index: -1; border-radius: 50%; pointer-events: none; }
.odin-body .odin-floating-actions .odin-float-btn::before { box-shadow: 0 0 0 0 rgba(var(--cx-glow), .7); animation: cx-pulse-ring 2s ease-out infinite; }
.odin-body .odin-floating-actions .odin-float-btn::after { box-shadow: 0 0 9px 2px rgba(var(--cx-glow), .6); animation: cx-glow 2s ease-in-out infinite; }
@keyframes cx-pulse-ring {
0% { box-shadow: 0 0 0 0 rgba(var(--cx-glow), .6); }
70% { box-shadow: 0 0 0 10px rgba(var(--cx-glow), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--cx-glow), 0); }
}
@keyframes cx-glow {
0%, 100% { box-shadow: 0 0 8px 1px rgba(var(--cx-glow), .45); }
50% { box-shadow: 0 0 14px 4px rgba(var(--cx-glow), .75); }
}
.odin-body .odin-floating-actions .odin-float-btn .odin-float-tooltip::before,
.odin-body .odin-floating-actions .odin-float-btn .odin-float-tooltip::after { content: none; }
@media (prefers-reduced-motion: reduce) { .odin-body .odin-floating-actions .odin-float-btn::before, .odin-body .odin-floating-actions .odin-float-btn::after { animation: none; } }
/* ===== Medal icons replace roman numerals (podium, ruling guild, guild list) ===== */
.cx-medal-icon { display: block; flex: none; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55)); }
.cx-podium__numeral { display: grid; place-items: center; min-height: 40px; font-size: 0 !important; line-height: 0 !important; }
.cx-guild-champion__medal { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); }
.cx-guild-champion__rank { display: none !important; }
.cx-guild-row__rank { display: grid; place-items: center; --cx-font: "Marcellus" !important; font-family: "Marcellus", serif !important; color: var(--cx-ash) !important; font-size: 16px !important; font-weight: 700; }
.odin-rank__row b { display: grid; place-items: center start; } .odin-rank__row b .cx-medal-icon { margin-left: 4px; }
/* =====================================================================
Leonardo's ornament set (public/themes/odin/images/ele)
===================================================================== */
:root {
--cx-ele: url("../images/ele/");
}
/* 1. Filigree corners on every codex card */
.odin-ledger, .atlas-pulse, .odin-agenda__box, .atlas-focus-panel, .odin-legends__board,
.atlas-rates, .atlas-join, .odin-drops__board, .odin-cms-content > .card, .odin-cms-layout aside .card {
background:
url("../images/ele/corner-tl.png") left top / 22px 22px no-repeat,
url("../images/ele/corner-tr.png") right top / 22px 22px no-repeat,
url("../images/ele/corner-bl.png") left bottom / 22px 22px no-repeat,
url("../images/ele/corner-br.png") right bottom / 22px 22px no-repeat,
linear-gradient(180deg, rgba(30, 21, 13, .94), rgba(18, 13, 9, .94)) !important;
background-origin: border-box !important;
}
/* world-status strip also gets the fortress filigree texture */
.atlas-pulse {
background:
url("../images/ele/corner-tl.png") left top / 22px 22px no-repeat,
url("../images/ele/corner-tr.png") right top / 22px 22px no-repeat,
url("../images/ele/corner-bl.png") left bottom / 22px 22px no-repeat,
url("../images/ele/corner-br.png") right bottom / 22px 22px no-repeat,
url("../images/ele/bg-fortress.webp") center / auto 100% repeat-x,
linear-gradient(180deg, rgba(30, 21, 13, .94), rgba(18, 13, 9, .94)) !important;
background-origin: border-box !important;
}
/* 2. Section titles: real ornamental divider handled via .atlas-section__divider */
.atlas-section__head h2::after { display: none !important; content: none !important; }
/* 3. Header bar texture */
.odin-bar { background: url("../images/ele/bg-navbar.webp") center / cover no-repeat, linear-gradient(180deg, rgba(10, 7, 5, .97), rgba(14, 10, 7, .9)) !important; }
/* 4. Home hero: ornate dark texture over the sky */
.cx-scene::before { content: ""; position: absolute; inset: 0; z-index: 1; background: url("../images/ele/bg-header-top.webp") center top / cover no-repeat; opacity: .35; mix-blend-mode: screen; pointer-events: none; }
/* 5. Inner page banners (Ranking, Download, News…): in-game scene */
.odin-title {
position: relative;
background:
linear-gradient(rgba(14, 10, 7, .28), rgba(14, 10, 7, .28)),
linear-gradient(90deg, rgba(14, 10, 7, .95) 0%, rgba(14, 10, 7, .75) 38%, rgba(14, 10, 7, .32) 100%),
linear-gradient(0deg, #0E0A07 0%, rgba(14, 10, 7, 0) 65%),
var(--odin-title-bg, url("../images/headers/silkroad/download.jpg")) center 35% / cover no-repeat !important;
border-bottom: 0 !important;
}
.odin-title::after { content: none !important; }
.odin-title::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: url("../images/ele/divider-footer.png") center / 100% 2px no-repeat; z-index: 1; }
/* Banners temáticos nítidos específicos por sección de Silkroad Online */
.odin-title--streamers {
--odin-title-bg: url("../images/headers/silkroad/campfire.jpg");
background-position: center 30% !important;
}
.odin-title--schedule,
.odin-title--calendar {
--odin-title-bg: url("../images/headers/silkroad/calendar.jpg");
background-position: center 38% !important;
}
.odin-title--drops {
--odin-title-bg: url("../images/headers/silkroad/drops.jpg");
background-position: center 46% !important;
}
.odin-title--uniques,
.odin-title--unique {
--odin-title-bg: url("../images/headers/silkroad/uniques.jpg");
background-position: center 32% !important;
}
.odin-title--guilds,
.odin-title--guild {
--odin-title-bg: url("../images/headers/silkroad/fortress.jpg");
background-position: center 30% !important;
}
.odin-title--kills,
.odin-title--pvp {
--odin-title-bg: url("../images/headers/silkroad/kills.jpg");
background-position: center 30% !important;
}
.odin-title--global {
--odin-title-bg: url("../images/headers/silkroad/community.jpg");
background-position: center 35% !important;
}
.odin-title--job {
--odin-title-bg: url("../images/headers/silkroad/fortress.jpg");
background-position: center 35% !important;
}
.odin-title--ranking,
.odin-title--players {
--odin-title-bg: url("../images/headers/silkroad/ranking.jpg");
background-position: center 30% !important;
}
.odin-title--download {
--odin-title-bg: url("../images/headers/silkroad/download.jpg");
background-position: center 35% !important;
}
.odin-title--auth {
--odin-title-bg: url("../images/headers/silkroad/auth.jpg");
background-position: center 40% !important;
}
/* 6. Footer ornaments */
.cx-foot__mark::after { content: ""; display: block; width: 220px; max-width: 100%; height: 13px; margin-top: 10px; background: url("../images/ele/border-logo.png") center / 100% 100% no-repeat; }
.cx-foot__partners { border-top: 0 !important; background: url("../images/ele/divider.png") center top / min(900px, 100%) 14px no-repeat; padding-top: 40px !important; }
.cx-foot__orn { display: none !important; }
.cx-foot__base { position: relative; padding-top: 28px !important; }
.cx-foot__base::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1390px, 92%); height: 2px; transform: translateX(-50%); background: url("../images/ele/divider-footer.png") center / 100% 100% no-repeat; }
/* 7. Star bullet (icon-cap) for footer link lists */
.cx-foot__col a::before { width: 11px !important; height: 11px !important; border: 0 !important; transform: none !important; background: url("../images/ele/icon-cap.png") center / contain no-repeat !important; transition: transform .25s ease !important; }
.cx-foot__col a:hover::before { transform: rotate(45deg) !important; }
/* ===== Card frame like play-golden: 1px border in the ornament's own bronze + full border-card corners ===== */
:root { --cx-card-line: #675743; }
.odin-ledger, .atlas-pulse, .odin-agenda__box, .atlas-focus-panel, .odin-legends__board,
.atlas-rates, .atlas-join, .odin-drops__board, .odin-cms-content > .card, .odin-cms-layout aside .card {
border: 1px solid var(--cx-card-line) !important;
background:
url("../images/ele/card-tl.png") left top / 206px 206px no-repeat,
url("../images/ele/card-tr.png") right top / 206px 206px no-repeat,
url("../images/ele/card-bl.png") left bottom / 206px 206px no-repeat,
url("../images/ele/card-br.png") right bottom / 206px 206px no-repeat,
linear-gradient(180deg, rgba(30, 21, 13, .94), rgba(18, 13, 9, .94)) !important;
background-origin: border-box !important;
}
.atlas-pulse {
background:
url("../images/ele/card-tl.png") left top / 206px 206px no-repeat,
url("../images/ele/card-tr.png") right top / 206px 206px no-repeat,
url("../images/ele/card-bl.png") left bottom / 206px 206px no-repeat,
url("../images/ele/card-br.png") right bottom / 206px 206px no-repeat,
url("../images/ele/bg-fortress.webp") center / auto 100% repeat-x,
linear-gradient(180deg, rgba(30, 21, 13, .94), rgba(18, 13, 9, .94)) !important;
background-origin: border-box !important;
}
.odin-world__grid, .odin-focus__art, .odin-discord, .cx-guild-champion, .cx-foot__stat, .cx-foot__partners a { border-color: var(--cx-card-line) !important; }
.cx-guild-champion::before { border-color: rgba(103, 87, 67, .45) !important; }
/* ===== Footer legal bar: age notice · policies + credit · copyright ===== */
.cx-foot__legal { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px 40px; width: min(100% - 2 * var(--atlas-gutter), var(--atlas-width)); margin: 0 auto; padding: 26px 0 30px; }
.cx-foot__legal::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 2px; transform: translateX(-50%); background: url("../images/ele/divider-footer.png") center / min(1390px, 92%) 2px no-repeat; }
.cx-foot { background-color: #050403; }
.cx-foot__rating { display: flex; align-items: center; gap: 14px; max-width: 460px; }
.cx-foot__age { --cx-font: "Marcellus"; position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 58px; border: 1px solid #F3D58A; background: linear-gradient(180deg, #F0C766, #D9A441 55%, #B7832B); color: #1A1209; }
.cx-foot__age b { font-size: 26px; font-weight: 900; line-height: 1; }
.cx-foot__age i { position: absolute; top: 3px; right: 5px; font-size: 13px; font-style: normal; font-weight: 900; }
.cx-foot__rating p { margin: 0; color: var(--cx-ash); font-size: 12.5px; line-height: 1.45; }
.cx-foot__center { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cx-foot__policies { display: flex; flex-wrap: wrap; justify-content: center; }
.cx-foot__policies a { --cx-font: "Marcellus"; padding: 0 16px; border-left: 1px solid var(--cx-card-line); color: var(--cx-gold) !important; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.cx-foot__policies a:first-child { border-left: 0; }
.cx-foot__policies a:hover { color: var(--cx-gold-pale) !important; }
.cx-foot__credit { display: flex; flex-direction: column; gap: 2px; margin: 0; color: var(--cx-ivory); font-size: 13px; }
.cx-foot__credit strong { --cx-font: "Marcellus"; color: var(--cx-gold-pale); font-size: 15px; font-weight: 700; letter-spacing: .12em; }
.cx-foot__copy { justify-self: end; text-align: right; }
.cx-foot__copy p { margin: 0; color: var(--cx-ivory); font-size: 13px; line-height: 1.7; }
.cx-foot__copy a { color: var(--cx-gold) !important; text-decoration: none; }
@media (max-width: 1024px) {
.cx-foot__legal { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.cx-foot__rating { order: 2; flex-direction: column; text-align: center; }
.cx-foot__center { order: 1; }
.cx-foot__copy { order: 3; justify-self: center; text-align: center; }
}
.cx-foot__credit strong { --cx-font: "Spectral" !important; font-size: 17px; letter-spacing: .06em; font-weight: 700; }
@media (max-width: 768px) { .cx-foot__legal { padding-bottom: 130px; } }
.cx-foot__gglogo { width: 34px; height: 34px; margin: 0 auto 4px; display: block; }
/* ===== Footer: partner icon row (Golden-style) + slots for own images ===== */
.cx-foot__partners > div { gap: 26px !important; align-items: center; }
.cx-foot__partners a { width: auto !important; height: auto !important; padding: 4px !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.cx-foot__partners img { display: block; height: 24px !important; width: auto; max-height: none !important; filter: none !important; opacity: .85 !important; transition: opacity .2s ease !important; }
.cx-foot__partners a:hover img { opacity: 1 !important; }
.cx-foot__age-img { display: block; flex: none; width: auto; height: 64px; }
.cx-foot__age-slot { display: block; flex: none; width: 52px; height: 64px; }
.cx-foot__gglogo { width: auto !important; height: 34px !important; }
.cx-foot__gglogo:is(svg) { width: 34px !important; }
.cx-foot__partners img { height: 30px !important; }
/* partner icons inside Golden-style hexagon badges */
.cx-foot__partners > div { gap: 4px !important; }
.cx-foot__partners a { display: flex !important; align-items: center; justify-content: center; width: 72px !important; height: 42px !important; padding: 0 !important; background: url("../images/partners/bg-backlink.png") center / contain no-repeat !important; }
.cx-foot__partners img { height: 24px !important; max-width: 40px; object-fit: contain; opacity: 1 !important; }
.cx-foot__partners a:hover { filter: brightness(1.2); }
/* ===== Home hero: YouTube background video (no controls, no interaction) ===== */
.cx-hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.cx-hero-video iframe, .cx-hero-video > div { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); transform: translate(-50%, -50%) scale(1.06); border: 0; pointer-events: none; }
.cx-hero-video::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(14, 10, 7, .25), rgba(14, 10, 7, .7) 75%), linear-gradient(180deg, rgba(14, 10, 7, .55) 0%, rgba(14, 10, 7, .15) 30%, rgba(14, 10, 7, .35) 70%, #0E0A07 100%); }
.cx-scene.is-video .cx-hero-video { opacity: 1; }
.cx-scene.is-video .cx-scene__layer, .cx-scene.is-video .cx-scene__sun { opacity: 0; transition: opacity 1.4s ease; }
.cx-scene.is-video::before { opacity: .12; }
@media (prefers-reduced-motion: reduce) { .cx-hero-video { display: none; } }
/* ===== Hero video softened: 55% opacity + light blur + film grain/scanline texture ===== */
.cx-scene.is-video .cx-hero-video { opacity: .55; }
.cx-hero-video iframe { filter: blur(4px) saturate(.9); transform: translate(-50%, -50%) scale(1.1) !important; }
.cx-hero-video::before {
content: ""; position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
background:
repeating-linear-gradient(0deg, rgba(0, 0, 0, .55) 0 1px, transparent 1px 3px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation: cx-grain 1.2s steps(6) infinite;
}
.cx-hero-video::after { z-index: 3; }
@keyframes cx-grain {
0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .cx-hero-video::before { animation: none; } }
/* ===== Hero video: instant poster (same look as the video) while YouTube boots ===== */
.cx-hero-poster { position: absolute; top: 50%; left: 50%; z-index: 0; width: max(100%, 177.78vh); height: max(100%, 56.25vw); object-fit: cover; transform: translate(-50%, -50%) scale(1.1); filter: blur(4px) saturate(.9); opacity: .55; pointer-events: none; }
.cx-scene.has-video .cx-scene__layer, .cx-scene.has-video .cx-scene__sun { display: none; }
.cx-scene.has-video::before { opacity: .12; }
.cx-hero-video { transition: opacity .8s ease !important; }
/* the poster sits under the video, so the video simply fades in on top of the same image */
.cx-scene.has-video .cx-hero-video, .cx-scene.is-video .cx-hero-video { opacity: 1 !important; }
.cx-hero-video iframe { opacity: 0; transition: opacity .8s ease; }
.cx-scene.is-video .cx-hero-video iframe { opacity: .55; }
.cx-hero-poster { z-index: 0; }
.cx-hero-video { z-index: 1; }
/* poster hands over to the video (no double image under the translucent video) */
.cx-hero-poster { transition: opacity .8s ease; }
.cx-scene.is-video .cx-hero-poster { opacity: 0; }
/* ===== World status strip + rates: livelier, icon-led ===== */
.atlas-pulse__meter { width: min(100%, 220px) !important; height: 6px !important; margin-top: 12px !important; border: 1px solid rgba(217, 164, 65, .35); border-radius: 3px; background: rgba(14, 10, 7, .8) !important; overflow: hidden; }
.atlas-pulse__meter > span { display: block; min-width: 6px; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #B7832B, #F3D58A) !important; box-shadow: 0 0 10px rgba(243, 213, 138, .6); position: relative; overflow: hidden; }
.atlas-pulse__meter > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: translateX(-100%); animation: cx-meter 2.4s ease-in-out infinite; }
@keyframes cx-meter { to { transform: translateX(100%); } }
.cx-pulse__fort { display: inline-flex !important; align-items: center; gap: 10px; }
.cx-pulse__fort svg { flex: none; color: var(--cx-gold); }
.cx-pulse__count { --cx-font: "Marcellus"; margin-left: 4px; color: var(--cx-gold-pale); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.cx-pulse__count.is-live { color: var(--cx-live); }
.atlas-rates__social { display: none !important; }
.atlas-rates__sigil { display: grid !important; place-items: center; width: 40px !important; height: 40px !important; flex: none; border: 1px solid var(--cx-card-line) !important; border-radius: 50% !important; background: radial-gradient(circle at 50% 30%, #2A1C10, #120C08) !important; color: var(--cx-gold) !important; font-size: 0 !important; }
.atlas-rates__sigil svg { width: 20px; height: 20px; }
.atlas-rates__item:hover .atlas-rates__sigil { color: var(--cx-gold-pale) !important; border-color: var(--cx-gold) !important; }
.atlas-rates__copy { display: flex !important; flex-direction: column; gap: 2px; }
.atlas-rates__copy > span { color: var(--cx-ash) !important; font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; }
.atlas-rates__copy > strong { --cx-font: "Marcellus"; color: var(--cx-gold-pale) !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.1; }
.atlas-rates__item { gap: 14px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
@media (prefers-reduced-motion: reduce) { .atlas-pulse__meter > span::after { animation: none; } }
/* ===== Server rates: eye-catching gold tiles ===== */
.atlas-rates { padding: 26px 26px 24px !important; }
.atlas-rates__head { display: flex !important; justify-content: center !important; margin: 0 0 22px !important; padding: 0 !important; border: 0 !important; }
.atlas-rates__head h2 { --cx-font: "Marcellus"; position: relative; margin: 0; padding-bottom: 18px; color: #F7EBCF !important; font-size: clamp(20px, 2vw, 28px) !important; font-weight: 900 !important; letter-spacing: .14em !important; text-align: center; text-transform: uppercase; text-shadow: 0 2px 18px rgba(217, 164, 65, .35); }
.atlas-rates__head h2::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(420px, 80vw); height: 12px; transform: translateX(-50%); background: url("../images/ele/divider.png") center / 100% 100% no-repeat; }
.atlas-rates__grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.atlas-rates__item { position: relative; display: flex !important; align-items: center; gap: 16px !important; min-width: 0; padding: 18px 18px !important; border: 1px solid var(--cx-card-line) !important; background:
radial-gradient(ellipse 70% 120% at 0% 50%, rgba(217, 164, 65, .16), transparent 70%),
linear-gradient(180deg, rgba(36, 25, 15, .95), rgba(16, 11, 8, .95)) !important; overflow: hidden; transition: border-color .25s ease, background .25s ease; }
.atlas-rates__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cx-gold), transparent); opacity: .7; }
.atlas-rates__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(243, 213, 138, .10) 50%, transparent 65%) 220% 0 / 250% 100% no-repeat; transition: background-position .9s ease; pointer-events: none; }
.atlas-rates__item:hover { border-color: rgba(217, 164, 65, .7) !important; }
.atlas-rates__item:hover::after { background-position: -60% 0; }
.atlas-rates__sigil { width: 56px !important; height: 56px !important; border: 1px solid #F3D58A !important; background: radial-gradient(circle at 38% 30%, #FFE7A3, #D9A441 55%, #8A5A1E) !important; color: #1A1209 !important; box-shadow: 0 0 0 4px rgba(217, 164, 65, .14), 0 0 22px rgba(217, 164, 65, .35), inset 0 2px 3px rgba(255, 255, 255, .45) !important; }
.atlas-rates__sigil svg { width: 26px !important; height: 26px !important; stroke-width: 1.9; }
.atlas-rates__item:hover .atlas-rates__sigil { color: #1A1209 !important; }
.atlas-rates__copy { min-width: 0; }
.atlas-rates__copy > span { color: #CDBB98 !important; font-size: 12px !important; font-weight: 600; letter-spacing: .16em; }
.atlas-rates__copy > strong { font-size: 32px !important; font-weight: 900 !important; line-height: 1 !important; background: linear-gradient(180deg, #FFF1C4 0%, #F3D58A 40%, #C9923B 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; filter: drop-shadow(0 2px 6px rgba(217, 164, 65, .35)); }
@media (max-width: 1100px) { .atlas-rates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 520px) {
.atlas-rates { padding: 20px 14px !important; }
.atlas-rates__grid { gap: 10px !important; }
.atlas-rates__item { flex-direction: column; text-align: center; gap: 10px !important; padding: 16px 10px !important; }
.atlas-rates__copy { align-items: center; }
.atlas-rates__sigil { width: 48px !important; height: 48px !important; }
.atlas-rates__copy > strong { font-size: 26px !important; }
.atlas-rates__copy > span { font-size: 10.5px !important; }
}
/* ===== Server rates: toned down (balanced) ===== */
.atlas-rates__head { margin-bottom: 16px !important; }
.atlas-rates__head h2 { font-size: clamp(16px, 1.4vw, 20px) !important; font-weight: 700 !important; letter-spacing: .18em !important; padding-bottom: 14px; text-shadow: none; }
.atlas-rates__head h2::after { width: min(300px, 70vw); height: 10px; }
.atlas-rates__grid { gap: 10px !important; }
.atlas-rates__item { padding: 14px 16px !important; background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(217, 164, 65, .08), transparent 70%), rgba(20, 14, 9, .7) !important; }
.atlas-rates__item::before { opacity: .35; }
.atlas-rates__sigil { width: 46px !important; height: 46px !important; border: 1px solid rgba(217, 164, 65, .6) !important; background: radial-gradient(circle at 50% 30%, #2A1C10, #120C08) !important; color: var(--cx-gold) !important; box-shadow: 0 0 12px rgba(217, 164, 65, .18) !important; }
.atlas-rates__sigil svg { width: 22px !important; height: 22px !important; stroke-width: 1.6; }
.atlas-rates__item:hover .atlas-rates__sigil { color: var(--cx-gold-pale) !important; border-color: var(--cx-gold) !important; }
.atlas-rates__copy > span { color: var(--cx-ash) !important; font-size: 11px !important; }
.atlas-rates__copy > strong { font-size: 24px !important; font-weight: 700 !important; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--cx-gold-pale) !important; filter: none; }
@media (max-width: 520px) { .atlas-rates__sigil { width: 42px !important; height: 42px !important; } .atlas-rates__copy > strong { font-size: 22px !important; } }
/* =====================================================================
HOME REDESIGN (approved mock "05 · Nueva portada"): rhythm of full-bleed
image bands and data boards. Footer untouched.
===================================================================== */
.cx-bleed, .cx-sides, .cx-fort { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
/* --- one band: world status + rates chips --- */
.cx-band { row-gap: 0 !important; }
.cx-band__rates { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid rgba(103, 87, 67, .45); background: rgba(10, 7, 5, .45); }
.cx-band__title { --cx-font: "Marcellus"; margin-right: 8px; color: var(--cx-gold); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.cx-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 13px; border: 1px solid rgba(103, 87, 67, .75); background: rgba(20, 14, 9, .85); }
.cx-chip span { color: var(--cx-ash); font-size: 12px; letter-spacing: .06em; }
.cx-chip b { --cx-font: "Marcellus"; color: var(--cx-gold-pale); font-size: 16px; font-weight: 700; }
.atlas-pulse.cx-band + * { margin-top: 0; }
/* --- Choose your side --- */
.cx-sides { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; margin-top: 90px; margin-bottom: 90px; border-top: 1px solid var(--cx-card-line); border-bottom: 1px solid var(--cx-card-line); overflow: hidden; }
.cx-side { position: relative; display: flex; align-items: center; min-height: 560px; overflow: hidden; }
.cx-side--china { padding-left: max(48px, calc((100vw - 1440px) / 2 + 48px)); background: radial-gradient(ellipse 80% 90% at 30% 60%, #5E1C14 0%, #2A0D09 55%, #0E0A07 100%); }
.cx-side--europe { justify-content: flex-end; padding-right: max(48px, calc((100vw - 1440px) / 2 + 48px)); text-align: right; background: radial-gradient(ellipse 80% 90% at 70% 60%, #1F2A3A 0%, #10151E 55%, #0E0A07 100%); }
.cx-side__art { position: absolute; bottom: 0; height: auto; max-height: 92%; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6)); transition: transform .6s ease; pointer-events: none; }
.cx-side--china .cx-side__art { right: -6%; width: min(820px, 62vw); object-position: right bottom; }
.cx-side--europe .cx-side__art { left: 0; width: min(560px, 42vw); object-position: left bottom; }
.cx-side:hover .cx-side__art { transform: scale(1.04); }
.cx-side__copy { position: relative; z-index: 1; display: flex; max-width: 380px; flex-direction: column; gap: 14px; }
.cx-side--europe .cx-side__copy { align-items: flex-end; }
.cx-side__eyebrow { --cx-font: "Marcellus"; font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.cx-side--china .cx-side__eyebrow { color: #E08A6E; }
.cx-side--europe .cx-side__eyebrow { color: #8FB2D9; }
.cx-side h3 { --cx-font: "Marcellus"; margin: 0; color: #F7EBCF; font-size: clamp(44px, 5vw, 68px); font-weight: 900; line-height: 1; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
.cx-side p { margin: 0; color: #D7C7A6; font-size: 17px; line-height: 1.55; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.cx-side__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cx-side--europe .cx-side__tags { justify-content: flex-end; }
.cx-side__tags li { padding: 6px 12px; background: rgba(14, 10, 7, .55); font-size: 13px; }
.cx-side--china .cx-side__tags li { border: 1px solid rgba(224, 138, 110, .5); color: #F1C7B6; }
.cx-side--europe .cx-side__tags li { border: 1px solid rgba(143, 178, 217, .5); color: #C9D8EA; }
.cx-sides::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--cx-gold) 30%, var(--cx-gold) 70%, transparent); pointer-events: none; }
.cx-sides__vs { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 88px; height: 88px; margin: -44px 0 0 -44px; border: 1px solid var(--cx-gold); background: #0E0A07; transform: rotate(45deg); box-shadow: 0 0 0 8px rgba(14, 10, 7, .8), 0 0 40px rgba(217, 164, 65, .35); }
.cx-sides__vs b { --cx-font: "Marcellus"; color: var(--cx-gold-pale); font-size: 26px; font-weight: 900; transform: rotate(-45deg); }
/* --- Live world: one shared board instead of separate cards --- */
.odin-world .odin-world__grid { gap: 0 !important; border: 1px solid var(--cx-card-line); background:
url("../images/ele/card-tl.png") left top / 206px 206px no-repeat,
url("../images/ele/card-tr.png") right top / 206px 206px no-repeat,
url("../images/ele/card-bl.png") left bottom / 206px 206px no-repeat,
url("../images/ele/card-br.png") right bottom / 206px 206px no-repeat,
linear-gradient(180deg, #1A130C, #120D09); }
.odin-world .odin-world__grid + .odin-world__grid { margin-top: 18px; }
.odin-world .odin-world__grid > .odin-ledger { border: 0 !important; border-right: 1px solid rgba(103, 87, 67, .5) !important; background: none !important; box-shadow: none !important; }
.odin-world .odin-world__grid > .odin-ledger:last-child { border-right: 0 !important; }
.odin-world__head h2 { text-align: center; }
@media (max-width: 1100px) { .odin-world .odin-world__grid > .odin-ledger { border-right: 0 !important; border-bottom: 1px solid rgba(103, 87, 67, .5) !important; } }
/* --- Legends over a battle backdrop --- */
.odin-legends { position: relative; isolation: isolate; padding-top: 90px; padding-bottom: 90px; }
.odin-legends::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); border-top: 1px solid var(--cx-card-line); border-bottom: 1px solid var(--cx-card-line); background: linear-gradient(180deg, #0E0A07 0%, rgba(14, 10, 7, .6) 25%, rgba(14, 10, 7, .6) 75%, #0E0A07 100%), url("../images/focus-batallas.webp") center / cover no-repeat; opacity: .9; }
/* --- Fortress War section & cards --- */
.cx-fort { position: relative; width: 100vw; max-width: none !important; min-height: 560px; margin: 0 0 100px calc(50% - 50vw) !important; padding: 70px 20px 80px; overflow: hidden; text-align: center; border-top: 1px solid var(--cx-card-line); border-bottom: 1px solid var(--cx-card-line); }
.cx-fort__bg { position: absolute; inset: 0; background:
radial-gradient(ellipse 65% 55% at 50% 30%, rgba(217, 164, 65, .08), transparent 70%),
radial-gradient(ellipse 50% 60% at 50% 50%, rgba(10, 7, 5, .65), transparent 80%),
linear-gradient(180deg, #0E0A07 0%, rgba(14, 10, 7, .4) 25%, rgba(14, 10, 7, .4) 75%, #0E0A07 100%),
url("../images/ele/page-banner.webp") center 50% / cover no-repeat; z-index: 0; }
.cx-fort__inner { position: relative; z-index: 1; max-width: 1220px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; }
/* Section Header */
.cx-fort__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0; width: 100%; }
.cx-fort__main-title {
--cx-font: "Marcellus", serif;
font-family: var(--cx-font) !important;
font-size: clamp(28px, 3.8vw, 44px) !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: #FFF2D1 !important;
text-shadow: 0 2px 26px rgba(231, 181, 82, .45), 0 0 54px rgba(231, 181, 82, .25), 0 0 80px rgba(231, 181, 82, .15) !important;
margin: 0 0 8px !important;
order: 1;
}
.cx-fort__head .atlas-eyebrow {
margin: 0 0 14px !important;
color: #F1A291 !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .24em !important;
text-transform: uppercase !important;
order: 2;
}
.cx-fort__head .atlas-section__divider {
order: 3;
display: flex;
justify-content: center;
margin: 0 auto 16px;
}
.cx-fort__head .atlas-section__divider img {
display: block;
max-width: 380px;
height: auto;
opacity: .85;
}
.cx-fort__subtitle {
order: 4;
color: #C8BAA1;
font-size: clamp(14px, 1.4vw, 16px);
max-width: 680px;
margin: 0 auto;
line-height: 1.55;
text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}
/* Timer HUD */
.cx-fort__timer-hud { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 28px; background: rgba(14, 10, 7, .82); border: 1px solid rgba(193, 154, 91, .32); border-radius: 8px; box-shadow: 0 10px 32px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(231, 181, 82, .2); }
.cx-fort__timer-tag { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--cx-ash, #B5A282); font-weight: 700; }
.cx-fort__clock { display: flex; align-items: center; gap: 10px; }
.cx-fort__clock-unit { display: flex; width: 78px; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border: 1px solid rgba(193, 154, 91, .22); background: rgba(8, 6, 4, .7); border-radius: 4px; }
.cx-fort__clock-unit b { --cx-font: "Marcellus", serif; font-family: var(--cx-font); color: var(--cx-gold-pale, #F5D998); font-size: 32px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(231, 181, 82, .3); }
.cx-fort__clock-unit span { color: var(--cx-ash, #B5A282); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.cx-fort__clock-sep { font-size: 24px; font-weight: 900; color: rgba(193, 154, 91, .5); line-height: 1; }
.cx-fort__live-banner { display: inline-flex; align-items: center; gap: 12px; padding: 12px 26px; border: 1px solid rgba(220, 53, 69, .6); background: rgba(45, 10, 10, .85); border-radius: 6px; box-shadow: 0 0 24px rgba(220, 53, 69, .35); }
.cx-fort__live-text { --cx-font: "Marcellus", serif; font-family: var(--cx-font); color: #FFA3A3; font-size: 17px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; animation: pulse 2s infinite ease-in-out; }
/* 3 Fortress Cards Grid */
.cx-fort__grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 8px; }
.cx-fort-card {
position: relative;
display: flex;
flex-direction: column;
padding: 24px 22px 20px;
background: linear-gradient(180deg, rgba(24, 18, 13, .92) 0%, rgba(13, 9, 6, .94) 100%);
border: 1px solid rgba(193, 154, 91, .28);
border-radius: 8px;
text-align: left;
transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
overflow: hidden;
box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.cx-fort-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(231, 181, 82, .6), transparent);
opacity: .6;
transition: opacity .26s ease;
}
.cx-fort-card:hover {
transform: translateY(-4px);
border-color: rgba(231, 181, 82, .6);
box-shadow: 0 20px 42px rgba(0, 0, 0, .75), 0 0 26px rgba(231, 181, 82, .18);
}
.cx-fort-card:hover::before { opacity: 1; }
.cx-fort-card__top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.cx-fort-card__emblem-frame {
width: 62px;
height: 62px;
min-width: 62px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle, rgba(231, 181, 82, .22) 0%, rgba(17, 12, 8, .9) 70%);
border: 1.5px solid rgba(231, 181, 82, .45);
box-shadow: 0 4px 16px rgba(0, 0, 0, .6), inset 0 0 12px rgba(231, 181, 82, .2);
transition: transform .3s ease;
}
.cx-fort-card:hover .cx-fort-card__emblem-frame { transform: scale(1.08); border-color: rgba(231, 181, 82, .8); }
.cx-fort-card__emblem { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
.cx-fort-card__meta { display: flex; flex-direction: column; gap: 2px; }
.cx-fort-card__badge { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #E4A66B; font-weight: 700; }
.cx-fort-card__name {
--cx-font: "Marcellus", serif;
font-family: var(--cx-font) !important;
font-size: 21px !important;
font-weight: 700 !important;
color: #FFF2D1 !important;
margin: 0 !important;
line-height: 1.15;
letter-spacing: .03em;
}
.cx-fort-card__desc {
color: #AFA089;
font-size: 13px;
line-height: 1.5;
margin: 0 0 18px;
min-height: 38px;
}
/* Ruler info box */
.cx-fort-card__ruler-box {
padding: 12px 14px;
background: rgba(8, 6, 4, .75);
border: 1px solid rgba(103, 87, 67, .38);
border-radius: 5px;
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 14px;
}
.cx-fort-card__ruler-lbl { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--cx-ash, #9E8C73); font-weight: 700; }
.cx-fort-card__ruler-val {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
line-height: 1.2;
}
.cx-fort-card__ruler-val.is-owner {
color: #F8E2AC;
transition: color .2s ease;
}
.cx-fort-card__ruler-val.is-owner:hover {
color: #FFFFFF;
text-decoration: underline;
}
.cx-fort-card__ruler-val.is-none {
color: #92836E;
font-style: italic;
font-weight: 500;
font-size: 13.5px;
}
.cx-fort-card__ruler-icon { width: 16px; height: 16px; flex-shrink: 0; }
.cx-fort-card__ruler-val.is-owner .cx-fort-card__ruler-icon { color: #E7B552; }
/* Stats rows */
.cx-fort-card__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px 0;
border-top: 1px solid rgba(103, 87, 67, .3);
border-bottom: 1px solid rgba(103, 87, 67, .3);
margin-bottom: 14px;
}
.cx-fort-card__stat { display: flex; flex-direction: column; gap: 2px; }
.cx-fort-card__stat-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8F7D65; font-weight: 600; }
.cx-fort-card__stat-val { font-size: 14px; font-weight: 700; color: #E5D6BD; }
.cx-fort-card__stat-val.is-conquered { color: #8FE388; }
.cx-fort-card__stat-val.is-claimable { color: #E7B552; }
/* Footer link */
.cx-fort-card__foot { margin-top: auto; display: flex; justify-content: flex-end; }
.cx-fort-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 700;
color: #C19A5B;
text-decoration: none;
transition: color .2s ease, transform .2s ease;
}
.cx-fort-card__link svg { width: 14px; height: 14px; transition: transform .2s ease; }
.cx-fort-card__link:hover { color: #FFF2D1; }
.cx-fort-card__link:hover svg { transform: translateX(3px); }
@media (max-width: 980px) {
.cx-fort__grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
.cx-fort__clock-unit { width: 66px; }
.cx-fort__clock-unit b { font-size: 26px; }
}
/* --- Unified Grand Hub: Server Information (Left) + News (Right) --- */
.cx-grand-hub {
position: relative;
width: 100vw;
max-width: none !important;
margin: 80px 0 90px calc(50% - 50vw) !important;
padding: 0 calc(50vw - min(47vw, 860px));
overflow: hidden;
}
.cx-grand-hub__inner {
width: 100%;
margin: 0 auto;
}
.cx-grand-hub__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 40px;
align-items: stretch;
}
.cx-hub-col {
display: flex;
flex-direction: column;
}
.cx-hub-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 22px;
width: 100%;
}
.cx-hub-title {
--cx-font: "Marcellus", serif;
font-family: var(--cx-font) !important;
font-size: clamp(22px, 2.1vw, 34px) !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: #FFF2D1 !important;
text-shadow: 0 2px 26px rgba(231, 181, 82, .45), 0 0 54px rgba(231, 181, 82, .25), 0 0 80px rgba(231, 181, 82, .15) !important;
margin: 0 0 6px !important;
white-space: nowrap;
order: 1;
}
.cx-hub-header .atlas-eyebrow {
margin: 0 0 10px !important;
color: #F1A291 !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
order: 2;
}
.cx-hub-header .atlas-section__divider {
order: 3;
display: flex;
justify-content: center;
margin: 0 auto !important;
}
.cx-hub-header .atlas-section__divider img {
display: block;
max-width: 320px;
height: auto;
opacity: .85;
}
/* === LADO IZQUIERDO: SERVER INFORMATION === */
.cx-hub-server-content {
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
}
.cx-sinfo-dual-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
flex: 1;
}
.cx-sinfo-box {
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 22px 20px 18px;
background: linear-gradient(180deg, rgba(22, 17, 12, .94) 0%, rgba(13, 9, 6, .97) 100%);
border: 1px solid rgba(193, 154, 91, .28);
border-radius: 8px;
box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
position: relative;
overflow: hidden;
transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}
.cx-sinfo-box::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(231, 181, 82, .65), transparent);
opacity: .7;
}
.cx-sinfo-box:hover {
transform: translateY(-3px);
border-color: rgba(231, 181, 82, .6);
box-shadow: 0 20px 42px rgba(0, 0, 0, .75), 0 0 22px rgba(231, 181, 82, .15);
}
.cx-sinfo-box--featured {
background: linear-gradient(180deg, rgba(26, 19, 13, .96) 0%, rgba(15, 10, 7, .98) 100%);
border-color: rgba(231, 181, 82, .4);
}
.cx-sinfo-box__header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(103, 87, 67, .3);
}
.cx-sinfo-box__icon {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle, rgba(231, 181, 82, .2) 0%, rgba(14, 10, 7, .9) 70%);
border: 1.5px solid rgba(231, 181, 82, .45);
color: #F8E2AC;
box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}
.cx-sinfo-box__icon svg { width: 19px; height: 19px; }
.cx-sinfo-box__kicker {
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: #E4A66B;
font-weight: 700;
display: block;
}
.cx-sinfo-box__title {
--cx-font: "Marcellus", serif;
font-family: var(--cx-font) !important;
font-size: 18px !important;
font-weight: 700 !important;
color: #FFF2D1 !important;
margin: 0 !important;
line-height: 1.2;
}
.cx-sinfo-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
flex: 1;
justify-content: space-between;
gap: 0;
}
.cx-sinfo-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8.5px 0;
border-bottom: 1px solid rgba(103, 87, 67, .2);
gap: 8px;
}
.cx-sinfo-row:last-child { border-bottom: 0; }
.cx-sinfo-row__lbl {
font-size: 13px;
color: #C5B79F;
font-weight: 500;
}
.cx-sinfo-row__val {
font-size: 12.5px;
font-weight: 700;
color: #F8E2AC;
padding: 2px 9px;
border-radius: 4px;
background: rgba(8, 6, 4, .7);
border: 1px solid rgba(193, 154, 91, .2);
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
.cx-sinfo-row__val.is-gold {
color: #FFF2D1;
border-color: rgba(231, 181, 82, .5);
background: rgba(231, 181, 82, .14);
}
.cx-sinfo-row__val.is-highlight {
color: #92E898;
border-color: rgba(146, 232, 152, .3);
}
/* Horizontal Strip: Sistemas, Guerra & Seguridad */
.cx-sinfo-strip {
display: flex;
align-items: center;
justify-content: space-around;
padding: 14px 22px;
background: rgba(14, 10, 7, .85);
border: 1px solid rgba(193, 154, 91, .24);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
min-height: 64px;
height: 64px;
box-sizing: border-box;
}
.cx-sinfo-strip__item {
display: flex;
align-items: center;
gap: 10px;
}
.cx-sinfo-strip__icon {
font-size: 18px;
flex-shrink: 0;
}
.cx-sinfo-strip__lbl {
display: block;
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: #9C8B72;
font-weight: 700;
}
.cx-sinfo-strip__val {
font-size: 12.5px;
color: #F5E8D0;
font-weight: 700;
white-space: nowrap;
}
.cx-sinfo-strip__sep {
width: 1px;
height: 28px;
background: rgba(103, 87, 67, .35);
}
/* === LADO DERECHO: NOTICIAS === */
.cx-hub-news-content {
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
}
/* === TARJETAS GEMELAS DE NOTICIAS (GRANDES Y PROMINENTES) === */
.cx-grand-news-duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
flex: 1;
}
.cx-grand-news-card {
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(180deg, rgba(22, 17, 12, .96) 0%, rgba(13, 9, 6, .98) 100%);
border: 1px solid rgba(193, 154, 91, .28);
text-decoration: none;
box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
position: relative;
}
.cx-grand-news-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(231, 181, 82, .65), transparent);
opacity: .7;
}
.cx-grand-news-card:hover {
transform: translateY(-3px);
border-color: rgba(231, 181, 82, .6);
box-shadow: 0 20px 42px rgba(0, 0, 0, .75), 0 0 22px rgba(231, 181, 82, .18);
}
.cx-grand-news-card--featured {
border-color: rgba(231, 181, 82, .4);
background: linear-gradient(180deg, rgba(26, 19, 13, .96) 0%, rgba(15, 10, 7, .98) 100%);
}
.cx-grand-news-card__art {
position: relative;
width: 100%;
aspect-ratio: 16 / 9.5;
background: #0B0806;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid rgba(193, 154, 91, .25);
}
.cx-grand-news-card__art img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .35s ease;
}
.cx-grand-news-card:hover .cx-grand-news-card__art img {
transform: scale(1.04);
}
.cx-grand-news-tag {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
padding: 4px 9px;
border-radius: 3px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .12em;
background: rgba(14, 10, 7, .88);
border: 1px solid rgba(231, 181, 82, .45);
color: #F5D998;
}
.cx-grand-news-card__body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
flex: 1;
box-sizing: border-box;
}
.cx-grand-news-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
}
.cx-grand-news-time {
font-size: 11px;
color: #9C8B72;
letter-spacing: .08em;
}
.cx-grand-news-card__title {
--cx-font: "Marcellus", serif;
font-family: var(--cx-font);
font-size: 16px;
font-weight: 700;
color: #FFF2D1;
line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cx-grand-news-card__desc {
font-size: 12.5px;
color: #AFA089;
line-height: 1.45;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cx-grand-news-cta {
font-size: 12px;
color: #E7B552;
font-weight: 700;
letter-spacing: .08em;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color .2s ease;
}
.cx-grand-news-card:hover .cx-grand-news-cta {
color: #FFF2D1;
}
.cx-news-bottom-strip {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 22px;
background: rgba(14, 10, 7, .85);
border: 1px solid rgba(193, 154, 91, .24);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
min-height: 64px;
height: 64px;
box-sizing: border-box;
gap: 16px;
}
.cx-news-bottom-strip__hint {
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
}
.cx-news-bottom-strip__icon {
font-size: 18px;
flex-shrink: 0;
}
.cx-news-bottom-strip__lbl {
display: block;
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: #9C8B72;
font-weight: 700;
}
.cx-news-bottom-strip__val {
font-size: 12.5px;
color: #F5E8D0;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cx-news-bottom-strip .cx-news__subtle-btn {
margin: 0;
flex-shrink: 0;
}
.cx-grand-news-empty {
padding: 30px;
text-align: center;
color: var(--cx-ash);
background: rgba(14, 10, 7, .6);
border: 1px solid var(--cx-card-line);
border-radius: 8px;
}
@media (max-width: 1280px) {
.cx-grand-news-lead { grid-template-columns: 210px 1fr; }
.cx-sinfo-dual-grid { gap: 12px; }
}
@media (max-width: 1080px) {
.cx-grand-hub__grid { grid-template-columns: 1fr; gap: 54px; }
.cx-hub-title { white-space: normal; }
}
@media (max-width: 640px) {
.cx-sinfo-dual-grid { grid-template-columns: 1fr; }
.cx-sinfo-strip { flex-direction: column; gap: 12px; align-items: flex-start; }
.cx-sinfo-strip__sep { display: none; }
.cx-grand-news-lead { grid-template-columns: 1fr; }
.cx-grand-news-subgrid { grid-template-columns: 1fr; }
.cx-grand-hub { margin: 50px 0 60px; }
}
/* --- Unique Tracker (Radar de Monstruos Únicos - Full Width Panorámico) --- */
.cx-uniques-tracker {
position: relative;
width: 100vw;
max-width: none !important;
margin: 90px 0 100px calc(50% - 50vw) !important;
padding: 0 calc(50vw - min(48.5vw, 980px)) !important;
overflow: hidden;
box-sizing: border-box;
}
.cx-uniques-tracker__inner {
width: 100%;
max-width: none !important;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 36px;
}
.cx-uniques-tracker__head { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; margin: 0; }
.cx-uniques-tracker__head .atlas-section__title {
--cx-font: "Marcellus", serif;
font-family: var(--cx-font) !important;
font-size: clamp(28px, 3.8vw, 44px) !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: #FFF2D1 !important;
text-shadow: 0 2px 26px rgba(231, 181, 82, .45), 0 0 54px rgba(231, 181, 82, .25), 0 0 80px rgba(231, 181, 82, .15) !important;
margin: 0 0 8px !important;
order: 1;
}
.cx-uniques-tracker__head .atlas-eyebrow {
margin: 0 0 14px !important;
color: #F1A291 !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .24em !important;
text-transform: uppercase !important;
order: 2;
}
.cx-uniques-tracker__head .atlas-section__divider {
order: 3;
display: flex;
justify-content: center;
margin: 0 auto 16px;
}
.cx-uniques-tracker__head .atlas-section__divider img {
display: block;
max-width: 380px;
height: auto;
opacity: .85;
}
.cx-uniques-tracker__head .atlas-section__lead {
order: 4;
color: #C8BAA1;
font-size: clamp(14px, 1.4vw, 16px);
max-width: 720px;
margin: 0 auto;
line-height: 1.55;
text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}
/* 5-Column Grid (5 columnas por fila usando todo el ancho disponible) */
.cx-utracker__grid {
width: 100%;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.cx-utracker-card {
position: relative;
display: flex;
flex-direction: column;
padding: 20px 18px 16px;
background: linear-gradient(180deg, rgba(22, 17, 12, .94) 0%, rgba(13, 9, 6, .96) 100%);
border: 1px solid rgba(193, 154, 91, .28);
border-radius: 8px;
box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
overflow: hidden;
}
.cx-utracker-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(231, 181, 82, .6), transparent);
opacity: .6;
transition: opacity .26s ease;
}
.cx-utracker-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, .75);
}
/* --- Uniques Individual Boss Colors --- */
/* 1. Tiger Girl: Ámbar / Dorado Tigre */
.cx-utracker-card--tiger-girl {
--u-color: #EFA94A;
--u-glow: rgba(239, 169, 74, .35);
--u-tint: rgba(239, 169, 74, .12);
}
/* 2. Cerberus: Rojo Fuego / Demonio */
.cx-utracker-card--cerberus {
--u-color: #FF5A5A;
--u-glow: rgba(255, 90, 90, .35);
--u-tint: rgba(255, 90, 90, .12);
}
/* 3. Captain Ivy: Carmín / Rosa Corsario */
.cx-utracker-card--captain-ivy {
--u-color: #E85D9E;
--u-glow: rgba(232, 93, 158, .35);
--u-tint: rgba(232, 93, 158, .12);
}
/* 4. Uruchi: Cobre / Naranja Salvaje */
.cx-utracker-card--uruchi {
--u-color: #FF8F3D;
--u-glow: rgba(255, 143, 61, .35);
--u-tint: rgba(255, 143, 61, .12);
}
/* 5. Isyutaru: Hielo Glacial / Cyan */
.cx-utracker-card--isyutaru {
--u-color: #4DE2F2;
--u-glow: rgba(77, 226, 242, .38);
--u-tint: rgba(77, 226, 242, .12);
}
/* 6. Lord Yarkan: Oro Regio / Divinidad */
.cx-utracker-card--lord-yarkan {
--u-color: #FFD54F;
--u-glow: rgba(255, 213, 79, .42);
--u-tint: rgba(255, 213, 79, .15);
}
/* 7. Demon Shaitan: Púrpura Abisal / Oscuridad */
.cx-utracker-card--demon-shaitan {
--u-color: #BA68C8;
--u-glow: rgba(186, 104, 200, .4);
--u-tint: rgba(186, 104, 200, .14);
}
/* 8. Medusa: Veneno Esmeralda / Tóxico */
.cx-utracker-card--medusa {
--u-color: #4EDB8A;
--u-glow: rgba(78, 219, 138, .42);
--u-tint: rgba(78, 219, 138, .15);
}
/* 9. Roc: Fuego Sagrado / Carmesí */
.cx-utracker-card--roc {
--u-color: #E24B4B;
--u-glow: rgba(226, 75, 75, .4);
--u-tint: rgba(226, 75, 75, .14);
}
/* 10. Thief Boss: Oro del Desierto */
.cx-utracker-card--thief-boss {
--u-color: #D69E2E;
--u-glow: rgba(214, 158, 46, .4);
--u-tint: rgba(214, 158, 46, .14);
}
/* 11. Bone Roc: Hielo Espectral */
.cx-utracker-card--bone-roc {
--u-color: #81E6D9;
--u-glow: rgba(129, 230, 217, .38);
--u-tint: rgba(129, 230, 217, .12);
}
/* 12. Mustafa: Ámbar Imperial */
.cx-utracker-card--mustafa {
--u-color: #ED8936;
--u-glow: rgba(237, 137, 54, .38);
--u-tint: rgba(237, 137, 54, .12);
}
/* 13. Kidemonas: Tempestad Púrpura */
.cx-utracker-card--kidemonas {
--u-color: #B794F4;
--u-glow: rgba(183, 148, 244, .4);
--u-tint: rgba(183, 148, 244, .14);
}
/* 14. Harrison: Bronce Noble */
.cx-utracker-card--harrison {
--u-color: #F6AD55;
--u-glow: rgba(246, 173, 85, .38);
--u-tint: rgba(246, 173, 85, .12);
}
/* 15. Venefica: Rosa Carmín */
.cx-utracker-card--venefica {
--u-color: #FC8181;
--u-glow: rgba(252, 129, 129, .38);
--u-tint: rgba(252, 129, 129, .12);
}
/* 16-20. Holy Water Temple (Egipto) */
.cx-utracker-card--anubis {
--u-color: #D4AF37;
--u-glow: rgba(212, 175, 55, .4);
--u-tint: rgba(212, 175, 55, .14);
}
.cx-utracker-card--isis {
--u-color: #00CED1;
--u-glow: rgba(0, 206, 209, .4);
--u-tint: rgba(0, 206, 209, .14);
}
.cx-utracker-card--neith {
--u-color: #48BB78;
--u-glow: rgba(72, 187, 120, .4);
--u-tint: rgba(72, 187, 120, .14);
}
.cx-utracker-card--selkis {
--u-color: #ED8936;
--u-glow: rgba(237, 137, 54, .4);
--u-tint: rgba(237, 137, 54, .14);
}
.cx-utracker-card--haroeris {
--u-color: #ECC94B;
--u-glow: rgba(236, 201, 75, .4);
--u-tint: rgba(236, 201, 75, .14);
}
/* 21-25. Jupiter Domain (Hall of Worship) */
.cx-utracker-card--jupiter {
--u-color: #F6E05E;
--u-glow: rgba(246, 224, 94, .45);
--u-tint: rgba(246, 224, 94, .16);
}
.cx-utracker-card--yuno {
--u-color: #D53F8C;
--u-glow: rgba(213, 63, 140, .45);
--u-tint: rgba(213, 63, 140, .15);
}
.cx-utracker-card--the-earth {
--u-color: #DD6B20;
--u-glow: rgba(221, 107, 32, .4);
--u-tint: rgba(221, 107, 32, .14);
}
.cx-utracker-card--baal {
--u-color: #E53E3E;
--u-glow: rgba(229, 62, 62, .42);
--u-tint: rgba(229, 62, 62, .15);
}
.cx-utracker-card--babilion {
--u-color: #CBD5E0;
--u-glow: rgba(203, 213, 224, .38);
--u-tint: rgba(203, 213, 224, .14);
}
/* Individual accent styling */
.cx-utracker-card[class*="cx-utracker-card--"] {
border-color: color-mix(in srgb, var(--u-color) 35%, rgba(193, 154, 91, .25)) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, .55), 0 0 16px var(--u-tint) !important;
}
.cx-utracker-card[class*="cx-utracker-card--"]::before {
background: linear-gradient(90deg, transparent, var(--u-color, #E7B552), transparent) !important;
opacity: .85 !important;
}
.cx-utracker-card[class*="cx-utracker-card--"] .cx-utracker-card__type {
color: var(--u-color, #E4A66B) !important;
}
.cx-utracker-card[class*="cx-utracker-card--"] .cx-utracker-card__emblem-frame {
border-color: var(--u-color) !important;
background: radial-gradient(circle, var(--u-tint, rgba(231,181,82,.2)) 0%, rgba(13, 9, 6, .92) 75%) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, .6), 0 0 18px var(--u-glow) !important;
}
.cx-utracker-card[class*="cx-utracker-card--"]:hover {
border-color: var(--u-color) !important;
box-shadow: 0 20px 42px rgba(0, 0, 0, .8), 0 0 28px var(--u-glow) !important;
}
.cx-utracker-card[class*="cx-utracker-card--"]:hover .cx-utracker-card__emblem-frame {
border-color: var(--u-color) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, .6), 0 0 26px var(--u-glow) !important;
}
.cx-utracker-card[class*="cx-utracker-card--"] .cx-utracker-card__foot-link {
color: var(--u-color) !important;
}
.cx-utracker-card__top {
display: grid;
grid-template-columns: 56px 1fr;
gap: 12px;
align-items: center;
position: relative;
margin-bottom: 14px;
padding-right: 88px; /* Espacio para el badge VIVO/MUERTO en la esquina superior derecha */
}
.cx-utracker-card__emblem-frame {
width: 56px;
height: 56px;
border-radius: 50% !important;
overflow: hidden !important;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle, rgba(231, 181, 82, .18) 0%, rgba(13, 9, 6, .9) 75%);
border: 1.5px solid rgba(193, 154, 91, .38);
box-shadow: 0 4px 12px rgba(0, 0, 0, .6);
transition: transform .26s ease, border-color .26s ease;
flex-shrink: 0;
}
.cx-utracker-card:hover .cx-utracker-card__emblem-frame {
transform: scale(1.08);
}
.cx-utracker-card__emblem {
width: 44px;
height: 44px;
object-fit: contain;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7));
}
.cx-utracker-card__meta { display: flex; flex-direction: column; gap: 2px; }
.cx-utracker-card__type {
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
color: #E4A66B;
font-weight: 700;
}
.cx-utracker-card__name {
--cx-font: "Marcellus", serif;
font-family: var(--cx-font) !important;
font-size: 18px !important;
font-weight: 700 !important;
color: #FFF2D1 !important;
margin: 0 !important;
line-height: 1.15;
letter-spacing: .02em;
}
.cx-utracker-card__loc {
font-size: 11.5px;
color: #A89A84;
}
/* Pestañas Selectoras de Variantes (STR, INT, o CH/EU en modo full) */
.cx-utracker-tabs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 4px;
background: rgba(8, 6, 4, .85);
padding: 3px;
border-radius: 6px;
border: 1px solid rgba(193, 154, 91, .2);
margin-bottom: 10px;
}
.cx-utracker-tab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 6px 4px;
border: 1px solid transparent;
background: transparent;
color: #9C8B72;
border-radius: 4px;
cursor: pointer;
transition: all .2s ease;
white-space: nowrap;
min-width: 0;
font-size: 11px;
font-weight: 700;
}
.cx-utracker-tab:hover {
color: #FFF2D1;
background: rgba(255, 255, 255, .04);
}
.cx-utracker-tab.is-active {
background: linear-gradient(180deg, rgba(34, 25, 17, .95) 0%, rgba(18, 13, 9, .98) 100%);
border-color: rgba(231, 181, 82, .45);
color: #FFF2D1;
box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.cx-utracker-tab__race-icon {
width: 12px;
height: 12px;
object-fit: contain;
flex-shrink: 0;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}
.cx-utracker-tab__label {
font-size: 9.5px;
font-weight: 700;
letter-spacing: .02em;
overflow: hidden;
text-overflow: ellipsis;
}
.cx-utracker-tab__status-dot {
width: 5px;
height: 5px;
border-radius: 50%;
flex-shrink: 0;
}
.cx-utracker-tab__status-dot.is-alive {
background: #28a745;
box-shadow: 0 0 5px #28a745;
}
.cx-utracker-tab__status-dot.is-dead {
background: #dc3545;
}
/* Panes de estado para cada variante */
.cx-utracker-panes {
position: relative;
width: 100%;
}
.cx-utracker-pane {
display: none;
flex-direction: column;
animation: fadeInPane .2s ease;
}
.cx-utracker-pane.is-active {
display: flex;
}
@keyframes fadeInPane {
from { opacity: 0; transform: translateY(2px); }
to { opacity: 1; transform: translateY(0); }
}
/* Estado en la Esquina Superior Derecha de la Tarjeta */
.cx-utracker-card__corner-status {
position: absolute;
top: 14px;
right: 14px;
z-index: 10;
}
.cx-utracker-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 20px;
backdrop-filter: blur(4px);
}
.cx-utracker-badge.is-alive {
background: rgba(30, 140, 55, .25);
border: 1px solid rgba(72, 219, 114, .6);
color: #9BF0A3;
box-shadow: 0 0 14px rgba(40, 167, 69, .4);
}
.cx-utracker-badge.is-dead {
background: rgba(180, 30, 40, .25);
border: 1px solid rgba(255, 90, 90, .55);
color: #FFA3A3;
box-shadow: 0 0 14px rgba(220, 53, 69, .35);
}
.cx-utracker-pulse {
width: 7px;
height: 7px;
border-radius: 50%;
background: #28a745;
box-shadow: 0 0 8px #28a745;
animation: pulse 1.8s infinite ease-in-out;
}
.cx-utracker-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #dc3545;
}
/* Mini barra de variante con emblema */
.cx-utracker-variant-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 10px;
margin-bottom: 8px;
border-radius: 4px;
background: rgba(12, 9, 6, .75);
border: 1px solid rgba(193, 154, 91, .2);
}
.cx-utracker-variant-race {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
color: #EADFC8;
}
.cx-utracker-variant-icon {
width: 15px;
height: 15px;
object-fit: contain;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}
.cx-utracker-variant-name {
color: #F3D58A;
font-weight: 700;
letter-spacing: .06em;
}
.cx-utracker-variant-sep {
color: #7D6C56;
}
.cx-utracker-variant-build {
color: #A89A84;
font-size: 10.5px;
font-weight: 600;
}
/* Body state */
.cx-utracker-card__body {
padding: 10px 12px;
background: rgba(8, 6, 4, .7);
border: 1px solid rgba(103, 87, 67, .32);
border-radius: 6px;
margin-bottom: 12px;
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.cx-utracker-state.is-alive {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #9BF0A3;
line-height: 1.35;
}
.cx-utracker-alive-lead {
display: flex;
align-items: center;
gap: 8px;
}
.cx-utracker-state__icon {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
max-width: 18px !important;
min-height: 18px !important;
max-height: 18px !important;
flex-shrink: 0 !important;
color: #8FE388 !important;
}
.cx-utracker-state.is-dead {
display: flex;
flex-direction: column;
gap: 7px;
}
.cx-utracker-slayer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-bottom: 6px;
border-bottom: 1px dashed rgba(255, 255, 255, .08);
flex-wrap: wrap;
}
.cx-utracker-slayer__head {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #E88373;
}
.cx-utracker-slayer__icon {
width: 13px;
height: 13px;
color: #FF5A5A;
flex-shrink: 0;
}
.cx-utracker-slayer__details {
display: inline-flex;
align-items: baseline;
gap: 6px;
margin-left: auto;
}
.cx-utracker-slayer__name {
color: #FFD54F;
font-size: 12.5px;
font-weight: 800;
letter-spacing: .02em;
text-shadow: 0 0 10px rgba(255, 213, 79, .35);
text-decoration: none;
transition: color .2s ease;
}
.cx-utracker-slayer__name:hover {
color: #FFFFFF;
text-decoration: underline;
}
.cx-utracker-slayer__time {
font-size: 10px;
color: #8A7B64;
}
.cx-utracker-slayer__unknown {
font-size: 10.5px;
color: #8A7B64;
font-style: italic;
margin-left: auto;
}
.cx-utracker-timer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.cx-utracker-timer__head {
display: inline-flex;
align-items: center;
gap: 5px;
}
.cx-utracker-timer__icon {
width: 13px;
height: 13px;
color: #C19A5B;
flex-shrink: 0;
}
.cx-utracker-timer__lbl {
font-size: 10px;
color: #A89A84;
letter-spacing: .08em;
text-transform: uppercase;
}
.cx-utracker-timer__val {
--cx-font: "Marcellus", serif;
font-family: var(--cx-font);
font-size: 14.5px;
color: #F8E2AC;
font-variant-numeric: tabular-nums;
font-weight: 700;
letter-spacing: .05em;
}
/* Foot */
.cx-utracker-card__foot {
margin-top: auto;
display: flex;
justify-content: flex-end;
}
.cx-utracker-card__link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 700;
color: #C19A5B;
text-decoration: none;
transition: color .2s ease;
}
.cx-utracker-card__link svg { width: 13px; height: 13px; transition: transform .2s ease; }
.cx-utracker-card__link:hover { color: #FFF2D1; }
.cx-utracker-card__link:hover svg { transform: translateX(3px); }
@media (max-width: 1440px) {
.cx-utracker__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
.cx-utracker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.cx-utracker__grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
.cx-uniques-tracker { margin: 60px 0; }
}
/* ==========================================================================
CX-UTRACKER TOOLBAR: Categorías (Tabs), Solo Vivos Toggle y Buscador
========================================================================== */
.cx-utracker-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 28px 0 24px;
padding: 10px 14px;
background: rgba(14, 10, 7, 0.82);
border: 1px solid rgba(193, 154, 91, 0.22);
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
flex-wrap: wrap;
}
.cx-utracker-nav {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.cx-utracker-nav-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 13px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
color: rgba(229, 214, 187, 0.85);
background: rgba(25, 19, 13, 0.7);
border: 1px solid rgba(193, 154, 91, 0.24);
border-radius: 6px;
cursor: pointer;
transition: all .2s ease;
user-select: none;
line-height: 1.2;
}
.cx-utracker-nav-btn:hover {
color: #FFF2D1;
background: rgba(38, 28, 19, 0.85);
border-color: rgba(231, 181, 82, 0.45);
transform: translateY(-1px);
}
.cx-utracker-nav-btn.is-active {
color: #FFF2D1;
background: linear-gradient(180deg, rgba(231, 181, 82, 0.24) 0%, rgba(193, 154, 91, 0.1) 100%);
border-color: rgba(231, 181, 82, 0.75);
box-shadow: 0 0 14px rgba(231, 181, 82, 0.25), inset 0 1px 0 rgba(255, 242, 209, 0.2);
}
.cx-utracker-nav-btn__icon {
font-size: 13px;
line-height: 1;
}
.cx-utracker-nav-btn__badge {
padding: 1px 6px;
font-size: 10px;
font-weight: 700;
color: rgba(229, 214, 187, 0.75);
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(193, 154, 91, 0.2);
border-radius: 10px;
}
.cx-utracker-nav-btn.is-active .cx-utracker-nav-btn__badge {
color: #FFF2D1;
border-color: rgba(231, 181, 82, 0.5);
background: rgba(0, 0, 0, 0.55);
}
.cx-utracker-nav-btn__live-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 6px;
font-size: 10px;
font-weight: 700;
color: #34D399;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.4);
border-radius: 10px;
}
.cx-utracker-nav-btn__live-indicator .cx-utracker-pulse {
width: 6px;
height: 6px;
background: #10B981;
}
.cx-utracker-tools {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.cx-utracker-toggle-alive {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 13px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: .03em;
color: rgba(229, 214, 187, 0.85);
background: rgba(25, 19, 13, 0.7);
border: 1px solid rgba(193, 154, 91, 0.24);
border-radius: 6px;
cursor: pointer;
transition: all .2s ease;
user-select: none;
}
.cx-utracker-toggle-alive:hover {
color: #FFF2D1;
border-color: rgba(16, 185, 129, 0.5);
background: rgba(38, 28, 19, 0.85);
}
.cx-utracker-toggle-alive.is-active {
color: #6EE7B7;
background: rgba(16, 185, 129, 0.16);
border-color: #10B981;
box-shadow: 0 0 14px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(110, 231, 183, 0.2);
}
.cx-utracker-toggle-alive__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #6B7280;
transition: all .2s ease;
}
.cx-utracker-toggle-alive.is-active .cx-utracker-toggle-alive__dot,
.cx-utracker-toggle-alive[data-has-alive="1"] .cx-utracker-toggle-alive__dot {
background: #10B981;
box-shadow: 0 0 8px #10B981;
}
.cx-utracker-toggle-alive__badge {
padding: 1px 6px;
font-size: 10px;
font-weight: 700;
color: #34D399;
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(16, 185, 129, 0.35);
border-radius: 10px;
}
.cx-utracker-search-box {
position: relative;
display: inline-flex;
align-items: center;
}
.cx-utracker-search-box__icon {
position: absolute;
left: 10px;
width: 13px;
height: 13px;
color: rgba(193, 154, 91, 0.6);
pointer-events: none;
}
.cx-utracker-search-box__input {
width: 190px;
padding: 7px 12px 7px 30px;
font-family: inherit;
font-size: 12px;
color: #FFF2D1;
background: rgba(20, 15, 10, 0.85);
border: 1px solid rgba(193, 154, 91, 0.26);
border-radius: 6px;
outline: none;
transition: all .2s ease;
}
.cx-utracker-search-box__input::placeholder {
color: rgba(229, 214, 187, 0.4);
}
.cx-utracker-search-box__input:focus {
width: 220px;
border-color: rgba(231, 181, 82, 0.7);
box-shadow: 0 0 10px rgba(231, 181, 82, 0.25);
background: rgba(24, 18, 12, 0.95);
}
.cx-utracker-card.is-filtered-out {
display: none !important;
}
.cx-utracker-card.is-anim-in {
animation: cxCardFadeIn .28s ease forwards;
}
@keyframes cxCardFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cx-utracker-empty {
width: 100%;
padding: 48px 24px;
text-align: center;
background: rgba(14, 10, 7, 0.6);
border: 1px dashed rgba(193, 154, 91, 0.25);
border-radius: 8px;
margin-top: 16px;
}
.cx-utracker-empty__icon {
font-size: 32px;
margin-bottom: 12px;
opacity: .7;
}
.cx-utracker-empty__title {
font-size: 16px;
font-weight: 700;
color: #FFF2D1;
margin: 0 0 6px;
letter-spacing: .02em;
}
.cx-utracker-empty__desc {
font-size: 13px;
color: rgba(229, 214, 187, 0.65);
margin: 0 0 18px;
}
.cx-utracker-empty__btn {
display: inline-flex;
align-items: center;
padding: 8px 16px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
color: #FFF2D1;
background: rgba(231, 181, 82, 0.15);
border: 1px solid rgba(231, 181, 82, 0.45);
border-radius: 6px;
cursor: pointer;
transition: all .2s ease;
}
.cx-utracker-empty__btn:hover {
background: rgba(231, 181, 82, 0.28);
border-color: rgba(231, 181, 82, 0.7);
transform: translateY(-1px);
}
@media (max-width: 992px) {
.cx-utracker-toolbar {
flex-direction: column;
align-items: stretch;
}
.cx-utracker-nav {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
.cx-utracker-nav::-webkit-scrollbar {
height: 3px;
}
.cx-utracker-nav::-webkit-scrollbar-thumb {
background: rgba(193, 154, 91, 0.3);
border-radius: 3px;
}
.cx-utracker-tools {
justify-content: space-between;
}
.cx-utracker-search-box {
flex: 1;
}
.cx-utracker-search-box__input {
width: 100% !important;
}
}
.cx-events__line { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 10px 0 0; padding: 0; list-style: none; }
.cx-events__line::before { content: ""; position: absolute; left: 10%; right: 10%; top: 23px; height: 2px; background: linear-gradient(90deg, var(--cx-gold), rgba(103, 87, 67, .5)); }
.cx-events__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 10px; text-align: center; }
.cx-events__node { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--cx-card-line); background: #140E09; transform: rotate(45deg); }
.cx-events__node b { --cx-font: "Marcellus"; color: var(--cx-gold); font-size: 11px; font-weight: 700; transform: rotate(-45deg); }
.cx-events__item:first-child .cx-events__node { border-color: var(--cx-gold); background: #2A1C10; }
.cx-events__item.is-live .cx-events__node { border-color: var(--cx-live); background: #123326; }
.cx-events__item.is-live .cx-events__node b, .cx-events__item.is-live .cx-events__when { color: var(--cx-live); }
.cx-events__item strong { --cx-font: "Marcellus"; color: #F7EBCF; font-size: 17px; font-weight: 700; }
.cx-events__when { color: var(--cx-ash); font-size: 14px; }
.cx-events__when em { color: var(--cx-gold-pale); font-style: normal; }
.cx-events__empty { grid-column: 1 / -1; color: var(--cx-ash); text-align: center; }
@media (max-width: 900px) {
.cx-events__line { grid-template-columns: 1fr; gap: 18px; }
.cx-events__line::before { left: 22px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--cx-gold), rgba(103, 87, 67, .5)); }
.cx-events__item { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 18px; row-gap: 2px; align-items: center; text-align: left; padding: 0; }
.cx-events__node { grid-row: 1 / 3; }
}
/* --- Systems: 4 big cards that open their list --- */
.cx-systems__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }
.cx-sys { border: 1px solid var(--cx-card-line); background: linear-gradient(180deg, #1D140C, #0F0B07); }
.cx-sys summary { position: relative; display: block; height: 380px; overflow: hidden; cursor: pointer; list-style: none; }
.cx-sys summary::-webkit-details-marker { display: none; }
.cx-sys__art { position: absolute; inset: 0 0 35% 0; display: grid; place-items: center; overflow: hidden; }
.cx-sys__art img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: transform .6s ease, opacity .3s ease; }
.cx-sys--caza .cx-sys__art img { width: 70%; object-fit: contain; }
.cx-sys summary:hover .cx-sys__art img { transform: scale(1.05); opacity: .9; }
.cx-sys__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 70px 22px 22px; background: linear-gradient(180deg, transparent, rgba(14, 10, 7, .96) 40%); }
.cx-sys__body small { --cx-font: "Marcellus"; color: var(--cx-gold); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.cx-sys__body strong { --cx-font: "Marcellus"; color: #F7EBCF; font-size: 26px; font-weight: 900; }
.cx-sys__body > span { color: var(--cx-ash); font-size: 14px; line-height: 1.45; }
.cx-sys__more { --cx-font: "Marcellus"; color: var(--cx-gold-pale); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.cx-sys__close, .cx-sys[open] .cx-sys__open { display: none; }
.cx-sys[open] .cx-sys__close { display: inline; }
.cx-sys__list { display: flex; flex-direction: column; margin: 0; padding: 6px 22px 18px; list-style: none; }
.cx-sys__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(103, 87, 67, .3); color: var(--cx-ivory); font-size: 14px; }
.cx-sys__list em { padding: 2px 8px; border: 1px solid rgba(111, 211, 162, .5); color: var(--cx-live); font-size: 11px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.cx-sys__list em.is-soon { border-color: rgba(217, 164, 65, .5); color: var(--cx-gold); }
@media (max-width: 1100px) { .cx-systems__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cx-systems__grid { grid-template-columns: 1fr; } .cx-sys summary { height: 320px; } }
/* --- Join: 3 steps + own Discord card --- */
.cx-join { display: grid; grid-template-columns: 1fr 1fr; width: min(100% - 2 * var(--atlas-gutter), var(--atlas-width)); margin: 0 auto 0; border: 1px solid var(--cx-card-line); background: linear-gradient(180deg, #1A130C, #110C08); }
.cx-join__steps { padding: 48px; border-right: 1px solid rgba(103, 87, 67, .5); }
.cx-join__steps h2 { --cx-font: "Marcellus"; margin: 0 0 24px; color: #F7EBCF; font-size: clamp(26px, 2.6vw, 36px); font-weight: 900; }
.cx-join__steps ol { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.cx-join__steps li { display: flex; align-items: center; gap: 18px; }
.cx-join__steps li > span { --cx-font: "Marcellus"; display: grid; place-items: center; width: 52px; height: 52px; flex: none; border: 1px solid #C79A4E; border-radius: 50%; color: var(--cx-gold-pale); font-size: 20px; font-weight: 900; }
.cx-join__steps li > div { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.cx-join__steps strong { --cx-font: "Marcellus"; color: #F7EBCF; font-size: 18px; }
.cx-join__steps small { color: var(--cx-ash); font-size: 14px; }
.cx-join__steps li > a { --cx-font: "Marcellus"; color: var(--cx-gold-pale) !important; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.cx-join__discord { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: 48px; background: radial-gradient(ellipse 70% 80% at 80% 30%, rgba(217, 164, 65, .12), transparent 70%); }
.cx-join__brand { --cx-font: "Marcellus"; display: inline-flex; align-items: center; gap: 12px; color: var(--cx-gold); font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.cx-join__count { --cx-font: "Marcellus"; color: var(--cx-gold-pale); font-size: 56px; font-weight: 900; line-height: 1; }
.cx-join__count--text { font-size: clamp(26px, 2.6vw, 36px); }
.cx-join__discord p { margin: 0; color: var(--cx-ash); font-size: 16px; }
.cx-join__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cx-live); box-shadow: 0 0 8px var(--cx-live); }
@media (max-width: 900px) {
.cx-sides { grid-template-columns: 1fr; }
.cx-side { min-height: 460px; padding: 40px 20px !important; align-items: flex-start; }
.cx-side--europe { align-items: flex-start; }
.cx-side__art { max-height: 62%; }
.cx-side--china .cx-side__art { width: 110%; right: -20%; }
.cx-side--europe .cx-side__art { width: 80%; left: auto; right: -10%; }
.cx-sides::after { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--cx-gold), transparent); }
.cx-join { grid-template-columns: 1fr; }
.cx-join__steps { border-right: 0; border-bottom: 1px solid rgba(103, 87, 67, .5); padding: 30px 20px; }
.cx-join__discord { padding: 30px 20px; }
.cx-fort__clock > div { width: 72px; padding: 12px 0; }
.cx-fort__clock b { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .cx-side__art, .cx-sys__art img { transition: none; } }
.cx-sides { margin-top: 90px !important; margin-bottom: 90px !important; }
.cx-side__copy { max-width: min(380px, 46%); }
.cx-side--china .cx-side__art { right: 0; width: 56%; max-height: 88%; }
.cx-side--europe .cx-side__art { left: 2%; width: 50%; max-height: 92%; }
@media (max-width: 900px) {
.cx-side__copy { max-width: 100%; }
.cx-side--china .cx-side__art { right: -8%; width: 92%; max-height: 55%; }
.cx-side--europe .cx-side__art { left: auto; right: 0; width: 70%; max-height: 58%; }
}
@media (min-width: 901px) { .cx-side--china .cx-side__art { right: -6%; width: 96%; max-height: 92%; } }
@media (max-width: 900px) { .cx-side--europe { padding-top: 76px !important; } .cx-side--china { padding-bottom: 60px !important; } .cx-sides__vs { width: 70px; height: 70px; margin: -35px 0 0 -35px; } }
/* Europe heroine: mirrored to face the title, and as big as the China warrior */
.cx-side--europe .cx-side__art { transform: scaleX(-1); }
.cx-side--europe:hover .cx-side__art { transform: scaleX(-1) scale(1.04); }
@media (min-width: 901px) { .cx-side--europe .cx-side__art { left: -2%; width: 62%; max-height: 100%; } }
@media (max-width: 900px) { .cx-side--europe .cx-side__art { right: auto; left: -6%; width: 86%; max-height: 62%; } }
@media (max-width: 900px) { .cx-side { min-height: 560px; } .cx-side--europe .cx-side__art { width: 74%; left: 0; max-height: 46%; } .cx-side--china .cx-side__art { max-height: 46%; } }
/* Europe heroine never sits on the title: she lives strictly left of the text block */
@media (min-width: 901px) {
.cx-side--europe { --cx-pr: max(48px, calc((100vw - 1440px) / 2 + 48px)); }
.cx-side--europe .cx-side__art { left: auto !important; right: calc(var(--cx-pr) + min(380px, 46%) + 16px) !important; width: min(600px, calc(100% - var(--cx-pr) - min(380px, 46%) - 16px)) !important; max-height: 96% !important; object-position: right bottom; }
}
/* ===== Sides v2: text beside the VS, characters on the outer edges facing their title ===== */
.cx-side--europe .cx-side__art, .cx-side--europe:hover .cx-side__art { transform: none; }
.cx-side--europe:hover .cx-side__art { transform: scale(1.04); }
@media (min-width: 901px) {
.cx-side { --cx-copy: min(380px, 44%); --cx-gap: 76px; }
.cx-side--china { justify-content: flex-end; padding-left: 0 !important; padding-right: var(--cx-gap) !important; text-align: right; }
.cx-side--china .cx-side__copy { align-items: flex-end; max-width: var(--cx-copy); }
.cx-side--china .cx-side__tags { justify-content: flex-end; }
.cx-side--europe { justify-content: flex-start; padding-right: 0 !important; padding-left: var(--cx-gap) !important; text-align: left; }
.cx-side--europe .cx-side__copy { align-items: flex-start; max-width: var(--cx-copy); }
.cx-side--europe .cx-side__tags { justify-content: flex-start; }
.cx-side--china .cx-side__art { left: 0 !important; right: auto !important; width: min(720px, calc(100% - var(--cx-copy) - var(--cx-gap) - 12px)) !important; max-height: 96% !important; object-position: right bottom; }
.cx-side--europe .cx-side__art { right: 0 !important; left: auto !important; width: min(620px, calc(100% - var(--cx-copy) - var(--cx-gap) - 12px)) !important; max-height: 96% !important; object-position: left bottom; }
}
@media (min-width: 901px) {
/* the China render is wide with an empty left half: anchor its right edge to the text and let it bleed left */
.cx-side--china .cx-side__art { left: auto !important; right: calc(var(--cx-copy) + var(--cx-gap) + 12px) !important; width: min(1000px, calc((100% - var(--cx-copy) - var(--cx-gap) - 12px) * 1.9)) !important; max-height: 100% !important; }
}
@media (min-width: 901px) { .cx-side--china .cx-side__art { max-height: 92% !important; } }
@media (min-width: 901px) and (max-width: 1440px) { .cx-side { --cx-copy: min(320px, 42%); --cx-gap: 60px; } .cx-side h3 { font-size: clamp(40px, 4.2vw, 60px); } }
@media (min-width: 901px) { .cx-side { --cx-gap: 84px !important; } }
/* =====================================================================
LIVE LEDGERS with personality: duels · messages · trophies
===================================================================== */
.odin-world .odin-ledger > h3::before { content: ""; width: 40px !important; height: 40px !important; flex: none; border-radius: 50%; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; }
.odin-world .odin-world__grid:first-of-type > .odin-ledger:nth-child(1) > h3::before { background-image: url("../images/headers/header-kills.webp"), url("../images/headers/header-kills.png"); }
.odin-world .odin-world__grid:first-of-type > .odin-ledger:nth-child(2) > h3::before { background-image: url("../images/headers/header-chat.webp"), url("../images/headers/header-chat.png"); }
.odin-world .odin-world__grid:first-of-type > .odin-ledger:nth-child(3) > h3::before { background-image: url("../images/headers/header-uniques.webp"), url("../images/headers/header-uniques.png"); }
/* rows enter softly; only genuinely new entries animate in */
.odin-world [data-odin-world-list] > li { position: relative; }
.odin-world [data-odin-world-list] > li.is-new-entry { animation: cx-row-in .4s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes cx-row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.odin-world [data-odin-world-list] > li:first-child:not(.odin-ledger__empty)::after { content: var(--cx-latest, "Último"); position: absolute; top: 8px; right: 8px; padding: 2px 7px; border: 1px solid rgba(217, 164, 65, .6); background: rgba(217, 164, 65, .12); color: var(--cx-gold-pale); font: 700 9px/1.4 "Marcellus", serif; letter-spacing: .14em; text-transform: uppercase; animation: cx-latest 2.4s ease-in-out infinite; }
@keyframes cx-latest { 50% { box-shadow: 0 0 10px rgba(217, 164, 65, .45); } }
/* 1. kills = duels */
.odin-world [data-odin-world-list="kills"] > li { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; margin-bottom: 8px; padding: 12px 14px !important; border: 1px solid rgba(142, 42, 34, .35) !important; border-bottom-color: rgba(142, 42, 34, .35) !important; background: linear-gradient(90deg, rgba(217, 164, 65, .08), rgba(142, 42, 34, .14)) !important; }
.odin-world [data-odin-world-list="kills"] .odin-kill { display: grid !important; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) !important; align-items: center; gap: 10px; }
.odin-world [data-odin-world-list="kills"] .odin-kill > em { width: 34px; height: 34px; margin: 0 auto; padding: 0 !important; border: 0 !important; border-radius: 50%; background: radial-gradient(circle, rgba(142, 42, 34, .35), transparent 70%) center / 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3D58A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 17.5 3 6V3h3l11.5 11.5M13 19l6-6M16 16l4 4M19 21l2-2'/%3E%3Cpath d='M9.5 17.5 21 6V3h-3L6.5 14.5M11 19l-6-6M8 16l-4 4M5 21l-2-2'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important; font-size: 0 !important; color: transparent !important; }
.odin-world [data-odin-world-list="kills"] .odin-who { min-width: 0; color: var(--cx-gold-pale) !important; font-size: 14px !important; }
.odin-world [data-odin-world-list="kills"] .odin-who:first-child .odin-avatar { width: 38px !important; height: 38px !important; border: 2px solid var(--cx-gold) !important; box-shadow: 0 0 12px rgba(217, 164, 65, .45); }
.odin-world [data-odin-world-list="kills"] .odin-who--end { justify-content: flex-end; color: var(--cx-ash) !important; text-decoration: line-through; text-decoration-color: rgba(200, 70, 60, .7); }
.odin-world [data-odin-world-list="kills"] .odin-who--end .odin-avatar { width: 34px !important; height: 34px !important; border: 2px solid #8E2A22 !important; filter: grayscale(.85) brightness(.75); }
.odin-world [data-odin-world-list="kills"] time { color: #8A7B64 !important; font-size: 11.5px !important; text-align: center; }
.odin-world [data-odin-world-list="kills"] > li:first-child::after { top: -8px; right: 10px; background: #2A1C10; }
/* 2. chat = message bubbles */
.odin-world [data-odin-world-list="chat"] > li.odin-chat { align-items: flex-start !important; gap: 12px !important; margin-bottom: 10px; padding: 0 !important; border: 0 !important; }
.odin-world .odin-chat > .odin-avatar { width: 38px !important; height: 38px !important; margin-top: 4px; border: 2px solid var(--cx-bronze) !important; }
.odin-world .odin-chat__body { position: relative; flex: 1; min-width: 0; padding: 10px 14px 11px; border: 1px solid rgba(103, 87, 67, .55); border-radius: 2px 12px 12px 12px; background: linear-gradient(180deg, rgba(42, 30, 18, .75), rgba(20, 14, 9, .75)); }
.odin-world .odin-chat__body::before { content: ""; position: absolute; left: -7px; top: 10px; width: 12px; height: 12px; border-left: 1px solid rgba(103, 87, 67, .55); border-bottom: 1px solid rgba(103, 87, 67, .55); background: #251A10; transform: rotate(45deg); }
.odin-world .odin-chat__who span { color: var(--cx-gold) !important; font-size: 12px !important; letter-spacing: .08em; }
.odin-world .odin-chat__who small { color: #8A7B64 !important; font-size: 11px !important; }
.odin-world .odin-chat__msg { margin-top: 4px !important; color: #F1E6CF !important; font-size: 15px !important; line-height: 1.45; }
.odin-world [data-odin-world-list="chat"] > li:first-child .odin-chat__body { border-color: rgba(217, 164, 65, .55); }
.odin-world [data-odin-world-list="chat"] > li:first-child::after { top: -6px; right: 8px; background: #2A1C10; }
/* 3. uniques = trophies */
.odin-world [data-odin-world-list="uniques"] > li.odin-unique-row { gap: 16px !important; margin-bottom: 10px; padding: 12px 14px !important; border: 1px solid rgba(103, 87, 67, .5) !important; background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(142, 42, 34, .22), transparent 70%), rgba(20, 14, 9, .6) !important; }
.odin-world .odin-unique__img { width: 64px !important; height: 64px !important; flex: none; border: 2px solid #B8392C !important; border-radius: 50% !important; box-shadow: 0 0 0 4px rgba(142, 42, 34, .2), 0 0 18px rgba(184, 57, 44, .35); }
.odin-world [data-odin-world-list="uniques"] > li.odin-unique-row::before { content: ""; position: absolute; left: 60px; top: 56px; width: 22px; height: 22px; border: 1px solid #B8392C; border-radius: 50%; background: #1A0E0B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1A291' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3a8 8 0 0 0-8 8c0 2.6 1.2 4.4 3 5.5V20h10v-3.5c1.8-1.1 3-2.9 3-5.5a8 8 0 0 0-8-8Z'/%3E%3Ccircle cx='9' cy='11.5' r='1.6'/%3E%3Ccircle cx='15' cy='11.5' r='1.6'/%3E%3C/svg%3E") center / 13px no-repeat; }
.odin-world .odin-unique strong { color: #F7EBCF !important; font-size: 17px !important; }
.odin-world .odin-unique small { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; color: var(--cx-ash) !important; font-size: 12px !important; }
.odin-unique__by { --cx-font: "Marcellus"; color: #F1A291; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.odin-world .odin-unique .odin-avatar--xs { width: 22px !important; height: 22px !important; border: 1px solid var(--cx-gold) !important; }
.odin-unique__hunter { color: var(--cx-gold-pale); font-weight: 700; }
.odin-world .odin-unique time { color: #8A7B64; }
.odin-world .odin-unique time::before { content: "· "; }
@media (prefers-reduced-motion: reduce) { .odin-world [data-odin-world-list] > li, .odin-world [data-odin-world-list] > li::after { animation: none !important; } }
/* duel row = 4 columns: winner · swords · defeated · time */
.odin-world .odin-ledger [data-odin-world-list="kills"] > li { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 74px !important; align-items: center !important; column-gap: 10px !important; }
.odin-world .odin-ledger [data-odin-world-list="kills"] .odin-kill { display: contents !important; }
.odin-world .odin-ledger [data-odin-world-list="kills"] time { text-align: right !important; }
@container (max-width: 380px) { .odin-world .odin-ledger [data-odin-world-list="kills"] > li { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) !important; } .odin-world .odin-ledger [data-odin-world-list="kills"] time { grid-column: 1 / -1; text-align: center !important; } }
.odin-world .odin-world__grid + .odin-world__grid .odin-ledger > h3::before { display: none; }
.odin-world [data-odin-world-list="kills"] > li:first-child:not(.odin-ledger__empty)::after,
.odin-world [data-odin-world-list="chat"] > li:first-child:not(.odin-ledger__empty)::after { top: -9px; right: 10px; background: #2A1C10; }
.odin-world [data-odin-world-list="kills"] > li:first-child, .odin-world [data-odin-world-list="chat"] > li:first-child { margin-top: 10px; }
.odin-world [data-odin-world-list="uniques"] > li:first-child:not(.odin-ledger__empty)::after { top: -9px; right: 10px; background: #2A1C10; }
.odin-world [data-odin-world-list="uniques"] > li:first-child { margin-top: 10px; }
/* ===== Join v2: "the journey" — a caravan road of 3 waypoints + live Discord banner ===== */
.cx-journey { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: 100px 0 110px; overflow: hidden; border-top: 1px solid var(--cx-card-line); }
.cx-journey__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(217, 164, 65, .10), transparent 70%), linear-gradient(180deg, #0E0A07 0%, rgba(14, 10, 7, .78) 30%, rgba(14, 10, 7, .85) 70%, #0E0A07 100%), url("../images/ele/page-banner.webp") center 55% / cover no-repeat; filter: saturate(.75); }
.cx-journey__inner { position: relative; width: min(100% - 2 * var(--atlas-gutter), 1240px); margin: 0 auto; }
.cx-journey__head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 56px; text-align: center; }
.cx-journey__eyebrow { --cx-font: "Marcellus"; color: var(--cx-gold); font-size: 13px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
.cx-journey__head h2 { --cx-font: "Marcellus"; position: relative; margin: 0; color: #F7EBCF; font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.cx-journey__head h2::after { display: none !important; content: none !important; }
/* the road */
.cx-journey__path { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; }
.cx-journey__path::before { content: ""; position: absolute; left: 16%; right: 16%; top: 48px; height: 2px; background: repeating-linear-gradient(90deg, var(--cx-gold) 0 10px, transparent 10px 20px); opacity: .7; }
.cx-journey__path::after { content: ""; position: absolute; top: 34px; left: 16%; width: 30px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34' fill='%23F3D58A'%3E%3Cpath d='M6 30h3l1-8c2-1 4-1 6 0l1 8h3l1-8 6-2 2 4 1 6h3l-1-7 2-6c1-3 0-5-2-6l-3-1-1-4h-3l1 4-5 2-4-5c-2-2-5-2-7 0l-3 4-3 1-2 4 2 1 2-2 2 1 1 8Z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(243, 213, 138, .6)); animation: cx-caravan 14s linear infinite; }
@keyframes cx-caravan { 0% { left: 16%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(84% - 30px); opacity: 0; } }
.cx-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 18px 30px; text-align: center; }
.cx-step__medal { position: relative; z-index: 1; display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 8px; border: 1px solid var(--cx-gold); border-radius: 50%; background: radial-gradient(circle at 50% 30%, #2E1F11, #0F0A07 75%); color: var(--cx-gold-pale); box-shadow: 0 0 0 8px rgba(14, 10, 7, .9), 0 0 0 9px rgba(217, 164, 65, .35), 0 0 34px rgba(217, 164, 65, .25); transition: box-shadow .3s ease; }
.cx-step__medal svg { width: 40px; height: 40px; }
.cx-step__medal b { --cx-font: "Marcellus"; position: absolute; right: -4px; top: -4px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #F3D58A; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #FFE7A3, #D9A441 55%, #8A5A1E); color: #1A1209; font-size: 14px; font-weight: 900; }
.cx-step:hover .cx-step__medal { box-shadow: 0 0 0 8px rgba(14, 10, 7, .9), 0 0 0 9px rgba(243, 213, 138, .7), 0 0 44px rgba(217, 164, 65, .4); }
.cx-step strong { --cx-font: "Marcellus"; color: #F7EBCF; font-size: 21px; font-weight: 700; }
.cx-step p { margin: 0; max-width: 260px; color: #CDBB98; font-size: 15px; line-height: 1.5; }
.cx-step .atlas-button { min-width: 0 !important; min-height: 52px !important; margin-top: 8px; padding: 0 26px !important; font-size: 12px !important; }
/* live Discord banner */
.cx-discord { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 24px; margin-top: 40px; padding: 22px 28px; border: 1px solid var(--cx-card-line); background: linear-gradient(90deg, rgba(88, 101, 242, .12), rgba(20, 14, 9, .9) 40%), rgba(14, 10, 7, .85); }
.cx-discord__logo { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid rgba(217, 164, 65, .6); border-radius: 50%; background: radial-gradient(circle at 50% 30%, #2A1C10, #120C08); color: var(--cx-gold-pale); }
.cx-discord__logo svg { width: 30px; height: 24px; }
.cx-discord__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cx-discord__text span { --cx-font: "Marcellus"; color: var(--cx-gold); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.cx-discord__text strong { color: #EADFC8; font-size: 16px; font-weight: 400; }
.cx-discord__live { display: flex; align-items: center; gap: 14px; }
.cx-discord__faces { display: flex; }
.cx-discord__faces img { width: 34px; height: 34px; margin-left: -10px; border: 2px solid #120C08; border-radius: 50%; object-fit: cover; background: #2A1C10; }
.cx-discord__faces img:first-child { margin-left: 0; }
.cx-discord__count { display: inline-flex; align-items: center; gap: 8px; color: var(--cx-ash); font-size: 14px; white-space: nowrap; }
.cx-discord__count b { --cx-font: "Marcellus"; color: var(--cx-gold-pale); font-size: 22px; font-weight: 900; }
.cx-discord__count i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--cx-live); box-shadow: 0 0 8px var(--cx-live); }
.cx-discord__count i::after { content: ""; position: absolute; inset: -5px; border: 1px solid var(--cx-live); border-radius: 50%; animation: cx-foot-ping 1.8s ease-out infinite; }
.cx-discord .atlas-button { min-width: 0 !important; min-height: 52px !important; padding: 0 26px !important; font-size: 12px !important; }
@media (max-width: 900px) {
.cx-journey { padding: 70px 0 80px; }
.cx-journey__path { grid-template-columns: 1fr; gap: 26px; }
.cx-journey__path::before { left: 50%; right: auto; top: 48px; bottom: 60px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--cx-gold) 0 10px, transparent 10px 20px); }
.cx-journey__path::after { display: none; }
.cx-step { padding-bottom: 10px; background: linear-gradient(180deg, transparent 0 40px, rgba(14, 10, 7, .9) 40px); }
.cx-discord { grid-template-columns: auto minmax(0, 1fr); }
.cx-discord__live, .cx-discord .atlas-button { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .cx-journey__path::after, .cx-discord__count i::after { animation: none; } }
.cx-step { height: 100%; } .cx-step .atlas-button { margin-top: auto !important; } .cx-step p { min-height: 46px; }
.cx-step .atlas-button, .cx-discord .atlas-button { flex: none !important; } @media (max-width: 900px) { .cx-step { height: auto; } .cx-step p { min-height: 0; } .cx-step .atlas-button { margin-top: 8px !important; } }
/* =====================================================================
LOOT & FORGE ledgers: inventory slots, rarity glow, flame +badges
===================================================================== */
.odin-world .odin-world__grid + .odin-world__grid .odin-ledger.cx-loot > h3::before,
.odin-world .odin-world__grid + .odin-world__grid .odin-ledger.cx-forge > h3::before { display: block; }
.odin-world .cx-loot > h3::before { background-image: url("../images/headers/header-drops.webp"), url("../images/headers/header-drops.png") !important; }
.odin-world .cx-forge > h3::before { background-image: url("../images/headers/header-forge.webp"), url("../images/headers/header-forge.png") !important; }
.odin-world .odin-items > li { position: relative; animation: cx-row-in .5s ease both; }
.odin-world .odin-items > li:nth-child(2) { animation-delay: .05s; } .odin-world .odin-items > li:nth-child(3) { animation-delay: .1s; } .odin-world .odin-items > li:nth-child(4) { animation-delay: .15s; } .odin-world .odin-items > li:nth-child(5) { animation-delay: .2s; }
.odin-world .odin-items > li:first-child:not(.odin-ledger__empty) { margin-top: 10px; }
.odin-world .odin-items > li:first-child:not(.odin-ledger__empty)::after { content: var(--cx-latest, "Último"); position: absolute; top: -9px; right: 10px; padding: 2px 7px; border: 1px solid rgba(217, 164, 65, .6); background: #2A1C10; color: var(--cx-gold-pale); font: 700 9px/1.4 "Marcellus", serif; letter-spacing: .14em; text-transform: uppercase; animation: cx-latest 2.4s ease-in-out infinite; }
/* row = card */
.odin-world .odin-items > li.odin-item { display: grid !important; grid-template-columns: 58px minmax(0, 1fr) auto !important; align-items: center !important; gap: 14px !important; min-height: 74px !important; height: 74px !important; box-sizing: border-box !important; margin-bottom: 10px; padding: 10px 14px !important; border: 1px solid rgba(103, 87, 67, .5) !important; background: linear-gradient(90deg, var(--cx-rarity-bg, rgba(217, 164, 65, .10)), rgba(20, 14, 9, .65) 55%) !important; overflow: visible !important; }
.odin-world .odin-items > li.odin-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(243, 213, 138, .08) 50%, transparent 65%) 220% 0 / 250% 100% no-repeat; transition: background-position .9s ease; pointer-events: none; }
.odin-world .odin-items > li.odin-item:hover::before { background-position: -60% 0; }
/* inventory slot */
.odin-world .odin-item > img { width: 50px !important; height: 50px !important; padding: 5px; border: 1px solid var(--cx-rarity, #B8892F) !important; border-radius: 4px; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .06), #0B0806 75%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 14px var(--cx-rarity-glow, rgba(217, 164, 65, .35)), 0 0 14px var(--cx-rarity-glow, rgba(217, 164, 65, .3)); image-rendering: auto; }
.odin-world .odin-item__body { min-width: 0; }
.odin-world .odin-item__name { display: block; overflow: hidden; color: var(--cx-rarity-text, #F3D58A) !important; font-size: 15px !important; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 12px var(--cx-rarity-glow, rgba(217, 164, 65, .3)); }
.odin-world .odin-item__body small { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; color: var(--cx-ash) !important; font-size: 12px !important; }
.odin-world .odin-item__body small a { color: var(--cx-gold-pale) !important; font-weight: 700; text-decoration: none; }
.cx-loot__label { --cx-font: "Marcellus"; color: #A8977C; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cx-loot__mob { padding: 1px 8px; border: 1px solid rgba(142, 42, 34, .55); border-radius: 10px; background: rgba(142, 42, 34, .15); color: #F1A291; font-size: 11px; }
.odin-world .odin-item > time { align-self: center !important; color: #8A7B64 !important; font-size: 11px !important; white-space: nowrap; }
/* drops: SoX gold rarity */
.cx-loot { --cx-rarity: #E2B04A; --cx-rarity-glow: rgba(226, 176, 74, .4); --cx-rarity-text: #FFD978; --cx-rarity-bg: rgba(226, 176, 74, .12); }
/* forge: flame badge by tier */
.odin-world .cx-forge .odin-item { grid-template-columns: 58px minmax(0, 1fr) auto !important; align-items: center !important; }
.odin-world .cx-forge .odin-item > time { display: inline !important; grid-column: auto !important; grid-row: auto !important; margin-top: 0 !important; }
.odin-world .cx-forge .odin-item > img,
.odin-world .cx-forge .odin-item__body,
.odin-world .cx-forge__plus { grid-column: auto !important; grid-row: auto !important; }
.cx-forge .odin-item.is-rare { --cx-rarity: #6FA8DC; --cx-rarity-glow: rgba(111, 168, 220, .35); --cx-rarity-text: #CFE3F7; --cx-rarity-bg: rgba(111, 168, 220, .10); --cx-flame: linear-gradient(180deg, #CFE3F7, #6FA8DC 60%, #2F5F8F); }
.cx-forge .odin-item.is-epic { --cx-rarity: #B07CE8; --cx-rarity-glow: rgba(176, 124, 232, .4); --cx-rarity-text: #E6D2FA; --cx-rarity-bg: rgba(176, 124, 232, .12); --cx-flame: linear-gradient(180deg, #F1E1FF, #B07CE8 60%, #5B2E8F); }
.cx-forge .odin-item.is-legend { --cx-rarity: #F08A3C; --cx-rarity-glow: rgba(240, 138, 60, .45); --cx-rarity-text: #FFD7B0; --cx-rarity-bg: rgba(240, 138, 60, .14); --cx-flame: linear-gradient(180deg, #FFF1B8, #F7B24A 40%, #E0582C 85%); }
.cx-forge__plus { --cx-font: "Marcellus"; display: grid; place-items: center; min-width: 58px; height: 46px; padding: 0 10px; border: 1px solid var(--cx-rarity); border-radius: 4px; background: rgba(10, 7, 5, .7); box-shadow: 0 0 16px var(--cx-rarity-glow), inset 0 0 12px var(--cx-rarity-glow); font-size: 24px !important; font-weight: 900; line-height: 1; }
.cx-forge__plus { color: transparent !important; background-image: var(--cx-flame); -webkit-background-clip: text; background-clip: text; }
.cx-forge__plus { position: relative; }
.cx-forge .odin-item.is-legend .cx-forge__plus { animation: cx-flame 2.2s ease-in-out infinite; }
@keyframes cx-flame { 50% { filter: drop-shadow(0 0 6px rgba(247, 178, 74, .8)); } }
@media (max-width: 520px) { .odin-world .odin-items > li.odin-item { grid-template-columns: 48px minmax(0, 1fr) auto !important; gap: 10px !important; } .odin-world .odin-item > img { width: 44px !important; height: 44px !important; } .cx-forge__plus { min-width: 48px; height: 40px; font-size: 20px !important; } }
@media (prefers-reduced-motion: reduce) { .odin-world .odin-items > li, .cx-forge__plus { animation: none !important; } }
/* loot/forge: let the "Último" tag show (sheen stays inside the card without clipping) */
.odin-world .odin-items > li.odin-item { overflow: visible !important; }
.odin-world .odin-item > img[data-cx-tip] { cursor: help; transition: transform .2s ease, box-shadow .2s ease; }
.odin-world .odin-item > img[data-cx-tip]:hover, .odin-world .odin-item > img[data-cx-tip]:focus-visible { outline: none; border-color: #FFE7A3 !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 18px var(--cx-rarity-glow, rgba(217, 164, 65, .5)), 0 0 22px var(--cx-rarity-glow, rgba(217, 164, 65, .55)); }
.cx-item-tip { position: fixed; z-index: 100000; display: none; max-width: min(320px, calc(100vw - 20px)); pointer-events: none; }
.cx-item-tip.is-visible { display: block; }
.cx-item-tip__loading { padding: 8px 14px; color: #F3D58A; }
.cx-item-tip__note { margin: 0 0 6px; padding: 4px 8px; border-left: 2px solid #9C6B3A; color: #A8977C; font-size: 11px; font-style: italic; }
/* =====================================================================
LIFE LAYER — motion & depth with the same palette (subtle, harmonious)
===================================================================== */
/* world header: same rhythm as every other section head */
.cx-world-head { display: flex !important; flex-direction: column; align-items: center !important; justify-content: center !important; gap: 12px; margin-bottom: 34px !important; padding-bottom: 0 !important; border: 0 !important; text-align: center; }
.cx-world-head h2 { position: relative; margin: 0; }
.cx-world-head h2::after { display: none !important; content: none !important; }
.cx-live-pill { --cx-font: "Marcellus"; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border: 1px solid rgba(111, 211, 162, .45); border-radius: 20px; background: rgba(111, 211, 162, .08); color: #8FE0B8; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.cx-live-pill i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-live); box-shadow: 0 0 8px var(--cx-live); }
.cx-live-pill i::after { content: ""; position: absolute; inset: -5px; border: 1px solid var(--cx-live); border-radius: 50%; animation: cx-foot-ping 1.8s ease-out infinite; }
.cx-live-pill.is-off { border-color: rgba(168, 151, 124, .4); background: none; color: var(--cx-ash); }
.cx-live-pill.is-off i { background: #8E2A22; box-shadow: none; } .cx-live-pill.is-off i::after { display: none; }
/* scroll reveal (JS adds .cx-reveal, then .is-in) */
.cx-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.cx-reveal.is-in { opacity: 1; transform: none; }
.cx-reveal-kids > * { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.cx-reveal-kids.is-in > * { opacity: 1; transform: none; }
.cx-reveal-kids.is-in > *:nth-child(2) { transition-delay: .08s; } .cx-reveal-kids.is-in > *:nth-child(3) { transition-delay: .16s; } .cx-reveal-kids.is-in > *:nth-child(4) { transition-delay: .24s; } .cx-reveal-kids.is-in > *:nth-child(5) { transition-delay: .32s; }
/* scroll progress thread under the header */
.cx-progress { position: fixed; z-index: 1001; top: 0; left: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--cx-p, 0)); background: linear-gradient(90deg, #8A5A1E, #F3D58A, #D9A441); box-shadow: 0 0 8px rgba(243, 213, 138, .6); pointer-events: none; }
/* drifting embers over the whole page (very sparse, behind content) */
.cx-embers { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cx-embers i { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #F3D58A; box-shadow: 0 0 6px #F3D58A, 0 0 12px rgba(217, 164, 65, .6); opacity: 0; animation: cx-ember var(--d) linear infinite; animation-delay: var(--dl); }
@keyframes cx-ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: var(--o); } 80% { opacity: var(--o); } 100% { transform: translate(var(--dx), -105vh); opacity: 0; } }
#main-content, main, .odin-foot { position: relative; z-index: 1; }
/* new live rows flash softly when the ledger refreshes */
.odin-world [data-odin-world-list] > li.is-fresh { animation: cx-fresh 2.4s ease .2s 1; }
@keyframes cx-fresh { 0%, 100% { box-shadow: none; } 30% { box-shadow: inset 0 0 0 1px rgba(243, 213, 138, .8), 0 0 18px rgba(217, 164, 65, .35); } }
@media (prefers-reduced-motion: reduce) {
.cx-reveal, .cx-reveal-kids > * { opacity: 1 !important; transform: none !important; transition: none !important; }
.cx-embers, .cx-progress { display: none; }
.cx-live-pill i::after { animation: none; }
}
/* =====================================================================
WAR ROOM — live ledgers as three pro panels (graphite, accent per panel)
kills = crimson · chat = steel · uniques = gold
===================================================================== */
.odin-world .odin-world__grid {
background:
url("../images/ele/card-tl.png") left top / 206px 206px no-repeat,
url("../images/ele/card-tr.png") right top / 206px 206px no-repeat,
url("../images/ele/card-bl.png") left bottom / 206px 206px no-repeat,
url("../images/ele/card-br.png") right bottom / 206px 206px no-repeat,
radial-gradient(70% 50% at 50% 0%, rgba(217, 164, 65, .06), transparent 70%),
linear-gradient(180deg, #131110, #0A0908) !important;
box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .03);
}
.odin-world .cx-panel { --acc: #E7B552; --acc-rgb: 231, 181, 82; position: relative; display: flex !important; flex-direction: column; padding: 24px 24px 20px !important; border: 0 !important; background: radial-gradient(90% 240px at 50% 0%, rgba(var(--acc-rgb), .09), transparent 75%) !important; }
.odin-world .cx-panel--kills { --acc: #E0675A; --acc-rgb: 224, 103, 90; }
.odin-world .cx-panel--chat { --acc: #E7B552; --acc-rgb: 231, 181, 82; }
.odin-world .cx-panel::after { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; background: linear-gradient(90deg, transparent, var(--acc), transparent); opacity: .75; pointer-events: none; }
.odin-world .cx-panel + .cx-panel::before { content: ""; position: absolute; left: 0; top: 6%; bottom: 6%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .09), transparent); pointer-events: none; }
.odin-world .cx-panel > h3 { --cx-font: "Marcellus"; display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 0 18px !important; padding: 0 0 18px !important; border-bottom: 1px solid rgba(255, 255, 255, .07) !important; color: #F3E6C8 !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: .22em !important; }
.odin-world .cx-panel > h3::before { content: "" !important; display: block !important; width: 40px !important; height: 40px !important; flex: none !important; border: 1px solid rgba(var(--acc-rgb), .55) !important; border-radius: 50% !important; background-color: rgba(var(--acc-rgb), .1) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; box-shadow: 0 0 20px rgba(var(--acc-rgb), .22), inset 0 0 12px rgba(var(--acc-rgb), .14); }
.odin-world .odin-world__grid:first-of-type > .cx-panel--kills > h3::before { background-image: url("../images/headers/header-kills.webp"), url("../images/headers/header-kills.png") !important; }
.odin-world .odin-world__grid:first-of-type > .cx-panel--chat > h3::before { background-image: url("../images/headers/header-chat.webp"), url("../images/headers/header-chat.png") !important; }
.odin-world .odin-world__grid:first-of-type > .cx-panel--uniques > h3::before { background-image: url("../images/headers/header-uniques.webp"), url("../images/headers/header-uniques.png") !important; }
.cx-panel__tag { --cx-font: "Marcellus"; margin-left: auto; padding: 5px 11px; border: 1px solid rgba(var(--acc-rgb), .4); border-radius: 20px; background: rgba(var(--acc-rgb), .08); color: var(--acc); font-size: 9.5px; font-weight: 700; line-height: 1; letter-spacing: .2em; white-space: nowrap; }
/* lists fill the whole column so the three panels end on the same line */
.odin-world .cx-panel > ul { display: flex !important; flex: 1 1 auto; flex-direction: column; gap: 10px; padding-top: 6px !important; }
.odin-world .cx-panel > ul > li { flex: 1 1 0; min-height: 66px !important; margin: 0 !important; }
.odin-world .cx-panel > ul > li.odin-ledger__empty { display: grid !important; place-items: center; border: 1px dashed rgba(255, 255, 255, .1) !important; border-radius: 6px; color: #8A8178 !important; }
.odin-world .cx-panel [data-odin-world-list] > li:first-child:not(.odin-ledger__empty)::after { top: -9px !important; right: 12px !important; border-color: rgba(var(--acc-rgb), .6) !important; border-radius: 3px; background: #15110F !important; color: var(--acc) !important; animation: none !important; box-shadow: 0 0 12px rgba(var(--acc-rgb), .25); }
/* glass rows (kills + uniques) */
.odin-world .cx-panel--kills [data-odin-world-list] > li,
.odin-world .cx-panel--uniques [data-odin-world-list] > li.odin-unique-row { border: 1px solid rgba(255, 255, 255, .065) !important; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 20px -14px rgba(0, 0, 0, .95); transition: border-color .25s ease, background-color .25s ease; }
/* 1 · kills: gold winner ⟶ crimson defeated */
.odin-world .cx-panel--kills [data-odin-world-list="kills"] > li { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) auto !important; column-gap: 12px !important; padding: 10px 14px !important;
background: linear-gradient(90deg, rgba(231, 181, 82, .10), transparent 36%, transparent 64%, rgba(224, 103, 90, .10)), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)) !important;
box-shadow: inset 3px 0 0 rgba(231, 181, 82, .75), inset -3px 0 0 rgba(224, 103, 90, .6), 0 10px 20px -14px rgba(0, 0, 0, .95) !important; }
.odin-world .cx-panel--kills [data-odin-world-list="kills"] > li:hover { border-color: rgba(224, 103, 90, .4) !important; }
.odin-world .cx-panel--kills .odin-who { --cx-font: "Marcellus"; gap: 10px !important; color: #F7EBCF !important; font-size: 15px !important; font-weight: 700; }
.odin-world .cx-panel--kills .odin-who:first-child .odin-avatar { width: 42px !important; height: 42px !important; border: 2px solid #E7B552 !important; box-shadow: 0 0 0 3px rgba(231, 181, 82, .15), 0 0 14px rgba(231, 181, 82, .4) !important; }
.odin-world .cx-panel--kills .odin-who--end { color: #8F857A !important; font-weight: 600; text-decoration-color: rgba(224, 103, 90, .8) !important; }
.odin-world .cx-panel--kills .odin-who--end .odin-avatar { width: 36px !important; height: 36px !important; border: 2px solid rgba(224, 103, 90, .75) !important; filter: grayscale(1) brightness(.7) !important; }
.odin-world .cx-panel--kills [data-odin-world-list="kills"] .odin-kill > em { width: 36px !important; height: 36px !important; border: 1px solid rgba(224, 103, 90, .55) !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6C2B9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 17.5 3 6V3h3l11.5 11.5M13 19l6-6M16 16l4 4M19 21l2-2'/%3E%3Cpath d='M9.5 17.5 21 6V3h-3L6.5 14.5M11 19l-6-6M8 16l-4 4M5 21l-2-2'/%3E%3C/svg%3E") center / 18px 18px no-repeat, radial-gradient(circle, rgba(224, 103, 90, .35), rgba(20, 12, 11, .9) 72%) !important; box-shadow: 0 0 16px rgba(224, 103, 90, .3); }
.odin-world .cx-panel--kills [data-odin-world-list="kills"] time { justify-self: end; padding: 4px 9px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 20px; background: rgba(0, 0, 0, .3); color: #9A9087 !important; font-size: 11px !important; white-space: nowrap; }
/* 2 · chat: steel bubbles */
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat { align-items: stretch !important; gap: 14px !important; }
.odin-world .cx-panel--chat .odin-chat > .odin-avatar { align-self: flex-start; width: 42px !important; height: 42px !important; margin-top: 6px; border: 2px solid rgba(231, 181, 82, .65) !important; box-shadow: 0 0 0 3px rgba(231, 181, 82, .12); }
.odin-world .cx-panel--chat .odin-chat__body { display: flex; flex-direction: column; justify-content: center; padding: 11px 16px 12px !important; border: 1px solid rgba(231, 181, 82, .17) !important; border-radius: 4px 14px 14px 14px !important; background: linear-gradient(180deg, rgba(231, 181, 82, .075), rgba(231, 181, 82, .02)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 20px -14px rgba(0, 0, 0, .95); transition: border-color .25s ease; }
.odin-world .cx-panel--chat .odin-chat__body::before { top: 14px !important; border-color: rgba(231, 181, 82, .17) !important; background: #1C1712 !important; }
.odin-world .cx-panel--chat .odin-chat:hover .odin-chat__body { border-color: rgba(231, 181, 82, .45) !important; }
.odin-world .cx-panel--chat .odin-chat__who span { --cx-font: "Marcellus"; color: #F3D58A !important; font-weight: 700; }
.odin-world .cx-panel--chat .odin-chat__who small { color: #9A9087 !important; }
.odin-world .cx-panel--chat .odin-chat__msg { color: #F3EEE4 !important; font-size: 15.5px !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li:first-child .odin-chat__body { border-color: rgba(231, 181, 82, .5) !important; box-shadow: 0 0 0 1px rgba(231, 181, 82, .12), 0 12px 26px -14px rgba(231, 181, 82, .35) !important; }
/* 3 · uniques: trophy cards with the boss art as a faded watermark */
.odin-world .cx-panel--uniques [data-odin-world-list="uniques"] > li.odin-unique-row { gap: 18px !important; padding: 12px 16px !important;
background: radial-gradient(ellipse 50% 120% at 0% 50%, rgba(231, 181, 82, .13), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)), radial-gradient(ellipse 34% 150% at 100% 50%, rgba(18, 16, 16, .2), rgba(18, 16, 16, .7) 62%, #121010 100%), var(--cx-u, none) right -60px center / auto 260% no-repeat !important; }
.odin-world .cx-panel--uniques [data-odin-world-list="uniques"] > li.odin-unique-row:hover { border-color: rgba(231, 181, 82, .45) !important; }
.odin-world .cx-panel--uniques .odin-unique__img { width: 64px !important; height: 64px !important; border: 2px solid #E7B552 !important; box-shadow: 0 0 0 4px rgba(231, 181, 82, .14), 0 0 22px rgba(231, 181, 82, .35) !important; }
.odin-world .cx-panel--uniques [data-odin-world-list="uniques"] > li.odin-unique-row::before { left: 62px !important; top: calc(50% + 14px) !important; border-color: #E7B552 !important; background: #1A1309 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3D58A' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3a8 8 0 0 0-8 8c0 2.6 1.2 4.4 3 5.5V20h10v-3.5c1.8-1.1 3-2.9 3-5.5a8 8 0 0 0-8-8Z'/%3E%3Ccircle cx='9' cy='11.5' r='1.6'/%3E%3Ccircle cx='15' cy='11.5' r='1.6'/%3E%3C/svg%3E") center / 13px no-repeat !important; }
.odin-world .cx-panel--uniques .odin-unique strong { --cx-font: "Marcellus"; color: #FFF0C2 !important; font-size: 18px !important; text-shadow: 0 0 16px rgba(231, 181, 82, .3); }
.odin-world .cx-panel--uniques .odin-unique__by { color: #E7B552 !important; }
.odin-world .cx-panel--uniques .odin-unique__hunter { color: #F7EBCF !important; }
.odin-world .cx-panel--uniques .odin-unique time { color: #9A9087 !important; }
/* panel footer: who leads this column */
.cx-panel__foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 14px; border: 1px solid rgba(var(--acc-rgb), .3); border-radius: 6px; background: linear-gradient(90deg, rgba(var(--acc-rgb), .16), rgba(var(--acc-rgb), .02) 80%); }
.cx-panel__foot[hidden] { display: none; }
.cx-panel__foot-label { --cx-font: "Marcellus"; display: inline-flex; align-items: center; gap: 7px; color: var(--acc); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.cx-panel__foot-label::before { content: ""; width: 7px; height: 7px; background: var(--acc); transform: rotate(45deg); box-shadow: 0 0 8px var(--acc); }
.cx-panel__foot img { width: 30px; height: 30px; margin-left: 6px; border: 1px solid var(--acc); border-radius: 50%; object-fit: cover; }
.cx-panel__foot img[hidden] { display: none; }
.cx-panel__foot b { --cx-font: "Marcellus"; overflow: hidden; color: #F7EBCF; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.cx-panel__foot em { margin-left: auto; padding: 3px 10px; border-radius: 20px; background: rgba(var(--acc-rgb), .14); color: var(--acc); font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
@media (max-width: 1100px) {
.odin-world .cx-panel + .cx-panel::before { left: 6%; right: 6%; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent); }
.odin-world .cx-panel { border-bottom: 0 !important; }
}
@media (max-width: 520px) {
.odin-world .cx-panel { padding: 20px 14px 16px !important; }
.odin-world .cx-panel--kills [data-odin-world-list="kills"] > li { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) !important; }
.odin-world .cx-panel--kills [data-odin-world-list="kills"] time { grid-column: 1 / -1; justify-self: center; }
.odin-world .cx-panel--kills .odin-who { font-size: 13px !important; }
}
/* war room: narrow columns (laptops) */
.odin-world .cx-panel--kills .odin-who { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cx-panel__foot { flex-wrap: wrap; row-gap: 6px; }
.cx-panel__foot b { min-width: 0; flex: 0 1 auto; }
@container (max-width: 440px) {
.odin-world .cx-panel--kills [data-odin-world-list="kills"] > li { grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) !important; row-gap: 6px !important; }
.odin-world .cx-panel--kills [data-odin-world-list="kills"] time { grid-column: 1 / -1; justify-self: center !important; padding: 2px 9px; }
.odin-world .cx-panel--kills .odin-who { font-size: 13.5px !important; }
}
.odin-world .cx-panel > ul > li { flex: 1 0 auto !important; }
.odin-world .cx-panel--kills .odin-kill > em::before, .odin-world .cx-panel--kills .odin-kill > em::after { content: none !important; display: none !important; }
.odin-world .cx-panel--kills [data-odin-world-list="kills"] > li > time { margin: 0 !important; padding: 4px 9px !important; flex: none !important; }
@media (max-width: 520px) {
.odin-world .cx-panel--kills [data-odin-world-list="kills"] > li { padding: 10px 10px 8px !important; column-gap: 8px !important; }
.odin-world .cx-panel--kills .odin-who { gap: 7px !important; font-size: 12.5px !important; }
.odin-world .cx-panel--kills .odin-who:first-child .odin-avatar { width: 34px !important; height: 34px !important; }
.odin-world .cx-panel--kills .odin-who--end .odin-avatar { width: 30px !important; height: 30px !important; }
.odin-world .cx-panel--kills [data-odin-world-list="kills"] .odin-kill > em { width: 30px !important; height: 30px !important; background-size: 15px 15px, auto !important; }
.odin-world .cx-panel--kills [data-odin-world-list="kills"] > li > time { padding: 0 !important; border: 0 !important; background: none !important; font-size: 10.5px !important; }
}
/* ===== War room v2: symmetric duels · grouped chat ===== */
/* duel: winner | emblem + time | defeated (mirrored), joined by a thin gold→crimson line */
.odin-world .cx-panel--kills [data-odin-world-list="kills"] > li { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; grid-template-rows: auto auto; align-content: center; column-gap: 16px !important; row-gap: 3px !important; padding: 12px 18px !important;
background: linear-gradient(90deg, rgba(231, 181, 82, .09), rgba(255, 255, 255, .012) 30%, rgba(255, 255, 255, .012) 70%, rgba(224, 103, 90, .09)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 20px -14px rgba(0, 0, 0, .95) !important; }
.odin-world .cx-panel--kills [data-odin-world-list="kills"] > li::before { content: ""; position: absolute; left: 34%; right: 34%; top: calc(50% - 8px); height: 1px; background: linear-gradient(90deg, transparent, rgba(231, 181, 82, .45), rgba(224, 103, 90, .45), transparent); pointer-events: none; }
.odin-world .cx-panel--kills .odin-who { position: relative; z-index: 1; grid-row: 1 / 3; align-self: center; }
.odin-world .cx-panel--kills .odin-who:first-child { grid-column: 1; justify-content: flex-start; }
.odin-world .cx-panel--kills .odin-who--end { grid-column: 3; justify-content: flex-end; text-align: right; }
.odin-world .cx-panel--kills [data-odin-world-list="kills"] .odin-kill > em { position: relative; z-index: 1; grid-column: 2; grid-row: 1; margin: 0 auto !important; }
.odin-world .cx-panel--kills [data-odin-world-list="kills"] > li > time,
.odin-world .cx-panel--kills [data-odin-world-list="kills"] time { grid-column: 2 !important; grid-row: 2; justify-self: center !important; padding: 0 !important; border: 0 !important; background: none !important; color: #8C8279 !important; font-size: 10.5px !important; letter-spacing: .02em; }
.odin-world .cx-panel--kills .odin-who:first-child .odin-avatar { width: 46px !important; height: 46px !important; }
.odin-world .cx-panel--kills .odin-who--end .odin-avatar { width: 40px !important; height: 40px !important; }
.odin-world .cx-panel--kills .odin-who:first-child { font-size: 16px !important; letter-spacing: .03em; }
.odin-world .cx-panel--kills .odin-who--end { font-size: 14.5px !important; }
@container (max-width: 440px) {
.odin-world .cx-panel--kills [data-odin-world-list="kills"] > li { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; column-gap: 8px !important; padding: 10px 12px !important; }
.odin-world .cx-panel--kills [data-odin-world-list="kills"] time { grid-column: 2 !important; }
}
@media (max-width: 520px) {
.odin-world .cx-panel--kills .odin-who:first-child .odin-avatar { width: 34px !important; height: 34px !important; }
.odin-world .cx-panel--kills .odin-who--end .odin-avatar { width: 30px !important; height: 30px !important; }
.odin-world .cx-panel--kills .odin-who:first-child, .odin-world .cx-panel--kills .odin-who--end { font-size: 12.5px !important; }
}
.odin-world .cx-panel--kills .odin-who:first-child { justify-self: start; max-width: 100%; }
.odin-world .cx-panel--kills .odin-who--end { justify-self: end; max-width: 100%; }
.odin-world .cx-panel--kills .odin-who--end { flex-direction: row !important; } .odin-world .cx-panel--kills .odin-who--end .odin-avatar { order: 2 !important; }
@media (max-width: 520px) {
.odin-world .cx-panel--kills .odin-who:first-child, .odin-world .cx-panel--kills .odin-who--end { flex-direction: column !important; align-items: center; gap: 5px !important; justify-self: center; text-align: center; font-size: 12px !important; letter-spacing: 0; }
.odin-world .cx-panel--kills .odin-who--end .odin-avatar { order: -1 !important; }
.odin-world .cx-panel--kills [data-odin-world-list="kills"] > li::before { top: 30px; left: 30%; right: 30%; }
}
/* ===== Chat v3: the centre stage — featured latest broadcast + compact feed ===== */
.odin-world .cx-panel--chat { background: radial-gradient(110% 320px at 50% 0%, rgba(231, 181, 82, .16), transparent 72%), linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 60%) !important; }
.odin-world .cx-panel--chat::after { height: 3px; opacity: 1; box-shadow: 0 0 18px rgba(231, 181, 82, .7); }
.odin-world .cx-panel--chat > ul { gap: 0 !important; }
/* featured: the newest message */
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child { flex: 1.4 0 auto !important; align-items: center !important; gap: 18px !important; margin-bottom: 14px !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child > .odin-avatar { align-self: center; width: 54px !important; height: 54px !important; margin: 0 !important; border: 2px solid #F3D58A !important; box-shadow: 0 0 0 4px rgba(231, 181, 82, .16), 0 0 26px rgba(231, 181, 82, .55) !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child::before { content: ""; position: absolute; left: 0; top: 50%; width: 58px; height: 58px; margin-top: -29px; border: 1px solid rgba(243, 213, 138, .7); border-radius: 50%; animation: cx-chat-ping 2.6s ease-out infinite; pointer-events: none; }
@keyframes cx-chat-ping { 0% { transform: scale(.95); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__body { align-self: stretch; overflow: hidden; padding: 15px 20px 16px !important; border: 1px solid rgba(231, 181, 82, .55) !important; border-radius: 4px 18px 18px 18px !important;
background: radial-gradient(120% 140% at 0% 0%, rgba(231, 181, 82, .22), transparent 60%), linear-gradient(160deg, #2A2114, #14110D 70%) !important;
box-shadow: 0 0 0 1px rgba(231, 181, 82, .12), 0 18px 40px -18px rgba(231, 181, 82, .45), inset 0 1px 0 rgba(255, 255, 255, .08) !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__body::before { top: 50% !important; margin-top: -6px; border-color: rgba(231, 181, 82, .55) !important; background: #261D11 !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__body::after { content: "\201C"; position: absolute; right: 18px; bottom: -30px; color: rgba(243, 213, 138, .1); font: 700 110px/1 "Marcellus", serif; pointer-events: none; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__who span { font-size: 14px !important; letter-spacing: .14em; text-shadow: 0 0 12px rgba(231, 181, 82, .5); }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__msg { position: relative; z-index: 1; margin-top: 6px !important; color: #FFF3D6 !important; font-size: clamp(18px, 1.25vw, 21px) !important; font-weight: 600; line-height: 1.3; text-shadow: 0 2px 18px rgba(231, 181, 82, .35); overflow-wrap: anywhere; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__body > * { position: relative; z-index: 1; }
/* sheen sweeping the featured card */
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__who::after { content: ""; position: absolute; z-index: 0; top: -40px; bottom: -400px; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07), transparent); transform: skewX(-18deg); animation: cx-chat-sheen 6s ease-in-out infinite; pointer-events: none; }
@keyframes cx-chat-sheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child::after { top: -10px !important; right: 14px !important; }
/* compact feed: one tidy line per message */
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:not(:first-child) { align-items: center !important; gap: 12px !important; min-height: 54px !important; padding: 8px 6px !important; border-top: 1px solid rgba(231, 181, 82, .1) !important; transition: background-color .25s ease; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:not(:first-child):hover { background: rgba(231, 181, 82, .05); }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:not(:first-child) > .odin-avatar { align-self: center; width: 34px !important; height: 34px !important; margin: 0 !important; border-width: 1px !important; box-shadow: none !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:not(:first-child) .odin-chat__body { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:not(:first-child) .odin-chat__body::before { display: none !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:not(:first-child) .odin-chat__who { display: contents !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:not(:first-child) .odin-chat__who span { grid-column: 1; grid-row: 1; font-size: 11.5px !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:not(:first-child) .odin-chat__msg { grid-column: 2; grid-row: 1; overflow: hidden; margin: 0 !important; color: #E6E1D8 !important; font-size: 15px !important; text-overflow: ellipsis; white-space: nowrap; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:not(:first-child) .odin-chat__who small { grid-column: 3; grid-row: 1; font-size: 10.5px !important; white-space: nowrap; }
@media (max-width: 520px) {
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child { gap: 12px !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child > .odin-avatar { width: 46px !important; height: 46px !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child::before { width: 50px; height: 50px; margin-top: -25px; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__body { padding: 16px 16px 18px !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:not(:first-child) .odin-chat__body { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:not(:first-child) .odin-chat__msg { grid-column: 1 / -1; grid-row: 2; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:not(:first-child) .odin-chat__who small { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .odin-world .cx-panel--chat li::before, .odin-world .cx-panel--chat .odin-chat__who::after { animation: none !important; } }
/* ===== Item tooltip = in-game look (vSRO): navy glass, Tahoma 12px, game palette ===== */
.sro-item-tooltip { --cx-font: Tahoma, Verdana, Arial, sans-serif; padding: 9px 12px 10px !important; border: 1px solid #5A6CA8 !important; border-radius: 3px; background: linear-gradient(180deg, rgba(22, 30, 60, .95), rgba(12, 17, 36, .95)) !important; box-shadow: inset 0 0 0 1px rgba(120, 140, 200, .18), 0 10px 28px rgba(0, 0, 0, .7) !important; color: #FFFFFF !important; font-size: 12px !important; line-height: 1.42 !important; letter-spacing: 0 !important; text-shadow: 1px 1px 0 #000; -webkit-font-smoothing: auto; }
.sro-item-tooltip * { letter-spacing: 0 !important; }
.sro-item-tooltip b, .sro-item-tooltip strong { font-weight: 700; }
.sro-item-tooltip .cx-item-tip__note { border-left-color: #5A6CA8; color: #AEB8D6; }
.sro-item-tooltip .cx-item-tip__loading { color: #ECD8A4; }
/* ===== SoX sparkle = the client's own effect (icon\item\etc\icon_edge_rare.ddj, 32 frames of 32x32, a twinkle orbiting the icon) ===== */
.cx-sox-orbit { position: absolute; z-index: 3; pointer-events: none; background: url("../images/sox/icon_edge_rare_strip.png") 0 0 / calc(var(--s, 32px) * 32) 100% no-repeat; image-rendering: pixelated; mix-blend-mode: screen; animation: cx-sox-frames 2.1s steps(32) infinite; }
@keyframes cx-sox-frames { from { background-position-x: 0; } to { background-position-x: calc(var(--s, 32px) * -32); } }
@media (prefers-reduced-motion: reduce) { .cx-sox-orbit { animation-duration: 4s; } }
/* ===== War room: the chat is the centre stage — wider middle column, slimmer sides ===== */
@media (min-width: 1101px) {
.odin-world .odin-world__grid:not(.odin-world__grid--items) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) !important; }
.odin-world .cx-panel--kills, .odin-world .cx-panel--uniques { padding-left: 18px !important; padding-right: 18px !important; }
.odin-world .cx-panel--chat { padding-left: 30px !important; padding-right: 30px !important; }
}
/* =====================================================================
STONE & LEATHER — own textures (generated for Rebelion): carved stone
behind the page, stone separators between sections, a wavy gold edge
into the journey, red leather for the Discord banner
===================================================================== */
body.odin-body {
background-image:
radial-gradient(ellipse at 50% -10%, rgba(120, 72, 28, .30), transparent 52%),
radial-gradient(ellipse at 100% 60%, rgba(142, 42, 34, .07), transparent 40%),
radial-gradient(ellipse at 0% 85%, rgba(217, 164, 65, .05), transparent 40%),
linear-gradient(rgba(12, 9, 7, .62), rgba(12, 9, 7, .62)),
url("../images/ele/stone-relief.webp") !important;
background-size: auto, auto, auto, auto, 1600px auto !important;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;
}
/* Discord banner in red leather */
.cx-discord { position: relative; border-color: #6B3A2A !important; background:
linear-gradient(90deg, rgba(10, 4, 3, .25), rgba(10, 4, 3, .55) 60%, rgba(10, 4, 3, .7)),
url("../images/ele/leather-red.webp") center / 520px auto repeat !important;
box-shadow: inset 0 0 0 1px rgba(231, 181, 82, .18), inset 0 0 40px rgba(0, 0, 0, .6), 0 18px 40px -18px rgba(0, 0, 0, .9) !important; }
.cx-discord::before { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(231, 181, 82, .32); pointer-events: none; }
/* =====================================================================
PRO PASS (benchmarked on Lost Ark · Throne and Liberty · Black Desert · PoE2)
1 type system · 2 hero · 3 news with art · 4 rhythm · 5 one art direction
===================================================================== */
/* 1 · TYPE: Marcellus only for display (h1–h3, buttons, big numbers); Inter for reading, data and labels */
body.odin-body { --cx-font: "Inter"; font-size: 16px; }
.odin-body p { line-height: 1.65; }
body.odin-body .odin-nav, body.odin-body .odin-tools, body.odin-body .odin-mobile-tools, body.odin-body .odin-drop__btn, body.odin-body .odin-drop__list small,
body.odin-body .atlas-eyebrow, body.odin-body .atlas-pulse__label, body.odin-body .atlas-pulse article > small, body.odin-body .atlas-hero__lead,
body.odin-body .cx-band__title, body.odin-body .cx-chip, body.odin-body .cx-chip b, body.odin-body .cx-pulse__count,
body.odin-body .cx-side__eyebrow, body.odin-body .cx-fort__eyebrow, body.odin-body .cx-fort__live, body.odin-body .cx-fort__clock span, body.odin-body .cx-fort__owner,
body.odin-body .cx-events__node b, body.odin-body .cx-sys__body small, body.odin-body .cx-sys__body > span, body.odin-body .cx-sys__more, body.odin-body .cx-sys__list,
body.odin-body .odin-unique__by, body.odin-body .odin-unique__hunter, body.odin-body .cx-journey__eyebrow, body.odin-body .cx-discord__text span, body.odin-body .cx-discord__count,
body.odin-body .cx-loot__label, body.odin-body .cx-loot__mob, body.odin-body .cx-live-pill, body.odin-body .cx-panel__tag, body.odin-body .cx-panel__foot-label, body.odin-body .cx-panel__foot b, body.odin-body .cx-panel__foot em,
body.odin-body .odin-who, body.odin-body .odin-chat__who span, body.odin-body .odin-chat__msg, body.odin-body .odin-item__body small,
body.odin-body .odin-legends__rank, body.odin-body .odin-legends__points, body.odin-body .odin-legends__more, body.odin-body .odin-title__kicker,
body.odin-body .cx-guild-row__pts, body.odin-body .cx-guild-row__name small, body.odin-body .odin-rank__pts, body.odin-body th, body.odin-body label, body.odin-body .badge,
body.odin-body time, body.odin-body small { --cx-font: "Inter" !important; }
body.odin-body .odin-nav a, body.odin-body .atlas-pulse__label, body.odin-body .cx-band__title, body.odin-body .cx-panel__tag, body.odin-body .cx-panel__foot-label,
body.odin-body .cx-live-pill, body.odin-body .odin-unique__by, body.odin-body .cx-loot__label, body.odin-body .cx-sys__body small, body.odin-body .cx-journey__eyebrow,
body.odin-body .cx-side__eyebrow, body.odin-body .cx-fort__eyebrow { font-weight: 700 !important; letter-spacing: .16em !important; }
body.odin-body .odin-who, body.odin-body .odin-chat__who span, body.odin-body .odin-unique__hunter, body.odin-body .cx-panel__foot b { font-weight: 700 !important; letter-spacing: .01em !important; text-transform: none !important; }
body.odin-body .odin-chat__msg { font-weight: 500; }
/* 2 · HERO: crisp key art / video, one message, one primary action */
.cx-hero-video iframe { filter: none !important; transform: translate(-50%, -50%) scale(1.06) !important; }
.cx-scene.is-video .cx-hero-video iframe { opacity: 1 !important; }
.cx-hero-poster { filter: none !important; opacity: 1 !important; transform: translate(-50%, -50%) scale(1.02) !important; }
.cx-scene.is-video .cx-hero-poster { opacity: 0 !important; }
.cx-hero-video::before { opacity: .25 !important; }
.cx-hero-video::after { background:
radial-gradient(ellipse 42% 46% at 50% 56%, rgba(10, 7, 5, .55), transparent 72%),
linear-gradient(180deg, rgba(10, 7, 5, .6) 0%, rgba(10, 7, 5, 0) 22%, rgba(10, 7, 5, 0) 58%, rgba(14, 10, 7, .8) 86%, #0E0A07 100%) !important; }
.cx-hero-eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 0 0 14px !important; padding: 8px 18px; border: 1px solid rgba(231, 181, 82, .35); border-radius: 30px; background: rgba(10, 7, 5, .55); backdrop-filter: blur(6px); color: #F3E6C8 !important; font-size: 12px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cx-hero-eyebrow i { width: 5px; height: 5px; background: #E7B552; transform: rotate(45deg); }
.atlas-hero h1 { font-size: clamp(40px, 6vw, 84px) !important; line-height: 1 !important; text-shadow: 0 4px 30px rgba(0, 0, 0, .8); }
.atlas-hero__lead { max-width: 620px; margin-left: auto !important; margin-right: auto !important; color: #EADFC8 !important; font-size: clamp(16px, 1.3vw, 19px) !important; text-shadow: 0 2px 14px rgba(0, 0, 0, .9); }
.cx-hero-actions { display: flex !important; flex-direction: column; align-items: center; gap: 16px !important; }
.cx-hero-cta { min-width: 300px; min-height: 64px !important; padding: 0 44px !important; font-size: 17px !important; box-shadow: 0 0 0 1px rgba(231, 181, 82, .35), 0 14px 40px -10px rgba(217, 164, 65, .55) !important; }
.cx-hero-link { --cx-font: "Inter"; color: #F3D58A !important; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-decoration: none; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); border-bottom: 1px solid rgba(243, 213, 138, .35); padding-bottom: 2px; transition: border-color .2s ease, color .2s ease; }
.cx-hero-link:hover { color: #FFF0C2 !important; border-color: #F3D58A; }
.cx-hero-link span { display: inline-block; transition: transform .2s ease; } .cx-hero-link:hover span { transform: translateX(4px); }
/* 3 · NEWS: art-led cards (lead card + two side cards) */
.cx-news { width: min(var(--atlas-width, 1760px), calc(100% - 32px)); margin: 90px auto !important; }
.cx-news__head { margin-bottom: 36px !important; }
.cx-news__actions { display: flex; justify-content: center; margin-top: 26px; }
.cx-news__subtle-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 18px;
border: 1px solid rgba(231, 181, 82, .32);
border-radius: 20px;
background: rgba(231, 181, 82, .05);
color: #E7B552 !important;
font-family: "Marcellus", serif !important;
font-size: 11px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
text-decoration: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
transition: all .2s ease;
}
.cx-news__subtle-btn:hover {
border-color: rgba(231, 181, 82, .75);
background: rgba(231, 181, 82, .14);
color: #FFF2C7 !important;
box-shadow: 0 0 16px rgba(231, 181, 82, .25);
transform: translateY(-1px);
}
.cx-news__subtle-btn svg {
width: 12px;
height: 12px;
transition: transform .2s ease;
}
.cx-news__subtle-btn:hover svg {
transform: translateX(3px);
}
.cx-news__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 22px; }
.cx-news__card { display: grid; grid-template-columns: 42% minmax(0, 1fr); overflow: hidden; border: 1px solid var(--cx-card-line); border-radius: 4px; background: linear-gradient(180deg, #17120D, #100C09); color: inherit; text-decoration: none !important; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .9); transition: border-color .25s ease, transform .25s ease; }
.cx-news__card.is-lead { grid-row: 1 / 3; grid-template-columns: 1fr; grid-template-rows: minmax(280px, 1fr) auto; }
.cx-news__card:hover { border-color: rgba(231, 181, 82, .7); }
.cx-news__art { position: relative; display: block; min-height: 180px; overflow: hidden; }
.cx-news__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cx-news__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(16, 12, 9, .65)); }
.cx-news__card:hover .cx-news__art img { transform: scale(1.05); }
.cx-news__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 20px; }
.cx-news__card.is-lead .cx-news__body { padding: 26px 30px 26px; }
.cx-news__meta { display: flex; align-items: center; gap: 12px; }
.cx-news__tag { --cx-font: "Inter"; padding: 4px 10px; border: 1px solid rgba(231, 181, 82, .5); border-radius: 3px; background: rgba(231, 181, 82, .1); color: #F3D58A; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cx-news__tag--event { border-color: rgba(111, 211, 162, .5); background: rgba(111, 211, 162, .1); color: #8FE0B8; }
.cx-news__tag--maintenance, .cx-news__tag--update { border-color: rgba(143, 179, 218, .5); background: rgba(143, 179, 218, .1); color: #B9D2EE; }
.cx-news__meta time { color: #9A9087; font-size: 12.5px; }
.cx-news__title { --cx-font: "Marcellus"; color: #F7EBCF; font-size: 19px; font-weight: 700; line-height: 1.25; transition: color .2s ease; }
.cx-news__card.is-lead .cx-news__title { font-size: clamp(22px, 2vw, 30px); }
.cx-news__card:hover .cx-news__title { color: #F3D58A; }
.cx-news__excerpt { display: -webkit-box; overflow: hidden; color: #B9AD95; font-size: 14.5px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cx-news__card.is-lead .cx-news__excerpt { -webkit-line-clamp: 3; font-size: 15.5px; }
.cx-news__more { margin-top: auto; padding-top: 6px; color: #E7B552; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 960px) {
.cx-news__grid { grid-template-columns: 1fr; grid-template-rows: none; }
.cx-news__card.is-lead { grid-row: auto; grid-template-rows: 220px auto; }
}
@media (max-width: 560px) { .cx-news__card { grid-template-columns: 1fr; grid-template-rows: 170px auto; } .cx-news { margin: 60px auto !important; } }
/* 4 · RHYTHM: Fortress War scene styled above */
@media (max-width: 560px) {
.cx-hero-cta { min-width: 0 !important; width: 100% !important; max-width: 340px; height: 58px !important; min-height: 58px !important; padding: 0 20px !important; font-size: 15px !important; flex-direction: row !important; }
.cx-hero-eyebrow { font-size: 10.5px !important; gap: 6px 10px; padding: 7px 14px; }
}
.cx-hero-actions > a { flex: none !important; }
/* ===== Hero v2: copy on the left, the video breathes on the right (desktop) ===== */
@media (min-width: 961px) {
.atlas-hero { align-items: center !important; }
.atlas-hero__copy { justify-self: start !important; max-width: 640px !important; margin-left: max(32px, calc((100vw - var(--atlas-width, 1760px)) / 2 + 24px), 5vw) !important; padding-bottom: 0 !important; text-align: left !important; }
.atlas-hero__brandlockup { width: clamp(260px, 22vw, 380px) !important; margin: 0 0 18px -10px !important; }
.cx-hero-eyebrow { justify-content: flex-start; }
.atlas-hero h1 { font-size: clamp(40px, 4.2vw, 68px) !important; text-align: left; }
.atlas-hero__lead { margin-left: 0 !important; margin-right: 0 !important; max-width: 520px; text-align: left; }
.cx-hero-actions { flex-direction: row !important; align-items: center; justify-content: flex-start !important; gap: 28px !important; }
.cx-hero-video::after { background:
linear-gradient(90deg, rgba(10, 7, 5, .88) 0%, rgba(10, 7, 5, .66) 30%, rgba(10, 7, 5, .18) 55%, rgba(10, 7, 5, 0) 70%),
linear-gradient(180deg, rgba(10, 7, 5, .55) 0%, rgba(10, 7, 5, 0) 20%, rgba(10, 7, 5, 0) 70%, rgba(14, 10, 7, .85) 92%, #0E0A07 100%) !important; }
}
.cx-hero-link { display: inline-flex; align-items: center; gap: 9px; }
.cx-hero-link__icon { width: 18px; height: 18px; flex: none; transition: transform .2s ease; }
.cx-hero-link:hover .cx-hero-link__icon { transform: translateY(2px); }
/* hero: the copy block is as wide as its widest line, so the logo can sit centred above it */
@media (min-width: 961px) {
.atlas-hero__copy { width: fit-content !important; }
.atlas-hero__brandlockup { margin: 0 auto 18px !important; }
}
/* hero v3: video fills the whole hero edge to edge (no dark strip), copy centred vertically in the visible area */
.cx-scene__fade { display: none !important; }
.atlas-hero { min-height: calc(100vh - 84px) !important; padding-top: 40px !important; padding-bottom: 40px !important; }
.cx-hero-video iframe { transform: translate(-50%, -50%) scale(1.12) !important; }
@media (min-width: 961px) {
.cx-hero-video::after { background:
linear-gradient(90deg, rgba(10, 7, 5, .88) 0%, rgba(10, 7, 5, .66) 30%, rgba(10, 7, 5, .18) 55%, rgba(10, 7, 5, 0) 70%),
linear-gradient(180deg, rgba(10, 7, 5, .45) 0%, rgba(10, 7, 5, 0) 16%) !important; }
}
@media (max-width: 960px) {
.cx-hero-video::after { background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(10, 7, 5, .55), transparent 75%), linear-gradient(180deg, rgba(10, 7, 5, .5) 0%, rgba(10, 7, 5, 0) 20%, rgba(10, 7, 5, 0) 75%, rgba(10, 7, 5, .45) 100%) !important; }
}
.atlas-hero { padding-bottom: 94px !important; } /* the status band overlaps the hero bottom by ~54px */
/* ===== Hero v4 (compact, like a game launcher): a small centred column on the left — eyebrow · logo · tagline · two equal buttons ===== */
.cx-hero-actions { flex-direction: row !important; flex-wrap: wrap; justify-content: center !important; gap: 14px !important; }
.cx-hero-cta { min-width: 0 !important; width: 196px !important; height: 50px !important; min-height: 50px !important; padding: 0 16px !important; font-size: 12.5px !important; letter-spacing: .16em !important; box-shadow: none !important; }
.atlas-hero__brandlockup { order: 1 !important; }
.cx-hero-eyebrow { order: 2 !important; padding: 0 !important; border: 0 !important; background: none !important; backdrop-filter: none !important; --cx-font: "Marcellus" !important; color: #D9B36A !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.cx-hero-eyebrow i { width: 4px; height: 4px; }
.atlas-hero__copy { display: flex !important; flex-direction: column; align-items: center; text-align: center !important; }
.atlas-hero h1, #atlas-hero-title { order: 3 !important; font-size: clamp(22px, 1.9vw, 30px) !important; line-height: 1.2 !important; letter-spacing: .08em !important; text-align: center !important; margin: 4px 0 8px !important; }
.atlas-hero__lead { order: 4 !important; max-width: 380px !important; margin: 0 auto 22px !important; font-size: 14.5px !important; line-height: 1.55 !important; text-align: center !important; color: #D8CCB2 !important; }
.atlas-hero__actions, .cx-hero-actions { order: 5 !important; }
@media (min-width: 961px) {
.atlas-hero__copy { width: 460px !important; max-width: 460px !important; margin-left: 0 !important; margin-right: auto !important; justify-self: start !important; }
.atlas-hero__brandlockup { width: 400px !important; margin: 10px auto 14px !important; }
.cx-hero-eyebrow { justify-content: center !important; }
.cx-hero-video::after { background:
linear-gradient(90deg, rgba(10, 7, 5, .82) 0%, rgba(10, 7, 5, .55) 26%, rgba(10, 7, 5, .1) 45%, rgba(10, 7, 5, 0) 60%),
linear-gradient(180deg, rgba(10, 7, 5, .45) 0%, rgba(10, 7, 5, 0) 16%) !important; }
}
@media (max-width: 960px) {
.atlas-hero__brandlockup { width: min(340px, 80vw) !important; margin: 0 auto 12px !important; }
.cx-hero-cta { width: calc(50% - 7px) !important; max-width: 196px; }
}
.cx-hero-eyebrow { white-space: nowrap; flex-wrap: nowrap !important; }
@media (max-width: 960px) { .cx-hero-video::after { background: linear-gradient(180deg, rgba(10, 7, 5, .55), rgba(10, 7, 5, .4) 50%, rgba(10, 7, 5, .55)) !important; } }
/* ===== Hero = only our own video file (no static art, no YouTube, no textures) ===== */
.atlas-hero__texture, .cx-scene--file::before, .cx-scene--file::after { display: none !important; }
.cx-hero-file { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; background: #0E0A07; }
.cx-hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(90deg, rgba(10, 7, 5, .82) 0%, rgba(10, 7, 5, .55) 26%, rgba(10, 7, 5, .1) 45%, rgba(10, 7, 5, 0) 60%),
linear-gradient(180deg, rgba(10, 7, 5, .45) 0%, rgba(10, 7, 5, 0) 16%); }
@media (max-width: 960px) {
.cx-hero-shade { background: linear-gradient(180deg, rgba(10, 7, 5, .55), rgba(10, 7, 5, .4) 50%, rgba(10, 7, 5, .55)); }
}
@media (prefers-reduced-motion: reduce) { .cx-hero-file { display: none; } .cx-scene--file { background: #0E0A07 url("../video/hero-poster.jpg") center / cover no-repeat; } }
/* ===== Board titles with presence: bigger Marcellus, gilded text, glowing medallion, gold rule ===== */
.odin-world .odin-ledger > h3, .odin-legends__board > h3 {
--cx-font: "Marcellus" !important; position: relative; display: flex !important; align-items: center; gap: 16px !important;
margin: 0 0 22px !important; padding: 0 0 20px !important; border-bottom: 0 !important;
font-size: clamp(17px, 1.3vw, 22px) !important; font-weight: 800 !important; letter-spacing: .13em !important; line-height: 1.15 !important; text-transform: uppercase;
background: linear-gradient(180deg, #FFF4D6 0%, #F3D58A 45%, #C9963F 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #F3D58A !important;
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .65)) drop-shadow(0 0 14px rgba(231, 181, 82, .18));
}
.odin-world .odin-ledger > h3 > *, .odin-legends__board > h3 > * { -webkit-text-fill-color: currentColor; }
.odin-world .odin-ledger > h3::after, .odin-legends__board > h3::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(var(--acc-rgb, 231, 181, 82), .85), rgba(var(--acc-rgb, 231, 181, 82), .25) 45%, transparent 90%); }
.odin-world .odin-ledger > h3::before, .odin-legends__board > h3::before { width: 46px !important; height: 46px !important; flex: none; border: 1px solid rgba(var(--acc-rgb, 231, 181, 82), .6) !important; border-radius: 50%; background-color: rgba(var(--acc-rgb, 231, 181, 82), .1) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; box-shadow: 0 0 0 4px rgba(var(--acc-rgb, 231, 181, 82), .06), 0 0 22px rgba(var(--acc-rgb, 231, 181, 82), .3), inset 0 0 12px rgba(var(--acc-rgb, 231, 181, 82), .15); }
.odin-world .odin-world__grid + .odin-world__grid .odin-ledger > h3::before { display: block !important; content: ""; }
/* icons for the legends boards */
.odin-legends__board > h3::before { content: ""; background-image: url("../images/headers/header-players.webp"), url("../images/headers/header-players.png") !important; }
.odin-legends__board.cx-guilds > h3::before { background-image: url("../images/headers/header-guilds.webp"), url("../images/headers/header-guilds.png") !important; }
.odin-legends__board > h3 { margin-top: 4px !important; }
@media (max-width: 560px) { .odin-world .odin-ledger > h3, .odin-legends__board > h3 { gap: 12px !important; font-size: 16px !important; letter-spacing: .1em !important; } .odin-world .odin-ledger > h3::before, .odin-legends__board > h3::before { width: 38px !important; height: 38px !important; background-size: 18px 18px !important; } }
@media (min-width: 1101px) { .odin-world .cx-panel--kills > h3, .odin-world .cx-panel--uniques > h3 { font-size: clamp(16px, 1.05vw, 19px) !important; letter-spacing: .09em !important; gap: 13px !important; } }
/* chat: the newest message keeps its golden glow but is the same size as the rest (one line) */
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child { flex: 1 0 auto !important; align-items: center !important; gap: 12px !important; min-height: 54px !important; margin: 6px 0 6px !important; padding: 8px 6px !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child > .odin-avatar { width: 34px !important; height: 34px !important; border-width: 1px !important; box-shadow: 0 0 0 3px rgba(231, 181, 82, .14), 0 0 14px rgba(231, 181, 82, .5) !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child::before { width: 38px; height: 38px; margin-top: -19px; left: 4px; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__body { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; align-self: center; padding: 12px 16px !important; border-radius: 10px !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__body::before, .odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__body::after { display: none !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__who { display: contents !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__who span { grid-column: 1; grid-row: 1; font-size: 11.5px !important; letter-spacing: .01em !important; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__msg { grid-column: 2; grid-row: 1; overflow: hidden; margin: 0 !important; font-size: 15px !important; font-weight: 600; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__who small { grid-column: 3; grid-row: 1; font-size: 10.5px !important; white-space: nowrap; }
@media (max-width: 520px) {
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__body { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__msg { grid-column: 1 / -1; grid-row: 2; }
.odin-world .cx-panel--chat [data-odin-world-list="chat"] > li.odin-chat:first-child .odin-chat__who small { grid-column: 2; }
}
@media (min-width: 961px) { .atlas-hero__glow { display: block !important; width: 560px !important; } } .atlas-hero__brandlockup { position: relative; isolation: isolate; }
@media (min-width: 961px) { .atlas-hero .atlas-hero__brandlockup img.atlas-hero__glow { width: 560px !important; max-width: none !important; } }
@media (min-width: 961px) { .atlas-hero .atlas-hero__brandlockup img.atlas-hero__glow { opacity: .5 !important; } }
@media (min-width: 961px) { .atlas-hero .atlas-hero__brandlockup img.atlas-hero__glow { width: 80% !important; } }
/* ===== Journey: the server emblem travels 1 → 2 → 3 (spinning); each medal lights up when it arrives ===== */
.cx-journey__path::after { top: 25px !important; width: 46px !important; height: 46px !important; margin-left: -23px; background: url("../../../images/branding/rebelion-emblem-128.webp") center / contain no-repeat !important; filter: drop-shadow(0 0 8px rgba(243, 213, 138, .75)) drop-shadow(0 0 18px rgba(217, 164, 65, .45)); z-index: 2;
animation: cx-emblem-road 9s ease-in-out infinite, cx-emblem-spin 3s linear infinite !important; }
@keyframes cx-emblem-road {
0% { left: calc((100% - 60px) / 6); opacity: 0; } 4% { opacity: 1; } 12% { left: calc((100% - 60px) / 6); }
40% { left: 50%; } 52% { left: 50%; }
80% { left: calc(100% - (100% - 60px) / 6); } 94% { left: calc(100% - (100% - 60px) / 6); opacity: 1; } 100% { left: calc(100% - (100% - 60px) / 6); opacity: 0; }
}
@keyframes cx-emblem-spin { to { transform: rotate(360deg); } }
.cx-step__medal { transition: none; }
.cx-step__medal svg { transition: color .3s ease; }
.cx-journey__path > .cx-step:nth-child(1) .cx-step__medal { animation: cx-medal-1 9s ease-in-out infinite; }
.cx-journey__path > .cx-step:nth-child(2) .cx-step__medal { animation: cx-medal-2 9s ease-in-out infinite; }
.cx-journey__path > .cx-step:nth-child(3) .cx-step__medal { animation: cx-medal-3 9s ease-in-out infinite; }
@keyframes cx-medal-1 { 0%, 16% { background: radial-gradient(circle at 50% 30%, #F3D58A, #B7832B 60%, #5A3A14); color: #1A1209; box-shadow: 0 0 0 8px rgba(14, 10, 7, .9), 0 0 0 9px #FFE7A3, 0 0 46px rgba(243, 213, 138, .7); } 22%, 100% { background: radial-gradient(circle at 50% 30%, #2E1F11, #0F0A07 75%); color: #F3D58A; } }
@keyframes cx-medal-2 { 0%, 36% { background: radial-gradient(circle at 50% 30%, #2E1F11, #0F0A07 75%); color: #F3D58A; } 40%, 56% { background: radial-gradient(circle at 50% 30%, #F3D58A, #B7832B 60%, #5A3A14); color: #1A1209; box-shadow: 0 0 0 8px rgba(14, 10, 7, .9), 0 0 0 9px #FFE7A3, 0 0 46px rgba(243, 213, 138, .7); } 62%, 100% { background: radial-gradient(circle at 50% 30%, #2E1F11, #0F0A07 75%); color: #F3D58A; } }
@keyframes cx-medal-3 { 0%, 76% { background: radial-gradient(circle at 50% 30%, #2E1F11, #0F0A07 75%); color: #F3D58A; } 80%, 98% { background: radial-gradient(circle at 50% 30%, #F3D58A, #B7832B 60%, #5A3A14); color: #1A1209; box-shadow: 0 0 0 8px rgba(14, 10, 7, .9), 0 0 0 9px #FFE7A3, 0 0 46px rgba(243, 213, 138, .7); } 100% { background: radial-gradient(circle at 50% 30%, #2E1F11, #0F0A07 75%); color: #F3D58A; } }
@media (max-width: 900px) { .cx-journey__path > .cx-step .cx-step__medal { animation: none; } }
@media (prefers-reduced-motion: reduce) { .cx-journey__path > .cx-step .cx-step__medal, .cx-journey__path::after { animation: none !important; } }
/* ===== Community: three leather gadgets — Discord · Facebook · YouTube ===== */
.cx-socials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 44px; }
.cx-social { --brand: #5865F2; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 24px; border: 1px solid #6B3A2A; background:
linear-gradient(180deg, rgba(10, 4, 3, .25), rgba(10, 4, 3, .6)),
url("../images/ele/leather-red.webp") center / 520px auto repeat;
box-shadow: inset 0 0 0 1px rgba(231, 181, 82, .18), inset 0 0 40px rgba(0, 0, 0, .6), 0 18px 40px -18px rgba(0, 0, 0, .9); }
.cx-social::before { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(231, 181, 82, .32); pointer-events: none; }
.cx-social--facebook { --brand: #1877F2; }
.cx-social--youtube { --brand: #FF0033; }
.cx-social__head { display: flex; align-items: center; gap: 14px; }
.cx-social__logo { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border: 1px solid rgba(217, 164, 65, .6); border-radius: 50%; background: radial-gradient(circle at 50% 30%, #2A1C10, #120C08); color: #F3D58A; box-shadow: 0 0 0 3px rgba(14, 10, 7, .6), 0 0 16px color-mix(in srgb, var(--brand) 40%, transparent); transition: color .25s ease, box-shadow .25s ease; }
.cx-social__logo svg { width: 26px; height: 22px; }
.cx-social:hover .cx-social__logo { color: #fff; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--brand) 85%, #fff 10%), color-mix(in srgb, var(--brand) 55%, #000)); }
.cx-social__eyebrow { --cx-font: "Inter" !important; color: #E7B552; font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.cx-social__title { --cx-font: "Marcellus"; margin-top: 6px; color: #F7EBCF; font-size: 19px; font-weight: 700; }
.cx-social__text { margin: 0 !important; color: #D8CCB2 !important; font-size: 14.5px !important; line-height: 1.55 !important; }
.cx-social__live { display: flex; align-items: center; gap: 12px; min-height: 64px; margin-top: auto; padding-top: 6px; }
.cx-social__note { color: #B9AD95; font-size: 13.5px; }
.cx-social__page { display: inline-flex; align-items: center; gap: 10px; }
.cx-social__page img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(243, 213, 138, .4)); }
.cx-social__page span { display: flex; flex-direction: column; line-height: 1.2; }
.cx-social__page b { color: #F7EBCF; font-size: 14.5px; }
.cx-social__page small { color: #B9AD95; font-size: 12px; }
.cx-social__thumb { position: relative; display: block; width: 100%; height: 64px; overflow: hidden; border: 1px solid rgba(231, 181, 82, .35); border-radius: 4px; }
.cx-social__thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.8); transition: transform .4s ease, filter .3s ease; }
.cx-social__thumb i { position: absolute; left: 50%; top: 50%; width: 42px; height: 30px; margin: -15px 0 0 -21px; border-radius: 8px; background: #FF0033; box-shadow: 0 4px 14px rgba(0, 0, 0, .6); }
.cx-social__thumb i::after { content: ""; position: absolute; left: 17px; top: 9px; border-left: 11px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.cx-social__thumb:hover img { transform: scale(1.05); filter: none; }
.cx-social .atlas-button { align-self: stretch; min-width: 0 !important; min-height: 50px !important; margin-top: 8px; padding: 0 18px !important; font-size: 12px !important; flex: none !important; }
.cx-socials.cx-socials--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; margin-left: auto; margin-right: auto; }
@media (max-width: 1100px) { .cx-socials, .cx-socials.cx-socials--2 { grid-template-columns: 1fr; } }
/* journey emblem: static, smaller, travels BEHIND the medals */
.cx-journey__path::after { width: 34px !important; height: 34px !important; margin-left: -17px !important; top: 31px !important; z-index: 0 !important; animation: cx-emblem-road 9s ease-in-out infinite !important; transform: none !important; }
.cx-step { position: relative; z-index: 1; }
.cx-step__medal { z-index: 2 !important; }
/* official embeds inside the leather gadgets */
.cx-social__embed { position: relative; flex: 1 1 auto; overflow: hidden; margin-top: 6px; border: 1px solid rgba(231, 181, 82, .35); border-radius: 6px; background: #120C08; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); }
.cx-social__embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.cx-social__embed--discord, .cx-social__embed--facebook { min-height: 400px; }
.cx-social__embed--youtube { flex: 0 0 auto; aspect-ratio: 16 / 9; }
.cx-social--youtube .cx-social__text { order: 5; margin-top: 4px !important; }
.cx-social--youtube .atlas-button { order: 6; margin-top: auto; }
.cx-social .atlas-button { margin-top: 12px; }
.cx-social.cx-social--youtube .atlas-button { margin-top: auto !important; } .cx-social--youtube .cx-social__text { flex: 1 1 auto; }
.cx-social__embed--discord { min-height: 0 !important; height: 500px; flex: 0 0 auto; }
.cx-social--youtube .cx-social__text { flex: 0 0 auto !important; order: 5; }
.cx-social__channel { order: 5; display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 12px 14px; border: 1px solid rgba(231, 181, 82, .3); border-radius: 6px; background: rgba(10, 4, 3, .45); }
.cx-social__channel img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(243, 213, 138, .4)); }
.cx-social__channel span { display: flex; flex-direction: column; line-height: 1.25; }
.cx-social__channel b { color: #F7EBCF; font-size: 14.5px; }
.cx-social__channel small { color: #B9AD95; font-size: 12px; }
/* home: the journey section runs straight into the footer (no stray strip of page background) */ main:has(> .cx-journey:last-of-type) + .odin-foot, main:has(> .cx-journey:last-of-type) ~ .odin-foot { margin-top: 0 !important; }
/* =====================================================================
EVENTS v2 — featured next event (art, big countdown, live progress), art-led line, weekly planner, local time
===================================================================== */
.cx-ev { width: min(var(--atlas-width, 1760px), calc(100% - 32px)); margin-left: auto; margin-right: auto; }
.cx-ev__tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0 0 28px; }
.cx-ev__tab { --cx-font: "Inter" !important; padding: 9px 20px; border: 1px solid var(--cx-card-line); border-radius: 30px; background: rgba(14, 10, 7, .7); color: #CDBF9F; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.cx-ev__tab:hover { border-color: #B88A45; color: #F3D58A; }
.cx-ev__tab.is-on { border-color: #E7B552; background: linear-gradient(180deg, rgba(231, 181, 82, .22), rgba(231, 181, 82, .08)); color: #FFF0C2; box-shadow: 0 0 16px rgba(231, 181, 82, .2); }
.cx-ev__tz { flex-basis: 100%; color: #8F857A; font-size: 12px; text-align: center; }
.cx-ev__pane[hidden] { display: none !important; }
/* art medallions by category */
.cx-ev__art { --c: #E7B552; --c-rgb: 231, 181, 82; display: grid; flex: none; place-items: center; overflow: hidden; border: 2px solid var(--c); border-radius: 50%; background: radial-gradient(circle at 50% 30%, rgba(var(--c-rgb), .28), #120C08 72%); color: var(--c); box-shadow: 0 0 0 4px rgba(var(--c-rgb), .1), 0 0 22px rgba(var(--c-rgb), .3); }
.cx-ev__art img { width: 100%; height: 100%; object-fit: cover; }
.cx-ev__art svg { width: 46%; height: 46%; }
.cx-ev__art--unique { --c: #E0675A; --c-rgb: 224, 103, 90; }
.cx-ev__art--pvp { --c: #D9584A; --c-rgb: 217, 88, 74; }
.cx-ev__art--fortress { --c: #E7B552; --c-rgb: 231, 181, 82; }
.cx-ev__art--trade { --c: #6FD3A2; --c-rgb: 111, 211, 162; }
.cx-ev__art--event { --c: #EADFC8; --c-rgb: 234, 223, 200; }
.cx-ev__art--lg { width: 132px; height: 132px; border-width: 3px; }
.cx-ev__art--sm { width: 70px; height: 70px; }
.cx-ev__art--xs { width: 32px; height: 32px; border-width: 1px; box-shadow: none; }
/* featured */
.cx-ev__feat { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 34px; padding: 30px 38px; overflow: hidden; border: 1px solid #B88A45; border-radius: 6px; background: radial-gradient(70% 140% at 0% 50%, rgba(231, 181, 82, .14), transparent 60%), linear-gradient(180deg, #19130D, #0F0B08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 50px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(231, 181, 82, .12); }
.cx-ev__feat::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #E7B552, transparent); }
.cx-ev__feat.is-live { border-color: rgba(111, 211, 162, .6); background: radial-gradient(70% 140% at 0% 50%, rgba(111, 211, 162, .14), transparent 60%), linear-gradient(180deg, #121812, #0B0F0B); }
.cx-ev__feat.is-live::after { background: linear-gradient(90deg, transparent, #6FD3A2, transparent); }
.cx-ev__flag { --cx-font: "Inter" !important; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid rgba(231, 181, 82, .45); border-radius: 30px; background: rgba(231, 181, 82, .1); color: #F3D58A; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.cx-ev__feat.is-live .cx-ev__flag { border-color: rgba(111, 211, 162, .5); background: rgba(111, 211, 162, .1); color: #8FE0B8; }
.cx-ev__flag i { width: 8px; height: 8px; border-radius: 50%; background: #6FD3A2; box-shadow: 0 0 8px #6FD3A2; animation: cx-foot-ping 1.8s ease-out infinite; }
.cx-ev__feat-body h3 { --cx-font: "Marcellus"; margin: 12px 0 6px !important; color: #FFF0C2 !important; font-size: clamp(24px, 2.2vw, 36px) !important; letter-spacing: .04em !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
.cx-ev__feat-body p { margin: 0 !important; max-width: 560px; color: #CDBF9F !important; font-size: 15.5px !important; }
.cx-ev__progress { position: relative; height: 6px; margin-top: 16px; max-width: 520px; overflow: hidden; border-radius: 6px; background: rgba(111, 211, 162, .15); }
.cx-ev__progress span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, #3E9D74, #8FE0B8); box-shadow: 0 0 10px rgba(111, 211, 162, .7); transition: width 1s linear; }
.cx-ev__ends { display: block; margin-top: 8px; color: #8FE0B8; font-size: 13px; }
.cx-ev__ends b { color: #DFF7EA; }
.cx-ev__clock { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 240px; padding: 18px 26px; border-left: 1px solid rgba(231, 181, 82, .25); text-align: center; }
.cx-ev__clock-label { --cx-font: "Inter" !important; color: #B9AD95; font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.cx-ev__clock b { --cx-font: "Marcellus"; color: #FFF0C2; font-size: clamp(30px, 2.6vw, 44px); font-weight: 900; letter-spacing: .04em; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(231, 181, 82, .35); }
.cx-ev__feat.is-live .cx-ev__clock b { color: #DFF7EA; text-shadow: 0 0 22px rgba(111, 211, 162, .4); }
.cx-ev__clock small { color: #CDBF9F; font-size: 13px; }
/* line */
.cx-ev__line { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; }
.cx-ev__line::before { content: ""; position: absolute; left: 8%; right: 8%; top: 35px; height: 1px; background: linear-gradient(90deg, transparent, rgba(231, 181, 82, .55), transparent); }
.cx-ev__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 6px; text-align: center; outline: none; }
.cx-ev__item .cx-ev__art { position: relative; z-index: 1; transition: transform .25s ease, box-shadow .25s ease; }
.cx-ev__item:hover .cx-ev__art, .cx-ev__item:focus-visible .cx-ev__art { box-shadow: 0 0 0 4px rgba(var(--c-rgb), .18), 0 0 30px rgba(var(--c-rgb), .55); }
.cx-ev__item strong { --cx-font: "Marcellus"; color: #F7EBCF; font-size: 15px; font-weight: 700; line-height: 1.25; }
.cx-ev__when { color: #9A9087; font-size: 13px; }
.cx-ev__when em { display: block; color: #F3D58A; font-style: normal; }
.cx-ev__when em.is-live { color: #8FE0B8; }
.cx-ev__item.is-live .cx-ev__art { border-color: #6FD3A2; }
.cx-ev__tip { position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 5; width: max-content; max-width: 240px; padding: 10px 14px; border: 1px solid #B88A45; border-radius: 6px; background: #120D09; color: #EADFC8; font-size: 13px; line-height: 1.45; box-shadow: 0 12px 30px rgba(0, 0, 0, .7); opacity: 0; transform: translate(-50%, 6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.cx-ev__item:hover .cx-ev__tip, .cx-ev__item:focus-visible .cx-ev__tip { opacity: 1; transform: translate(-50%, 0); }
.cx-ev__empty { color: #9A9087; text-align: center; }
/* week planner */
.cx-ev__week { display: grid; grid-template-columns: repeat(7, minmax(170px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.cx-ev__day { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; border: 1px solid var(--cx-card-line); border-radius: 6px; background: linear-gradient(180deg, #17120D, #0F0B08); }
.cx-ev__day.is-today { border-color: #E7B552; box-shadow: 0 0 0 1px rgba(231, 181, 82, .2), 0 0 24px rgba(231, 181, 82, .12); }
.cx-ev__day > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(231, 181, 82, .25); }
.cx-ev__day > header b { --cx-font: "Marcellus"; color: #F3D58A; font-size: 14px; }
.cx-ev__day.is-today > header b::after { content: " •"; color: #6FD3A2; }
.cx-ev__day > header small { color: #8F857A; font-size: 12px; }
.cx-ev__row { display: flex; align-items: flex-start; gap: 9px; }
.cx-ev__row strong { display: block; --cx-font: "Inter" !important; color: #EADFC8; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.cx-ev__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cx-ev__chips i { padding: 2px 6px; border: 1px solid rgba(231, 181, 82, .35); border-radius: 4px; color: #F3D58A; font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; }
.cx-ev__chips i.is-past { opacity: .4; text-decoration: line-through; }
.cx-ev__none { margin: 0 !important; color: #6E665E !important; font-size: 12.5px !important; }
@media (max-width: 1100px) {
.cx-ev__feat { grid-template-columns: auto minmax(0, 1fr); }
.cx-ev__clock { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 14px; min-width: 0; border-left: 0; border-top: 1px solid rgba(231, 181, 82, .25); }
.cx-ev__line { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
.cx-ev__line::before { display: none; }
}
@media (max-width: 600px) {
.cx-ev__feat { grid-template-columns: 1fr; justify-items: center; gap: 18px; padding: 24px 20px; text-align: center; }
.cx-ev__art--lg { width: 104px; height: 104px; }
.cx-ev__progress { margin-left: auto; margin-right: auto; }
.cx-ev__line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-ev__tip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cx-ev__flag i { animation: none; } }
/* ===== Sides v3: FACE-OFF — Europe (left) and China (right) face each other across the VS; texts on the outer edges ===== */
@media (min-width: 901px) {
.cx-sides--face { --cx-pad: max(48px, calc((100vw - 1440px) / 2 + 48px)); --cx-copy: min(380px, 40%); }
.cx-sides--face .cx-side { overflow: hidden; }
.cx-sides--face .cx-side--europe { order: -1; justify-content: flex-start !important; padding: 0 0 0 var(--cx-pad) !important; text-align: left !important; background: radial-gradient(ellipse 80% 90% at 75% 60%, #1F2A3A 0%, #10151E 55%, #0E0A07 100%) !important; }
.cx-sides--face .cx-side--china { justify-content: flex-end !important; padding: 0 var(--cx-pad) 0 0 !important; text-align: right !important; background: radial-gradient(ellipse 80% 90% at 25% 60%, #5E1C14 0%, #2A0D09 55%, #0E0A07 100%) !important; }
.cx-sides--face .cx-side__copy { position: relative; z-index: 2; max-width: var(--cx-copy) !important; }
.cx-sides--face .cx-side--europe .cx-side__copy { align-items: flex-start !important; }
.cx-sides--face .cx-side--europe .cx-side__tags { justify-content: flex-start !important; }
.cx-sides--face .cx-side--china .cx-side__copy { align-items: flex-end !important; }
.cx-sides--face .cx-side--china .cx-side__tags { justify-content: flex-end !important; }
.cx-sides--face .cx-side__art { z-index: 1; bottom: 0 !important; height: auto !important; max-height: 100% !important; width: min(640px, calc(100% - var(--cx-pad) - var(--cx-copy) - 28px)) !important; transform: none !important; }
.cx-sides--face .cx-side--europe .cx-side__art { left: auto !important; right: 0 !important; object-position: right bottom; }
.cx-sides--face .cx-side--china .cx-side__art { right: auto !important; left: 0 !important; object-position: left bottom; }
.cx-sides--face .cx-side:hover .cx-side__art { transform: scale(1.03) !important; }
.cx-sides--face .cx-side--europe:hover .cx-side__art { transform-origin: right bottom; }
.cx-sides--face .cx-side--china:hover .cx-side__art { transform-origin: left bottom; }
}
@media (max-width: 900px) {
.cx-sides--face .cx-side--europe .cx-side__art { left: auto !important; right: -4% !important; width: 66% !important; max-height: 52% !important; transform: none !important; }
}
@media (min-width: 901px) {
.cx-sides--face { --cx-pad: clamp(40px, 4.5vw, 96px); --cx-copy: min(330px, 36%); }
.cx-sides--face .cx-side__art { width: calc(100% - var(--cx-pad) - var(--cx-copy) - 24px) !important; max-height: 98% !important; object-fit: contain; }
}
.cx-ev__day { max-height: 560px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6E4E2C transparent; }
.cx-ev__art img { image-rendering: auto; transform: scale(1.12); }
/* event art: vector icons for every category (crisp at any size), colours per category */
.cx-ev__art--eye { --c: #F3D58A; --c-rgb: 243, 213, 138; }
.cx-ev__art--tomb { --c: #D9B36A; --c-rgb: 217, 179, 106; }
.cx-ev__art--survival { --c: #E0675A; --c-rgb: 224, 103, 90; }
.cx-ev__art--flag { --c: #8FB3DA; --c-rgb: 143, 179, 218; }
.cx-ev__art svg { width: 50%; height: 50%; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(var(--c-rgb), .45)); }
.cx-ev__art img { transform: none; }
.cx-ev__art--lg img { image-rendering: auto; }
/* item icons: shown at their native 32 px inside a 48 px game slot — sharp, never upscaled */
.odin-world .odin-item > img { box-sizing: border-box !important; width: 50px !important; height: 50px !important; padding: 8px !important; object-fit: contain; image-rendering: auto; }
@media (max-width: 520px) { .odin-world .odin-item > img { width: 46px !important; height: 46px !important; padding: 6px !important; } }
.cx-sox-orbit { image-rendering: auto; }
/* ===== Weekly schedule v2: grouped by "every day" / "weekly", one card per event, faithful to _Schedule ===== */
.cx-ev__group { display: flex; align-items: center; gap: 16px; margin: 6px 0 16px !important; --cx-font: "Marcellus"; color: #F3D58A !important; font-size: 15px !important; letter-spacing: .18em !important; text-transform: uppercase; }
.cx-ev__group::before, .cx-ev__group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(231, 181, 82, .5), transparent); }
.cx-ev__plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 30px; }
.cx-ev__card { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border: 1px solid var(--cx-card-line); border-radius: 6px; background: linear-gradient(180deg, #17120D, #0F0B08); box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .9); }
.cx-ev__card.is-live { border-color: rgba(111, 211, 162, .6); box-shadow: 0 0 0 1px rgba(111, 211, 162, .15), 0 0 24px rgba(111, 211, 162, .12); }
.cx-ev__card > header { display: flex; align-items: center; gap: 14px; }
.cx-ev__card > header .cx-ev__art--sm { width: 54px; height: 54px; }
.cx-ev__card strong { display: block; --cx-font: "Marcellus"; color: #F7EBCF; font-size: 16px; font-weight: 700; }
.cx-ev__card small { display: block; margin-top: 3px; color: #9A9087; font-size: 12.5px; }
.cx-ev__card .cx-ev__chips { gap: 6px; margin: 0; }
.cx-ev__card .cx-ev__chips i { padding: 4px 9px; border-radius: 20px; background: rgba(231, 181, 82, .06); font-size: 12px; }
.cx-ev__chips i.is-next { border-color: #E7B552; background: rgba(231, 181, 82, .2); color: #FFF0C2; box-shadow: 0 0 10px rgba(231, 181, 82, .35); }
.cx-ev__chips i.is-now { border-color: #6FD3A2; background: rgba(111, 211, 162, .15); color: #DFF7EA; }
.cx-ev__chips i.is-past { opacity: .38; text-decoration: none; }
.cx-ev__source { margin: 0 !important; color: #6E665E !important; font-size: 12px !important; text-align: center; }
@media (max-width: 560px) { .cx-ev__plan { grid-template-columns: 1fr; } }
@media (min-width: 1100px) { .cx-ev__plan { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cx-ev__plan:has(> .cx-ev__card:only-child) { grid-template-columns: minmax(0, 520px); justify-content: center; } }
@media (min-width: 700px) and (max-width: 1099px) { .cx-ev__plan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ===== Sides v4: both heroes the SAME height (equal weight), facing each other; a slow golden emblem turns behind each ===== */
.cx-sides--face .cx-side__orn { position: absolute; z-index: 0; pointer-events: none; background: center / contain no-repeat; opacity: .2; filter: drop-shadow(0 0 18px rgba(243, 213, 138, .45)); animation: cx-orn-spin 90s linear infinite; }
.cx-sides--face .cx-side--europe .cx-side__orn { background-image: url("../images/ele/orn-europe.webp"); }
.cx-sides--face .cx-side--china .cx-side__orn { background-image: url("../images/ele/orn-china.webp"); animation-direction: reverse; }
@keyframes cx-orn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cx-sides--face .cx-side__orn { animation: none; } }
@media (min-width: 901px) {
.cx-sides--face { --cx-h: min(500px, calc((50vw - var(--cx-pad) - var(--cx-copy) + 4px) / 1.25)); --cx-in: -16px; }
.cx-sides--face .cx-side__art { width: auto !important; max-width: none !important; height: var(--cx-h) !important; max-height: none !important; bottom: 0 !important; }
.cx-sides--face .cx-side--europe .cx-side__art { right: var(--cx-in) !important; }
.cx-sides--face .cx-side--china .cx-side__art { left: var(--cx-in) !important; }
.cx-sides--face .cx-side__orn { width: calc(var(--cx-h) * 1.08); height: calc(var(--cx-h) * 1.08); bottom: calc(var(--cx-h) * 0.02); }
/* emblem centred on each hero (Europe art is 1.10:1, China art 1.25:1) */
.cx-sides--face .cx-side--europe .cx-side__orn { right: calc(var(--cx-in) + var(--cx-h) * 1.1 / 2 - var(--cx-h) * 1.08 / 2); }
.cx-sides--face .cx-side--china .cx-side__orn { left: calc(var(--cx-in) + var(--cx-h) * 1.25 / 2 - var(--cx-h) * 1.08 / 2); }
.cx-sides--face .cx-side:hover .cx-side__art { transform: none !important; }
}
@media (max-width: 900px) {
.cx-sides--face .cx-side__art { height: 46% !important; width: auto !important; max-width: none !important; max-height: none !important; }
.cx-sides--face .cx-side--china .cx-side__art { right: -2% !important; left: auto !important; }
.cx-sides--face .cx-side--europe .cx-side__art { right: -2% !important; left: auto !important; }
.cx-sides--face .cx-side__orn { right: 4%; bottom: 4%; width: 52vw; height: 52vw; max-width: 340px; max-height: 340px; }
}
@media (min-width: 901px) { .cx-sides--face { --cx-copy: min(330px, 18vw); } }
@media (min-width: 901px) { .cx-sides--face { --cx-h: min(500px, calc((50vw - var(--cx-pad) - 360px - 40px) / 1.25)); } }
@media (min-width: 901px) {
.cx-sides--face { --cx-in: -60px; --cx-h: min(500px, calc((50vw - var(--cx-pad) - 270px) / 1.25)); }
.cx-sides--face .cx-side__copy { max-width: 300px !important; }
.cx-sides--face .cx-side__orn { opacity: .26; width: calc(var(--cx-h) * 1.2); height: calc(var(--cx-h) * 1.2); bottom: calc(var(--cx-h) * -0.02); }
.cx-sides--face .cx-side--europe .cx-side__orn { right: calc(var(--cx-in) + var(--cx-h) * 1.1 / 2 - var(--cx-h) * 1.2 / 2); }
.cx-sides--face .cx-side--china .cx-side__orn { left: calc(var(--cx-in) + var(--cx-h) * 1.25 / 2 - var(--cx-h) * 1.2 / 2); }
.cx-sides--face .cx-sides__vs, .cx-sides--face ~ .cx-sides__vs { z-index: 5; }
}
.cx-sides__vs { z-index: 5 !important; }
@media (min-width: 901px) { .cx-sides--face .cx-side { overflow: visible !important; } .cx-sides--face .cx-side__art { z-index: 2; } .cx-sides--face .cx-side__copy { z-index: 3; } }
@media (max-width: 900px) { .cx-sides--face .cx-side__orn { right: auto !important; left: 50%; margin-left: -34vw; width: 68vw !important; height: 68vw !important; max-width: none !important; max-height: none !important; bottom: 3%; } }
/* ===== Weekly schedule v3: Fortress War banner on top · soft tint per event · cards use their space ===== */
.cx-ev__siege { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; margin: 0 0 34px; padding: 30px 36px; overflow: hidden; border: 1px solid rgba(231, 181, 82, .75); border-radius: 8px; isolation: isolate;
box-shadow: 0 0 0 1px rgba(231, 181, 82, .15), 0 0 40px rgba(231, 181, 82, .18), 0 30px 60px -30px rgba(0, 0, 0, .95); animation: cx-siege-glow 4s ease-in-out infinite; }
@keyframes cx-siege-glow { 50% { box-shadow: 0 0 0 1px rgba(231, 181, 82, .3), 0 0 60px rgba(231, 181, 82, .32), 0 30px 60px -30px rgba(0, 0, 0, .95); } }
.cx-ev__siege-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 10, 7, .94) 0%, rgba(14, 10, 7, .7) 45%, rgba(14, 10, 7, .88) 100%), url("../images/page-title.webp") center 40% / cover no-repeat; }
.cx-ev__siege::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #F3D58A, transparent); }
.cx-ev__siege .cx-ev__art--lg { width: 120px; height: 120px; }
.cx-ev__siege-body h3 { --cx-font: "Marcellus"; margin: 12px 0 6px !important; color: #FFF0C2 !important; font-size: clamp(26px, 2.4vw, 38px) !important; letter-spacing: .05em !important; text-shadow: 0 0 24px rgba(231, 181, 82, .35); }
.cx-ev__siege-body p { margin: 0 0 14px !important; color: #D8CCB2 !important; font-size: 15px !important; }
.cx-ev__siege-clock { display: grid; grid-template-columns: repeat(4, auto); gap: 10px; align-items: end; justify-items: center; padding-left: 30px; border-left: 1px solid rgba(231, 181, 82, .3); }
.cx-ev__siege-clock .cx-ev__clock-label { grid-column: 1 / -1; }
.cx-ev__siege-clock div { display: grid; justify-items: center; min-width: 66px; padding: 10px 6px; border: 1px solid rgba(231, 181, 82, .45); border-radius: 6px; background: rgba(10, 7, 5, .7); }
.cx-ev__siege-clock b { --cx-font: "Marcellus"; color: #FFF0C2; font-size: 30px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.cx-ev__siege-clock small { margin-top: 4px; color: #B9AD95; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.cx-ev__siege.is-live { border-color: rgba(111, 211, 162, .8); }
/* soft tint per event */
.cx-ev__card { --t: 234, 223, 200; border-color: rgba(var(--t), .28) !important; background: radial-gradient(120% 90% at 0% 0%, rgba(var(--t), .1), transparent 60%), linear-gradient(180deg, #17120D, #0F0B08) !important; }
.cx-ev__card:hover { border-color: rgba(var(--t), .55) !important; }
.cx-ev__card.is-live { border-color: rgba(111, 211, 162, .6) !important; }
.cx-ev__card > header { align-items: flex-start; }
.cx-ev__card > header > div { flex: 1; min-width: 0; }
.cx-ev__next { display: flex; flex-direction: column; align-items: flex-end; flex: none; padding: 6px 10px; border: 1px solid rgba(var(--t), .3); border-radius: 6px; background: rgba(var(--t), .06); }
.cx-ev__next small { margin: 0 !important; color: #9A9087 !important; font-size: 10px !important; letter-spacing: .14em; text-transform: uppercase; }
.cx-ev__next b { color: rgb(var(--t)); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cx-ev__card.is-live .cx-ev__next b { color: #8FE0B8; }
.cx-ev__desc { margin: -4px 0 0 !important; color: #B9AD95 !important; font-size: 13.5px !important; line-height: 1.5 !important; }
.cx-ev__card .cx-ev__chips { margin-top: auto !important; }
.cx-ev__card .cx-ev__chips i { border-color: rgba(var(--t), .35); background: rgba(var(--t), .06); color: rgb(var(--t)); }
.cx-ev__card .cx-ev__chips i.is-next { border-color: rgb(var(--t)); background: rgba(var(--t), .2); color: #FFF5DE; box-shadow: 0 0 10px rgba(var(--t), .35); }
.cx-ev__source { display: none !important; }
@media (max-width: 1100px) { .cx-ev__siege { grid-template-columns: auto minmax(0, 1fr); } .cx-ev__siege-clock { grid-column: 1 / -1; justify-content: center; padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(231, 181, 82, .3); } }
@media (max-width: 600px) { .cx-ev__siege { grid-template-columns: 1fr; justify-items: center; padding: 24px 18px; text-align: center; } .cx-ev__siege-clock div { min-width: 56px; } .cx-ev__siege-clock b { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .cx-ev__siege { animation: none; } }
/* ===== Sides v5: race emblems · emblem kept inside its own half with soft faded edges · tighter height ===== */
.cx-side__eyebrow { display: inline-flex !important; align-items: center; gap: 10px; }
.cx-side__race { width: 32px; height: 32px; flex: none; filter: drop-shadow(0 0 8px rgba(0, 0, 0, .7)); }
.cx-sides--face .cx-side--china .cx-side__eyebrow { flex-direction: row-reverse; }
.cx-sides--face .cx-side__ornbox { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cx-sides--face .cx-side--europe .cx-side__ornbox { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 18%), linear-gradient(to bottom, transparent 0, #000 22%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, transparent 0, #000 18%), linear-gradient(to bottom, transparent 0, #000 22%); mask-composite: intersect; }
.cx-sides--face .cx-side--china .cx-side__ornbox { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%), linear-gradient(to bottom, transparent 0, #000 22%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 18%), linear-gradient(to bottom, transparent 0, #000 22%); mask-composite: intersect; }
@media (min-width: 901px) {
.cx-sides--face, .cx-sides--face .cx-side { min-height: calc(var(--cx-h) + 36px) !important; }
}
@media (max-width: 900px) {
.cx-sides--face .cx-side__ornbox { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 85%, transparent 100%); }
}
/* ── SECTION TITLE REVEAL (fade-up 100px · 1.5s ease, once) ── */
.cx-title-reveal { opacity: 0; transform: translate3d(0, 100px, 0); transition: opacity 1.5s ease, transform 1.5s ease; will-change: opacity, transform; }
.cx-title-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.cx-side--europe .cx-side__copy.cx-title-reveal { transition-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .cx-title-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }
/* ── Race section title ── */
.cx-sides__head { width: min(var(--atlas-width, 1760px), calc(100% - 32px)); margin: 72px auto 0 !important; position: relative; z-index: 3; }
@media (max-width: 700px) { .cx-sides__head { margin-top: 48px !important; } }
/* ── Floating Discord / WhatsApp: same ping as the green "Live" pill, in gold (no glow) ── */
.odin-body .odin-floating-actions .odin-float-btn::after { content: none !important; animation: none !important; }
.odin-body .odin-floating-actions .odin-float-btn::before { inset: -1px; box-shadow: none !important; border: 1px solid rgb(var(--cx-glow)); animation: cx-float-ping 1.8s ease-out infinite; }
@keyframes cx-float-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .odin-body .odin-floating-actions .odin-float-btn::before { animation: none; opacity: 0; } }
/* ===== STATUS BAND v2 (redesign) ===== */
.cx-status { --st-gold: #E7B552; --st-line: rgba(231, 181, 82, .22); position: relative; z-index: 3; width: min(100% - 2 * var(--atlas-gutter, 24px), var(--atlas-width, 1760px)); margin: -64px auto 0; border: 1px solid rgba(231, 181, 82, .32); border-radius: 6px; overflow: hidden;
background: radial-gradient(120% 140% at 50% -40%, rgba(231, 181, 82, .10), transparent 60%), linear-gradient(180deg, rgba(24, 17, 11, .92), rgba(12, 9, 6, .96));
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 226, 160, .08); backdrop-filter: blur(8px); }
.cx-status::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 214, 120, .75), transparent); }
.cx-status__grid { display: grid; grid-template-columns: 1.1fr 1fr 1.25fr .9fr; }
.cx-stat { position: relative; display: flex; align-items: center; gap: 18px; padding: 26px 28px; min-width: 0; }
.cx-stat + .cx-stat::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(180deg, transparent, var(--st-line), transparent); }
.cx-stat__icon { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--st-gold);
background: radial-gradient(circle at 50% 35%, rgba(231, 181, 82, .18), rgba(20, 14, 9, .9) 70%); border: 1px solid rgba(231, 181, 82, .45); box-shadow: 0 0 0 4px rgba(231, 181, 82, .06), 0 0 22px rgba(231, 181, 82, .12); }
.cx-stat__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cx-stat__body { display: grid; gap: 5px; min-width: 0; }
.cx-stat__label { display: flex; align-items: center; gap: 10px; font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #B39C78; }
.cx-stat__live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 20px; font-style: normal; letter-spacing: .12em; font-size: 10px; color: #8FE0B8; background: rgba(111, 211, 162, .1); border: 1px solid rgba(111, 211, 162, .3); }
.cx-stat__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6FD3A2; box-shadow: 0 0 8px #6FD3A2; animation: cx-live-blink 2s ease-in-out infinite; }
.cx-stat__live.is-off { color: #C98A80; background: rgba(142, 42, 34, .15); border-color: rgba(142, 42, 34, .4); }
.cx-stat__live.is-off::before { background: #8E2A22; box-shadow: none; animation: none; }
@keyframes cx-live-blink { 50% { opacity: .35; } }
.cx-stat__value { display: flex; align-items: baseline; gap: 8px; min-width: 0; font: 700 26px/1.1 "Marcellus", serif; color: #F6DFA4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
background: linear-gradient(180deg, #FFF0C4 0%, #E7B552 70%, #B98532 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cx-stat__value small { font: 600 11px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; -webkit-text-fill-color: #A8977C; }
.cx-stat__num { font-size: 32px; font-weight: 700; }
.cx-stat__sub { font: 400 13px/1.35 Inter, sans-serif; color: #A8977C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-stat__sub b { color: #EADFC8; font-weight: 600; }
.cx-stat__pill { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 20px; font: 600 12px/1.4 Inter, sans-serif; color: #FFE3A3; background: rgba(231, 181, 82, .12); border: 1px solid rgba(231, 181, 82, .35); }
.cx-stat__pill.is-live { color: #8FE0B8; background: rgba(111, 211, 162, .1); border-color: rgba(111, 211, 162, .35); }
.cx-stat__meter { position: relative; height: 4px; margin-top: 3px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; max-width: 260px; }
.cx-stat__meter span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #6FD3A2, #E7B552); box-shadow: 0 0 10px rgba(231, 181, 82, .6); }
.cx-stat--event .cx-stat__icon { color: #FFD98A; box-shadow: 0 0 0 4px rgba(231, 181, 82, .08), 0 0 28px rgba(231, 181, 82, .25); }
.cx-status__rates { display: flex; align-items: center; gap: 28px; padding: 16px 28px; border-top: 1px solid var(--st-line); background: linear-gradient(90deg, rgba(231, 181, 82, .07), rgba(231, 181, 82, .02) 40%, transparent); }
.cx-status__title { flex: none; font: 600 11px/1 Inter, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--st-gold); }
.cx-status__rates ul { display: flex; flex: 1; justify-content: space-between; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cx-status__rates li { display: flex; align-items: baseline; gap: 8px; padding: 0 14px; }
.cx-status__rates li + li { border-left: 1px solid var(--st-line); }
.cx-status__rates li b { font: 700 20px/1 "Marcellus", serif; color: #F6DFA4; }
.cx-status__rates li span { font: 500 12px/1 Inter, sans-serif; letter-spacing: .06em; color: #A8977C; }
@media (max-width: 1100px) {
.cx-status__grid { grid-template-columns: 1fr 1fr; }
.cx-stat:nth-child(3)::before { display: none; }
.cx-stat:nth-child(n+3) { border-top: 1px solid var(--st-line); }
.cx-status__rates { flex-wrap: wrap; gap: 12px; }
.cx-status__rates ul { flex-wrap: wrap; justify-content: flex-start; row-gap: 10px; }
}
@media (max-width: 640px) {
.cx-status { margin-top: -30px; }
.cx-status__grid { grid-template-columns: 1fr; }
.cx-stat::before { display: none; }
.cx-stat + .cx-stat { border-top: 1px solid var(--st-line); }
.cx-stat { padding: 18px 20px; }
.cx-status__rates { padding: 14px 20px; }
.cx-status__rates li { padding: 0 10px 0 0; } .cx-status__rates li + li { padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) { .cx-stat__live::before { animation: none; } }
@media (max-width: 640px) {
.cx-status__rates { flex-direction: column; align-items: stretch; gap: 12px; }
.cx-status__rates ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 0; }
.cx-status__rates li, .cx-status__rates li + li { flex-direction: column; align-items: center; gap: 4px; padding: 0 4px; border-left: 0; text-align: center; }
.cx-status__rates li:not(:nth-child(3n+1)) { border-left: 1px solid var(--st-line); }
}
/* ===== SYSTEMS v2: every character breaks the frame, each card stands on its own aura ===== */
.cx-systems__grid { padding-top: 56px; row-gap: 72px; align-items: stretch; }
.cx-sys { --aura: 231, 181, 82; position: relative; overflow: visible; }
.cx-sys--caza { --aura: 255, 112, 32; }
.cx-sys--batallas { --aura: 214, 52, 40; }
.cx-sys--premium { --aura: 168, 120, 255; }
.cx-sys summary { overflow: visible; height: 400px; }
.cx-sys::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(70% 45% at 50% 64%, rgba(var(--aura), .16), transparent 70%); transition: opacity .5s ease; opacity: .8; }
.cx-sys:hover::before { opacity: 1; }
.cx-sys .cx-sys__art { inset: 0 0 30% 0; overflow: visible; z-index: 2; pointer-events: none; }
.cx-sys .cx-sys__art img { position: absolute; left: 50%; bottom: 14px; width: auto; height: 132%; max-width: 112%; object-fit: contain; opacity: 1; transform: translateX(-50%); transform-origin: 50% 100%;
filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .75)) drop-shadow(0 0 18px rgba(var(--aura), .18)); transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .6s ease; }
.cx-sys--caza .cx-sys__art img { height: 128%; max-width: 124%; }
.cx-sys summary:hover .cx-sys__art img { transform: translateX(-50%) translateY(-6px) scale(1.03); filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .8)) drop-shadow(0 0 26px rgba(var(--aura), .4)); opacity: 1; }
/* ground: a glowing ellipse the character stands on + motes rising in its colour */
.cx-sys__ground { position: absolute; left: 12%; right: 12%; bottom: 0; height: 120px; z-index: -1; pointer-events: none; }
.cx-sys__ground::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 26px; border-radius: 50%;
background: radial-gradient(50% 50% at 50% 50%, rgba(var(--aura), .55), rgba(var(--aura), .18) 55%, transparent 72%); filter: blur(4px); animation: cx-ground-pulse 3.2s ease-in-out infinite alternate; }
.cx-sys__ground::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 10px; height: 90px; border-radius: 50% 50% 0 0;
background: radial-gradient(60% 100% at 50% 100%, rgba(var(--aura), .22), transparent 75%); filter: blur(10px); }
@keyframes cx-ground-pulse { to { opacity: .65; transform: scaleX(.92); } }
.cx-sys__ground b { position: absolute; bottom: 12px; width: 3px; height: 3px; border-radius: 50%; background: rgb(var(--aura)); box-shadow: 0 0 6px 2px rgba(var(--aura), .7); opacity: 0; animation: cx-mote 4s linear infinite; }
.cx-sys__ground b:nth-child(1) { left: 12%; animation-delay: 0s; }
.cx-sys__ground b:nth-child(2) { left: 30%; animation-delay: -1.3s; animation-duration: 4.6s; }
.cx-sys__ground b:nth-child(3) { left: 48%; animation-delay: -2.6s; }
.cx-sys__ground b:nth-child(4) { left: 64%; animation-delay: -.7s; animation-duration: 3.6s; }
.cx-sys__ground b:nth-child(5) { left: 80%; animation-delay: -3.1s; animation-duration: 5s; }
.cx-sys__ground b:nth-child(6) { left: 40%; animation-delay: -1.9s; animation-duration: 3.8s; }
@keyframes cx-mote { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 15% { opacity: .95; } 100% { transform: translate(10px, -150px) scale(.4); opacity: 0; } }
/* caza: embers instead of motes + a heat flicker on the ground */
.cx-sys--caza .cx-sys__ground b { width: 2px; height: 4px; border-radius: 2px; background: #FFD27A; box-shadow: 0 0 6px 2px rgba(255, 120, 30, .8); }
.cx-sys--caza .cx-sys__ground::before { animation: cx-ember-ground 1.2s ease-in-out infinite alternate; }
@keyframes cx-ember-ground { 0% { opacity: .75; transform: scaleX(.96); } 100% { opacity: 1; transform: scaleX(1.04); } }
.cx-sys .cx-sys__body { z-index: 3; padding-top: 34px; background: linear-gradient(180deg, transparent, rgba(14, 10, 7, .9) 26%, rgba(14, 10, 7, .97)); }
@media (max-width: 1100px) { .cx-systems__grid { padding-top: 56px; row-gap: 80px; } }
@media (max-width: 560px) { .cx-sys summary { height: 380px; } .cx-systems__grid { row-gap: 72px; } }
@media (prefers-reduced-motion: reduce) { .cx-sys__ground::before, .cx-sys__ground b { animation: none; } .cx-sys__ground b { display: none; } }
.cx-sys--caza .cx-sys__art img { height: 120%; max-width: 106%; }
.cx-systems__grid { padding-top: 72px; }
.cx-sys--batallas .cx-sys__art img { height: 128%; max-width: 116%; }
/* slow-turning cloud emblem behind each character, tinted with the card's aura */
.cx-sys__orn { position: absolute; left: 50%; top: 52%; width: 86%; aspect-ratio: 1; z-index: -2; pointer-events: none; translate: -50% -50%;
background: radial-gradient(circle, rgba(var(--aura), .95), rgba(var(--aura), .55) 70%);
-webkit-mask: url("../images/ele/cloud-orn.webp") center / contain no-repeat; mask: url("../images/ele/cloud-orn.webp") center / contain no-repeat;
opacity: .28; animation: cx-orn-spin 90s linear infinite; transition: opacity .6s ease; }
.cx-sys--batallas .cx-sys__orn { opacity: .34; }
.cx-sys summary:hover .cx-sys__orn { opacity: .42; }
@keyframes cx-orn-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .cx-sys__orn { animation: none; } }
/* card frame dissolves towards the top: no top edge, side borders and fill fade in from transparent */
.cx-sys { border: 1px solid transparent !important; border-top: 0 !important;
border-image: linear-gradient(180deg, transparent 0%, rgba(103, 87, 67, .35) 22%, rgb(103, 87, 67) 50%) 1 !important;
background: linear-gradient(180deg, rgba(29, 20, 12, 0) 0%, rgba(29, 20, 12, .55) 22%, #1D140C 48%, #0F0B07 100%) !important; }
/* ===== SYSTEMS v3: aligned text, balanced heroes, feature tags, aura hover, colour seal ===== */
/* 1 · text block starts at the same height in every card */
.cx-sys summary { height: 504px; }
.cx-sys .cx-sys__body { top: 254px; bottom: 0; justify-content: flex-start; gap: 8px; padding: 26px 22px 26px;
background: linear-gradient(180deg, transparent 0, rgba(14, 10, 7, .88) 32px, rgba(14, 10, 7, .97) 100%); }
.cx-sys .cx-sys__body > span:not(.cx-sys__tags) { min-height: 2.9em; }
/* 2 + 3 · heroes with equal presence, feet just above the text */
.cx-sys .cx-sys__art { inset: 0 0 auto 0; height: 270px; }
.cx-sys .cx-sys__art img { bottom: 6px; height: 124%; max-width: 118%; }
.cx-sys--economia .cx-sys__art img { height: 104%; max-width: 110%; }
.cx-sys--batallas .cx-sys__art img { height: 140%; max-width: 124%; }
.cx-sys--caza .cx-sys__art img { height: 122%; max-width: 124%; }
.cx-sys--premium .cx-sys__art img { height: 136%; max-width: 118%; }
.cx-sys__orn { top: 50%; }
/* 5 · feature tags */
.cx-sys__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-sys__tags i { font: 600 11px/1 Inter, sans-serif; font-style: normal; letter-spacing: .04em; padding: 5px 9px; border-radius: 20px; color: #EADFC8;
background: rgba(var(--aura), .1); border: 1px solid rgba(var(--aura), .35); }
/* 4 · hover: frame lights up in the card's colour, emblem wakes, arrow slides */
.cx-sys { transition: box-shadow .45s ease; }
.cx-sys:hover { border-image: linear-gradient(180deg, transparent 0%, rgba(var(--aura), .45) 22%, rgba(var(--aura), .9) 55%) 1 !important;
box-shadow: 0 30px 60px -36px rgba(var(--aura), .55); }
.cx-sys summary:hover .cx-sys__orn { opacity: .5; scale: 1.06; }
.cx-sys__orn { transition: opacity .6s ease, scale .8s cubic-bezier(.2, .7, .2, 1); }
.cx-sys__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-bottom: 2px; }
.cx-sys__more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s ease; }
.cx-sys summary:hover .cx-sys__more svg { transform: translateX(5px); }
.cx-sys summary:hover .cx-sys__more { color: rgb(var(--aura)); }
.cx-sys[open] .cx-sys__more svg { transform: rotate(90deg); }
/* 6 · colour seal on the base: a thin aura line with a small diamond */
.cx-sys__seal { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 4; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(var(--aura), .9) 35%, rgba(var(--aura), .9) 65%, transparent); box-shadow: 0 0 12px rgba(var(--aura), .5); }
.cx-sys__seal::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; translate: -50% -50%; rotate: 45deg;
background: #140E09; border: 1px solid rgb(var(--aura)); box-shadow: 0 0 8px rgba(var(--aura), .8); }
.cx-sys[open] .cx-sys__seal { display: none; }
@media (max-width: 560px) {
.cx-sys summary { height: 490px; }
.cx-sys .cx-sys__art { height: 255px; }
.cx-sys .cx-sys__body { top: 248px; }
}
.cx-sys summary { height: 504px; }
@media (max-width: 560px) { .cx-sys summary { height: 490px; } }
.cx-systems { padding-bottom: 90px; }
/* opening one card must not stretch its neighbours */
.cx-systems__grid { align-items: start; }
.cx-sys[open] { z-index: 5; }
.cx-sys[open] .cx-sys__list { animation: cx-list-in .35s ease both; }
@keyframes cx-list-in { from { opacity: 0; transform: translateY(-6px); } }
/* every opened list reserves room for the longest one, so open cards end at the same height */
.cx-sys__list li { box-sizing: border-box; min-height: 43px; padding-top: 0; padding-bottom: 0; }
.cx-sys__list { min-height: calc(var(--cx-rows, 13) * 43px + 24px); box-sizing: border-box; }
/* forge: smaller, quieter +N badge */
.cx-forge__plus { min-width: 44px; height: 30px; padding: 0 8px; font-size: 16px !important; font-weight: 800; letter-spacing: .02em; border-radius: 3px;
box-shadow: 0 0 8px var(--cx-rarity-glow), inset 0 0 6px var(--cx-rarity-glow); align-self: center; }
@media (max-width: 520px) { .cx-forge__plus { min-width: 40px; height: 28px; font-size: 15px !important; } }
/* ===== TOP 3 as hanging war banners ===== */
.cx-banners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 18px; padding: 26px 6px 8px; }
.cx-banner { --f1: #5D7192; --f2: #26324A; --trim: #C9D4E6; --glow: 160, 185, 225; position: relative; display: block; text-decoration: none; margin-top: 30px; transform-origin: 50% 0; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.cx-banner--1 { --f1: #C9962E; --f2: #6E4A12; --trim: #F6DFA4; --glow: 231, 181, 82; margin-top: 0; }
.cx-banner--3 { --f1: #A9482A; --f2: #4E1C10; --trim: #E8A87A; --glow: 226, 130, 80; }
.cx-banner:hover { transform: rotate(-1.2deg); }
/* the rod it hangs from */
.cx-banner__rod { position: absolute; left: -6%; right: -6%; top: 20px; height: 6px; z-index: 2; border-radius: 3px; background: linear-gradient(180deg, #F6DFA4, #9C6B3A); box-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.cx-banner__rod::before, .cx-banner__rod::after { content: ""; position: absolute; top: -4px; width: 12px; height: 14px; background: radial-gradient(circle at 50% 40%, #FFF0C2, #B98532 70%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cx-banner__rod::before { left: -8px; } .cx-banner__rod::after { right: -8px; }
/* cloth: trim layer + fabric layer, swallow-point bottom */
.cx-banner__cloth { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 22px 4% 0; padding: 46px 12px 46px; min-height: 230px; text-align: center;
clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%); background: var(--trim); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
.cx-banner--1 .cx-banner__cloth { min-height: 262px; }
.cx-banner__cloth::before { content: ""; position: absolute; inset: 3px; z-index: 0; clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 18px), radial-gradient(120% 70% at 50% 18%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(180deg, var(--f1), var(--f2)); }
/* Patrones grabados para Banderas del Podio: Oro (#1), Azul (#2) y Bronce (#3) con opacidad suavizada */
.cx-banner--1 .cx-banner__cloth::before {
background:
radial-gradient(120% 70% at 50% 18%, rgba(255, 246, 224, .18), transparent 65%),
linear-gradient(180deg, rgba(32, 22, 10, .70) 0%, rgba(16, 11, 5, .90) 100%),
url('../images/ele/guild-pattern-gold.jpg') center / cover no-repeat !important;
}
.cx-banner--2 .cx-banner__cloth::before {
background:
radial-gradient(120% 70% at 50% 18%, rgba(200, 225, 255, .18), transparent 65%),
linear-gradient(180deg, rgba(14, 22, 38, .70) 0%, rgba(7, 12, 22, .92) 100%),
url('../images/ele/guild-pattern-blue.jpg') center / cover no-repeat !important;
}
.cx-banner--3 .cx-banner__cloth::before {
background:
radial-gradient(120% 70% at 50% 18%, rgba(255, 215, 190, .18), transparent 65%),
linear-gradient(180deg, rgba(38, 18, 12, .70) 0%, rgba(18, 8, 5, .92) 100%),
url('../images/ele/guild-pattern-bronze.jpg') center / cover no-repeat !important;
}
.cx-banner__cloth::after { content: ""; position: absolute; inset: 9px; z-index: 0; clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%); border: 0; pointer-events: none;
background: linear-gradient(var(--trim), var(--trim)) top / 100% 1px no-repeat, linear-gradient(var(--trim), var(--trim)) left / 1px 100% no-repeat, linear-gradient(var(--trim), var(--trim)) right / 1px 100% no-repeat; opacity: .45; }
.cx-banner__cloth > * { position: relative; z-index: 1; }
.cx-banner__img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 2px solid var(--trim); background: #0E0A07; box-shadow: 0 0 0 4px rgba(0, 0, 0, .25), 0 0 18px rgba(var(--glow), .6); margin-bottom: 6px; }
.cx-banner--1 .cx-banner__img { width: 86px; height: 86px; }
.cx-banner__name { --cx-font: "Marcellus"; font-family: "Marcellus", serif; font-size: 17px; font-weight: 800; color: #FFF6E0; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-banner__lv { font: 600 11px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 246, 224, .75); }
.cx-banner__pts { margin-top: 8px; font-family: "Marcellus", serif; font-size: 24px; font-weight: 800; line-height: 1; color: #FFF6E0 !important; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.cx-banner__unit { font: 600 10px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 246, 224, .7); }
/* Podio: clase + guild */
.cx-banner__guild { display: inline-flex; align-items: center; gap: 6px; max-width: 94%; margin-top: 7px; padding: 3px 11px 3px 4px; border: 1px solid rgba(var(--glow), .55); border-radius: 999px; background: rgba(0, 0, 0, .3); }
.cx-bshield { width: 16px; height: 19px; flex: none; color: var(--trim); }
.cx-bshield text { font-weight: 700; }
.cx-banner__guildname { font: 700 11px/1 "Marcellus", serif; letter-spacing: .02em; color: #FFF6E0; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-banner--1 .cx-banner__guildname { max-width: 150px; }
.cx-banner__guild--none { color: rgba(255, 246, 224, .5); font: 600 10px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; border-style: dashed; padding: 4px 11px; }
/* crest */
.cx-banner__crest { position: absolute; left: 50%; top: 0; z-index: 3; width: 64px; height: 56px; translate: -50% 0; display: grid; place-items: center; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.cx-banner--1 .cx-banner__crest { width: 76px; height: 66px; top: -6px; }
.cx-banner__crest svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cx-banner__crest .w { fill: var(--trim); opacity: .9; }
.cx-banner__crest .s { fill: var(--trim); }
.cx-banner__crest .i { fill: var(--f2); }
.cx-banner__crest b { position: relative; margin-top: -8px; font-family: "Marcellus", serif; font-size: 20px; font-weight: 900; color: var(--trim); }
.cx-banner--1 .cx-banner__crest b { font-size: 24px; }
.cx-banner:hover .cx-banner__img { box-shadow: 0 0 0 4px rgba(0, 0, 0, .25), 0 0 26px rgba(var(--glow), .9); }
@media (max-width: 560px) {
.cx-banners { gap: 8px; padding-inline: 0; }
.cx-banner__cloth { padding: 40px 6px 40px; min-height: 200px; }
.cx-banner--1 .cx-banner__cloth { min-height: 226px; }
.cx-banner__img { width: 56px; height: 56px; } .cx-banner--1 .cx-banner__img { width: 64px; height: 64px; }
.cx-banner__name { font-size: 13px; } .cx-banner__pts { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .cx-banner { transition: none; } .cx-banner:hover { transform: none; } }
/* banners: no sway */
.cx-banner, .cx-banner:hover { transform: none !important; transition: none; }
/* ===== Legends lists: rows 4-5 as mini cards, vacant guild seats that invite ===== */
.odin-legends__list { display: grid; gap: 8px; margin-top: 10px !important; }
.odin-legends__list li.cx-rankrow { display: grid !important; grid-template-columns: 34px 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px !important;
border: 1px solid rgba(156, 107, 58, .28) !important; border-radius: 6px; background: linear-gradient(90deg, rgba(231, 181, 82, .07), rgba(20, 14, 9, .6) 45%, rgba(20, 14, 9, .35)); transition: border-color .3s ease, background .3s ease, transform .3s ease; }
.odin-legends__list li.cx-rankrow:hover { border-color: rgba(231, 181, 82, .6) !important; background: linear-gradient(90deg, rgba(231, 181, 82, .14), rgba(20, 14, 9, .6) 55%); transform: translateX(3px); }
.cx-rankrow .odin-legends__rank { display: grid; place-items: center; width: 30px; height: 30px; rotate: 45deg; border: 1px solid rgba(231, 181, 82, .55); background: rgba(14, 10, 7, .9); box-shadow: 0 0 10px rgba(231, 181, 82, .2); font-size: 0; }
.cx-rankrow .odin-legends__rank::after { content: counter(cx-rank); }
.cx-rankrow .odin-legends__rank { font-family: "Marcellus", serif; font-weight: 800; color: #F6DFA4 !important; }
.cx-rankrow .odin-legends__rank > * , .cx-rankrow .odin-legends__rank { line-height: 1; }
.cx-rankrow__img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(231, 181, 82, .55); background: #0E0A07; box-shadow: 0 0 0 3px rgba(0, 0, 0, .3); }
.cx-rankrow .odin-legends__name a { font-family: "Marcellus", serif; font-size: 16px; }
.cx-rankrow .odin-legends__points { font-family: "Marcellus", serif; font-size: 18px !important; text-align: right; }
/* vacant guild seats: warm, alive, inviting */
.cx-guild-row--vacant { opacity: 1 !important; border: 1px dashed rgba(231, 181, 82, .32) !important; border-radius: 6px;
background: repeating-linear-gradient(135deg, rgba(231, 181, 82, .035) 0 10px, transparent 10px 20px), linear-gradient(90deg, rgba(231, 181, 82, .06), transparent 60%) !important; transition: border-color .3s ease, background .3s ease; }
.cx-guild-row--vacant:hover { border-color: rgba(231, 181, 82, .7) !important; }
.cx-guild-row__img--vacant { color: rgba(231, 181, 82, .75) !important; filter: drop-shadow(0 0 6px rgba(231, 181, 82, .35)); animation: cx-seat-pulse 2.6s ease-in-out infinite; }
@keyframes cx-seat-pulse { 50% { color: rgba(255, 223, 150, 1); filter: drop-shadow(0 0 10px rgba(231, 181, 82, .7)); } }
.cx-guild-row--vacant .cx-guild-row__rank { color: rgba(231, 181, 82, .7) !important; font-family: "Marcellus", serif; font-weight: 800; }
.cx-guild-row--vacant .cx-guild-row__name strong { color: #E7CF98 !important; letter-spacing: .06em; }
.cx-guild-row--vacant .cx-guild-row__name small { color: #A8977C !important; }
/* "Full ranking" as a proper button */
.odin-legends__more { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 14px !important; padding: 9px 16px; border: 1px solid rgba(231, 181, 82, .45); border-radius: 4px;
background: linear-gradient(180deg, rgba(231, 181, 82, .12), rgba(231, 181, 82, .03)); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.odin-legends__more:hover { border-color: #F6DFA4; background: rgba(231, 181, 82, .18); box-shadow: 0 0 18px rgba(231, 181, 82, .25); }
@media (prefers-reduced-motion: reduce) { .cx-guild-row__img--vacant { animation: none; } .odin-legends__list li.cx-rankrow:hover { transform: none; } }
.cx-rankrow .odin-legends__rank { position: relative; rotate: none; border: 0; background: none; box-shadow: none; font-size: 15px !important; z-index: 0; }
.cx-rankrow .odin-legends__rank::after { content: none; }
.cx-rankrow .odin-legends__rank::before { content: ""; position: absolute; inset: 4px; z-index: -1; rotate: 45deg; border: 1px solid rgba(231, 181, 82, .6); background: rgba(14, 10, 7, .92); box-shadow: 0 0 10px rgba(231, 181, 82, .25); }
/* WhatsApp card (home "Únete") */
.cx-social--whatsapp { --brand: #25D366; }
.cx-social__embed--whatsapp { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 16px; border: 1px solid rgba(213, 169, 83, .25); background: rgba(10, 6, 4, .55); }
.cx-wa__qr { display: block; padding: 8px; background: #F5ECD6; border: 1px solid rgba(213, 169, 83, .6); box-shadow: 0 0 22px rgba(37, 211, 102, .18); transition: transform .2s ease; }
.cx-wa__qr:hover { transform: scale(1.03); }
.cx-wa__qr img { display: block; width: 170px; height: 170px; image-rendering: pixelated; }
.cx-wa__hint { margin: 0; text-align: center; font-size: .86rem; line-height: 1.45; color: var(--atlas-muted, #aa9b83); }
.cx-wa__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.cx-wa__list li { position: relative; padding-left: 18px; font-size: .86rem; color: var(--atlas-paper, #f1e8d5); }
.cx-wa__list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; transform: rotate(45deg); background: #25D366; box-shadow: 0 0 8px rgba(37, 211, 102, .6); }
/* WhatsApp: misma altura que los recuadros de Discord y Facebook (500px) para alinear los botones */
.cx-social__embed--whatsapp { height: 500px; box-sizing: border-box; justify-content: center; gap: 14px; padding: 22px 18px; overflow: hidden; }
.cx-wa__qr img { width: 185px; height: 185px; }
.cx-wa__hint { font-size: .86rem; line-height: 1.45; }
.cx-wa__list { gap: 8px; }
.cx-wa__list li { font-size: .86rem; }
/* Facebook card (home "Únete") */
.cx-social--facebook { --brand: #1877F2; }
.cx-social__embed--facebook {
height: 500px;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
border: 1px solid rgba(213, 169, 83, .25);
border-radius: 6px;
background: #fff;
}
.cx-social__embed--facebook iframe {
display: block;
width: 100% !important;
max-width: 100% !important;
height: 500px !important;
flex: 1 1 auto !important;
border: 0 !important;
border-radius: 6px;
background: #fff;
}
/* Glow propio de Rebelion (arcos de luz): ceñido al emblema (alto del logo +24%) */
.atlas-hero .atlas-hero__brandlockup img.atlas-hero__glow { width: 72% !important; height: auto !important; max-width: none !important; opacity: .9 !important; }
/* ===== Podio: raza con icono (China / Europa) ===== */
.cx-banner__race { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font: 600 11px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 246, 224, .8); }
.cx-banner__raceico { width: 18px; height: 18px; flex: none; object-fit: contain; filter: drop-shadow(0 0 5px rgba(0, 0, 0, .65)); }
.cx-banner--1 .cx-banner__raceico { width: 20px; height: 20px; }
/* ===== Razas (VS): personajes más grandes en móvil ===== */
@media (max-width: 900px) {
.cx-sides--face .cx-side__art { height: 64% !important; }
}
@media (max-width: 560px) {
.cx-sides--face .cx-side { min-height: 600px !important; }
.cx-sides--face .cx-side__art { height: 62% !important; right: -3% !important; }
}
/* ===== Podio: más jerarquía (1º grande, 2º y 3º más chicos) ===== */
.cx-banners { grid-template-columns: .8fr 1.25fr .8fr; gap: 10px; }
.cx-banner { margin-top: 52px; }
.cx-banner--1 { margin-top: 0; }
/* Ganador */
.cx-banner--1 .cx-banner__cloth { min-height: 304px; padding: 54px 14px 52px; }
.cx-banner--1 .cx-banner__img { width: 106px; height: 106px; }
.cx-banner--1 .cx-banner__name { font-size: 21px; }
.cx-banner--1 .cx-banner__pts { font-size: 31px; }
.cx-banner--1 .cx-banner__crest { width: 86px; height: 74px; top: -10px; }
.cx-banner--1 .cx-banner__raceico { width: 20px; height: 20px; }
/* 2º y 3º */
.cx-banner--2 .cx-banner__cloth, .cx-banner--3 .cx-banner__cloth { min-height: 196px; padding: 40px 9px 38px; }
.cx-banner--2 .cx-banner__img, .cx-banner--3 .cx-banner__img { width: 58px; height: 58px; }
.cx-banner--2 .cx-banner__name, .cx-banner--3 .cx-banner__name { font-size: 14px; }
.cx-banner--2 .cx-banner__pts, .cx-banner--3 .cx-banner__pts { font-size: 19px; margin-top: 5px; }
.cx-banner--2 .cx-banner__lv, .cx-banner--3 .cx-banner__lv,
.cx-banner--2 .cx-banner__race, .cx-banner--3 .cx-banner__race { font-size: 10px; }
.cx-banner--2 .cx-banner__guildname, .cx-banner--3 .cx-banner__guildname { max-width: 84px; font-size: 10px; }
.cx-banner--2 .cx-banner__crest, .cx-banner--3 .cx-banner__crest { width: 54px; height: 48px; }
/* ===== Legends Twin Columns Symmetry (Players & Guilds) ===== */
.odin-legends__grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 22px !important;
align-items: stretch !important;
}
@media (max-width: 900px) {
.odin-legends__grid { grid-template-columns: 1fr !important; }
}
body.odin-body .odin-legends__board {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
box-sizing: border-box !important;
padding: 22px 22px 28px !important;
}
.odin-legends__more,
body.odin-body .odin-legends__more {
margin-top: 24px !important;
}
.cx-banner--1 .cx-banner__cloth {
min-height: 332px !important;
}
.cx-banner--2 .cx-banner__cloth,
.cx-banner--3 .cx-banner__cloth {
min-height: 236px !important;
}
.odin-legends__list li.cx-rankrow {
min-height: 64px !important;
height: 64px !important;
box-sizing: border-box !important;
}
/* Vacant Banner Styling */
.cx-banner--vacant {
cursor: default !important;
opacity: .85 !important;
}
.cx-banner--vacant .cx-banner__cloth {
border: 1px dashed rgba(231, 181, 82, .35) !important;
}
.cx-banner__img--vacant {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
border: 1px dashed rgba(231, 181, 82, .45) !important;
background: rgba(14, 10, 7, .85) !important;
color: rgba(231, 181, 82, .6) !important;
margin-bottom: 6px !important;
animation: cx-seat-pulse 2.6s ease-in-out infinite !important;
}
.cx-banner--1 .cx-banner__img--vacant {
width: 106px !important;
height: 106px !important;
}
.cx-banner--2 .cx-banner__img--vacant,
.cx-banner--3 .cx-banner__img--vacant {
width: 58px !important;
height: 58px !important;
}
.cx-banner__img--vacant svg {
width: 28px !important;
height: 28px !important;
}
.cx-banner--vacant .cx-banner__name {
color: rgba(255, 246, 224, .7) !important;
font-size: 13px !important;
}
.cx-banner--vacant .cx-banner__lv {
color: rgba(231, 181, 82, .6) !important;
}
.cx-banner--vacant .cx-banner__pts {
color: rgba(231, 181, 82, .5) !important;
}
/* ===== Opción 1: Trono de Fortaleza (Gremio Soberano) ===== */
body.odin-body .cx-guild-champion {
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 14px !important;
height: 256px !important;
min-height: 256px !important;
max-height: 256px !important;
box-sizing: border-box !important;
margin: 12px 0 12px !important;
padding: 16px 22px 18px !important;
border: 1px solid rgba(231, 181, 82, .75) !important;
border-radius: 8px !important;
background:
radial-gradient(ellipse 90% 80% at 50% 50%, rgba(18, 12, 7, .84) 40%, rgba(18, 12, 7, .50) 100%),
url('../images/ele/guild-pattern-gold.jpg') center / cover no-repeat,
#120D08 !important;
box-shadow: 0 0 34px rgba(231, 181, 82, .22), 0 16px 36px rgba(0, 0, 0, .55) !important;
text-decoration: none !important;
overflow: hidden !important;
transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease !important;
}
body.odin-body .cx-guild-champion:hover {
border-color: #F6DFA4 !important;
box-shadow: 0 0 48px rgba(231, 181, 82, .36), 0 20px 42px rgba(0, 0, 0, .6) !important;
transform: translateY(-2px) !important;
}
body.odin-body .cx-guild-champion::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(110deg, transparent 40%, rgba(243, 213, 138, .12) 50%, transparent 60%) -100% 0 / 200% 100% no-repeat;
transition: background-position .9s ease;
}
body.odin-body .cx-guild-champion:hover::before {
background-position: 100% 0;
}
.cx-guild-champion__head {
position: relative;
z-index: 2;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
}
.cx-guild-champion__badge {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
padding: 4px 11px 4px 9px !important;
border: 1px solid rgba(231, 181, 82, .6) !important;
border-radius: 999px !important;
background: rgba(231, 181, 82, .14) !important;
color: #F6DFA4 !important;
font: 800 10.5px/1 Inter, sans-serif !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
}
.cx-guild-champion__crown {
width: 16px !important;
height: 16px !important;
color: #F3D58A !important;
filter: drop-shadow(0 0 4px rgba(243, 213, 138, .8)) !important;
}
.cx-guild-champion__rank-tag {
font-family: "Marcellus", serif !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: .1em !important;
color: #F6DFA4 !important;
padding: 3px 9px !important;
border: 1px solid rgba(231, 181, 82, .45) !important;
border-radius: 4px !important;
background: rgba(14, 10, 7, .85) !important;
}
.cx-guild-champion__content {
position: relative;
z-index: 2;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 32px !important;
flex: 1 !important;
margin: 0 auto !important;
width: 100% !important;
max-width: 580px !important;
}
.cx-guild-champion__portrait-wrap {
position: relative !important;
flex: none !important;
width: 124px !important;
height: 124px !important;
}
.cx-guild-champion__portrait {
width: 124px !important;
height: 124px !important;
border-radius: 50% !important;
object-fit: cover !important;
border: 3.5px solid #F3D58A !important;
background: #140E09 !important;
box-shadow: 0 0 0 5px rgba(0, 0, 0, .5), 0 0 32px rgba(231, 181, 82, .65) !important;
}
.cx-guild-champion__portrait--vacant {
width: 124px !important;
height: 124px !important;
display: grid !important;
place-items: center !important;
border-radius: 50% !important;
border: 2px dashed rgba(231, 181, 82, .5) !important;
background: #140E09 !important;
color: rgba(231, 181, 82, .7) !important;
}
.cx-guild-champion__portrait--vacant svg {
width: 56px !important;
height: 56px !important;
}
.cx-guild-champion__medal-pill {
position: absolute !important;
bottom: -8px !important;
left: 50% !important;
transform: translateX(-50%) !important;
display: grid !important;
place-items: center !important;
width: 34px !important;
height: 34px !important;
border-radius: 50% !important;
border: 2px solid #F6DFA4 !important;
background: radial-gradient(circle, #F6DFA4, #B98532) !important;
color: #1A120A !important;
font-family: "Marcellus", serif !important;
font-size: 16px !important;
font-weight: 900 !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, .85) !important;
}
.cx-guild-champion__info {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
}
.cx-guild-champion__name {
margin: 0 !important;
font-family: "Marcellus", serif !important;
font-size: 30px !important;
font-weight: 800 !important;
color: #FFF6E0 !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, .8), 0 0 16px rgba(231, 181, 82, .3) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.cx-guild-champion__meta {
display: flex !important;
align-items: center !important;
gap: 16px !important;
font-size: 13px !important;
color: rgba(255, 246, 224, .85) !important;
}
.cx-guild-champion__leader {
color: #FFF6E0 !important;
}
.cx-guild-champion__leader small {
color: rgba(231, 181, 82, .85) !important;
text-transform: uppercase !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
}
.cx-guild-champion__leader strong {
color: #FFF6E0 !important;
font-weight: 700 !important;
}
.cx-guild-champion__race {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-weight: 600 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: rgba(231, 181, 82, .85) !important;
}
.cx-guild-champion__race img {
width: 17px !important;
height: 17px !important;
filter: drop-shadow(0 0 4px rgba(0, 0, 0, .6)) !important;
}
.cx-guild-champion__stats {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
margin-top: 6px !important;
}
.cx-gstat {
display: flex !important;
flex-direction: column !important;
padding: 7px 14px !important;
border: 1px solid rgba(231, 181, 82, .35) !important;
border-radius: 5px !important;
background: rgba(14, 10, 7, .8) !important;
}
.cx-gstat__label {
font: 600 9.5px/1 Inter, sans-serif !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: rgba(231, 181, 82, .85) !important;
}
.cx-gstat__val {
margin-top: 3px !important;
font-family: "Marcellus", serif !important;
font-size: 17px !important;
font-weight: 800 !important;
color: #FFF6E0 !important;
line-height: 1.1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.cx-gstat--pts .cx-gstat__val {
color: #F6DFA4 !important;
}
.cx-gstat--pts .cx-gstat__val small {
font-size: 11px !important;
letter-spacing: .08em !important;
color: rgba(231, 181, 82, .75) !important;
}
/* 4 Filas de Clanes Aspirantes (Ranks 2, 3, 4 y 5) */
.cx-guild-runners {
display: grid !important;
gap: 8px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
body.odin-body .cx-guild-runners li.cx-rankrow,
body.odin-body .odin-legends__list li.cx-rankrow {
display: grid !important;
grid-template-columns: 34px 44px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 12px !important;
min-height: 64px !important;
height: 64px !important;
box-sizing: border-box !important;
padding: 10px 14px !important;
}
body.odin-body .cx-guild-runners li.cx-guild-row--vacant,
body.odin-body .odin-legends__list li.cx-guild-row--vacant {
display: grid !important;
grid-template-columns: 34px 44px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 12px !important;
min-height: 64px !important;
height: 64px !important;
box-sizing: border-box !important;
padding: 10px 14px !important;
}
body.odin-body svg.cx-guild-row__img--vacant {
width: 44px !important;
height: 44px !important;
flex: none !important;
}
body.odin-body .cx-guild-row--vacant .odin-legends__points {
display: block !important;
text-align: right !important;
font-family: "Marcellus", serif !important;
font-size: 16px !important;
color: rgba(231, 181, 82, .45) !important;
line-height: 1 !important;
}
/* Patrón por defecto para filas (#4, #5 y vacantes en Jugadores y Gremios: Color Natural con 50% menos opacidad) */
body.odin-body .odin-legends__list li.cx-rankrow {
position: relative !important;
border: 1px solid rgba(156, 107, 58, .35) !important;
border-radius: 6px !important;
background:
linear-gradient(90deg, rgba(16, 12, 8, .96) 20%, rgba(16, 12, 8, .80) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 340px repeat,
#100C08 !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, .45) !important;
overflow: hidden !important;
}
body.odin-body .odin-legends__list li.cx-rankrow:hover {
border-color: rgba(231, 181, 82, .65) !important;
box-shadow: 0 0 22px rgba(231, 181, 82, .24) !important;
transform: translateX(3px) !important;
}
/* Vacantes con patrón natural suavizado al 50% */
body.odin-body .odin-legends__list li.cx-guild-row--vacant {
border: 1px dashed rgba(156, 107, 58, .45) !important;
background:
linear-gradient(90deg, rgba(16, 12, 8, .96) 20%, rgba(16, 12, 8, .80) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 340px repeat,
#100C08 !important;
}
/* Segundo Lugar (#2): Patrón Azul con 50% menos opacidad */
body.odin-body .cx-guild-runners li.cx-rankrow--2 {
border-color: rgba(96, 150, 225, .65) !important;
background:
linear-gradient(90deg, rgba(10, 16, 28, .96) 20%, rgba(10, 16, 28, .78) 100%),
url('../images/ele/guild-pattern-blue.jpg') center / 340px repeat,
#0A101C !important;
box-shadow: 0 0 16px rgba(70, 130, 215, .2) !important;
}
body.odin-body .cx-guild-runners li.cx-rankrow--2:hover {
border-color: rgba(140, 185, 255, .85) !important;
box-shadow: 0 0 26px rgba(70, 130, 215, .38) !important;
}
body.odin-body .cx-guild-runners li.cx-rankrow--2 .cx-rankrow__img {
border-color: rgba(120, 175, 255, .75) !important;
box-shadow: 0 0 0 3px rgba(0, 0, 0, .45), 0 0 14px rgba(80, 145, 240, .4) !important;
}
body.odin-body .cx-guild-runners li.cx-rankrow--2 .odin-legends__points {
color: #B6D5FE !important;
}
body.odin-body .cx-guild-runners li.cx-rankrow--2 .odin-legends__points small {
color: rgba(160, 195, 245, .75) !important;
}
body.odin-body .cx-guild-runners li.cx-rankrow--2 .odin-legends__name a:hover {
color: #A9C7FF !important;
}
body.odin-body .cx-guild-runners li.cx-guild-row--vacant.cx-rankrow--2 {
border-style: dashed !important;
border-color: rgba(96, 150, 225, .65) !important;
}
/* Tercer Lugar (#3): Patrón Bronce con 50% menos opacidad */
body.odin-body .cx-guild-runners li.cx-rankrow--3 {
border-color: rgba(232, 168, 122, .65) !important;
background:
linear-gradient(90deg, rgba(26, 14, 9, .96) 20%, rgba(26, 14, 9, .78) 100%),
url('../images/ele/guild-pattern-bronze.jpg') center / 340px repeat,
#180D09 !important;
box-shadow: 0 0 16px rgba(226, 130, 80, .2) !important;
}
body.odin-body .cx-guild-runners li.cx-rankrow--3:hover {
border-color: rgba(255, 190, 150, .85) !important;
box-shadow: 0 0 26px rgba(226, 130, 80, .38) !important;
}
body.odin-body .cx-guild-runners li.cx-rankrow--3 .cx-rankrow__img {
border-color: rgba(232, 168, 122, .75) !important;
box-shadow: 0 0 0 3px rgba(0, 0, 0, .45), 0 0 14px rgba(226, 130, 80, .4) !important;
}
body.odin-body .cx-guild-runners li.cx-rankrow--3 .odin-legends__points {
color: #F0B286 !important;
}
body.odin-body .cx-guild-runners li.cx-rankrow--3 .odin-legends__points small {
color: rgba(232, 168, 122, .75) !important;
}
body.odin-body .cx-guild-runners li.cx-rankrow--3 .odin-legends__name a:hover {
color: #F0B286 !important;
}
body.odin-body .cx-guild-runners li.cx-guild-row--vacant.cx-rankrow--3 {
border-style: dashed !important;
border-color: rgba(232, 168, 122, .65) !important;
}
/* Insignias de Rango (#2 Azul, #3 Bronce) */
.cx-rank--2 {
color: #B6D5FE !important;
}
.cx-rank--2::before {
border-color: rgba(120, 175, 255, .8) !important;
background: rgba(10, 18, 32, .92) !important;
box-shadow: 0 0 12px rgba(80, 145, 240, .4) !important;
}
.cx-rank--3 {
color: #F0B286 !important;
}
.cx-rank--3::before {
border-color: rgba(232, 168, 122, .8) !important;
background: rgba(28, 16, 10, .92) !important;
box-shadow: 0 0 12px rgba(226, 130, 80, .35) !important;
}
.cx-sub-leader {
color: rgba(231, 181, 82, .9);
font-weight: 600;
}
/* ============================================================
SALON DE LA FAMA - rediseno "mistico con glow" (v2, marcado)
============================================================ */
@keyframes cxl-aura { 0%{opacity:.45;} 100%{opacity:.85;} }
@keyframes cxl-breathe { 0%,100%{box-shadow:0 0 0 1px rgba(231,181,82,.25),0 26px 60px rgba(0,0,0,.6),0 0 34px rgba(231,181,82,.14),inset 0 1px 0 rgba(243,213,138,.18);} 50%{box-shadow:0 0 0 1px rgba(231,181,82,.45),0 26px 60px rgba(0,0,0,.6),0 0 64px rgba(231,181,82,.34),inset 0 1px 0 rgba(243,213,138,.3);} }
@keyframes cxl-pulse { 0%,100%{filter:drop-shadow(0 0 7px rgba(var(--glow,217,164,65),.55));} 50%{filter:drop-shadow(0 0 22px rgba(var(--glow,217,164,65),1));} }
@keyframes cxl-halo { 0%,100%{opacity:.5;transform:translate(-50%,-32%) scale(1);} 50%{opacity:.95;transform:translate(-50%,-32%) scale(1.14);} }
@keyframes cxl-portal { 0%,100%{filter:drop-shadow(0 0 12px rgba(243,213,138,.5));} 50%{filter:drop-shadow(0 0 30px rgba(243,213,138,1));} }
@keyframes cxl-spark { from{background-position:0 0,0 0,0 0;} to{background-position:0 -900px,0 -1500px,0 -2100px;} }
@keyframes cxl-topbar { 0%{background-position:-60% 0;} 100%{background-position:160% 0;} }
/* Fondo de seccion: mas oscuro + auras estrictamente contenidas dentro de la caja */
.odin-legends { clip-path: inset(0 -100vw 0 -100vw) !important; margin-bottom: 0 !important; }
.odin-legends::before { opacity:.5 !important; filter:saturate(1.15) contrast(1.08); clip-path: inset(0 0 0 0) !important; }
.odin-legends::after {
content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); pointer-events:none;
clip-path: inset(0 0 0 0) !important;
background:
radial-gradient(42% 40% at 20% 30%, rgba(231,181,82,.22), transparent 70%),
radial-gradient(40% 40% at 80% 35%, rgba(96,150,210,.18), transparent 70%),
radial-gradient(48% 40% at 50% 65%, rgba(158,100,214,.14), transparent 70%);
animation: cxl-aura 14s ease-in-out infinite alternate;
}
/* Chispas flotantes contenidas */
.odin-legends__grid { position:relative; }
.odin-legends__grid::after {
content:""; position:absolute; inset:0 !important; z-index:4; pointer-events:none; opacity:.85; mix-blend-mode:screen;
background-image:
radial-gradient(2.6px 2.6px at 12% 30%, rgba(243,213,138,.95), transparent 60%),
radial-gradient(2px 2px at 66% 48%, rgba(243,213,138,.75), transparent 60%),
radial-gradient(2.2px 2.2px at 40% 82%, rgba(180,205,235,.7), transparent 60%);
background-size:460px 900px,560px 1500px,520px 2100px; background-repeat:repeat;
animation: cxl-spark 22s linear infinite;
}
/* Paneles translucidos con borde dorado que brilla y respira */
body.odin-body .odin-legends__board {
position:relative; overflow:visible;
background:
radial-gradient(135% 72% at 50% -12%, rgba(231,181,82,.20), transparent 55%),
linear-gradient(180deg, rgba(36,25,13,.72), rgba(11,8,5,.82)) !important;
border:1px solid rgba(231,181,82,.55) !important;
animation: cxl-breathe 6.5s ease-in-out infinite;
}
/* Barra superior de luz que recorre cada panel */
body.odin-body .odin-legends__board::before {
content:""; position:absolute; top:-1px; left:16px; right:16px; height:2px; z-index:3; pointer-events:none; border-radius:2px;
background:linear-gradient(90deg, transparent, rgba(243,213,138,.9), rgba(255,240,194,1), rgba(243,213,138,.9), transparent);
background-size:220% 100%; animation: cxl-topbar 5.5s linear infinite;
box-shadow:0 0 12px rgba(243,213,138,.7);
}
/* Podio: aura pulsante por rango (oro/plata/bronce) */
.cx-banner { position:relative; }
.cx-banner::after {
content:""; position:absolute; z-index:-1; left:50%; top:32%; width:175%; height:140%; transform:translate(-50%,-32%);
background:radial-gradient(closest-side, rgba(var(--glow),.42), transparent 70%); filter:blur(6px); pointer-events:none;
animation: cxl-halo 6s ease-in-out infinite;
}
.cx-banner--1::after { background:radial-gradient(closest-side, rgba(var(--glow),.6), transparent 72%); animation-duration:4.4s; }
.cx-banner__img { animation: cxl-pulse 3.4s ease-in-out infinite; }
.cx-banner--1 .cx-banner__img { animation-duration:2.8s; }
/* Gremio campeon: portal de luz alrededor del retrato */
.cx-guild-champion__portrait { animation: cxl-portal 3.8s ease-in-out infinite; }
.cx-guild-champion__crown { animation: cxl-pulse 3.2s ease-in-out infinite; }
/* Filas 4/5: brillo al pasar */
.odin-legends__list li.cx-rankrow { transition:border-color .2s,background .2s,transform .2s,box-shadow .2s; }
.odin-legends__list li.cx-rankrow:hover { box-shadow:0 0 24px rgba(231,181,82,.28), inset 0 0 0 1px rgba(231,181,82,.2); }
.cx-rankrow__img { transition:box-shadow .25s; }
.odin-legends__list li.cx-rankrow:hover .cx-rankrow__img { box-shadow:0 0 0 3px rgba(0,0,0,.3),0 0 16px rgba(231,181,82,.65); }
/* Filas de gremios: mismo brillo */
a.cx-guild-row { transition:border-color .2s,background .2s,box-shadow .2s,transform .2s; }
a.cx-guild-row:hover { box-shadow:0 0 22px rgba(231,181,82,.22); transform:translateX(3px); }
/* Boton "Ranking completo" */
.odin-legends__more { transition:border-color .2s,background .2s,box-shadow .2s,color .2s; }
.odin-legends__more:hover { box-shadow:0 0 26px rgba(231,181,82,.4), inset 0 0 12px rgba(231,181,82,.14); }
/* Titulo de seccion con brillo */
.odin-legends .atlas-section__head h2 { text-shadow:0 2px 26px rgba(231,181,82,.4),0 0 54px rgba(231,181,82,.2); }
@media (prefers-reduced-motion: reduce) {
.odin-legends::after, .odin-legends__grid::after, body.odin-body .odin-legends__board,
body.odin-body .odin-legends__board::before, .cx-banner::after, .cx-banner__img,
.cx-guild-champion__portrait, .cx-guild-champion__crown { animation: none !important; }
}
/* =====================================================================
RUNE · forma limpia en toda la web — sin marco cuadrado (2026-10-10)
Iconos/sigilos cuadrados -> circulo perfecto
Botones anchos de texto -> rectangulo redondeado
===================================================================== */
.odin-body .rune{ clip-path:none !important; border-radius:14px !important; }
.odin-body .rune::before{ clip-path:none !important; border-radius:14px !important; }
.odin-body .rune>span{ clip-path:none !important; border-radius:11px !important; }
/* Botones de icono / sigilo (P, G, inventario/avatar, etc.) -> circulo */
.odin-body .rune--mark{ aspect-ratio:1/1 !important; min-width:0 !important; border-radius:50% !important; overflow:visible !important; }
.odin-body .rune--mark::before{ clip-path:none !important; border-radius:50% !important; }
.odin-body .rune--mark>span{ clip-path:none !important; border-radius:50% !important; }
/* Estado activo: realce dorado (pestanas / toggles / sigilos activos) */
.odin-body .rune[aria-selected="true"]::before,
.odin-body .rune.is-active::before{ filter:brightness(1.15) drop-shadow(0 0 7px rgba(231,181,82,.55)) !important; }
/* Botones pequenos .rune--tiny conservan su forma propia */
.odin-body .rune--tiny{ aspect-ratio:auto !important; border-radius:4px !important; }
.odin-body .rune--tiny::before{ border-radius:4px !important; }
.odin-body .rune--tiny>span{ border-radius:3px !important; }
/* Foco: anillo que sigue la forma del boton (sin el recuadro cuadrado con offset) */
.odin-body .rune:focus-visible{ outline:none !important; outline-offset:0 !important; box-shadow:0 0 0 3px rgba(231,181,82,.55) !important; }
.odin-body .rune--mark:focus-visible{ outline:none !important; outline-offset:0 !important; box-shadow:0 0 0 3px rgba(231,181,82,.6) !important; }
/* ===== Botones "volver atras" unificados (compactos, esquina superior izq) ===== */
.odin-body .odin-char__back, .odin-body .cxn__back{
display:inline-flex !important; align-items:center; gap:.4rem;
margin:0 0 .65rem !important; padding:.4rem .8rem !important;
border:1px solid rgba(231,181,82,.5) !important; border-radius:8px !important;
background:rgba(231,181,82,.08) !important; color:#f3d78f !important;
font:700 .66rem/1 "Outfit",sans-serif !important; letter-spacing:.1em; text-transform:uppercase;
text-decoration:none !important; transition:background .2s,border-color .2s,transform .2s;
}
.odin-body .odin-char__back::before, .odin-body .cxn__back::before{ content:"\2190"; font-size:.95rem; line-height:1; }
.odin-body .cxn__back > span{ display:none !important; }
.odin-body .odin-char__back:hover, .odin-body .cxn__back:hover{
background:rgba(231,181,82,.18) !important; border-color:rgba(231,181,82,.9) !important; transform:translateX(-3px);
}
/* ===== Pagina de noticias: contenido a todo el ancho ===== */
.rv-news-full .rv-account-layout{ max-width:none !important; width:100% !important; }
.rv-news-full .rv-account-main{ padding-left:clamp(14px,2.4vw,34px) !important; padding-right:clamp(14px,2.4vw,34px) !important; }
/* Panel oscuro (.odin-page) a todo el ancho solo en la pagina de noticias */
.odin-page.odin-cms-content:has(.rv-news-full){ width:100% !important; max-width:none !important; margin:0 0 70px !important; padding-left:clamp(14px,2.4vw,34px) !important; padding-right:clamp(14px,2.4vw,34px) !important; padding-top:2rem !important; }
/* el hero de la pagina de noticias se une al panel, sin corte */
.odin-body:has(.rv-news-full) #main-content > .odin-title{ margin-bottom:0 !important; border-bottom:0 !important; }
.odin-page.odin-dl,
.odin-page.sx-page {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-left: clamp(16px, 3.2vw, 56px) !important;
padding-right: clamp(16px, 3.2vw, 56px) !important;
padding-top: 2rem !important;
box-sizing: border-box !important;
}
.odin-body:has(.odin-dl) #main-content > .odin-title,
.odin-body:has(.sx-page) #main-content > .odin-title {
padding-left: clamp(16px, 3.2vw, 56px) !important;
padding-right: clamp(16px, 3.2vw, 56px) !important;
}
/* Hero Principal de Descarga Recomendada */
.odin-dl__hero--legend {
position: relative !important;
isolation: isolate !important;
display: grid !important;
grid-template-columns: 124px minmax(0, 1fr) auto !important;
gap: 32px !important;
align-items: center !important;
padding: 34px 38px !important;
border-radius: 14px !important;
border: 1px solid rgba(231, 181, 82, .48) !important;
border-left: 4px solid #E7B552 !important;
background:
linear-gradient(90deg, rgba(22, 16, 10, .96) 0%, rgba(20, 14, 8, .90) 45%, rgba(16, 11, 7, .84) 100%),
url('../images/ele/guild-pattern-gold.jpg') center / 380px repeat,
#140E09 !important;
box-shadow: 0 10px 38px rgba(0, 0, 0, .6), 0 0 30px rgba(231, 181, 82, .18), inset 0 1px 0 rgba(255, 224, 138, .25) !important;
overflow: hidden !important;
}
.odin-dl__hero--legend::before {
content: "";
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 2px;
background: linear-gradient(90deg, transparent, #FFE08A, #D9A441, #FFE08A, transparent);
opacity: .85;
pointer-events: none;
}
.odin-dl__hero-emblem {
position: relative;
display: grid;
place-items: center;
width: 120px;
height: 120px;
border-radius: 18px;
background: radial-gradient(circle at 50% 35%, rgba(231, 181, 82, .24), rgba(18, 12, 7, .9) 75%);
border: 1px solid rgba(231, 181, 82, .55);
box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 20px rgba(231, 181, 82, .2), inset 0 0 20px rgba(231, 181, 82, .15);
flex: none;
transition: transform .3s ease, border-color .3s ease;
}
.odin-dl__hero--legend:hover .odin-dl__hero-emblem {
transform: translateY(-2px);
border-color: rgba(255, 224, 138, .8);
}
.odin-dl__logo {
width: 90px !important;
height: 90px !important;
object-fit: contain;
filter: drop-shadow(0 4px 18px rgba(231, 181, 82, .5));
transition: transform .3s ease;
}
.odin-dl__hero--legend:hover .odin-dl__logo {
transform: scale(1.06);
}
.odin-dl__hero-fallback-ico {
width: 56px;
height: 56px;
color: #FFE08A;
}
.odin-dl__hero-content {
min-width: 0;
}
.odin-dl__hero-badge {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 12px;
border-radius: 20px;
background: rgba(231, 181, 82, .14);
border: 1px solid rgba(231, 181, 82, .45);
color: #FFE08A;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
font-family: var(--cx-font, 'Marcellus', serif);
margin-bottom: 8px;
}
.odin-dl__hero-badge svg {
width: 13px;
height: 13px;
color: #FFD768;
}
.odin-dl__hero-title {
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: clamp(1.85rem, 2.6vw, 2.45rem) !important;
font-weight: 700 !important;
color: #FFF2D1 !important;
letter-spacing: .05em !important;
text-transform: uppercase !important;
text-shadow: 0 2px 14px rgba(231, 181, 82, .4), 0 1px 2px rgba(0, 0, 0, .9);
margin: 4px 0 10px !important;
line-height: 1.1;
}
.odin-dl__hero-desc {
color: #E2D3B8 !important;
font-size: 0.98rem !important;
line-height: 1.55 !important;
max-width: 85ch !important;
margin: 0 0 16px !important;
}
.odin-dl__hero-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.odin-dl__tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 6px;
background: rgba(0, 0, 0, .45);
border: 1px solid rgba(168, 151, 124, .28);
color: rgba(234, 223, 200, .85);
font-size: 12px;
font-weight: 600;
}
.odin-dl__tag svg {
width: 14px;
height: 14px;
color: #E7B552;
}
.odin-dl__hero-action {
flex: none;
}
.odin-dl__cta-btn {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
gap: 14px !important;
padding: 16px 30px !important;
border-radius: 8px !important;
background: linear-gradient(135deg, #FFE8A3 0%, #D9A441 50%, #9B6B18 100%) !important;
border: 1px solid #FFEBB0 !important;
color: #1A1209 !important;
text-decoration: none !important;
box-shadow: 0 8px 28px rgba(217, 164, 65, .45), inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(0, 0, 0, .6) !important;
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
overflow: hidden !important;
}
.odin-dl__cta-btn::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .35) 45%, transparent 65%);
background-size: 200% 100%;
animation: cx-medal-sheen 4s ease-in-out infinite;
pointer-events: none;
}
.odin-dl__cta-btn:hover {
transform: translateY(-3px) scale(1.02) !important;
box-shadow: 0 12px 36px rgba(217, 164, 65, .65), inset 0 1px 0 #fff !important;
filter: brightness(1.08) !important;
}
.odin-dl__btn-ico {
width: 28px;
height: 28px;
color: #1A1209;
flex: none;
}
.odin-dl__btn-text {
display: flex;
flex-direction: column;
text-align: left;
line-height: 1.15;
}
.odin-dl__btn-text strong {
font-family: var(--cx-font, 'Marcellus', serif);
font-size: 1.15rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
color: #1A1209;
}
.odin-dl__btn-text small {
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(26, 18, 9, .75);
font-weight: 700;
}
/* Seccion de Espejos / Otros Servidores */
.odin-dl__mirrors {
margin-top: 50px !important;
}
.odin-dl__mirrors-head {
margin-bottom: 24px;
}
.odin-dl__mirrors-head h2 {
font-family: var(--cx-font, 'Marcellus', serif) !important;
font-size: 1.48rem !important;
color: #FFE08A !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
text-shadow: 0 0 12px rgba(231, 181, 82, .3);
margin: 0 0 6px !important;
}
.odin-dl__mirrors-head p {
color: #A8977C !important;
font-size: .95rem !important;
margin: 0 !important;
}
.odin-dl__cards {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 24px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.odin-dl__card {
position: relative !important;
isolation: isolate !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
min-height: 310px !important;
padding: 26px 26px 22px !important;
border-radius: 14px !important;
background:
radial-gradient(circle at 50% 0%, rgba(231, 181, 82, .07) 0%, transparent 60%),
linear-gradient(180deg, rgba(20, 15, 10, .96) 0%, rgba(16, 12, 8, .93) 50%, rgba(12, 9, 6, .98) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 340px repeat,
#120D09 !important;
border: 1px solid rgba(231, 181, 82, .38) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(231, 181, 82, .1), inset 0 1px 0 rgba(255, 224, 138, .2) !important;
text-decoration: none !important;
transition: transform .28s cubic-bezier(.2,.8,.3,1), border-color .28s ease, box-shadow .28s ease !important;
overflow: hidden !important;
}
.odin-dl__card:hover {
transform: translateY(-8px) !important;
border-color: rgba(231, 181, 82, .85) !important;
box-shadow: 0 18px 42px rgba(0, 0, 0, .75), 0 0 32px rgba(231, 181, 82, .3), inset 0 0 0 1px rgba(231, 181, 82, .25), inset 0 1px 0 #FFF2D1 !important;
}
/* 4 Esquinas ornamentales estilo nórdico */
.odin-dl__card-corner {
position: absolute;
width: 14px;
height: 14px;
border-color: #E7B552;
pointer-events: none;
opacity: .5;
transition: opacity .25s ease, border-color .25s ease, filter .25s ease;
}
.odin-dl__card-corner--tl { top: 9px; left: 9px; border-top: 2px solid; border-left: 2px solid; }
.odin-dl__card-corner--tr { top: 9px; right: 9px; border-top: 2px solid; border-right: 2px solid; }
.odin-dl__card-corner--bl { bottom: 9px; left: 9px; border-bottom: 2px solid; border-left: 2px solid; }
.odin-dl__card-corner--br { bottom: 9px; right: 9px; border-bottom: 2px solid; border-right: 2px solid; }
.odin-dl__card:hover .odin-dl__card-corner {
opacity: 1;
border-color: #FFE08A;
filter: drop-shadow(0 0 4px #FFE08A);
}
/* Barra superior de estado */
.odin-dl__card-top {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 18px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid rgba(168, 115, 60, .22) !important;
}
.odin-dl__card-badge {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 4px 11px !important;
border-radius: 20px !important;
background: rgba(231, 181, 82, .14) !important;
border: 1px solid rgba(231, 181, 82, .45) !important;
color: #FFE08A !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
font-family: var(--cx-font, 'Marcellus', serif) !important;
}
.odin-dl__card-badge-ico {
width: 12px !important;
height: 12px !important;
color: #FFD768 !important;
}
.odin-dl__card-status {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
color: #6FD3A2 !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
font-family: var(--cx-font, 'Marcellus', serif) !important;
}
.odin-dl__card-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #6FD3A2;
box-shadow: 0 0 8px #6FD3A2;
}
/* Fila del medio: Icono + Cuerpo descriptivo */
.odin-dl__card-middle {
display: flex !important;
gap: 20px !important;
align-items: flex-start !important;
margin-bottom: 16px !important;
}
.odin-dl__card-icon-wrap {
position: relative !important;
display: grid !important;
place-items: center !important;
width: 86px !important;
height: 86px !important;
border-radius: 18px !important;
background: radial-gradient(circle at 50% 35%, rgba(231, 181, 82, .22), rgba(16, 12, 8, .9) 75%) !important;
border: 1px solid rgba(231, 181, 82, .48) !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, .5), inset 0 0 16px rgba(231, 181, 82, .15) !important;
flex: none !important;
transition: transform .3s ease, border-color .3s ease !important;
}
.odin-dl__card:hover .odin-dl__card-icon-wrap {
transform: translateY(-2px) scale(1.04) !important;
border-color: rgba(255, 224, 138, .8) !important;
}
.odin-dl__card-img {
width: 60px !important;
height: 60px !important;
object-fit: contain !important;
filter: drop-shadow(0 4px 14px rgba(231, 181, 82, .5)) !important;
transition: transform .3s ease !important;
}
.odin-dl__card:hover .odin-dl__card-img {
transform: scale(1.08) !important;
}
.odin-dl__card-body {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.odin-dl__card-header-row {
display: flex !important;
align-items: baseline !important;
flex-wrap: wrap !important;
gap: 10px !important;
margin-bottom: 8px !important;
}
.odin-dl__card-title {
display: block !important;
font-family: var(--cx-font, 'Marcellus', serif) !important;
font-size: 1.55rem !important;
font-weight: 700 !important;
color: #FFF2D1 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
margin: 0 !important;
text-shadow: 0 2px 12px rgba(231, 181, 82, .35) !important;
line-height: 1.1 !important;
}
.odin-dl__card-chip {
display: inline-flex !important;
align-items: center !important;
padding: 2px 8px !important;
border-radius: 4px !important;
background: rgba(0, 0, 0, .45) !important;
border: 1px solid rgba(168, 151, 124, .25) !important;
color: rgba(234, 223, 200, .75) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
}
.odin-dl__card-desc {
color: #D6C8B2 !important;
font-size: .92rem !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* Divisor ornamental con diamante */
.odin-dl__card-divider {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 4px 0 16px !important;
}
.odin-dl__card-divider::before,
.odin-dl__card-divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(231, 181, 82, .35), transparent);
}
.odin-dl__card-diamond {
color: #E7B552 !important;
font-size: 9px !important;
padding: 0 8px !important;
opacity: .8 !important;
}
.odin-dl__card:hover .odin-dl__card-diamond {
color: #FFE08A !important;
text-shadow: 0 0 6px #FFE08A !important;
}
.odin-dl__card-action {
margin-top: auto !important;
width: 100% !important;
}
.odin-dl__card-btn {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
width: 100% !important;
padding: 14px 20px !important;
border-radius: 8px !important;
background: linear-gradient(135deg, #FFE8A3 0%, #D9A441 50%, #9B6B18 100%) !important;
border: 1px solid #FFEBB0 !important;
color: #1A1209 !important;
text-decoration: none !important;
box-shadow: 0 6px 22px rgba(217, 164, 65, .4), inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(0, 0, 0, .5) !important;
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.odin-dl__card-btn::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .35) 45%, transparent 65%);
background-size: 200% 100%;
animation: cx-medal-sheen 4s ease-in-out infinite;
pointer-events: none;
}
.odin-dl__card:hover .odin-dl__card-btn {
transform: translateY(-2px) scale(1.02) !important;
box-shadow: 0 10px 30px rgba(217, 164, 65, .65), inset 0 1px 0 #fff !important;
filter: brightness(1.08) !important;
}
.odin-dl__card-btn .odin-dl__btn-ico {
width: 26px !important;
height: 26px !important;
color: #1A1209 !important;
flex: none !important;
}
.odin-dl__card-btn .odin-dl__btn-text {
display: flex !important;
flex-direction: column !important;
text-align: left !important;
line-height: 1.15 !important;
}
.odin-dl__card-btn .odin-dl__btn-text strong {
font-family: var(--cx-font, 'Marcellus', serif) !important;
font-size: 1.08rem !important;
font-weight: 800 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: #1A1209 !important;
}
.odin-dl__card-btn .odin-dl__btn-text small {
font-size: 10.5px !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: rgba(26, 18, 9, .78) !important;
font-weight: 700 !important;
}
/* ===== Requisitos del Sistema: Diseno Forjado Nordico ===== */
.odin-dl__need {
margin-top: 60px !important;
padding-top: 40px !important;
border-top: 1px solid rgba(216, 156, 74, .25) !important;
}
.odin-dl__need-head {
margin-bottom: 26px !important;
}
.odin-dl__need-head h2 {
font-family: var(--cx-font, 'Marcellus', serif) !important;
font-size: 1.55rem !important;
color: #FFE08A !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
text-shadow: 0 0 14px rgba(231, 181, 82, .35) !important;
margin: 0 0 6px !important;
}
.odin-dl__need-head p {
color: #A8977C !important;
font-size: .95rem !important;
margin: 0 !important;
}
.odin-req__grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}
.odin-req__card {
position: relative !important;
isolation: isolate !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
min-height: 200px !important;
padding: 22px 22px 18px !important;
border-radius: 12px !important;
background:
radial-gradient(circle at 50% 0%, rgba(231, 181, 82, .06) 0%, transparent 60%),
linear-gradient(180deg, rgba(20, 15, 10, .96) 0%, rgba(16, 12, 8, .93) 50%, rgba(12, 9, 6, .98) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 300px repeat,
#120D09 !important;
border: 1px solid rgba(231, 181, 82, .32) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(231, 181, 82, .08), inset 0 1px 0 rgba(255, 224, 138, .18) !important;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
overflow: hidden !important;
}
.odin-req__card:hover {
transform: translateY(-5px) !important;
border-color: rgba(231, 181, 82, .75) !important;
box-shadow: 0 14px 34px rgba(0, 0, 0, .7), 0 0 24px rgba(231, 181, 82, .22), inset 0 1px 0 #FFF2D1 !important;
}
/* Esquinas de metal */
.odin-req__corner {
position: absolute;
width: 12px;
height: 12px;
border-color: #E7B552;
pointer-events: none;
opacity: .45;
transition: opacity .2s ease, border-color .2s ease;
}
.odin-req__corner--tl { top: 7px; left: 7px; border-top: 2px solid; border-left: 2px solid; }
.odin-req__corner--br { bottom: 7px; right: 7px; border-bottom: 2px solid; border-right: 2px solid; }
.odin-req__card:hover .odin-req__corner {
opacity: 1;
border-color: #FFE08A;
filter: drop-shadow(0 0 4px #FFE08A);
}
/* Cabecera de la tarjeta: Icono + Label */
.odin-req__head {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 14px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid rgba(168, 115, 60, .2) !important;
}
.odin-req__icon-wrap {
display: grid !important;
place-items: center !important;
width: 38px !important;
height: 38px !important;
border-radius: 10px !important;
background: radial-gradient(circle at 50% 35%, rgba(231, 181, 82, .22), rgba(16, 12, 8, .9) 80%) !important;
border: 1px solid rgba(231, 181, 82, .45) !important;
color: #FFE08A !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, .4) !important;
flex: none !important;
}
.odin-req__icon-wrap svg {
width: 20px !important;
height: 20px !important;
color: #FFE08A !important;
filter: drop-shadow(0 0 5px rgba(231, 181, 82, .5)) !important;
}
.odin-req__label {
font-family: var(--cx-font, 'Marcellus', serif) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: #E7B552 !important;
line-height: 1.2 !important;
}
/* Cuerpo de la tarjeta: Valor recomendado */
.odin-req__body {
flex: 1 1 auto !important;
margin-bottom: 16px !important;
}
.odin-req__badge {
display: inline-flex !important;
align-items: center !important;
padding: 2px 7px !important;
border-radius: 4px !important;
background: rgba(231, 181, 82, .12) !important;
border: 1px solid rgba(231, 181, 82, .32) !important;
color: #FFE08A !important;
font-size: 9.5px !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
margin-bottom: 6px !important;
font-family: var(--cx-font, 'Marcellus', serif) !important;
}
.odin-req__val {
display: block !important;
font-size: 1.18rem !important;
font-weight: 700 !important;
color: #FFF2D1 !important;
letter-spacing: .02em !important;
line-height: 1.25 !important;
text-shadow: 0 1px 8px rgba(0, 0, 0, .8) !important;
}
/* Pie de la tarjeta: Mínimo */
.odin-req__foot {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 8px 12px !important;
border-radius: 6px !important;
background: rgba(0, 0, 0, .45) !important;
border: 1px solid rgba(168, 151, 124, .18) !important;
font-size: 11.5px !important;
}
.odin-req__min-lbl {
color: rgba(234, 223, 200, .5) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
}
.odin-req__min-val {
color: #D4C6B0 !important;
font-weight: 500 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
@media (max-width: 900px) {
.odin-dl__hero--legend {
grid-template-columns: 1fr !important;
text-align: center !important;
padding: 26px 20px !important;
gap: 22px !important;
}
.odin-dl__hero-emblem {
margin: 0 auto !important;
}
.odin-dl__hero-desc {
margin: 0 auto 16px !important;
}
.odin-dl__hero-tags {
justify-content: center !important;
}
.odin-dl__cta-btn {
width: 100% !important;
justify-content: center !important;
}
.odin-dl__cards {
grid-template-columns: 1fr !important;
}
}
/* ===== Unique ranking: forged period plaque ===== */
.odin-unique-ranking__period {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
padding: 8px 22px !important;
margin: 0 0 22px !important;
border-radius: 20px !important;
background:
linear-gradient(90deg, rgba(22, 16, 10, .96) 0%, rgba(18, 12, 7, .88) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 300px repeat,
#140E09 !important;
border: 1px solid rgba(231, 181, 82, .35) !important;
color: var(--cx-gold-pale, #FFE08A) !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .88rem !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 224, 138, .2) !important;
}
.odin-unique-ranking__period-ico {
color: #E7B552 !important;
filter: drop-shadow(0 0 6px rgba(231, 181, 82, .6)) !important;
flex: none !important;
}
/* ===== Global Chat: Norse Forged Pattern Cards & Chat Log ===== */
.odin-global-chat .odin-drops__board {
border-radius: 8px !important;
overflow: hidden !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, .6), 0 0 24px rgba(231, 181, 82, .12) !important;
}
.odin-global-chat table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 8px !important;
padding: 12px 16px !important;
}
.odin-global-chat thead th {
padding: 12px 20px !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: 12px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--cx-gold-pale, #FFE08A) !important;
border: none !important;
border-bottom: 2px solid rgba(231, 181, 82, .32) !important;
background: transparent !important;
}
.odin-global-chat thead th:last-child {
text-align: right !important;
}
.odin-global-chat tr[data-odin-table-row] {
position: relative !important;
background:
linear-gradient(90deg, rgba(20, 15, 10, .96) 0%, rgba(16, 12, 8, .92) 50%, rgba(12, 9, 6, .96) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 340px repeat,
#120D09 !important;
border-radius: 6px !important;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 224, 138, .12) !important;
}
.odin-global-chat tr[data-odin-table-row] td {
padding: 12px 20px !important;
border-top: 1px solid rgba(156, 107, 58, .32) !important;
border-bottom: 1px solid rgba(156, 107, 58, .32) !important;
vertical-align: middle !important;
}
.odin-global-chat tr[data-odin-table-row] td:first-child {
border-left: 3px solid #E7B552 !important;
border-top-left-radius: 6px !important;
border-bottom-left-radius: 6px !important;
width: 220px !important;
min-width: 180px !important;
}
.odin-global-chat tr[data-odin-table-row] td:last-child {
border-right: 1px solid rgba(156, 107, 58, .32) !important;
border-top-right-radius: 6px !important;
border-bottom-right-radius: 6px !important;
text-align: right !important;
width: 170px !important;
min-width: 140px !important;
}
.odin-global-chat tr[data-odin-table-row]:hover {
transform: translateX(3px) !important;
background:
linear-gradient(90deg, rgba(28, 20, 13, .97) 0%, rgba(22, 16, 10, .94) 50%, rgba(18, 12, 8, .97) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 340px repeat,
#160F0A !important;
box-shadow: 0 6px 22px rgba(0, 0, 0, .6), 0 0 20px rgba(231, 181, 82, .2), inset 0 1px 0 rgba(255, 224, 138, .25) !important;
}
.odin-global-chat tr[data-odin-table-row]:hover td:first-child {
border-left-color: #FFE08A !important;
}
.odin-global-chat__char {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
}
.odin-global-chat__avatar {
position: relative !important;
display: grid !important;
place-items: center !important;
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
border: 2px solid #E7B552 !important;
background: #0E0A07 !important;
box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), 0 0 12px rgba(231, 181, 82, .3) !important;
overflow: hidden !important;
flex: none !important;
}
.odin-global-chat__avatar img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.odin-global-chat__char-name {
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
color: #FFE08A !important;
text-decoration: none !important;
letter-spacing: .02em !important;
text-shadow: 0 1px 8px rgba(231, 181, 82, .35) !important;
transition: color .2s ease, text-shadow .2s ease !important;
}
.odin-global-chat__char-name:hover {
color: #FFF !important;
text-shadow: 0 0 12px rgba(255, 224, 138, .7) !important;
}
.odin-global-chat__bubble {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
max-width: 100% !important;
word-break: break-word !important;
}
.odin-global-chat__msg-txt {
color: #EADFC8 !important;
font-size: .96rem !important;
line-height: 1.45 !important;
font-weight: 400 !important;
letter-spacing: .01em !important;
}
.odin-chat__item-tag {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 2px 8px !important;
margin: 0 2px !important;
border-radius: 4px !important;
background: rgba(231, 181, 82, .14) !important;
border: 1px solid rgba(231, 181, 82, .5) !important;
color: #FFE08A !important;
font-size: .88rem !important;
font-weight: 600 !important;
letter-spacing: .02em !important;
text-shadow: 0 0 8px rgba(231, 181, 82, .5) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, .4) !important;
}
.odin-global-chat__time {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 5px 12px !important;
border-radius: 14px !important;
background: rgba(10, 8, 6, .6) !important;
border: 1px solid rgba(168, 151, 124, .25) !important;
color: rgba(234, 223, 200, .75) !important;
font-size: .82rem !important;
white-space: nowrap !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
.odin-global-chat__time-ico {
color: #D9A441 !important;
flex: none !important;
}
.odin-global-chat .odin-drops__tools {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
margin-bottom: 16px !important;
padding: 12px 20px !important;
border-radius: 8px !important;
background:
linear-gradient(90deg, rgba(22, 16, 10, .96) 0%, rgba(18, 12, 7, .88) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 300px repeat,
#140E09 !important;
border: 1px solid rgba(231, 181, 82, .32) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 224, 138, .18) !important;
}
.odin-global-chat__status {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
color: var(--cx-gold-pale, #FFE08A) !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .95rem !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
}
.odin-global-chat__status i {
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #6BE28E !important;
box-shadow: 0 0 10px #6BE28E, 0 0 20px rgba(107, 226, 142, .6) !important;
display: inline-block !important;
}
.odin-global-chat .odin-drops__search {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
padding: 6px 14px !important;
border-radius: 6px !important;
background: rgba(0, 0, 0, .55) !important;
border: 1px solid rgba(231, 181, 82, .38) !important;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6) !important;
transition: border-color .2s ease, box-shadow .2s ease !important;
}
.odin-global-chat .odin-drops__search:focus-within {
border-color: #FFE08A !important;
box-shadow: 0 0 12px rgba(231, 181, 82, .35), inset 0 2px 6px rgba(0, 0, 0, .7) !important;
}
.odin-global-chat .odin-drops__search svg {
width: 16px !important;
height: 16px !important;
color: #E7B552 !important;
margin-right: 8px !important;
flex: none !important;
}
.odin-global-chat .odin-drops__search input {
background: transparent !important;
border: none !important;
outline: none !important;
color: #FFF !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .88rem !important;
letter-spacing: .06em !important;
}
.odin-global-chat .odin-drops__search input::placeholder {
color: rgba(234, 223, 200, .45) !important;
}
@media (max-width: 768px) {
.odin-global-chat table {
padding: 6px !important;
border-spacing: 0 6px !important;
}
.odin-global-chat tr[data-odin-table-row] td {
padding: 10px 12px !important;
}
.odin-global-chat tr[data-odin-table-row] td:first-child {
width: auto !important;
min-width: 120px !important;
}
.odin-global-chat tr[data-odin-table-row] td:last-child {
width: auto !important;
min-width: 100px !important;
}
.odin-global-chat__avatar {
width: 30px !important;
height: 30px !important;
}
.odin-global-chat__char-name {
font-size: .92rem !important;
}
.odin-global-chat__msg-txt {
font-size: .88rem !important;
}
}
/* ===== Kill Logs: Norse Forged Combat Cards ===== */
.odin-kills .odin-drops__board {
border-radius: 8px !important;
overflow: hidden !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, .6), 0 0 24px rgba(231, 181, 82, .12) !important;
}
.odin-kills table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 8px !important;
padding: 12px 16px !important;
}
.odin-kills thead th {
padding: 12px 18px !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: 12px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--cx-gold-pale, #FFE08A) !important;
border: none !important;
border-bottom: 2px solid rgba(231, 181, 82, .32) !important;
background: transparent !important;
}
.odin-kills thead th:last-child {
text-align: right !important;
}
.odin-kills thead th:nth-child(3) {
text-align: center !important;
}
.odin-kills tr[data-odin-table-row] {
position: relative !important;
background:
linear-gradient(90deg, rgba(20, 15, 10, .96) 0%, rgba(16, 12, 8, .92) 50%, rgba(12, 9, 6, .96) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 340px repeat,
#120D09 !important;
border-radius: 6px !important;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 224, 138, .12) !important;
}
.odin-kills tr[data-odin-table-row] td {
padding: 12px 18px !important;
border-top: 1px solid rgba(156, 107, 58, .32) !important;
border-bottom: 1px solid rgba(156, 107, 58, .32) !important;
vertical-align: middle !important;
}
.odin-kills tr[data-odin-table-row] td:first-child {
border-left: 3px solid #B8322A !important;
border-top-left-radius: 6px !important;
border-bottom-left-radius: 6px !important;
}
.odin-kills tr[data-odin-table-row] td:last-child {
border-right: 1px solid rgba(156, 107, 58, .32) !important;
border-top-right-radius: 6px !important;
border-bottom-right-radius: 6px !important;
text-align: right !important;
}
.odin-kills tr[data-odin-table-row]:hover {
transform: translateX(3px) !important;
background:
linear-gradient(90deg, rgba(28, 20, 13, .97) 0%, rgba(22, 16, 10, .94) 50%, rgba(18, 12, 8, .97) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 340px repeat,
#160F0A !important;
box-shadow: 0 6px 22px rgba(0, 0, 0, .6), 0 0 20px rgba(184, 50, 42, .3), inset 0 1px 0 rgba(255, 224, 138, .25) !important;
}
.odin-kills tr[data-odin-table-row]:hover td:first-child {
border-left-color: #E7B552 !important;
}
/* Event badge */
.odin-kills__event-pill {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
padding: 5px 12px !important;
border-radius: 6px !important;
background: rgba(184, 50, 42, .14) !important;
border: 1px solid rgba(184, 50, 42, .45) !important;
color: #FFA399 !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .88rem !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, .4) !important;
}
.odin-kills__event-pill--job {
background: rgba(46, 117, 89, .18) !important;
border-color: rgba(78, 184, 142, .45) !important;
color: #8CE8C0 !important;
}
.odin-kills__event-ico {
color: currentColor !important;
flex: none !important;
}
/* Fighters (Killer & Victim) */
.odin-kills__fighter {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
}
.odin-kills__avatar {
position: relative !important;
display: grid !important;
place-items: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: #0E0A07 !important;
overflow: hidden !important;
flex: none !important;
}
.odin-kills__avatar--killer {
border: 2px solid #E7B552 !important;
box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), 0 0 12px rgba(231, 181, 82, .35) !important;
}
.odin-kills__avatar--victim {
border: 2px solid rgba(168, 151, 124, .45) !important;
box-shadow: 0 0 0 2px rgba(0, 0, 0, .5) !important;
filter: grayscale(.25) !important;
}
.odin-kills__avatar img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.odin-kills__name {
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
text-decoration: none !important;
letter-spacing: .02em !important;
transition: color .2s ease, text-shadow .2s ease !important;
}
.odin-kills__name--killer {
color: #FFE08A !important;
text-shadow: 0 1px 8px rgba(231, 181, 82, .35) !important;
}
.odin-kills__name--killer:hover {
color: #FFF !important;
text-shadow: 0 0 12px rgba(255, 224, 138, .7) !important;
}
.odin-kills__name--victim {
color: #C8BFB0 !important;
}
.odin-kills__name--victim:hover {
color: #FFF !important;
}
.odin-kills__none {
color: rgba(234, 223, 200, .4) !important;
font-style: italic !important;
}
/* VS indicator */
.odin-kills__col-vs {
text-align: center !important;
width: 70px !important;
}
.odin-kills__vs-pill {
display: inline-grid !important;
place-items: center !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: radial-gradient(circle at 50% 40%, rgba(184, 50, 42, .25), rgba(16, 10, 7, .8)) !important;
border: 1px solid rgba(184, 50, 42, .5) !important;
color: #FF8A80 !important;
box-shadow: 0 0 10px rgba(184, 50, 42, .3) !important;
transition: transform .2s ease, border-color .2s ease, color .2s ease !important;
}
.odin-kills tr[data-odin-table-row]:hover .odin-kills__vs-pill {
border-color: #FFA399 !important;
color: #FFF !important;
box-shadow: 0 0 16px rgba(184, 50, 42, .6) !important;
transform: scale(1.08) !important;
}
/* Time pill */
.odin-kills__time {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 5px 12px !important;
border-radius: 14px !important;
background: rgba(10, 8, 6, .6) !important;
border: 1px solid rgba(168, 151, 124, .25) !important;
color: rgba(234, 223, 200, .75) !important;
font-size: .82rem !important;
white-space: nowrap !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
.odin-kills__time-ico {
color: #D9A441 !important;
flex: none !important;
}
/* Toolbar tools */
.odin-kills .odin-drops__tools {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
margin-bottom: 16px !important;
padding: 12px 20px !important;
border-radius: 8px !important;
background:
linear-gradient(90deg, rgba(22, 16, 10, .96) 0%, rgba(18, 12, 7, .88) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 300px repeat,
#140E09 !important;
border: 1px solid rgba(231, 181, 82, .32) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 224, 138, .18) !important;
}
.odin-kills .odin-drops__search {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
padding: 6px 14px !important;
border-radius: 6px !important;
background: rgba(0, 0, 0, .55) !important;
border: 1px solid rgba(231, 181, 82, .38) !important;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6) !important;
transition: border-color .2s ease, box-shadow .2s ease !important;
}
.odin-kills .odin-drops__search:focus-within {
border-color: #FFE08A !important;
box-shadow: 0 0 12px rgba(231, 181, 82, .35), inset 0 2px 6px rgba(0, 0, 0, .7) !important;
}
.odin-kills .odin-drops__search svg {
width: 16px !important;
height: 16px !important;
color: #E7B552 !important;
margin-right: 8px !important;
flex: none !important;
}
.odin-kills .odin-drops__search input {
background: transparent !important;
border: none !important;
outline: none !important;
color: #FFF !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .88rem !important;
letter-spacing: .06em !important;
}
.odin-kills .odin-drops__search input::placeholder {
color: rgba(234, 223, 200, .45) !important;
}
@media (max-width: 768px) {
.odin-kills table {
padding: 6px !important;
border-spacing: 0 6px !important;
}
.odin-kills tr[data-odin-table-row] td {
padding: 10px 10px !important;
}
.odin-kills__avatar {
width: 30px !important;
height: 30px !important;
}
.odin-kills__name {
font-size: .92rem !important;
}
.odin-kills__event-pill {
font-size: .78rem !important;
padding: 4px 8px !important;
}
}
/* ===== Latest Unique Kills: Norse Forged Trophy Cards ===== */
.odin-unique-kills .odin-drops__board {
border-radius: 8px !important;
overflow: hidden !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, .6), 0 0 24px rgba(231, 181, 82, .12) !important;
}
.odin-unique-kills table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 8px !important;
padding: 12px 16px !important;
table-layout: auto !important;
}
.odin-unique-kills thead th {
padding: 12px 18px !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: 12px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--cx-gold-pale, #FFE08A) !important;
border: none !important;
border-bottom: 2px solid rgba(231, 181, 82, .32) !important;
background: transparent !important;
}
.odin-unique-kills thead th:last-child {
text-align: right !important;
}
.odin-unique-kills tr[data-odin-kills-row] {
position: relative !important;
background:
linear-gradient(90deg, rgba(20, 15, 10, .96) 0%, rgba(16, 12, 8, .92) 50%, rgba(12, 9, 6, .96) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 340px repeat,
#120D09 !important;
border-radius: 6px !important;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 224, 138, .12) !important;
}
.odin-unique-kills tr[data-odin-kills-row] td {
padding: 12px 18px !important;
border-top: 1px solid rgba(156, 107, 58, .32) !important;
border-bottom: 1px solid rgba(156, 107, 58, .32) !important;
vertical-align: middle !important;
}
.odin-unique-kills tr[data-odin-kills-row] td:first-child {
border-left: 3px solid #E7B552 !important;
border-top-left-radius: 6px !important;
border-bottom-left-radius: 6px !important;
}
.odin-unique-kills tr[data-odin-kills-row][data-type="Legendary"] td:first-child {
border-left-color: #E7B552 !important;
}
.odin-unique-kills tr[data-odin-kills-row][data-type="Special"] td:first-child {
border-left-color: #C27EE8 !important;
}
.odin-unique-kills tr[data-odin-kills-row][data-type="Job"] td:first-child {
border-left-color: #78BF91 !important;
}
.odin-unique-kills tr[data-odin-kills-row][data-type="Regular"] td:first-child {
border-left-color: #9C6B3A !important;
}
.odin-unique-kills tr[data-odin-kills-row] td:last-child {
border-right: 1px solid rgba(156, 107, 58, .32) !important;
border-top-right-radius: 6px !important;
border-bottom-right-radius: 6px !important;
text-align: right !important;
}
.odin-unique-kills tr[data-odin-kills-row]:hover {
transform: translateX(3px) !important;
background:
linear-gradient(90deg, rgba(28, 20, 13, .97) 0%, rgba(22, 16, 10, .94) 50%, rgba(18, 12, 8, .97) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 340px repeat,
#160F0A !important;
box-shadow: 0 6px 22px rgba(0, 0, 0, .6), 0 0 20px rgba(231, 181, 82, .25), inset 0 1px 0 rgba(255, 224, 138, .25) !important;
}
/* Monster column */
.odin-ukills__monster {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
}
.odin-ukills__monster-avatar {
position: relative !important;
display: grid !important;
place-items: center !important;
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
border: 2px solid #E7B552 !important;
background: #0E0A07 !important;
box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), 0 0 12px rgba(231, 181, 82, .35) !important;
overflow: hidden !important;
flex: none !important;
}
.odin-ukills__monster-avatar img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.odin-unique-kills__name {
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
color: var(--cx-gold-pale, #FFE08A) !important;
letter-spacing: .02em !important;
text-shadow: 0 1px 8px rgba(231, 181, 82, .35) !important;
}
/* Hunter column */
.odin-ukills__hunter {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
}
.odin-ukills__hunter-avatar {
position: relative !important;
display: grid !important;
place-items: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
border: 2px solid rgba(231, 181, 82, .6) !important;
background: #0E0A07 !important;
box-shadow: 0 0 0 2px rgba(0, 0, 0, .5) !important;
overflow: hidden !important;
flex: none !important;
}
.odin-ukills__hunter-avatar img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.odin-unique-kills .odin-kills__fighter.is-killer {
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
color: #FFF !important;
text-decoration: none !important;
letter-spacing: .02em !important;
transition: color .2s ease, text-shadow .2s ease !important;
}
.odin-unique-kills .odin-kills__fighter.is-killer:hover {
color: #FFE08A !important;
text-shadow: 0 0 10px rgba(255, 224, 138, .7) !important;
}
/* Guild column alignment & sizing in Unique Kills */
.odin-unique-kills thead th:nth-child(3),
.odin-unique-kills .odin-ukills__col-guild {
text-align: center !important;
}
.odin-unique-kills .odin-ukills__col-guild .odin-rank__guild-pill,
.odin-unique-kills .odin-ukills__col-guild .odin-rank__guild-empty {
display: inline-flex !important;
margin: 0 auto !important;
justify-content: center !important;
align-items: center !important;
font-size: .84rem !important;
padding: 3px 9px !important;
}
.odin-unique-kills .odin-ukills__col-guild .odin-rank__guild-name {
font-size: .84rem !important;
}
.odin-unique-kills .odin-ukills__col-guild .odin-rank__guild-ico {
width: 13px !important;
height: 13px !important;
}
.odin-unique-kills thead th:nth-child(4),
.odin-unique-kills .odin-ukills__col-class {
text-align: center !important;
}
.odin-unique-kills thead th:nth-child(5),
.odin-unique-kills .odin-ukills__col-pts {
text-align: center !important;
}
/* Classification badges */
.odin-unique-kills__class {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 4px 10px !important;
border-radius: 4px !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .84rem !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, .4) !important;
}
.odin-unique-kills__class.is-legendary {
background: rgba(231, 181, 82, .18) !important;
border: 1px solid rgba(231, 181, 82, .55) !important;
color: #FFE08A !important;
text-shadow: 0 0 8px rgba(231, 181, 82, .6) !important;
}
.odin-unique-kills__class.is-special {
background: rgba(194, 126, 232, .18) !important;
border: 1px solid rgba(194, 126, 232, .55) !important;
color: #E2B5FF !important;
text-shadow: 0 0 8px rgba(194, 126, 232, .6) !important;
}
.odin-unique-kills__class.is-job {
background: rgba(120, 191, 145, .18) !important;
border: 1px solid rgba(120, 191, 145, .55) !important;
color: #A3F5C3 !important;
}
.odin-unique-kills__class.is-regular {
background: rgba(156, 107, 58, .15) !important;
border: 1px solid rgba(156, 107, 58, .4) !important;
color: #DCCFB4 !important;
}
.odin-ukills__class-ico {
flex: none !important;
color: currentColor !important;
}
/* Points pill */
.odin-ukills__pts-pill {
display: inline-flex !important;
align-items: baseline !important;
gap: 5px !important;
padding: 4px 12px !important;
border-radius: 6px !important;
background: rgba(10, 8, 6, .7) !important;
border: 1px solid rgba(120, 191, 145, .4) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(0, 0, 0, .4) !important;
}
.odin-ukills__pts-pill strong {
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
color: #78BF91 !important;
text-shadow: 0 0 8px rgba(120, 191, 145, .5) !important;
}
.odin-ukills__pts-pill small {
font-size: .65rem !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
color: rgba(120, 191, 145, .75) !important;
}
/* Toolbar filters */
.odin-unique-kills .odin-drops__tools {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
margin-bottom: 16px !important;
padding: 12px 20px !important;
border-radius: 8px !important;
background:
linear-gradient(90deg, rgba(22, 16, 10, .96) 0%, rgba(18, 12, 7, .88) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 300px repeat,
#140E09 !important;
border: 1px solid rgba(231, 181, 82, .32) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 224, 138, .18) !important;
}
.odin-kills__filters {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.odin-kills__event select {
appearance: none !important;
-webkit-appearance: none !important;
background: rgba(0, 0, 0, .6) url('data:image/svg+xml;utf8,') right 12px center / 12px no-repeat !important;
border: 1px solid rgba(231, 181, 82, .38) !important;
border-radius: 6px !important;
color: #FFE08A !important;
padding: 7px 32px 7px 14px !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .88rem !important;
letter-spacing: .06em !important;
cursor: pointer !important;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6) !important;
transition: border-color .2s ease, box-shadow .2s ease !important;
}
.odin-kills__event select:focus-visible {
border-color: #FFE08A !important;
outline: none !important;
box-shadow: 0 0 12px rgba(231, 181, 82, .35), inset 0 2px 6px rgba(0, 0, 0, .7) !important;
}
@media (max-width: 900px) {
.odin-unique-kills table {
padding: 6px !important;
border-spacing: 0 6px !important;
}
.odin-unique-kills tr[data-odin-kills-row] td {
padding: 10px 10px !important;
}
.odin-ukills__monster-avatar,
.odin-ukills__hunter-avatar {
width: 30px !important;
height: 30px !important;
}
}
/* ===== Insignia STR / INT en "Ultimos unicos cazados" (reemplaza la calavera) ===== */
.odin-world [data-odin-world-list="uniques"] > li.odin-unique-row[data-build="str"]::before,
.odin-world .cx-panel--uniques [data-odin-world-list="uniques"] > li.odin-unique-row[data-build="str"]::before { border-color: #E2553F !important; background: #2A0F0B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB3A3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='14.5 17.5 3 6 3 3 6 3 17.5 14.5'/%3E%3Cline x1='13' y1='19' x2='19' y2='13'/%3E%3Cline x1='16' y1='16' x2='20' y2='20'/%3E%3Cline x1='19' y1='21' x2='21' y2='19'/%3E%3C/svg%3E") center / 13px no-repeat !important; box-shadow: 0 0 10px rgba(226, 85, 63, .55) !important; }
.odin-world [data-odin-world-list="uniques"] > li.odin-unique-row[data-build="int"]::before,
.odin-world .cx-panel--uniques [data-odin-world-list="uniques"] > li.odin-unique-row[data-build="int"]::before { border-color: #4E9BFF !important; background: #0B1A2E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A9D4FF' stroke='%23A9D4FF' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l1.6 5.4L19 9.5l-4.5 3.3 1.8 5.7L12 15l-4.3 3.5 1.8-5.7L5 9.5l5.4-1.6z'/%3E%3Ccircle cx='19.5' cy='4.5' r='1.2'/%3E%3Ccircle cx='4.5' cy='19' r='1'/%3E%3C/svg%3E") center / 13px no-repeat !important; box-shadow: 0 0 10px rgba(78, 155, 255, .55) !important; }
/* ===== DROP LOGS: Norse Luxury Relic Board ===== */
.odin-droplogs .odin-drops__board {
border-radius: 8px !important;
overflow: hidden !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, .6), 0 0 24px rgba(231, 181, 82, .12) !important;
}
.odin-droplogs table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 8px !important;
padding: 12px 16px !important;
table-layout: auto !important;
}
.odin-droplogs thead th {
padding: 12px 18px !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: 12px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--cx-gold-pale, #FFE08A) !important;
border: none !important;
border-bottom: 2px solid rgba(231, 181, 82, .32) !important;
background: transparent !important;
text-align: left !important;
}
.odin-droplogs thead th:nth-child(2),
.odin-droplogs thead th:nth-child(4) {
text-align: center !important;
}
.odin-droplogs thead th:last-child {
text-align: right !important;
}
/* Card Row Styles */
.odin-droplogs tr[data-odin-drops-row] {
position: relative !important;
background:
linear-gradient(90deg, rgba(20, 15, 10, .96) 0%, rgba(16, 12, 8, .92) 50%, rgba(12, 9, 6, .96) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 340px repeat,
#120D09 !important;
border-radius: 6px !important;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 224, 138, .12) !important;
}
.odin-droplogs tr[data-odin-drops-row] td {
padding: 12px 18px !important;
border-top: 1px solid rgba(156, 107, 58, .32) !important;
border-bottom: 1px solid rgba(156, 107, 58, .32) !important;
vertical-align: middle !important;
}
.odin-droplogs tr[data-odin-drops-row] td:first-child {
border-left: 3px solid #9C6B3A !important;
border-top-left-radius: 6px !important;
border-bottom-left-radius: 6px !important;
}
/* Rarity-specific left accent borders */
.odin-droplogs tr[data-odin-drops-row].is-normal td:first-child { border-left-color: #9C6B3A !important; }
.odin-droplogs tr[data-odin-drops-row].is-sos td:first-child { border-left-color: #E7B552 !important; }
.odin-droplogs tr[data-odin-drops-row].is-som td:first-child { border-left-color: #4E9BFF !important; }
.odin-droplogs tr[data-odin-drops-row].is-sun td:first-child { border-left-color: #FFB347 !important; }
.odin-droplogs tr[data-odin-drops-row].is-son td:first-child { border-left-color: #C27EE8 !important; }
.odin-droplogs tr[data-odin-drops-row].is-roc td:first-child { border-left-color: #E2553F !important; }
.odin-droplogs tr[data-odin-drops-row] td:last-child {
border-right: 1px solid rgba(156, 107, 58, .32) !important;
border-top-right-radius: 6px !important;
border-bottom-right-radius: 6px !important;
text-align: right !important;
}
.odin-droplogs tr[data-odin-drops-row]:hover {
transform: translateX(3px) !important;
background:
linear-gradient(90deg, rgba(28, 20, 13, .97) 0%, rgba(22, 16, 10, .94) 50%, rgba(18, 12, 8, .97) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 340px repeat,
#160F0A !important;
box-shadow: 0 6px 22px rgba(0, 0, 0, .6), 0 0 20px rgba(231, 181, 82, .25), inset 0 1px 0 rgba(255, 224, 138, .25) !important;
}
/* Item Column */
.odin-droplogs__item {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
}
.odin-droplogs__item-icon {
position: relative !important;
display: grid !important;
place-items: center !important;
width: 40px !important;
height: 40px !important;
border-radius: 6px !important;
border: 1px solid rgba(231, 181, 82, .45) !important;
background: radial-gradient(circle, rgba(30, 22, 14, .95) 0%, rgba(10, 7, 4, .98) 100%) !important;
box-shadow: inset 0 0 10px rgba(0, 0, 0, .8), 0 2px 8px rgba(0, 0, 0, .6) !important;
flex: none !important;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.odin-droplogs__item-icon img {
width: 32px !important;
height: 32px !important;
object-fit: contain !important;
display: block !important;
cursor: pointer !important;
}
.odin-droplogs__item-icon:hover {
transform: scale(1.08) !important;
border-color: #FFE08A !important;
box-shadow: 0 0 14px rgba(231, 181, 82, .5), inset 0 0 8px rgba(255, 224, 138, .3) !important;
}
.odin-droplogs__item-icon.is-sos { border-color: #E7B552 !important; box-shadow: 0 0 10px rgba(231, 181, 82, .35) !important; }
.odin-droplogs__item-icon.is-som { border-color: #4E9BFF !important; box-shadow: 0 0 10px rgba(78, 155, 255, .35) !important; }
.odin-droplogs__item-icon.is-sun { border-color: #FFB347 !important; box-shadow: 0 0 12px rgba(255, 179, 71, .4) !important; }
.odin-droplogs__item-icon.is-son { border-color: #C27EE8 !important; box-shadow: 0 0 12px rgba(194, 126, 232, .4) !important; }
.odin-droplogs__item-icon.is-roc { border-color: #E2553F !important; box-shadow: 0 0 14px rgba(226, 85, 63, .45) !important; }
.odin-droplogs__item-info {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.odin-droplogs__item-name {
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: 1.02rem !important;
font-weight: 700 !important;
color: var(--cx-gold-pale, #FFE08A) !important;
letter-spacing: .02em !important;
text-shadow: 0 1px 6px rgba(0, 0, 0, .8) !important;
}
.odin-droplogs__item-name.is-sos { color: #FFE08A !important; text-shadow: 0 0 8px rgba(231, 181, 82, .5) !important; }
.odin-droplogs__item-name.is-som { color: #A9D4FF !important; text-shadow: 0 0 8px rgba(78, 155, 255, .5) !important; }
.odin-droplogs__item-name.is-sun { color: #FFD285 !important; text-shadow: 0 0 10px rgba(255, 179, 71, .6) !important; }
.odin-droplogs__item-name.is-son { color: #E7B8FF !important; text-shadow: 0 0 10px rgba(194, 126, 232, .6) !important; }
.odin-droplogs__item-name.is-roc { color: #FF9B8A !important; text-shadow: 0 0 12px rgba(226, 85, 63, .65) !important; }
.odin-droplogs__item-sub {
font-size: .68rem !important;
color: rgba(234, 215, 180, .55) !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
/* Degree Column */
.odin-droplogs__col-deg {
text-align: center !important;
}
.odin-droplogs__deg-pill {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 3px 10px !important;
border-radius: 999px !important;
background: rgba(0, 0, 0, .45) !important;
border: 1px solid rgba(231, 181, 82, .32) !important;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, .6) !important;
}
.odin-droplogs__deg-pill small {
font-size: .6rem !important;
font-weight: 700 !important;
color: rgba(231, 181, 82, .7) !important;
letter-spacing: .08em !important;
}
.odin-droplogs__deg-pill strong {
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .95rem !important;
font-weight: 700 !important;
color: #FFE08A !important;
}
.odin-droplogs__deg-pill.is-empty {
color: rgba(234, 215, 180, .4) !important;
}
/* Hunter Character Column */
.odin-droplogs__hunter {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.odin-droplogs__hunter-avatar {
display: grid !important;
place-items: center !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
background: rgba(231, 181, 82, .14) !important;
border: 1px solid rgba(231, 181, 82, .35) !important;
color: #FFE08A !important;
flex: none !important;
}
.odin-droplogs__hunter-name {
font-weight: 700 !important;
font-size: .92rem !important;
color: var(--sand, #EAD7B4) !important;
text-decoration: none !important;
letter-spacing: .02em !important;
transition: color .18s ease, text-shadow .18s ease !important;
}
.odin-droplogs__hunter-name:hover {
color: #FFE08A !important;
text-shadow: 0 0 8px rgba(231, 181, 82, .5) !important;
}
.odin-droplogs__hunter-none {
color: rgba(234, 215, 180, .45) !important;
}
/* Rarity Badge Column */
.odin-droplogs__col-rarity {
text-align: center !important;
}
.odin-droplogs__seal-badge {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
padding: 3px 10px !important;
border-radius: 4px !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .74rem !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
border: 1px solid rgba(156, 107, 58, .35) !important;
background: rgba(0, 0, 0, .4) !important;
color: rgba(234, 215, 180, .75) !important;
}
.odin-droplogs__seal-badge.is-sos {
background: rgba(231, 181, 82, .14) !important;
border-color: rgba(231, 181, 82, .55) !important;
color: #FFE08A !important;
box-shadow: 0 0 10px rgba(231, 181, 82, .25) !important;
}
.odin-droplogs__seal-badge.is-som {
background: rgba(78, 155, 255, .14) !important;
border-color: rgba(78, 155, 255, .55) !important;
color: #A9D4FF !important;
box-shadow: 0 0 10px rgba(78, 155, 255, .25) !important;
}
.odin-droplogs__seal-badge.is-sun {
background: rgba(255, 179, 71, .16) !important;
border-color: rgba(255, 179, 71, .6) !important;
color: #FFD285 !important;
box-shadow: 0 0 12px rgba(255, 179, 71, .3) !important;
}
.odin-droplogs__seal-badge.is-son {
background: rgba(194, 126, 232, .16) !important;
border-color: rgba(194, 126, 232, .6) !important;
color: #E7B8FF !important;
box-shadow: 0 0 12px rgba(194, 126, 232, .3) !important;
}
.odin-droplogs__seal-badge.is-roc {
background: rgba(226, 85, 63, .18) !important;
border-color: rgba(226, 85, 63, .65) !important;
color: #FF9B8A !important;
box-shadow: 0 0 14px rgba(226, 85, 63, .35) !important;
}
.odin-droplogs__seal-ico {
flex: none !important;
}
/* Monster Column */
.odin-droplogs__mob {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.odin-droplogs__mob-avatar {
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
border: 1.5px solid #E7B552 !important;
overflow: hidden !important;
display: grid !important;
place-items: center !important;
background: #0E0A07 !important;
box-shadow: 0 0 8px rgba(231, 181, 82, .35) !important;
flex: none !important;
}
.odin-droplogs__mob-avatar img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.odin-droplogs__mob-glyph {
display: grid !important;
place-items: center !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
background: rgba(156, 107, 58, .2) !important;
border: 1px solid rgba(156, 107, 58, .4) !important;
color: rgba(234, 215, 180, .6) !important;
flex: none !important;
}
.odin-droplogs__mob-name {
font-size: .88rem !important;
font-weight: 600 !important;
color: rgba(234, 215, 180, .85) !important;
letter-spacing: .02em !important;
}
/* Date Column */
.odin-droplogs__time {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: .82rem !important;
color: rgba(234, 215, 180, .65) !important;
white-space: nowrap !important;
}
.odin-droplogs__time svg {
color: rgba(231, 181, 82, .65) !important;
flex: none !important;
}
/* Toolbar & Filters */
.odin-droplogs .odin-drops__tools {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
margin-bottom: 16px !important;
padding: 12px 20px !important;
border-radius: 8px !important;
background:
linear-gradient(90deg, rgba(22, 16, 10, .96) 0%, rgba(18, 12, 7, .88) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 300px repeat,
#140E09 !important;
border: 1px solid rgba(231, 181, 82, .32) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 224, 138, .18) !important;
flex-wrap: wrap !important;
}
.odin-droplogs__status {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .95rem !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: #FFE08A !important;
}
.odin-droplogs__status i {
display: inline-block !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #78BF91 !important;
box-shadow: 0 0 10px #78BF91 !important;
}
.odin-droplogs .odin-drops__filters {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
.odin-droplogs .odin-drops__check {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
cursor: pointer !important;
padding: 4px 10px !important;
border-radius: 4px !important;
background: rgba(0, 0, 0, .45) !important;
border: 1px solid rgba(156, 107, 58, .35) !important;
transition: all .2s ease !important;
user-select: none !important;
}
.odin-droplogs .odin-drops__check:hover {
border-color: rgba(231, 181, 82, .6) !important;
background: rgba(231, 181, 82, .1) !important;
}
.odin-droplogs .odin-drops__check input {
appearance: none !important;
-webkit-appearance: none !important;
width: 14px !important;
height: 14px !important;
margin: 0 !important;
border-radius: 3px !important;
border: 1px solid rgba(231, 181, 82, .5) !important;
background: #0E0A07 !important;
cursor: pointer !important;
display: grid !important;
place-items: center !important;
position: relative !important;
}
.odin-droplogs .odin-drops__check input:checked {
background: #E7B552 !important;
border-color: #FFE08A !important;
box-shadow: 0 0 8px rgba(231, 181, 82, .6) !important;
}
.odin-droplogs .odin-drops__check input:checked::after {
content: "" !important;
display: block !important;
width: 4px !important;
height: 8px !important;
border: solid #0E0A07 !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) translate(-1px, -1px) !important;
}
.odin-droplogs .odin-drops__check span {
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .8rem !important;
letter-spacing: .08em !important;
color: var(--sand, #EAD7B4) !important;
text-transform: uppercase !important;
}
.odin-droplogs .odin-drops__check:has(input:checked) {
border-color: #E7B552 !important;
background: rgba(231, 181, 82, .18) !important;
}
.odin-droplogs .odin-drops__check:has(input:checked) span {
color: #FFE08A !important;
font-weight: 700 !important;
}
.odin-droplogs .odin-drops__rule {
width: 1px !important;
height: 20px !important;
background: rgba(156, 107, 58, .45) !important;
margin-inline: 4px !important;
}
.odin-droplogs .odin-drops__search {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
padding: 6px 14px !important;
border-radius: 6px !important;
background: rgba(0, 0, 0, .6) !important;
border: 1px solid rgba(231, 181, 82, .38) !important;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6) !important;
transition: border-color .2s ease, box-shadow .2s ease !important;
}
.odin-droplogs .odin-drops__search:focus-within {
border-color: #FFE08A !important;
box-shadow: 0 0 12px rgba(231, 181, 82, .35), inset 0 2px 6px rgba(0, 0, 0, .7) !important;
}
.odin-droplogs .odin-drops__search svg {
width: 16px !important;
height: 16px !important;
color: #E7B552 !important;
margin-right: 8px !important;
flex: none !important;
}
.odin-droplogs .odin-drops__search input {
background: transparent !important;
border: none !important;
outline: none !important;
color: #FFF !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .88rem !important;
letter-spacing: .04em !important;
width: 220px !important;
}
.odin-droplogs .odin-drops__search input::placeholder {
color: rgba(234, 223, 200, .45) !important;
}
/* Footer / Pager */
.odin-droplogs .odin-drops__foot {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
margin-top: 18px !important;
padding: 12px 20px !important;
border-radius: 8px !important;
background:
linear-gradient(90deg, rgba(22, 16, 10, .96) 0%, rgba(18, 12, 7, .88) 100%),
url('../images/ele/guild-pattern-natural.jpg') center / 300px repeat,
#140E09 !important;
border: 1px solid rgba(231, 181, 82, .32) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, .5) !important;
flex-wrap: wrap !important;
}
.odin-droplogs .odin-drops__foot > p {
margin: 0 !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .9rem !important;
color: rgba(234, 215, 180, .75) !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
}
.odin-droplogs .odin-drops__foot > p strong {
color: #FFE08A !important;
font-size: 1.05rem !important;
}
.odin-droplogs .odin-drops__pager {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
}
.odin-droplogs .odin-drops__pager button {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 14px !important;
border-radius: 4px !important;
background: linear-gradient(180deg, #241A12 0%, #150F0A 100%) !important;
border: 1px solid rgba(231, 181, 82, .45) !important;
color: #FFE08A !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .84rem !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: all .18s ease !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, .5) !important;
}
.odin-droplogs .odin-drops__pager button:hover:not(:disabled) {
border-color: #FFE08A !important;
background: linear-gradient(180deg, #352618 0%, #221810 100%) !important;
box-shadow: 0 0 12px rgba(231, 181, 82, .35) !important;
transform: translateY(-1px) !important;
}
.odin-droplogs .odin-drops__pager button:disabled {
opacity: .35 !important;
cursor: not-allowed !important;
border-color: rgba(156, 107, 58, .25) !important;
}
.odin-droplogs__page-num {
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .88rem !important;
letter-spacing: .08em !important;
color: rgba(234, 215, 180, .75) !important;
padding-inline: 6px !important;
}
.odin-droplogs__page-num b,
.odin-droplogs__page-num i {
font-style: normal !important;
font-weight: 700 !important;
color: #FFE08A !important;
}
.odin-droplogs .odin-drops__reload {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 14px !important;
border-radius: 4px !important;
background: transparent !important;
border: 1px solid rgba(156, 107, 58, .4) !important;
color: rgba(234, 215, 180, .7) !important;
font-family: var(--cx-font, "Marcellus", serif) !important;
font-size: .82rem !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: all .18s ease !important;
}
.odin-droplogs .odin-drops__reload:hover {
border-color: #FFE08A !important;
color: #FFE08A !important;
background: rgba(231, 181, 82, .1) !important;
}
@media (max-width: 900px) {
.odin-droplogs table {
padding: 6px !important;
border-spacing: 0 6px !important;
}
.odin-droplogs tr[data-odin-drops-row] td {
padding: 10px 10px !important;
}
.odin-droplogs th:nth-child(2),
.odin-droplogs td:nth-child(2) {
display: none !important;
}
.odin-droplogs .odin-drops__search input {
width: 140px !important;
}
}
/* Guild crest badges */
.cx-guild-crest-badge {
display: inline-block !important;
width: 20px !important;
height: 20px !important;
object-fit: contain !important;
image-rendering: -webkit-optimize-contrast !important;
image-rendering: pixelated !important;
border-radius: 3px !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
}
.cx-guild-crest-badge--sm {
width: 16px !important;
height: 16px !important;
margin-right: 4px !important;
}
.cx-guild-crest-badge--lg {
width: 26px !important;
height: 26px !important;
margin-right: 8px !important;
border: 1px solid rgba(231, 181, 82, 0.45) !important;
background: rgba(14, 10, 7, 0.8) !important;
padding: 1px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}
/* =====================================================================
REAL COMMUNITY ICONS (OFFICIAL BRAND COLORS & GLOW)
===================================================================== */
.odin-social-ico {
display: inline-block !important;
flex-shrink: 0 !important;
width: 20px !important;
height: 20px !important;
vertical-align: middle !important;
opacity: 0.95 !important;
transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), filter 0.22s ease, opacity 0.22s ease !important;
}
.odin-social-ico--tiktok {
color: #FFFFFF !important;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.45)) !important;
}
.odin-social-ico--facebook {
color: #1877F2 !important;
filter: drop-shadow(0 0 5px rgba(24, 119, 242, 0.55)) !important;
}
.odin-social-ico--discord {
color: #5865F2 !important;
filter: drop-shadow(0 0 5px rgba(88, 101, 242, 0.55)) !important;
}
.odin-social-ico--whatsapp {
color: #25D366 !important;
filter: drop-shadow(0 0 5px rgba(37, 211, 102, 0.55)) !important;
}
.odin-social-ico--youtube {
color: #FF0000 !important;
filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.55)) !important;
}
.odin-social-ico--rules {
color: #E7B552 !important;
filter: drop-shadow(0 0 5px rgba(231, 181, 82, 0.45)) !important;
}
.odin-drop__list a:hover .odin-social-ico {
transform: scale(1.15) !important;
opacity: 1 !important;
}