:root { --lm-bg: hsl(var(--background, 220 45% 6%)); --lm-panel: hsl(var(--secondary, 220 38% 10%)); --lm-text: hsl(var(--foreground, 216 33% 95%)); --lm-dim: hsl(var(--muted, 218 14% 60%)); --lm-line: hsl(var(--border, 219 28% 17%)); --lm-gold: hsl(var(--primary, 44 88% 61%)); --lm-gold-ink: hsl(var(--primary-foreground, 38 82% 7%)); --lm-bolt: hsl(var(--accent, 199 100% 68%)); --lm-bolt-ink: hsl(var(--accent-foreground, 199 78% 6%)); --lm-danger: hsl(var(--destructive, 4 71% 59%)); --lm-good: hsl(var(--success, 147 62% 53%)); --lm-amber: hsl(38 92% 58%); --lm-elev-0: color-mix(in oklab, var(--lm-bg) 100%, #000 0%); --lm-elev-1: color-mix(in oklab, var(--lm-panel) 92%, #fff 3%); --lm-elev-2: color-mix(in oklab, var(--lm-panel) 80%, #fff 7%); --lm-elev-3: color-mix(in oklab, var(--lm-panel) 68%, #fff 11%); --lm-ink: hsl(220 32% 8%); --lm-sunken: color-mix(in oklab, var(--lm-bg) 82%, var(--lm-ink) 18%); --lm-font: "Lexend", ui-sans-serif, system-ui, sans-serif; --lm-pixel: "Silkscreen", "Lexend", monospace; --lm-r-sharp: 2px; --lm-r-sm: 6px; --lm-r: var(--radius, 0.75rem); --lm-r-lg: calc(var(--lm-r) * 1.6); --lm-slot: 52px; --lm-hair: 1px solid var(--lm-line); /* Escala de espaciado — una sola para toda la plantilla. Todo lo que separe bloques sale de aquí: gaps, paddings y márgenes. No hay líneas divisorias: la separación es siempre espacio. */ --lm-sp-1: 0.25rem; --lm-sp-2: 0.375rem; --lm-sp-3: 0.5rem; --lm-sp-4: 0.75rem; --lm-sp-5: 1rem; --lm-sp-6: 1.5rem; --lm-sp-7: 2rem; --lm-sp-8: 3rem; /* Ritmo: los cinco pasos que usan las páginas y los componentes. */ --lm-gap-tight: var(--lm-sp-2); --lm-gap-inline: var(--lm-sp-3); --lm-gap-block: var(--lm-sp-4); --lm-gap-card: var(--lm-sp-5); --lm-gap-group: var(--lm-sp-6); --lm-gap-section: clamp(2rem, 4vw, 3rem); --lm-pad-panel: clamp(1rem, 2vw, 1.5rem); --lm-pad-page: clamp(1.5rem, 3vw, 2.5rem); --lm-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --lm-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.7), 0 2px 8px -4px rgb(0 0 0 / 0.5); --lm-shadow-lg: 0 32px 70px -24px rgb(0 0 0 / 0.85); --lm-bevel-out: inset 1px 1px 0 rgb(255 255 255 / 0.07), inset -1px -1px 0 rgb(0 0 0 / 0.45); --lm-bevel-in: inset 2px 2px 0 rgb(0 0 0 / 0.55), inset -2px -2px 0 rgb(255 255 255 / 0.06); --lm-fast: 140ms; --lm-mid: 260ms; --lm-slow: 520ms; --lm-ease: cubic-bezier(0.22, 1, 0.36, 1); --lm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --lm-z-nav: 60; --lm-z-hotbar: 70; --lm-z-dialog: 90; --lm-z-tooltip: 120; --lm-z-toast: 130; --r: #9aa7bd; --r-ink: #0b0f18; } [data-rarity] { --r: #56617a; --r-name: ""; } /* Con un diálogo abierto el sale del flujo: es lo único que impide de verdad que la página se desplace en móvil cuando se abre el teclado. lm-core.js compensa el desliz con un `top` negativo y lo restaura al cerrar. */ html[data-lm-scroll-lock] { overflow: hidden; } html[data-lm-scroll-lock] body { position: fixed; inset-inline: 0; width: 100%; overflow: hidden; overscroll-behavior: none; } html { scrollbar-gutter: stable; } [hidden] { display: none !important; } .lm-root { font-family: var(--lm-font); color: var(--lm-text); background-color: var(--lm-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .lm-root { isolation: isolate; } .lm-root::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: radial-gradient(1px 1px at 20% 30%, rgb(255 255 255 / 0.55) 50%, transparent 51%), radial-gradient(1px 1px at 68% 12%, rgb(255 255 255 / 0.4) 50%, transparent 51%), radial-gradient(1px 1px at 45% 72%, rgb(255 255 255 / 0.35) 50%, transparent 51%), radial-gradient(1px 1px at 82% 58%, rgb(255 255 255 / 0.45) 50%, transparent 51%), radial-gradient(1px 1px at 8% 84%, rgb(255 255 255 / 0.3) 50%, transparent 51%); background-size: 340px 340px, 420px 420px, 300px 300px, 500px 500px, 380px 380px; opacity: 0.5; animation: lm-drift 90s linear infinite; } .lm-scroll { scrollbar-width: thin; scrollbar-color: var(--lm-line) transparent; } .lm-scroll::-webkit-scrollbar { width: 10px; height: 10px; } .lm-scroll::-webkit-scrollbar-track { background: transparent; } .lm-scroll::-webkit-scrollbar-thumb { background: var(--lm-line); border: 2px solid transparent; background-clip: padding-box; border-radius: 99px; } .lm-scroll::-webkit-scrollbar-thumb:hover { background: var(--lm-dim); background-clip: padding-box; } ::selection { background: color-mix(in oklab, var(--lm-gold) 40%, transparent); color: #fff; } .lm-root :where(:focus-visible) { outline: 2px solid var(--lm-bolt); outline-offset: 2px; border-radius: var(--lm-r-sm); } .lm-shell { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; } /* --------------------------------------------------------------------------- Sangrado a pantalla completa El fondo de la cabecera y del pie tiene que tocar los dos bordes de la pantalla aunque algo por encima las esté encerrando: el tema se pinta dentro del marco de Tebex y el ancho no siempre lo manda él. Por eso el fondo no va en el elemento —que puede venir estrecho— sino en una capa propia centrada y medida contra el viewport. El ancho es 100vw menos la barra de desplazamiento (lm-core.js publica --lm-sbw); con `scrollbar-gutter: stable` la barra ocupa sitio siempre, y usar 100vw a secas dejaría la banda unos píxeles más ancha que la página y sacaría una barra horizontal. El contenido sigue dentro de .lm-container: los márgenes no se mueven. --------------------------------------------------------------------------- */ .lm-bleed { position: relative; isolation: isolate; } .lm-bleed::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: calc(100vw - var(--lm-sbw, 0px)); translate: -50% 0; z-index: -1; pointer-events: none; background: var(--lm-bleed-bg, transparent); box-shadow: var(--lm-bleed-shadow, none); backdrop-filter: var(--lm-bleed-blur, none); } .lm-container { width: 100%; max-width: 1680px; margin-inline: auto; --lm-gutter: clamp(1rem, 3.5vw, 3rem); padding-inline: var(--lm-gutter); } .lm-main { flex: 1; padding-block: var(--lm-pad-page) var(--lm-gap-section); } .lm-stack { display: flex; flex-direction: column; gap: var(--gap, var(--lm-gap-card)); } .lm-row { display: flex; align-items: center; gap: var(--gap, var(--lm-gap-inline)); } .lm-row--wrap { flex-wrap: wrap; } .lm-row--between { justify-content: space-between; } .lm-row--end { justify-content: flex-end; } .lm-row--top { align-items: flex-start; } .lm-grow { flex: 1 1 auto; min-width: 0; } .lm-spacer { flex: 1 1 auto; } .lm-hide { display: none !important; } .lm-xs-only { display: none; } .lm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .lm-grid { display: grid; gap: var(--gap, var(--lm-gap-card)); } .lm-grid--packages { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); } .lm-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); } .lm-grid--tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); } .lm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } /* Las secciones se separan solo con espacio: ni líneas ni rombos entre bloques. */ .lm-sections { display: flex; flex-direction: column; gap: var(--lm-gap-section); } .lm-sections > section { position: relative; } .lm-panel { position: relative; background: linear-gradient(180deg, color-mix(in oklab, var(--lm-elev-2) 100%, transparent), var(--lm-elev-1)); border: var(--lm-hair); border-radius: var(--lm-r); box-shadow: var(--lm-shadow-sm), var(--lm-bevel-out); } .lm-panel--pad { --lm-pad: var(--lm-pad-panel); padding: var(--lm-pad); } .lm-panel--flush { padding: 0; overflow: hidden; } .lm-panel--sunken { background: var(--lm-sunken); box-shadow: var(--lm-bevel-in); } .lm-panel--marble::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.5; background: repeating-linear-gradient(115deg, transparent 0 22px, rgb(255 255 255 / 0.014) 22px 23px), repeating-linear-gradient(65deg, transparent 0 31px, rgb(255 255 255 / 0.01) 31px 32px); mask-image: linear-gradient(160deg, #000 0%, transparent 70%); } .lm-h1 { font-size: clamp(1.75rem, 4.5vw, 2.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; margin: 0; } .lm-h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0; } .lm-h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; margin: 0; } .lm-body { font-size: 0.9375rem; line-height: 1.65; color: color-mix(in oklab, var(--lm-text) 84%, transparent); margin: 0; } .lm-small { font-size: 0.8125rem; line-height: 1.5; color: var(--lm-dim); margin: 0; } .lm-tiny { font-size: 0.6875rem; line-height: 1.4; color: var(--lm-dim); margin: 0; } .lm-pixel { font-family: var(--lm-pixel); letter-spacing: 0.02em; } .lm-mc-text { text-shadow: 0.09em 0.09em 0 rgb(0 0 0 / 0.75); } .lm-num { font-variant-numeric: tabular-nums; } .lm-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lm-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .lm-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .lm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .lm-head__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--lm-pixel); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--lm-gold); } .lm-head__eyebrow::before { content: ""; width: 5px; height: 5px; rotate: 45deg; background: currentColor; box-shadow: 0 0 8px currentColor; } .lm-head__title { display: flex; align-items: center; gap: 0.625rem; } .lm-head__title svg { width: 1.25rem; height: 1.25rem; flex: none; } .lm-head__title svg path { fill: var(--lm-gold); } .lm-btn--block { white-space: normal; } .lm-btn { --btn-bg: var(--lm-elev-3); --btn-ink: var(--lm-text); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; border: 1px solid color-mix(in oklab, var(--btn-bg) 60%, #fff 12%); border-radius: var(--lm-r-sm); overflow: hidden; background: var(--btn-bg); color: var(--btn-ink); font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--lm-bevel-out), var(--lm-shadow-sm); transition: translate var(--lm-fast) var(--lm-ease), box-shadow var(--lm-fast) var(--lm-ease), background-color var(--lm-fast) linear, filter var(--lm-fast) linear; } .lm-btn svg { width: 1.125rem; height: 1.125rem; flex: none; } .lm-btn:hover { filter: brightness(1.12); translate: 0 -1px; } .lm-btn:active { translate: 0 1px; box-shadow: var(--lm-bevel-in); filter: brightness(0.96); } .lm-btn[disabled], .lm-btn[aria-disabled="true"], .lm-btn.is-disabled { opacity: 0.45; pointer-events: none; filter: saturate(0.4); } .lm-btn--gold { --btn-bg: var(--lm-gold); --btn-ink: var(--lm-gold-ink); } .lm-btn--bolt { --btn-bg: var(--lm-bolt); --btn-ink: var(--lm-bolt-ink); } .lm-btn--danger { --btn-bg: var(--lm-danger); --btn-ink: #fff; } .lm-btn--good { --btn-bg: var(--lm-good); --btn-ink: #06210f; } .lm-btn--quiet { --btn-bg: transparent; border-color: var(--lm-line); } .lm-btn--quiet:hover { --btn-bg: var(--lm-elev-2); } .lm-btn--ghost { --btn-bg: transparent; border-color: transparent; box-shadow: none; color: var(--lm-dim); } .lm-btn--ghost:hover { color: var(--lm-text); --btn-bg: var(--lm-elev-2); } .lm-btn--block { width: 100%; } .lm-btn--lg { min-height: 3rem; padding-inline: 1.5rem; font-size: 0.9375rem; } .lm-btn--sm { min-height: 2rem; padding: 0.25rem 0.625rem; font-size: 0.8125rem; } .lm-btn--icon { padding: 0; width: 2.5rem; min-height: 2.5rem; } .lm-btn--icon.lm-btn--sm { width: 2rem; min-height: 2rem; } .lm-btn--gold::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.55) 50%, transparent 65%); translate: -120% 0; opacity: 0; } .lm-btn--gold:hover::after { animation: lm-sheen 700ms var(--lm-ease) forwards; } .lm-field { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0 0.875rem; background: var(--lm-sunken); border: var(--lm-hair); border-radius: var(--lm-r-sm); box-shadow: var(--lm-bevel-in); transition: border-color var(--lm-fast) linear, box-shadow var(--lm-fast) linear; } .lm-field:focus-within { border-color: var(--lm-bolt); box-shadow: var(--lm-bevel-in), 0 0 0 3px color-mix(in oklab, var(--lm-bolt) 25%, transparent); } .lm-field svg { width: 1rem; height: 1rem; flex: none; color: var(--lm-dim); } .lm-input { flex: 1; min-width: 0; background: none; border: 0; color: var(--lm-text); font: inherit; font-size: 1rem; padding-block: 0.5rem; } .lm-select select { font-size: 1rem; } .lm-input::placeholder { color: color-mix(in oklab, var(--lm-dim) 90%, transparent); } .lm-input:focus { outline: none; } .lm-select select { appearance: none; flex: 1; min-width: 4rem; background: none; border: 0; color: var(--lm-text); font: inherit; font-size: 0.9375rem; cursor: pointer; text-overflow: ellipsis; } .lm-select select:focus { outline: none; } .lm-select select option { background: var(--lm-panel); color: var(--lm-text); } .lm-select > svg { flex: none; pointer-events: none; } .lm-label { font-size: 0.8125rem; font-weight: 600; color: color-mix(in oklab, var(--lm-text) 88%, transparent); } .lm-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--lm-sunken); border: var(--lm-hair); border-radius: var(--lm-r-sm); box-shadow: var(--lm-bevel-in); } .lm-seg__btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border: 0; border-radius: calc(var(--lm-r-sm) - 2px); background: none; color: var(--lm-dim); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background-color var(--lm-fast) linear, color var(--lm-fast) linear; } .lm-seg__btn svg { width: 1rem; height: 1rem; } .lm-seg__btn:hover { color: var(--lm-text); } .lm-seg__btn[aria-pressed="true"], .lm-seg__btn[aria-selected="true"] { background: var(--lm-elev-3); color: var(--lm-text); box-shadow: var(--lm-bevel-out); } .lm-qty { display: inline-flex; align-items: center; justify-self: start; width: max-content; background: color-mix(in oklab, var(--lm-elev-2) 85%, transparent); border: var(--lm-hair); border-radius: var(--lm-r-sm); } .lm-qty button { width: 2rem; height: 2.25rem; border: 0; background: none; cursor: pointer; color: var(--lm-dim); font: inherit; font-size: 1rem; font-weight: 700; transition: color var(--lm-fast) linear, background-color var(--lm-fast) linear; } .lm-qty button:hover { color: var(--lm-gold); background: rgb(255 255 255 / 0.05); } .lm-qty output { min-width: 2rem; text-align: center; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; } .lm-badge { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.1875rem 0.5rem; border: 1px solid color-mix(in oklab, var(--r) 45%, transparent); border-radius: var(--lm-r-sharp); background: color-mix(in oklab, var(--r) 16%, transparent); color: color-mix(in oklab, var(--r) 88%, #fff); font-family: var(--lm-pixel); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4; white-space: nowrap; } .lm-badge svg { width: 0.75rem; height: 0.75rem; } .lm-badge--gold { --r: var(--lm-gold); } .lm-badge--bolt { --r: var(--lm-bolt); } .lm-badge--good { --r: var(--lm-good); } .lm-badge--danger { --r: var(--lm-danger); } .lm-badge--solid { background: var(--r); color: var(--r-ink, #0b0f18); border-color: transparent; } .lm-chip { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.375rem 0.75rem; background: var(--lm-elev-2); border: var(--lm-hair); border-radius: 99px; color: color-mix(in oklab, var(--lm-text) 86%, transparent); font-size: 0.8125rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: border-color var(--lm-fast) linear, color var(--lm-fast) linear, background-color var(--lm-fast) linear; } .lm-chip svg { width: 0.9375rem; height: 0.9375rem; flex: none; } .lm-chip:hover { border-color: color-mix(in oklab, var(--lm-gold) 50%, transparent); color: var(--lm-text); } .lm-chip[aria-pressed="true"] { border-color: var(--r); background: color-mix(in oklab, var(--r) 18%, var(--lm-elev-2)); color: #fff; } .lm-chip__dot { width: 8px; height: 8px; rotate: 45deg; background: var(--r); flex: none; } .lm-live { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; white-space: nowrap; padding: 0.4375rem 0.75rem 0.4375rem 0.625rem; background: var(--lm-elev-2); border: var(--lm-hair); border-radius: 99px; font-size: 0.8125rem; cursor: pointer; color: var(--lm-text); transition: border-color var(--lm-fast) linear; } .lm-live:hover { border-color: color-mix(in oklab, var(--lm-good) 55%, transparent); } .lm-live__dot { position: relative; width: 8px; height: 8px; border-radius: 99px; background: var(--lm-good); flex: none; } .lm-live__dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: lm-ping 1.8s var(--lm-ease-in-out) infinite; } .lm-live--off .lm-live__dot { background: var(--lm-danger); } .lm-live--off .lm-live__dot::after { animation: none; } .lm-live__ip { font-family: var(--lm-pixel); font-size: 0.75rem; letter-spacing: 0.02em; } .lm-rframe { position: relative; border: 1px solid color-mix(in oklab, var(--r) 38%, var(--lm-line)); background: radial-gradient(120% 80% at 50% -20%, color-mix(in oklab, var(--r) 14%, transparent), transparent 60%), linear-gradient(180deg, var(--lm-elev-2), var(--lm-elev-1)); } .lm-rglow { box-shadow: 0 0 0 1px color-mix(in oklab, var(--r) 40%, transparent), 0 14px 40px -16px color-mix(in oklab, var(--r) 70%, transparent); } .lm-rframe[data-rarity] { border-color: var(--lm-line); background: linear-gradient(180deg, var(--lm-elev-2), var(--lm-elev-1)); } .lm-rframe[data-rarity=""] { box-shadow: none; } .lm-rframe[data-rarity]:not([data-rarity=""]) { border-color: color-mix(in oklab, var(--r) 42%, var(--lm-line)); background: radial-gradient(120% 80% at 50% -20%, color-mix(in oklab, var(--r) 14%, transparent), transparent 60%), linear-gradient(180deg, var(--lm-elev-2), var(--lm-elev-1)); } .lm-rframe[data-fx] { border-color: color-mix(in oklab, var(--r) 56%, var(--lm-line)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--r) 18%, transparent), 0 14px 36px -22px var(--r); } .lm-rframe[data-fx="sweep"] { border-color: color-mix(in oklab, var(--r) 66%, var(--lm-line)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--r) 32%, transparent), 0 18px 48px -18px var(--r); } .lm-rframe-sheen { display: none; } [data-rarity=""] .lm-rframe-sheen { display: none !important; } [data-fx="halo"] .lm-rframe-sheen, [data-fx="orbit"] .lm-rframe-sheen, [data-fx="sweep"] .lm-rframe-sheen { display: block; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } [data-fx="halo"] .lm-rframe-sheen { padding: 1.5px; background: linear-gradient(180deg, color-mix(in oklab, var(--r) 65%, transparent), transparent 55%); animation: lm-fx-breathe 4.5s var(--lm-ease-in-out) infinite; } [data-fx="orbit"] .lm-rframe-sheen { background: conic-gradient(from 0deg, transparent 0deg, color-mix(in oklab, var(--r) 60%, transparent) 40deg, transparent 96deg, transparent 360deg); animation: lm-spin 7s linear infinite; opacity: 0.6; } [data-fx="sweep"] .lm-rframe-sheen { padding: 1.5px; background: conic-gradient(from 0deg, transparent 0deg, color-mix(in oklab, var(--r) 75%, transparent) 24deg, color-mix(in oklab, #fff 70%, var(--r)) 40deg, color-mix(in oklab, var(--r) 75%, transparent) 56deg, transparent 110deg, transparent 360deg); animation: lm-spin 5s linear infinite; opacity: 0.9; } @keyframes lm-fx-breathe { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } } .lm-rarity-name { color: var(--r); font-family: var(--lm-pixel); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.12em; } .lm-rarity-name::after { content: var(--r-name, ""); } [data-rarity=""] :has(> .lm-rarity-name), [data-rarity=""] .lm-card__rarity { display: none !important; } .mc-slot { position: relative; display: grid; place-items: center; width: var(--lm-slot); height: var(--lm-slot); padding: 0; border: 0; border-radius: var(--lm-r-sharp); background: color-mix(in oklab, var(--r, var(--lm-line)) 10%, var(--lm-elev-2)); box-shadow: var(--lm-bevel-in); cursor: default; transition: background-color var(--lm-fast) linear, box-shadow var(--lm-fast) linear, translate var(--lm-fast) var(--lm-ease); } .mc-slot--empty { opacity: 0.55; } .mc-slot--filled { cursor: pointer; background: color-mix(in oklab, var(--r) 14%, var(--lm-elev-2)); border: 1px solid color-mix(in oklab, var(--r) 24%, var(--lm-line)); } .mc-slot--filled:hover, .mc-slot--filled:focus-visible { translate: 0 -2px; border-color: var(--r); background: color-mix(in oklab, var(--r) 26%, var(--lm-elev-2)); box-shadow: var(--lm-bevel-in), 0 0 0 1px var(--r), 0 8px 20px -8px var(--r); z-index: 2; } .mc-slot--filled::after { content: ""; position: absolute; inset: 2px; background: rgb(255 255 255 / 0.28); opacity: 0; pointer-events: none; transition: opacity var(--lm-fast) linear; } .mc-slot--filled:hover::after { opacity: 1; } .mc-slot__icon { position: relative; width: 62%; height: 62%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.5)); z-index: 1; transition: scale var(--lm-fast) var(--lm-ease); } .mc-slot--filled:hover .mc-slot__icon { scale: 1.08; } .mc-slot__rune { display: grid; place-items: center; width: 62%; height: 62%; border-radius: var(--lm-r-sharp); background: linear-gradient(150deg, color-mix(in oklab, var(--r) 75%, var(--lm-ink) 10%), color-mix(in oklab, var(--r) 35%, var(--lm-ink) 40%)); box-shadow: inset -2px -2px 0 rgb(0 0 0 / 0.35), inset 2px 2px 0 rgb(255 255 255 / 0.25); color: #0d0f16; font-family: var(--lm-pixel); font-size: 0.875rem; z-index: 1; } .mc-slot__count { position: absolute; right: 3px; bottom: 2px; font-family: var(--lm-font); font-size: 0.8125rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; color: #fff; text-shadow: 0 2px 3px rgb(0 0 0 / 0.9), 0 0 2px rgb(0 0 0 / 0.9); z-index: 3; pointer-events: none; } .mc-slot__bar { position: absolute; left: 5px; right: 5px; bottom: 5px; height: 3px; background: var(--lm-ink); z-index: 3; pointer-events: none; } .mc-slot__bar > i { display: block; height: 100%; background: var(--dur-color, var(--lm-good)); width: var(--dur, 100%); } .mc-glint { position: absolute; inset: 19%; pointer-events: none; z-index: 2; background: linear-gradient(115deg, transparent 0%, color-mix(in oklab, var(--r) 85%, transparent) 35%, rgb(255 255 255 / 0.9) 50%, color-mix(in oklab, var(--r) 75%, transparent) 65%, transparent 100%); background-size: 260% 260%; mix-blend-mode: color-dodge; opacity: 0.7; animation: lm-glint 3.4s linear infinite; -webkit-mask-image: var(--icon, none); mask-image: var(--icon, none); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .mc-glint--noicon { mask-image: none; -webkit-mask-image: none; inset: 22%; border-radius: var(--lm-r-sharp); opacity: 0.5; } [data-rarity=""] .mc-glint, .mc-slot:not([data-rarity]) .mc-glint { --r: #cfd6e4; } .mc-kit { display: grid; gap: 1.25rem; justify-items: center; } .mc-kit__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; width: 100%; font-family: var(--lm-pixel); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lm-dim); } /* Cabecera sin título: solo el total, alineado a la derecha. */ .mc-kit__head--bare { justify-content: flex-end; } /* El único contador de objetos del panel. */ .mc-total { white-space: nowrap; font-variant-numeric: tabular-nums; } .mc-total:empty { display: none; } .mc-kit__group { display: grid; gap: 0.5rem; justify-items: center; } .mc-kit__label { font-family: var(--lm-pixel); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.14em; color: color-mix(in oklab, var(--r) 55%, var(--lm-dim)); } .mc-kit__label--named { font-family: var(--lm-font); font-size: 0.75rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: color-mix(in oklab, var(--r) 60%, var(--lm-text)); } .mc-kit__row { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; } .mc-row { display: grid; grid-template-columns: repeat(var(--cols, 9), var(--lm-slot)); gap: 5px; justify-content: center; } .mc-block { display: grid; gap: 0.625rem; justify-items: center; } .mc-block__title { font-family: var(--lm-pixel); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.14em; color: color-mix(in oklab, var(--r) 55%, var(--lm-dim)); } .mc-shulker { display: grid; grid-template-columns: auto minmax(0, auto); align-items: stretch; gap: 0.75rem; padding: 0.625rem; border: 1px solid color-mix(in oklab, var(--r) 26%, var(--lm-line)); border-radius: var(--lm-r-sm); background: color-mix(in oklab, var(--r) 7%, var(--lm-elev-1)); } .mc-shulker__side { display: grid; gap: 5px; grid-auto-rows: max-content; align-content: center; padding-inline-end: 0.75rem; border-inline-end: 1px solid color-mix(in oklab, var(--r) 22%, var(--lm-line)); } .mc-shulker__grid { align-content: center; } .lm-mstack { display: grid; gap: 1rem; align-content: start; } .lm-mtext { font-size: 0.9375rem; line-height: 1.7; color: color-mix(in oklab, var(--lm-text) 88%, transparent); margin: 0; } .lm-mhead { display: flex; align-items: center; gap: 0.5rem; font-family: var(--lm-pixel); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--r) 60%, var(--lm-dim)); } .lm-mhead svg, .lm-mhead .lm-mico__img { width: 1rem; height: 1rem; flex: none; } .lm-mnote { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .lm-mnote__body { display: grid; gap: 0.1875rem; } .lm-mnote__body b { font-size: 0.875rem; color: var(--lm-text); } .lm-mico__img { image-rendering: pixelated; object-fit: contain; } /* Bloque «space» del manifiesto: respira, no dibuja. */ .lm-mspace { border: 0; margin: 0; height: var(--lm-sp-4); } .lm-mspace--small { height: var(--lm-sp-1); } .lm-mspace--medium { height: var(--lm-sp-4); } .lm-mspace--big { height: var(--lm-sp-6); } .mc-inv { --cols: 9; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, var(--lm-slot))); gap: 4px; justify-content: center; } .mc-inv__title { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.125rem 0.25rem 0.375rem; font-family: var(--lm-pixel); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lm-dim); } .lm-figures figure img { max-height: 20rem; object-fit: contain; } .mc-tt { position: fixed; inset: auto; margin: 0; z-index: var(--lm-z-tooltip); width: max-content; max-width: min(22rem, calc(100vw - 2rem)); padding: 7px 9px; background: color-mix(in oklab, var(--r) 10%, rgb(10 8 16 / 0.96)); border: 2px solid transparent; border-image: linear-gradient(180deg, color-mix(in oklab, var(--r) 75%, var(--lm-ink)), color-mix(in oklab, var(--r) 30%, var(--lm-ink))) 1; box-shadow: 0 0 0 2px rgb(6 5 10 / 0.95), 0 18px 40px -14px rgb(0 0 0 / 0.9); font-size: 0.8125rem; line-height: 1.45; overflow: visible; pointer-events: none; opacity: 0; translate: 0 4px; transition: opacity 110ms linear, translate 110ms var(--lm-ease); } .mc-tt__count { color: #a8a8a8; } .mc-tt.is-open { opacity: 1; translate: 0 0; } .mc-tt__name { font-family: var(--lm-pixel); font-size: 0.8125rem; color: var(--r); text-shadow: 2px 2px 0 rgb(0 0 0 / 0.85); margin-bottom: 2px; } .mc-tt__line { color: #a8a8a8; text-shadow: 1px 1px 0 rgb(0 0 0 / 0.8); } .mc-tt__line--lore { color: #a8a8a8; white-space: pre-wrap; } .mc-tt__line--ench { color: #d0c0ff; } .mc-tt__line--good { color: #55ff55; } .mc-tt__line--bad { color: #ff5555; } .mc-tt__line--dim { color: #6f6f6f; } .mc-tt__line--gap { height: 0.75em; } .mc-tt__space { height: 6px; } .mc-tt__rarity { display: block; margin-top: 4px; color: var(--r); font-family: var(--lm-pixel); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.1em; } .mc-xp { display: grid; gap: 0.5rem; } .mc-xp__track { position: relative; height: 14px; background: #12180f; border-radius: var(--lm-r-sharp); box-shadow: var(--lm-bevel-in); overflow: hidden; } .mc-xp__fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: linear-gradient(180deg, #b9ff5c, #6fd41c 55%, #4fa312); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45); transition: width 900ms var(--lm-ease); } .mc-xp__fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / 0.5) 50%, transparent 60%); background-size: 250% 100%; animation: lm-shine 2.6s linear infinite; } .mc-xp__level { display: inline-grid; place-items: center; min-width: 2.25rem; padding: 0.125rem 0.5rem; font-family: var(--lm-pixel); font-size: 0.875rem; color: #8cff4d; text-shadow: 2px 2px 0 rgb(0 0 0 / 0.85); } .mc-xp__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .mc-hotbar { display: flex; justify-content: center; z-index: var(--lm-z-hotbar); pointer-events: none; } .mc-hotbar--bottom { position: fixed; inset-inline: 0; bottom: 0; padding: 0.5rem max(0.5rem, env(safe-area-inset-left)) max(0.5rem, env(safe-area-inset-bottom)); } .mc-hotbar--top { position: sticky; top: 6.5rem; padding: 0.5rem clamp(1rem, 3.5vw, 3rem); } .mc-hotbar__strip { display: flex; gap: 0.375rem; pointer-events: auto; } .mc-hotbar--top .mc-hotbar__strip { width: 100%; max-width: 30rem; } .mc-hotbar--top .mc-hotbar__slot { flex: 1 1 0; width: auto; } .mc-hotbar__slot { position: relative; display: grid; place-items: center; gap: 2px; width: 3.75rem; padding: 0.375rem 0.25rem; border: 1px solid color-mix(in oklab, var(--lm-line) 100%, #fff 10%); border-radius: var(--lm-r-sm); background: color-mix(in oklab, var(--lm-elev-2) 88%, transparent); backdrop-filter: blur(12px); box-shadow: var(--lm-shadow-sm), var(--lm-bevel-out); color: var(--lm-dim); text-decoration: none; font-family: var(--lm-pixel); font-size: 0.5rem; letter-spacing: 0.02em; cursor: pointer; } .mc-hotbar__slot svg { width: 1.125rem; height: 1.125rem; } .mc-hotbar__skin { width: 1.25rem; height: 1.25rem; border-radius: 2px; object-fit: cover; image-rendering: pixelated; } .mc-hotbar__slot[aria-current="true"] { border-color: var(--lm-gold); color: var(--lm-gold); background: color-mix(in oklab, var(--lm-gold) 18%, var(--lm-elev-2)); box-shadow: var(--lm-shadow-sm), 0 0 0 1px color-mix(in oklab, var(--lm-gold) 40%, transparent); } .mc-hotbar__slot .lm-count { position: absolute; top: -7px; right: -5px; min-width: 1.25rem; padding: 0 4px; background: var(--lm-gold); color: var(--lm-gold-ink); border-radius: 99px; font-family: var(--lm-font); font-size: 0.6875rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.25rem; text-align: center; } .lm-topbar { position: sticky; top: 0; z-index: var(--lm-z-nav); --lm-bleed-bg: color-mix(in oklab, var(--lm-bg) 82%, var(--lm-ink) 6%); --lm-bleed-blur: blur(16px) saturate(1.2); --lm-bleed-shadow: 0 12px 28px -22px rgb(0 0 0 / 0.9); } .lm-topbar__inner { display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw, 1rem); min-height: 6.5rem; } .lm-topbar__inner > * { flex: none; } .lm-topbar__inner > .lm-spacer { flex: 1 1 auto; } .lm-topbar__inner > .lm-brand { flex: 0 1 auto; min-width: 0; } .lm-brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: inherit; flex: none; } .lm-brand img { display: block; height: auto; max-width: 100%; } .lm-brand--lg img { max-height: 5rem; width: auto; object-fit: contain; } .lm-brand--lg .lm-brand__mark { width: 4rem; height: 4rem; font-size: 1.75rem; } .lm-topbar__tools { display: flex; align-items: center; gap: 0.375rem; } .lm-iconbtn { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: var(--lm-hair); border-radius: var(--lm-r-sm); background: var(--lm-elev-2); color: var(--lm-text); cursor: pointer; box-shadow: var(--lm-bevel-out); transition: translate var(--lm-fast) var(--lm-ease), border-color var(--lm-fast) linear, background-color var(--lm-fast) linear, color var(--lm-fast) linear; } .lm-iconbtn:hover { translate: 0 -2px; border-color: color-mix(in oklab, var(--lm-gold) 55%, var(--lm-line)); color: var(--lm-gold); } .lm-iconbtn:active { translate: 0 1px; box-shadow: var(--lm-bevel-in); } .lm-iconbtn svg { width: 1.1875rem; height: 1.1875rem; } .lm-iconbtn--gold { background: var(--lm-gold); border-color: transparent; color: var(--lm-gold-ink); } .lm-iconbtn--gold:hover { color: var(--lm-gold-ink); filter: brightness(1.08); border-color: transparent; } .lm-iconbtn--code { width: auto; min-width: 3.25rem; padding-inline: 0.75rem; justify-items: center; text-align: center; } .lm-iconbtn__code { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.03em; line-height: 1; color: inherit; } .lm-iconbtn__count { position: absolute; top: -0.4375rem; right: -0.4375rem; min-width: 1.375rem; padding: 0 0.3125rem; border-radius: 99px; background: var(--lm-bolt); color: var(--lm-bolt-ink); font-size: 0.75rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.375rem; text-align: center; box-shadow: 0 2px 8px -2px rgb(0 0 0 / 0.6); } .lm-brand__mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--lm-r-sm); background: linear-gradient(150deg, var(--lm-gold), color-mix(in oklab, var(--lm-gold) 45%, #7a4a00)); color: var(--lm-gold-ink); font-family: var(--lm-pixel); font-size: 1.125rem; box-shadow: 0 6px 18px -6px var(--lm-gold), var(--lm-bevel-out); } .lm-brand__name { font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.1; } .lm-brand__sub { font-family: var(--lm-pixel); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--lm-gold); } .lm-optrow { position: relative; display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.625rem; border: 0; border-radius: var(--lm-r-sm); background: none; color: color-mix(in oklab, var(--lm-text) 82%, transparent); font: inherit; font-size: 0.9375rem; font-weight: 500; text-align: start; text-decoration: none; cursor: pointer; transition: background-color var(--lm-fast) linear, color var(--lm-fast) linear; } .lm-optrow:hover { background: var(--lm-elev-2); color: var(--lm-text); } .lm-optrow[aria-current="page"] { background: linear-gradient(90deg, color-mix(in oklab, var(--lm-gold) 18%, transparent), transparent); color: var(--lm-text); font-weight: 600; } .lm-account { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem; border-radius: var(--lm-r-sm); text-decoration: none; color: inherit; transition: background-color var(--lm-fast) linear; } .lm-account:hover { background: var(--lm-elev-2); } .lm-account__avatar { position: relative; display: block; flex: none; } .lm-account__skin { display: block; width: 3rem; height: 3rem; border-radius: var(--lm-r-sm); image-rendering: pixelated; background: var(--lm-sunken); box-shadow: var(--lm-bevel-out); transition: filter var(--lm-fast) linear; } .lm-account:hover .lm-account__skin { filter: brightness(0.55) saturate(0.6); } .lm-account__badge { display: none; position: absolute; inset: 0; place-items: center; border-radius: var(--lm-r-sm); color: var(--lm-gold); opacity: 0; scale: 0.6; rotate: -12deg; transition: opacity var(--lm-mid) var(--lm-ease), scale var(--lm-mid) var(--lm-ease), rotate var(--lm-mid) var(--lm-ease); } .lm-account:hover .lm-account__badge, .lm-account:focus-visible .lm-account__badge { opacity: 1; scale: 1; rotate: 0deg; } .lm-account__badge svg { width: 1.125rem; height: 1.125rem; } .lm-account__text { display: grid; gap: 2px; min-width: 0; } .lm-account__name { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.2; } .lm-account__meta { display: flex; align-items: center; font-family: var(--lm-pixel); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lm-gold); white-space: nowrap; } .lm-account__meta-ico { display: flex; align-items: center; width: 0.875rem; flex: none; opacity: 0; translate: -0.375rem 0; transition: opacity var(--lm-mid) var(--lm-ease), translate var(--lm-mid) var(--lm-ease); } .lm-account__meta-ico svg { width: 0.75rem; height: 0.75rem; } .lm-account__meta-word { translate: -0.875rem 0; transition: translate var(--lm-mid) var(--lm-ease); } .lm-account:hover .lm-account__meta-ico, .lm-account:focus-visible .lm-account__meta-ico { opacity: 1; translate: 0 0; } .lm-account:hover .lm-account__meta-word, .lm-account:focus-visible .lm-account__meta-word { translate: 0 0; } :root { --lm-banner-w: 1680px; } .lm-hero { display: grid; width: 100%; max-width: var(--lm-banner-w); margin-inline: auto; border-radius: var(--lm-r-lg); overflow: hidden; border: var(--lm-hair); box-shadow: var(--lm-shadow); } .lm-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; scale: 1.04; animation: lm-kenburns 28s var(--lm-ease-in-out) infinite alternate; } .lm-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in oklab, var(--lm-bg) 92%, transparent) 0%, color-mix(in oklab, var(--lm-bg) 55%, transparent) 55%, transparent 100%), linear-gradient(0deg, color-mix(in oklab, var(--lm-bg) 90%, transparent), transparent 65%); } .lm-hero__banner { display: block; width: 100%; aspect-ratio: 1080 / 179; object-fit: cover; object-position: center; } .lm-hero__banner--portrait { display: none; } .lm-hero__banner--placeholder { display: grid; place-items: center; background: radial-gradient(120% 140% at 15% -10%, color-mix(in oklab, var(--lm-bolt) 16%, transparent), transparent 65%), radial-gradient(100% 130% at 100% 10%, color-mix(in oklab, var(--lm-gold) 12%, transparent), transparent 65%), var(--lm-elev-1); } .lm-hero__banner--placeholder .lm-brand__mark { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; opacity: 0.85; } .lm-hero__bar { display: flex; align-items: center; gap: 0.75rem; padding: var(--lm-sp-4) var(--lm-sp-5); background: color-mix(in oklab, var(--lm-panel) 88%, var(--lm-ink) 8%); } .lm-hero__id { display: grid; gap: 0.125rem; min-width: 0; } .lm-hband { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); padding: clamp(0.875rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.5rem); background: radial-gradient(90% 160% at 0% 50%, color-mix(in oklab, var(--lm-gold) 10%, transparent), transparent 70%), color-mix(in oklab, var(--lm-panel) 90%, var(--lm-ink) 8%); } .lm-hband__id { display: grid; gap: 0.125rem; min-width: 0; } .lm-hband__name { font-size: clamp(1.125rem, 2.6vw, 1.625rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0; } .lm-hband__tag { color: var(--lm-dim); } .lm-hband__cards { display: flex; align-items: stretch; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; } .lm-hbcard { --hb: var(--lm-gold); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; min-width: 13rem; padding: 0.5rem 0.75rem; border: 1px solid color-mix(in oklab, var(--hb) 32%, var(--lm-line)); border-radius: var(--lm-r-sm); background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--hb) 14%, transparent), transparent 70%), var(--lm-elev-2); color: inherit; text-align: start; text-decoration: none; cursor: pointer; box-shadow: var(--lm-bevel-out); transition: translate var(--lm-fast) var(--lm-ease), border-color var(--lm-fast) linear; } .lm-hbcard:hover { translate: 0 -2px; border-color: color-mix(in oklab, var(--hb) 60%, transparent); } .lm-hbcard--discord { --hb: #5865F2; } .lm-hbcard--ip { --hb: var(--lm-good); } .lm-hbcard__ico { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--lm-r-sm); background: color-mix(in oklab, var(--hb) 18%, transparent); color: var(--hb); } .lm-hbcard__body { display: grid; gap: 1px; min-width: 0; } .lm-hbcard__label { font-family: var(--lm-pixel); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--lm-dim); } .lm-hbcard__value { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lm-hbcard__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: color-mix(in oklab, var(--lm-dim) 70%, transparent); } .lm-hbcard__dot[data-on] { background: var(--lm-good); box-shadow: 0 0 0 3px color-mix(in oklab, var(--lm-good) 22%, transparent); animation: lm-fx-breathe 2.4s var(--lm-ease-in-out) infinite; } .lm-hbcard__go { color: var(--lm-dim); display: inline-flex; } .lm-hbcard:hover .lm-hbcard__go { color: var(--hb); } @media (max-width: 767px) { .lm-hband { grid-template-columns: minmax(0, 1fr); } .lm-hband__cards { justify-content: stretch; } .lm-hbcard { flex: 1 1 100%; min-width: 0; } } .lm-hero__id .lm-h3 { line-height: 1.2; } .lm-motes { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .lm-motes i { position: absolute; bottom: -10px; width: 3px; height: 3px; background: var(--lm-gold); opacity: 0; box-shadow: 0 0 8px var(--lm-gold); animation: lm-rise var(--dur, 9s) linear var(--delay, 0s) infinite; } .lm-icon-chip { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--lm-r-sm); background: color-mix(in oklab, var(--lm-gold) 15%, transparent); } .lm-icon-chip svg { width: 1.125rem; height: 1.125rem; } .lm-icon-chip svg path { fill: var(--lm-gold); } .lm-card { position: relative; display: flex; flex-direction: column; border-radius: var(--lm-r); overflow: hidden; box-shadow: var(--lm-shadow-sm); transition: translate var(--lm-mid) var(--lm-ease), box-shadow var(--lm-mid) var(--lm-ease); } .lm-card:hover { translate: 0 -4px; box-shadow: var(--lm-shadow), 0 0 0 1px color-mix(in oklab, var(--r) 55%, transparent); } .lm-card__flags { position: absolute; inset-inline: 0.5rem; top: 0.5rem; z-index: 4; display: flex; align-items: start; justify-content: space-between; gap: 0.375rem; pointer-events: none; } .lm-card__flags > * { pointer-events: auto; } .lm-card__stage { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 0.86; width: 100%; padding: 1.25rem; border: 0; background: none; cursor: pointer; overflow: hidden; } .lm-card__stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 42%, color-mix(in oklab, var(--r) 26%, transparent), transparent 70%); opacity: 0.9; transition: opacity var(--lm-mid) linear, scale var(--lm-slow) var(--lm-ease); } .lm-card:hover .lm-card__stage::before { opacity: 1; scale: 1.15; } .lm-card__stage::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--lm-line) 1px, transparent 1px), linear-gradient(90deg, var(--lm-line) 1px, transparent 1px); background-size: 22px 22px; opacity: 0.16; mask-image: radial-gradient(70% 60% at 50% 60%, #000, transparent); } .lm-card__item { position: relative; z-index: 2; width: min(58%, 8.5rem); aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 12px 14px rgb(0 0 0 / 0.55)); animation: lm-float 6s var(--lm-ease-in-out) infinite; transition: scale var(--lm-mid) var(--lm-ease), rotate var(--lm-mid) var(--lm-ease); } .lm-card:hover .lm-card__item { scale: 1.09; rotate: -3deg; } .lm-card__shadow { position: absolute; z-index: 1; bottom: 14%; width: 42%; height: 10px; border-radius: 99px; background: radial-gradient(closest-side, rgb(0 0 0 / 0.55), transparent); animation: lm-float-shadow 6s var(--lm-ease-in-out) infinite; } .lm-card__body { display: grid; gap: var(--lm-sp-4); padding: var(--lm-sp-4); background: color-mix(in oklab, var(--lm-elev-1) 92%, var(--lm-ink) 8%); } .lm-card__id { display: grid; gap: 0.25rem; min-width: 0; } .lm-card__name { font-size: 0.9375rem; font-weight: 700; line-height: 1.25; } .lm-card__name a { color: inherit; text-decoration: none; } .lm-card__rarity { display: none; } .lm-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .lm-card__foot { display: flex; align-items: center; gap: 0.375rem; } .lm-card__foot .lm-btn { flex: 1; } .lm-actions { display: flex; align-items: stretch; gap: 0.375rem; width: 100%; } .lm-actions .lm-actions__buy { flex: 1 1 auto; min-width: 0; } .lm-actions .lm-actions__gift, .lm-actions .lm-actions__info { flex: 0 0 auto; width: 2.75rem; padding: 0; } .lm-actions__gift:hover, .lm-actions__gift:focus-visible, .lm-actions__info:hover, .lm-actions__info:focus-visible { border-color: color-mix(in oklab, var(--lm-bolt) 55%, transparent); color: var(--lm-bolt); } .lm-actions__info { font-family: var(--lm-pixel); font-size: 0.9375rem; } .lm-actions .lm-actions__info.lm-btn--sm { width: 2.25rem; } .lm-card__peek { display: flex; align-items: center; gap: 3px; } .lm-card__peek .mc-slot { --lm-slot: 26px; } .lm-card__peek-more { font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lm-dim); margin-inline-start: 0.25rem; } .lm-price { display: flex; align-items: baseline; gap: 0.4375rem; flex-wrap: wrap; } .lm-price__now { font-size: 1.125rem; font-weight: 800; color: var(--lm-gold); letter-spacing: -0.01em; } .lm-price__was { font-size: 0.8125rem; color: var(--lm-dim); text-decoration: line-through; } .lm-price__cycle { font-size: 0.6875rem; color: var(--lm-dim); } .lm-price--lg .lm-price__now { font-size: clamp(1.75rem, 4vw, 2.25rem); } .lm-ladder__name { font-family: var(--lm-pixel); font-size: 0.9375rem; color: color-mix(in oklab, var(--r) 80%, #fff); text-shadow: 2px 2px 0 rgb(0 0 0 / 0.6); } .lm-explorer { display: grid; height: 100%; min-height: 0; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "aside head" "aside tabs" "aside content"; } .lm-explorer__aside { grid-area: aside; display: flex; flex-direction: column; gap: 1rem; min-height: 0; min-width: 0; padding: 1.25rem; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; background: radial-gradient(80% 42% at 50% 22%, color-mix(in oklab, var(--r) 24%, transparent), transparent 72%), linear-gradient(180deg, var(--lm-elev-2), color-mix(in oklab, var(--lm-bg) 80%, var(--lm-ink) 12%)); border-inline-end: var(--lm-hair); } .lm-explorer__showcase { position: relative; display: grid; justify-items: center; align-content: center; gap: 0.75rem; flex: 1 1 auto; min-height: 0; } .lm-explorer__pedestal { position: relative; display: grid; place-items: center; width: min(100%, 15rem); aspect-ratio: 1; border-radius: 50%; } .lm-explorer__halo { position: absolute; inset: 5%; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--r) 42%, transparent); background: radial-gradient(circle at 50% 45%, color-mix(in oklab, var(--r) 22%, transparent), transparent 68%); box-shadow: 0 0 70px -12px color-mix(in oklab, var(--r) 65%, transparent) inset; /* * `lm-breathe` crece hasta scale 1.05, y el pedestal que lo contiene no * recorta su propio desbordamiento. En escritorio ese 5% de más quedaba * oculto porque .lm-explorer__aside es un contenedor con overflow-x:hidden. * Pero en móvil (<=1180px) el aside pasa a overflow:visible, así que ese * 5% de más se ve de verdad: el halo se sale del margen de la columna y, * como respira cada 5s, se ve crecer y encoger en bucle. Con * `lm-breathe-still` el halo queda fijo en tamaño y solo late en opacidad. */ animation: lm-breathe-still 5s var(--lm-ease-in-out) infinite; } [data-rarity=""] .lm-explorer__halo { display: none; } .lm-explorer__aura { z-index: 1; } .lm-explorer__item { position: relative; z-index: 2; width: 62%; height: 62%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 18px 22px rgb(0 0 0 / 0.6)); animation: lm-float 5.5s var(--lm-ease-in-out) infinite; } .lm-buybox { display: grid; gap: 0.5rem; min-width: 0; padding: 0.75rem; border: 1px solid color-mix(in oklab, var(--r) 30%, var(--lm-line)); border-radius: var(--lm-r); background: color-mix(in oklab, var(--lm-panel) 88%, var(--lm-ink) 10%); box-shadow: var(--lm-bevel-out), var(--lm-shadow-sm); } .lm-gift { border: 1px solid var(--lm-line); border-radius: var(--lm-r-sm); background: transparent; overflow: hidden; } .lm-gift:hover { border-color: color-mix(in oklab, var(--r, var(--lm-gold)) 45%, var(--lm-line)); } .lm-gift__q { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3rem; padding: 0.625rem 0.875rem; font-size: 0.9375rem; font-weight: 600; cursor: pointer; list-style: none; transition: background-color var(--lm-fast) linear; } .lm-gift__q::-webkit-details-marker { display: none; } .lm-gift__q:hover { background: var(--lm-elev-2); } .lm-gift__q svg { color: var(--r, var(--lm-gold)); } .lm-gift__plus { display: inline-flex; color: var(--r, var(--lm-gold)); line-height: 1; transition: rotate var(--lm-mid) var(--lm-ease); } .lm-gift[open] .lm-gift__plus { rotate: 90deg; } .lm-gift__form { display: grid; gap: 0.5rem; padding: 0 0.75rem 0.75rem; } /* * Un hijo de rejilla arranca con `min-width: auto`, o sea que no puede encoger * por debajo de su contenido. Y el contenido aquí es un , que sin más * pide unos 266px por su tamaño por defecto. En cuanto la columna del paquete * baja de ahí —basta con que aparezca una barra de desplazamiento— el campo y * el botón se salen del marco por la derecha. * * Dejándoles encoger, el formulario se adapta al ancho que haya. */ .lm-gift__form > * { min-width: 0; } .lm-gift[open] .lm-gift__form { animation: lm-unfold var(--lm-mid) var(--lm-ease) both; } @keyframes lm-unfold { from { opacity: 0; translate: 0 -0.5rem; clip-path: inset(0 0 100% 0); } to { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0); } } .lm-explorer__head { grid-area: head; display: grid; gap: 0.625rem; padding: clamp(1rem, 2.2vw, 1.75rem) clamp(1rem, 2.2vw, 1.75rem) 0.875rem; min-width: 0; } .lm-explorer__name { font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0; } .lm-explorer__content { grid-area: content; overflow-x: hidden; overflow-y: auto; min-height: 0; min-width: 0; padding: 1rem clamp(1rem, 2.2vw, 1.75rem) 1.5rem; scrollbar-gutter: stable; } .lm-explorer > .lm-tabs { grid-area: tabs; padding-inline: clamp(1rem, 2.2vw, 1.75rem); } .lm-tabs { display: flex; gap: 0.25rem; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior: contain; scrollbar-width: none; } .lm-tabs::-webkit-scrollbar { display: none; } .lm-tab { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6875rem 0.875rem; border: 0; background: none; color: var(--lm-dim); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color var(--lm-fast) linear; } .lm-tab svg { width: 1rem; height: 1rem; } .lm-tab:hover { color: var(--lm-text); } .lm-tab[aria-selected="true"] { color: var(--lm-gold); } .lm-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 0.375rem; bottom: -1px; height: 2px; background: var(--lm-gold); box-shadow: 0 0 10px var(--lm-gold); } .lm-tab__count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4375rem; border-radius: 99px; background: color-mix(in oklab, var(--lm-gold) 16%, transparent); color: var(--lm-gold); font-family: var(--lm-font); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .lm-tabpanel[hidden] { display: none; } .lm-tabpanel { animation: lm-fade-up var(--lm-mid) var(--lm-ease) both; } .lm-subtabbed { display: grid; gap: 1rem; } .lm-subtabs { display: flex; flex-wrap: wrap; gap: 0.3125rem; padding: 0.3125rem; border: 1px solid color-mix(in oklab, var(--r) 30%, var(--lm-line)); border-radius: var(--lm-r-sm); background: color-mix(in oklab, var(--r) 8%, var(--lm-sunken)); box-shadow: var(--lm-bevel-in); overflow: visible; } .lm-subtab { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.4375rem 0.75rem; border: 1px solid transparent; border-radius: calc(var(--lm-r-sm) - 2px); background: none; color: color-mix(in oklab, var(--r) 55%, var(--lm-dim)); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color var(--lm-fast) linear, border-color var(--lm-fast) linear, color var(--lm-fast) linear; } .lm-subtab svg { width: 0.9375rem; height: 0.9375rem; } .lm-subtab::before { content: ""; width: 6px; height: 6px; rotate: 45deg; background: var(--r); opacity: 0.25; transition: opacity var(--lm-fast) linear, box-shadow var(--lm-fast) linear; } .lm-subtab:hover { color: color-mix(in oklab, var(--r) 80%, #fff); background: color-mix(in oklab, var(--r) 10%, transparent); } .lm-subtab[aria-selected="true"] { border-color: color-mix(in oklab, var(--r) 60%, transparent); background: color-mix(in oklab, var(--r) 22%, transparent); color: color-mix(in oklab, var(--r) 88%, #fff); box-shadow: 0 6px 18px -12px var(--r); } .lm-subtab[aria-selected="true"]::before { opacity: 1; box-shadow: 0 0 8px var(--r); } .lm-subtab__count { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; border-radius: 99px; background: color-mix(in oklab, var(--r) 26%, transparent); color: color-mix(in oklab, var(--r) 92%, #fff); font-family: var(--lm-font); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .lm-subpanel { animation: lm-fade-up var(--lm-fast) var(--lm-ease) both; } .lm-dialog { width: min(64rem, calc(100vw - 2rem)); max-height: min(90dvh, 52rem); padding: 0; border: var(--lm-hair); border-radius: var(--lm-r-lg); background: var(--lm-panel); color: var(--lm-text); box-shadow: var(--lm-shadow-lg); overflow: hidden; } .lm-dialog__close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 6; } .lm-dialog__close:active, [data-lm-dismiss]:active, [data-lm-close]:active { translate: 0 0; box-shadow: none; filter: none; } .lm-dialog__scroll { max-height: min(90dvh, 52rem); overflow-y: auto; } #lm-package-body { height: min(90dvh, 52rem); overflow: hidden; } .lm-toolbar { display: flex; align-items: center; gap: var(--lm-gap-block); flex-wrap: wrap; padding: var(--lm-gap-block); border-radius: var(--lm-r); background: color-mix(in oklab, var(--lm-panel) 78%, var(--lm-ink) 10%); border: var(--lm-hair); } .lm-toolbar__search { flex: 1 1 14rem; min-width: 0; } .lm-filters { display: flex; gap: 0.375rem; flex-wrap: wrap; } .lm-result-count { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lm-dim); } .lm-empty { display: grid; place-items: center; gap: 0.75rem; padding: clamp(2rem, 6vw, 4rem); text-align: center; } .lm-empty__ico { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: var(--lm-r-sm); background: var(--lm-sunken); box-shadow: var(--lm-bevel-in); font-size: 1.5rem; } .lm-palette { position: fixed; inset: 0; z-index: var(--lm-z-dialog); display: grid; align-items: start; justify-items: center; padding: clamp(2rem, 10vh, 7rem) 1rem 1rem; background: rgb(4 6 12 / 0.7); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity var(--lm-fast) linear; } .lm-palette.is-open { opacity: 1; pointer-events: auto; } .lm-palette__box { width: min(38rem, 100%); max-height: 70dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--lm-panel); border: var(--lm-hair); border-radius: var(--lm-r); box-shadow: var(--lm-shadow-lg); overflow: hidden; translate: 0 -8px; transition: translate var(--lm-mid) var(--lm-ease); } .lm-palette.is-open .lm-palette__box { translate: 0 0; } .lm-palette__head { display: flex; align-items: center; gap: 0.625rem; padding: var(--lm-sp-4) var(--lm-sp-5) var(--lm-sp-3); } .lm-palette__slash { font-family: var(--lm-pixel); color: var(--lm-gold); font-size: 1rem; } .lm-palette__input { flex: 1; min-width: 0; background: none; border: 0; color: var(--lm-text); font: inherit; font-size: 1rem; } .lm-palette__input:focus { outline: none; } .lm-palette__list { overflow-y: auto; padding: 0.375rem; } .lm-palette__item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; width: 100%; padding: 0.5rem; border: 0; border-radius: var(--lm-r-sm); background: none; color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; } .lm-palette__item:hover, .lm-palette__item.is-active { background: var(--lm-elev-2); } .lm-palette__item img { width: 2.5rem; height: 2.5rem; object-fit: contain; image-rendering: pixelated; } .lm-palette__price { display: flex; align-items: baseline; gap: 0.4375rem; white-space: nowrap; } .lm-kbd { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.3125rem; border: var(--lm-hair); border-bottom-width: 2px; border-radius: 4px; background: var(--lm-elev-2); font-family: var(--lm-pixel); font-size: 0.5625rem; color: var(--lm-dim); } .lm-toasts { position: fixed; top: 1rem; right: 1rem; z-index: var(--lm-z-toast); display: grid; gap: 0.5rem; justify-items: end; pointer-events: none; } .lm-adv { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: 0.75rem; width: min(21rem, calc(100vw - 2rem)); padding: 0.625rem; background: rgb(10 12 20 / 0.94); border: 2px solid color-mix(in oklab, var(--r, var(--lm-good)) 70%, transparent); border-radius: var(--lm-r-sharp); box-shadow: var(--lm-shadow-lg); animation: lm-adv-in 420ms var(--lm-ease) both; } .lm-adv.is-out { animation: lm-adv-out 320ms var(--lm-ease) both; } .lm-adv__ico { display: grid; place-items: center; width: 3rem; height: 3rem; background: var(--lm-sunken); border-radius: var(--lm-r-sharp); box-shadow: var(--lm-bevel-in); } .lm-adv__ico img { width: 70%; image-rendering: pixelated; } .lm-adv__kind { font-family: var(--lm-pixel); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--r, var(--lm-good)); } .lm-adv__title { font-size: 0.875rem; font-weight: 600; line-height: 1.3; } .lm-cart { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; padding: 1rem; gap: 0.875rem; } .lm-cart__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .lm-cart__list { overflow-y: auto; display: grid; gap: 0.5rem; padding: 0.25rem; align-content: start; } .lm-cart__item { --cart-art: 4.75rem; display: grid; grid-template-columns: var(--cart-art) minmax(0, 1fr) auto; gap: 0.875rem; align-items: center; padding: 0.625rem; border-radius: var(--lm-r-sm); background: var(--lm-elev-1); border: var(--lm-hair); } .lm-cart__thumb { display: grid; place-items: center; width: var(--cart-art); height: var(--cart-art); padding: 0; border: 1px solid color-mix(in oklab, var(--r) 34%, var(--lm-line)); border-radius: var(--lm-r-sm); background: radial-gradient(120% 120% at 50% 0%, color-mix(in oklab, var(--r) 20%, transparent), transparent 70%), var(--lm-elev-2); cursor: pointer; transition: background-color var(--lm-fast) linear, border-color var(--lm-fast) linear, translate var(--lm-fast) var(--lm-ease); } .lm-cart__thumb:hover { border-color: color-mix(in oklab, var(--r) 70%, transparent); translate: 0 -1px; } .lm-cart__thumb img { width: 74%; height: 74%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.5)); } .lm-cart__cap { display: inline-flex; align-items: center; gap: 0.3125rem; font-family: var(--lm-pixel); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lm-dim); } .lm-cart__cap svg { flex: none; opacity: 0.85; } .lm-cart__price { display: grid; justify-items: end; gap: 1px; } .lm-qty button[disabled] { opacity: 0.35; cursor: not-allowed; } .lm-cart__name { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 0.9375rem; font-weight: 700; line-height: 1.25; text-align: start; cursor: pointer; } .lm-cart__name:hover { color: var(--lm-gold); } .lm-cart__tier { line-height: 1; } .lm-cart .lm-cart__item { --cart-art: 3.25rem; } .lm-cart__foot { display: grid; gap: var(--lm-sp-4); padding-top: var(--lm-sp-6); } .lm-total { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .lm-total__val { font-size: 1.375rem; font-weight: 800; color: var(--lm-gold); } .lm-inline-note { display: flex; align-items: center; gap: 0.375rem; } .lm-inline-note > svg { flex: none; } .lm-inline-note > span { min-width: 0; } .lm-inline-note--center { justify-content: center; text-align: center; } .lm-checkout__head { display: grid; gap: 0.75rem; justify-items: start; } .lm-checkout__back { justify-self: start; } .lm-hero--bare .lm-hero__banner { border-radius: inherit; } .lm-checkout__side { display: flex; flex-direction: column; gap: var(--lm-gap-card); } .lm-checkout__summary { margin-top: auto; } .lm-checks { display: grid; gap: 0.375rem; list-style: none; padding: 0; margin: 0; } .lm-checks li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; color: var(--lm-dim); } .lm-checks svg { flex: none; color: var(--lm-good); } .lm-goal { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.25rem; height: 100%; } .lm-goal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .lm-goal__body { display: grid; gap: clamp(0.875rem, 2vw, 1.25rem); align-content: center; } .lm-goal__bar { gap: 0.5rem; } .lm-goal__figure { display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; } .lm-goal__pct { font-size: clamp(2.75rem, 8vw, 4.5rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; color: var(--lm-gold); text-shadow: 0 0 32px color-mix(in oklab, var(--lm-gold) 35%, transparent); } .lm-goal__target { font-size: 0.9375rem; color: var(--lm-dim); } .lm-goal__target b { color: var(--lm-text); font-weight: 700; } .lm-donor { display: grid; gap: var(--lm-gap-card); height: 100%; align-content: start; } .lm-donor__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .lm-donor__rank { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.3125rem 0.5625rem; border: 1px solid color-mix(in oklab, var(--r) 55%, transparent); border-radius: 99px; background: color-mix(in oklab, var(--r) 16%, transparent); color: var(--r); font-size: 0.875rem; font-weight: 800; font-variant-numeric: tabular-nums; } .lm-donor__card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(0.875rem, 2vw, 1.25rem); } .lm-donor__medal { position: relative; display: grid; place-items: end center; width: 9.5rem; height: 13.25rem; padding: 1rem 0.5rem 1.125rem; flex: none; border-radius: var(--lm-r); background: radial-gradient(70% 45% at 50% 92%, color-mix(in oklab, var(--r) 30%, transparent), transparent 70%), linear-gradient(180deg, transparent, color-mix(in oklab, var(--r) 10%, transparent)); } .lm-donor__glow { position: absolute; bottom: 0.625rem; left: 50%; translate: -50% 0; width: 66%; height: 1rem; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--r) 60%, transparent), transparent); filter: blur(1px); animation: lm-float-shadow 6.5s var(--lm-ease-in-out) infinite; } .lm-donor__body { position: relative; z-index: 2; width: auto; max-width: 82%; height: 10.75rem; object-fit: contain; object-position: bottom; image-rendering: pixelated; filter: drop-shadow(0 12px 16px rgb(0 0 0 / 0.55)); animation: lm-hover 6.5s var(--lm-ease-in-out) infinite; } .lm-donor__ring { position: absolute; inset: 0; border-radius: var(--lm-r); padding: 2px; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); background: linear-gradient(112deg, color-mix(in oklab, var(--r) 28%, transparent) 0%, color-mix(in oklab, var(--r) 85%, transparent) 34%, color-mix(in oklab, #fff 62%, var(--r)) 50%, color-mix(in oklab, var(--r) 85%, transparent) 66%, color-mix(in oklab, var(--r) 28%, transparent) 100%); background-size: 280% 100%; animation: lm-frame-sheen 7s var(--lm-ease-in-out) infinite; } @keyframes lm-frame-sheen { 0% { background-position: 140% 50%; } 100% { background-position: -140% 50%; } } .lm-donor__crown { position: absolute; top: -0.5rem; display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--r) 60%, transparent); background: color-mix(in oklab, var(--r) 24%, var(--lm-elev-2)); color: var(--r); } .lm-donor__who { display: grid; gap: 0.25rem; min-width: 0; } .lm-donor__name { font-size: 1.0625rem; color: color-mix(in oklab, var(--r) 82%, #fff); margin: 0; } .lm-donor__amount { font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 800; color: var(--lm-gold); line-height: 1; margin: 0; } .lm-donor__period { font-family: var(--lm-pixel); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lm-dim); } .lm-sales { display: grid; gap: var(--lm-gap-card); } .lm-ticker { display: flex; gap: 0.625rem; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); } .lm-ticker__track { display: flex; gap: 0.625rem; padding-inline-end: 0.625rem; width: max-content; animation: lm-marquee var(--dur, 40s) linear infinite; } .lm-ticker:hover .lm-ticker__track, .lm-ticker:focus-within .lm-ticker__track { animation-play-state: paused; } .lm-ticker__track[data-lm-still] { animation: none; } .lm-ticker:has(.lm-ticker__track[data-lm-still]) { mask-image: none; } .lm-sale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; flex: none; width: 17rem; padding: 0.625rem 0.875rem; background: linear-gradient(180deg, var(--lm-elev-2), var(--lm-elev-1)); border: var(--lm-hair); border-radius: var(--lm-r); box-shadow: var(--lm-shadow-sm), var(--lm-bevel-out); } .lm-sale > *:not(.lm-rframe-sheen) { position: relative; z-index: 1; } .lm-sale[data-rarity]:not([data-rarity=""]) .lm-sale__price { color: color-mix(in oklab, var(--r) 55%, var(--lm-gold)); } .lm-sale[data-rarity]:not([data-rarity=""]) .lm-sale__what { color: color-mix(in oklab, var(--r) 70%, #fff); } .lm-sale__face { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; } .lm-sale__face img { width: 100%; height: 100%; border-radius: 4px; image-rendering: pixelated; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.45)); } .lm-sale__body { display: grid; gap: 1px; min-width: 0; } .lm-sale__who { font-size: 0.8125rem; font-weight: 700; } .lm-sale__what { font-size: 0.6875rem; color: var(--lm-dim); } .lm-sale__price { font-size: 0.9375rem; font-weight: 800; color: var(--lm-gold); } /* Nombre con salto de rango: «Celestial ▸ Eterno». La flecha se dibuja, no se escribe, para que se vea igual con cualquier tipografía. */ .lm-sale__what[data-lm-upgrade] { display: flex; align-items: center; gap: 0.55em; min-width: 0; } .lm-sale__rank { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lm-sale__step { flex: none; width: 0.42em; height: 0.42em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; rotate: 45deg; /* La caja rotada 45° “sobresale” por las esquinas; este margen la recentra entre los dos nombres. */ margin-inline: 0.08em; opacity: 0.8; color: color-mix(in oklab, var(--r, currentColor) 70%, currentColor); } .lm-sale[data-rarity]:not([data-rarity=""]) .lm-sale__rank:last-child { color: color-mix(in oklab, var(--r) 78%, #fff); } .lm-welcome { display: grid; gap: var(--lm-gap-card); grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; } .lm-about { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); padding: clamp(1.5rem, 4vw, 3rem); } .lm-welcome .lm-about { padding: var(--lm-pad-panel); align-content: start; } .lm-welcome .lm-about__facts { grid-template-columns: minmax(0, 1fr); } .lm-welcome .lm-fact { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.125rem; padding: 0.75rem 0.875rem; } .lm-welcome .lm-fact__ico { grid-row: 1 / span 2; } .lm-about__head { display: flex; align-items: center; gap: 1rem; } .lm-about__mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; flex: none; border-radius: var(--lm-r); background: linear-gradient(150deg, color-mix(in oklab, var(--lm-gold) 26%, transparent), transparent); border: 1px solid color-mix(in oklab, var(--lm-gold) 40%, transparent); color: var(--lm-gold); } .lm-about__mark svg path { fill: currentColor; } .lm-about__title { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0; } .lm-about__body { font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.75; max-width: 68ch; color: color-mix(in oklab, var(--lm-text) 88%, transparent); } .lm-about__body > :first-child { font-size: 1.08em; color: var(--lm-text); } .lm-about__body p { margin-block: 0.75em; } .lm-about__body > :first-child { margin-block-start: 0; } .lm-about__body > :last-child { margin-block-end: 0; } .lm-about__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem; } .lm-fact { display: grid; gap: 0.375rem; padding: 1rem; border: var(--lm-hair); border-radius: var(--lm-r-sm); background: var(--lm-sunken); } .lm-fact__ico { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--lm-r-sm); background: color-mix(in oklab, var(--lm-gold) 14%, transparent); color: var(--lm-gold); } .lm-fact b { font-size: 0.9375rem; } .lm-fact span:last-child { font-size: 0.8125rem; color: var(--lm-dim); line-height: 1.55; } .lm-faq { display: grid; gap: var(--lm-gap-inline); } .lm-faq--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-content: start; } .lm-faq__item { border: var(--lm-hair); border-radius: var(--lm-r-sm); background: var(--lm-elev-1); overflow: hidden; align-self: start; } .lm-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 0.875rem 1rem; border: 0; background: none; color: inherit; font: inherit; font-size: 0.9375rem; font-weight: 600; text-align: start; cursor: pointer; } .lm-faq__q span:last-child { font-family: var(--lm-pixel); color: var(--lm-gold); transition: rotate var(--lm-mid) var(--lm-ease); } .lm-faq__item[open] .lm-faq__q span:last-child, .lm-faq__q[aria-expanded="true"] span:last-child { rotate: 45deg; } .lm-faq__a { padding: 0 1rem 1rem; } .lm-perks { display: grid; gap: 0.125rem; } .lm-perk { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: start; gap: 0.625rem; padding: 0.4375rem 0.5rem; border-radius: var(--lm-r-sm); font-size: 0.875rem; line-height: 1.55; transition: background-color var(--lm-fast) linear; } .lm-perk:hover { background: color-mix(in oklab, var(--r, var(--lm-gold)) 9%, transparent); } .lm-perk__ico { width: 1.25rem; height: 1.25rem; object-fit: contain; image-rendering: pixelated; margin-top: 0.125rem; } .lm-perk__bullet { display: grid; place-items: center; margin-top: 0.4375rem; } .lm-perk__bullet::before { content: ""; width: 6px; height: 6px; rotate: 45deg; background: var(--r, var(--lm-gold)); opacity: 0.9; } .lm-perk--sub { grid-template-columns: 1rem minmax(0, 1fr); padding-inline-start: 1.75rem; font-size: 0.8125rem; color: color-mix(in oklab, var(--lm-text) 82%, transparent); } .lm-perk--sub .lm-perk__bullet::before { width: 4px; height: 4px; background: var(--r, var(--lm-gold)); opacity: 0.7; } .lm-perk strong { color: var(--lm-text); font-weight: 700; } .lm-perk img { vertical-align: -0.2em; image-rendering: pixelated; } .lm-perk-group { display: grid; gap: 0.375rem; } .lm-perk-group__head { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.5rem 0.375rem; border-bottom: var(--lm-hair); margin-bottom: 0.25rem; } .lm-perk-group__head img { width: 1.5rem; height: 1.5rem; image-rendering: pixelated; } .lm-perk-group__head h4 { margin: 0; font-family: var(--lm-pixel); font-size: 0.75rem; letter-spacing: 0.06em; } .lm-cmds { display: grid; gap: 0.375rem; } .lm-cmd { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.75rem; padding: 0.5rem 0.625rem; border-radius: var(--lm-r-sm); background: color-mix(in oklab, var(--r, var(--lm-gold)) 7%, transparent); border: 1px solid color-mix(in oklab, var(--r, var(--lm-gold)) 22%, var(--lm-line)); font-size: 0.8125rem; } .lm-cmd__key { font-size: 0.8125rem; font-weight: 700; color: color-mix(in oklab, var(--r, var(--lm-gold)) 88%, #fff); background: color-mix(in oklab, var(--r, var(--lm-gold)) 16%, transparent); border: 1px solid color-mix(in oklab, var(--r, var(--lm-gold)) 40%, transparent); border-radius: var(--lm-r-sharp); padding: 0.1875rem 0.4375rem; white-space: nowrap; } .lm-cmd__what { color: color-mix(in oklab, var(--lm-text) 84%, transparent); } .lm-note { --lm-note-tint: var(--lm-bolt); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.625rem; padding: 0.75rem 0.875rem; border-radius: var(--lm-r-sm); background: color-mix(in oklab, var(--lm-note-tint) 9%, transparent); border: 1px solid color-mix(in oklab, var(--lm-note-tint) 32%, transparent); font-size: 0.8125rem; color: color-mix(in oklab, var(--lm-text) 86%, transparent); } .lm-note--muted { --lm-note-tint: var(--lm-line); background: color-mix(in oklab, var(--lm-elev-2) 70%, transparent); border-color: var(--lm-line); color: var(--lm-dim); } .lm-note--muted .lm-note__ico { color: var(--lm-dim); } .lm-flash { position: fixed; z-index: var(--lm-z-toast); top: max(0.75rem, env(safe-area-inset-top)); left: 50%; translate: -50% -0.5rem; width: min(34rem, calc(100vw - 1.5rem)); opacity: 0; transition: opacity var(--lm-mid) linear, translate var(--lm-mid) var(--lm-ease); } .lm-flash.is-open { opacity: 1; translate: -50% 0; } .lm-flash__card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; background: color-mix(in oklab, var(--lm-good) 14%, var(--lm-panel)); box-shadow: var(--lm-shadow-lg); backdrop-filter: blur(10px); } .lm-flash .lm-note--danger { background: color-mix(in oklab, var(--lm-danger) 16%, var(--lm-panel)); } .lm-note--good { --lm-note-tint: var(--lm-good); } .lm-note--danger { --lm-note-tint: var(--lm-danger); } .lm-note--caution { --lm-note-tint: var(--lm-amber); } .lm-note--gold { --lm-note-tint: var(--lm-gold); } .lm-note__ico { display: inline-flex; font-family: var(--lm-pixel); color: var(--lm-note-tint); } .lm-note__ico svg { width: 1rem; height: 1rem; } .lm-mnote__body b { color: color-mix(in oklab, var(--lm-note-tint) 70%, var(--lm-text)); } .lm-options { max-width: 44rem; margin-inline: auto; width: 100%; } .lm-optfield { align-items: start; padding: 0.875rem 1rem; font-size: 0.875rem; } .lm-optfield__body { display: grid; gap: 0.4375rem; min-width: 0; } .lm-optfield__body > b { font-size: 0.9375rem; color: var(--lm-text); } .lm-optfield__body > .lm-btn { justify-self: start; max-width: 100%; white-space: normal; text-align: start; } .lm-optfield .lm-note__ico { padding-top: 0.125rem; } .lm-optfield .lm-note__ico svg { width: 1.125rem; height: 1.125rem; } .lm-optpkg { --lm-note-tint: var(--r); align-items: center; padding: 0.75rem 1rem; } .lm-optpkg[data-rarity=""] { --lm-note-tint: var(--lm-gold); } .lm-optpkg__id { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .lm-optpkg__ico { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: var(--lm-r-sm); border: 1px solid color-mix(in oklab, var(--r) 34%, var(--lm-line)); background: radial-gradient(120% 120% at 50% 0%, color-mix(in oklab, var(--r) 20%, transparent), transparent 70%), var(--lm-elev-2); box-shadow: var(--lm-bevel-out); } .lm-optpkg__ico img { width: 74%; height: 74%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.5)); } .lm-optpkg__ico svg { width: 1.375rem; height: 1.375rem; } .lm-optpkg__body { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; } .lm-optpkg__name { font-size: 1.0625rem; font-weight: 700; color: var(--lm-text); } .lm-optpkg__price { font-size: 1.25rem; font-weight: 800; color: var(--lm-gold); } .lm-enchants { display: flex; flex-wrap: wrap; gap: 0.375rem; } .lm-ench { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; border-radius: var(--lm-r-sharp); background: linear-gradient(180deg, color-mix(in oklab, #a06bff 22%, transparent), color-mix(in oklab, #6a3bd6 12%, transparent)); border: 1px solid color-mix(in oklab, #a06bff 40%, transparent); color: #ddd0ff; font-size: 0.75rem; } .lm-ench b { font-family: var(--lm-pixel); font-size: 0.6875rem; color: #fff; } .lm-legacy { font-size: 0.875rem; line-height: 1.65; color: color-mix(in oklab, var(--lm-text) 84%, transparent); } .lm-legacy img { image-rendering: pixelated; max-width: 100%; height: auto; } .lm-legacy a { color: var(--lm-bolt); } .lm-legacy strong { color: var(--lm-text); } @keyframes lm-drift { to { background-position: 340px 340px, -420px 420px, 300px -300px, -500px -500px, 380px 380px; } } @keyframes lm-ping { 0% { scale: 1; opacity: 0.7; } 100% { scale: 2.6; opacity: 0; } } @keyframes lm-spin { to { rotate: 360deg; } } @keyframes lm-tier-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } @keyframes lm-sheen { 0% { translate: -120% 0; opacity: 0.9; } 100% { translate: 120% 0; opacity: 0; } } @keyframes lm-shine { to { background-position: -250% 0; } } @keyframes lm-glint { 0% { background-position: 200% 0; } 100% { background-position: -60% 0; } } @keyframes lm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } @keyframes lm-hover { 0%, 100% { translate: 0 3px; } 50% { translate: 0 -7px; } } @keyframes lm-float-shadow { 0%, 100% { scale: 1; opacity: 0.55; } 50% { scale: 0.86; opacity: 0.3; } } @keyframes lm-breathe { 0%, 100% { scale: 1; opacity: 0.75; } 50% { scale: 1.05; opacity: 1; } } /* La misma respiración, pero sin crecer: la usa lo que vive dentro de una caja que puede desplazarse, donde un `scale` mayor que 1 se convierte en contenido que no cabe y saca una barra de desplazamiento. */ @keyframes lm-breathe-still { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } @keyframes lm-kenburns { from { scale: 1.04; translate: 0 0; } to { scale: 1.14; translate: -1% -2%; } } @keyframes lm-rise { 0% { translate: 0 0; opacity: 0; } 12% { opacity: 0.9; } 100% { translate: var(--dx, 12px) calc(var(--rise, 280px) * -1); opacity: 0; } } @keyframes lm-sweep { 0% { translate: -110% 0; } 55%, 100% { translate: 320% 0; } } @keyframes lm-marquee { to { translate: -50% 0; } } @keyframes lm-fade-up { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } } @keyframes lm-adv-in { from { opacity: 0; translate: 0 -140%; } to { opacity: 1; translate: 0 0; } } @keyframes lm-adv-out { to { opacity: 0; translate: 0 -140%; } } @keyframes lm-pop { 0% { scale: 1; } 40% { scale: 1.16; } 100% { scale: 1; } } @keyframes lm-shake { 0%, 100% { translate: 0 0; } 25% { translate: -3px 0; } 75% { translate: 3px 0; } } .lm-particle { position: fixed; z-index: var(--lm-z-toast); width: 6px; height: 6px; pointer-events: none; background: var(--r, var(--lm-gold)); animation: lm-burst var(--dur, 620ms) var(--lm-ease-in-out) forwards; } @keyframes lm-burst { 0% { translate: 0 0; opacity: 1; scale: 1; } 100% { translate: var(--dx, 0) var(--dy, -40px); opacity: 0; scale: 0.4; } } .lm-pop { animation: lm-pop 320ms var(--lm-ease); } .lm-shake { animation: lm-shake 260ms linear; } @media (max-width: 1180px) { .lm-explorer { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; grid-template-areas: "head" "aside" "tabs" "content"; } .lm-explorer__aside { border-inline-end: 0; border-block: var(--lm-hair); overflow: visible; padding: 1rem; } .lm-explorer__showcase { flex: none; } .lm-explorer__pedestal { width: min(60%, 11rem); } .lm-explorer__head { padding-bottom: 0.25rem; } .lm-explorer__content { overflow: visible; min-height: 0; scrollbar-gutter: auto; } #lm-package-body { height: auto; max-height: min(92dvh, 60rem); overflow-y: auto; } .lm-dialog--explorer { max-height: min(92dvh, 60rem); } } @media (max-width: 1023px) { .lm-topbar__tools[data-lm-nav-elsewhere] .lm-iconbtn--search { display: none; } } @media (min-width: 1024px) { .mc-hotbar { display: none; } .lm-lg-hide { display: none !important; } } @media (max-width: 1023px) { .lm-shell:has(.mc-hotbar--bottom) .lm-main { padding-bottom: 6.5rem; } } @media (max-width: 1279px) { .lm-md-hide { display: none !important; } } @media (max-width: 767px) { :root { --lm-slot: 44px; } .mc-hotbar--top { top: 5.25rem; } .mc-row { grid-template-columns: repeat(var(--cols-m, var(--cols, 7)), var(--lm-slot)); } .mc-inv { --cols: 5; } .lm-toolbar { padding: var(--lm-gap-inline); } .lm-sm-hide { display: none !important; } .lm-xs-only { display: inline-flex !important; } } @media (max-width: 400px) { .mc-inv { --cols: 4; } .mc-hotbar--bottom .mc-hotbar__slot { width: 3.25rem; } } @media (hover: none) { .lm-card:hover { translate: 0 0; } .lm-card:hover .lm-card__item { scale: 1; rotate: 0deg; } .lm-iconbtn:hover:not(:active) { translate: 0 0; border-color: var(--lm-line); color: inherit; } .lm-iconbtn--gold:hover:not(:active) { filter: none; border-color: transparent; } .lm-btn--ghost:hover:not(:active) { color: var(--lm-dim); --btn-bg: transparent; } .lm-account:hover:not(:active) { background: transparent; } .lm-account:hover:not(:active) .lm-account__skin { filter: none; } .lm-account:hover:not(:active) .lm-account__badge { opacity: 0; scale: 0.6; rotate: -12deg; } .lm-account:hover:not(:active) .lm-account__meta-ico { opacity: 0; translate: -0.375rem 0; } .lm-account:hover:not(:active) .lm-account__meta-word { translate: -0.875rem 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .lm-root::after { animation: none; } } @media (prefers-contrast: more) { .lm-root::after { display: none; } .lm-panel { border-color: color-mix(in oklab, var(--lm-line) 100%, #fff 25%); } .lm-body, .lm-small { color: var(--lm-text); } } @media print { .mc-hotbar, .lm-topbar, .lm-toasts, .lm-palette { display: none !important; } .lm-root::after { display: none; } } dialog.lm-dialog, dialog.lm-drawer { border: 0; color: var(--lm-text); } dialog.lm-dialog { position: fixed; inset: 0; margin: auto; } dialog.lm-dialog::backdrop, dialog.lm-drawer::backdrop { background: rgb(3 5 10 / 0.72); backdrop-filter: blur(6px); animation: lm-backdrop-in var(--lm-mid) var(--lm-ease) both; } dialog.lm-dialog[open] { animation: lm-dialog-in var(--lm-mid) var(--lm-ease) both; } dialog.lm-drawer { position: fixed; inset: 0 0 0 auto; width: min(26rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; background: var(--lm-panel); border-inline-start: var(--lm-hair); box-shadow: var(--lm-shadow-lg); overflow: hidden; } dialog.lm-drawer[open] { animation: lm-drawer-in var(--lm-mid) var(--lm-ease) both; } dialog.lm-drawer--start { inset: 0 auto 0 0; border-inline-start: 0; border-inline-end: var(--lm-hair); } dialog.lm-drawer--start[open] { animation: lm-drawer-in-start var(--lm-mid) var(--lm-ease) both; } .lm-drawer__inner { display: flex; flex-direction: column; height: 100%; padding: 1rem; gap: 0.875rem; } .lm-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } @keyframes lm-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes lm-dialog-in { from { opacity: 0; scale: 0.97; translate: 0 10px; } to { opacity: 1; scale: 1; translate: 0 0; } } @keyframes lm-drawer-in { from { translate: 100% 0; } to { translate: 0 0; } } @keyframes lm-drawer-in-start { from { translate: -100% 0; } to { translate: 0 0; } } .lm-rail { display: grid; grid-auto-flow: column; grid-auto-columns: var(--rail-item, minmax(14rem, 1fr)); gap: 0.75rem; margin-block: -0.75rem 0; padding-block: 0.75rem 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: thin; } .lm-rail > * { scroll-snap-align: start; } .lm-rail::-webkit-scrollbar { height: 8px; } .lm-rail::-webkit-scrollbar-thumb { background: var(--lm-line); border-radius: 99px; } .lm-rail--tight { --rail-item: minmax(11rem, 1fr); } [data-lm-grid][data-view="list"] { display: flex; flex-direction: column; gap: 0.5rem; } [data-lm-grid][data-view="list"] > * { width: 100%; } [data-lm-grid] > [hidden] { display: none !important; } [data-lm-grid][data-view="list"] .lm-card { --row-ico: 3.5rem; display: grid; grid-template-columns: var(--row-ico) minmax(0, 1fr); align-items: center; gap: 0.875rem; padding: 0.5rem 0.75rem; border-radius: var(--lm-r-sm); border-inline-start: 3px solid var(--r); background: linear-gradient(90deg, color-mix(in oklab, var(--r) 15%, var(--lm-elev-1)), var(--lm-elev-1) 55%); } [data-lm-grid][data-view="list"] .lm-card:hover { translate: 0 -1px; } [data-lm-grid][data-view="list"] .lm-card__stage { width: var(--row-ico); height: var(--row-ico); aspect-ratio: auto; padding: 0; border-radius: var(--lm-r-sm); background: color-mix(in oklab, var(--r) 12%, var(--lm-sunken)); box-shadow: var(--lm-bevel-in); } [data-lm-grid][data-view="list"] .lm-card__stage::before, [data-lm-grid][data-view="list"] .lm-card__stage::after, [data-lm-grid][data-view="list"] .lm-card__shadow, [data-lm-grid][data-view="list"] .lm-card__flags, [data-lm-grid][data-view="list"] .lm-card__peek, [data-lm-grid][data-view="list"] .lm-rframe-sheen { display: none; } [data-lm-grid][data-view="list"] .lm-card__item { width: 70%; height: 70%; animation: none; scale: 1; rotate: 0deg; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 0.5)); } [data-lm-grid][data-view="list"] .lm-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "id price act"; align-items: center; gap: 0.875rem; padding: 0; border-top: 0; background: none; } [data-lm-grid][data-view="list"] .lm-card__id { grid-area: id; } [data-lm-grid][data-view="list"] .lm-card__meta { grid-area: price; } [data-lm-grid][data-view="list"] .lm-card__foot { grid-area: act; flex: none; } [data-lm-grid][data-view="list"] .lm-card__name { -webkit-line-clamp: 1; } [data-lm-grid][data-view="list"] .lm-card__rarity { display: block; } [data-lm-grid][data-view="list"] .lm-card__foot .lm-btn { flex: none; width: auto; min-height: 2.25rem; } [data-lm-grid][data-view="list"] .lm-price { flex-direction: row; } [data-lm-grid][data-view="list"] .lm-price__was { order: -1; } [data-lm-grid][data-view="list"] .lm-actions { width: auto; } [data-lm-grid][data-view="list"] .lm-actions__buy { flex: none; } [data-lm-grid][data-view="list"] .lm-card__foot .lm-actions__gift, [data-lm-grid][data-view="list"] .lm-card__foot .lm-actions__info { flex: 0 0 auto; width: 2.25rem; padding: 0; } .lm-promo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--lm-gap-card); padding: var(--lm-pad-panel); overflow: hidden; border: 1px solid color-mix(in oklab, var(--lm-gold) 40%, var(--lm-line)); border-radius: var(--lm-r-lg); background: linear-gradient(115deg, color-mix(in oklab, var(--lm-gold) 14%, transparent), transparent 42%), linear-gradient(180deg, var(--lm-elev-2), var(--lm-elev-1)); box-shadow: var(--lm-shadow-sm), var(--lm-bevel-out); } .lm-promo__glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .lm-promo__glow::after { content: ""; position: absolute; top: -25%; bottom: -25%; left: 0; width: 34%; rotate: 8deg; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--lm-gold) 20%, transparent) 50%, transparent); animation: lm-sweep 5.5s linear infinite; } .lm-promo > *:not(.lm-promo__glow) { position: relative; } .lm-promo__mark { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex: none; border-radius: var(--lm-r); background: color-mix(in oklab, var(--lm-gold) 18%, transparent); border: 1px solid color-mix(in oklab, var(--lm-gold) 45%, transparent); color: var(--lm-gold); } .lm-promo__mark svg path { fill: currentColor; } .lm-promo__copy { display: grid; gap: 0.25rem; min-width: 0; } .lm-promo__title { font-size: clamp(1.0625rem, 2.2vw, 1.375rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; margin: 0; } .lm-promo__text { font-size: 0.875rem; color: var(--lm-dim); margin: 0; } .lm-promo__timer { display: grid; gap: 0.375rem; justify-items: center; } .lm-promo__timer-label { display: flex; align-items: center; gap: 0.375rem; margin: 0; font-family: var(--lm-pixel); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--lm-dim); } .lm-promo__units { display: flex; align-items: flex-start; gap: 0.25rem; } .lm-promo__unit { display: grid; justify-items: center; gap: 2px; min-width: 3rem; padding: 0.375rem 0.375rem 0.3125rem; border-radius: var(--lm-r-sm); background: var(--lm-sunken); border: var(--lm-hair); box-shadow: var(--lm-bevel-in); } .lm-promo__unit b { font-size: 1.375rem; font-weight: 800; line-height: 1; letter-spacing: -0.01em; color: var(--lm-gold); font-variant-numeric: tabular-nums; } .lm-promo__unit i { font-style: normal; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lm-dim); } .lm-promo__sep { align-self: center; color: var(--lm-dim); font-family: var(--lm-pixel); } .lm-promo__cta { flex: none; } .lm-modebtn, .lm-modetile { --lit: var(--lm-gold); position: relative; border: var(--lm-hair); border-radius: var(--lm-r-sm); background: var(--lm-elev-1); color: inherit; font: inherit; text-decoration: none; cursor: pointer; transition: translate var(--lm-fast) var(--lm-ease), border-color var(--lm-fast) linear, background-color var(--lm-fast) linear, color var(--lm-fast) linear, box-shadow var(--lm-fast) linear; } .lm-modebtn:hover, .lm-modebtn:focus-visible, .lm-modebtn:active, .lm-modetile:hover, .lm-modetile:focus-visible, .lm-modetile:active { translate: 0 -2px; border-color: var(--lit); background: color-mix(in oklab, var(--lit) 14%, var(--lm-elev-2)); color: var(--lit); box-shadow: 0 0 0 1px color-mix(in oklab, var(--lit) 45%, transparent), 0 10px 26px -16px var(--lit); } .lm-modebtn:active, .lm-modetile:active { translate: 0 0; } .lm-modebtn { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.25rem; padding: 0.5rem 0.875rem; font-size: 0.9375rem; font-weight: 600; text-align: start; } .lm-modebtn img { width: 1.75rem; height: 1.75rem; object-fit: contain; image-rendering: pixelated; flex: none; } .lm-modebtn > svg { flex: none; } .lm-modebtn > span { flex: 1 1 auto; min-width: 0; } .lm-modebtn > svg:last-child { opacity: 0; translate: -0.25rem 0; transition: opacity var(--lm-fast) linear, translate var(--lm-fast) var(--lm-ease); } .lm-modebtn:hover > svg:last-child, .lm-modebtn:focus-visible > svg:last-child { opacity: 1; translate: 0 0; } .lm-modetile { display: grid; justify-items: center; gap: 0.5rem; padding: 1rem 0.75rem; text-align: center; } .lm-modetile img { width: 4rem; height: 4rem; object-fit: contain; image-rendering: pixelated; } .lm-modetile__ico { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: var(--lm-r-sm); background: color-mix(in oklab, var(--lm-gold) 14%, transparent); color: var(--lm-gold); } .lm-modetile__name { font-size: 0.9375rem; font-weight: 700; line-height: 1.25; } .lm-catpick { display: grid; gap: var(--lm-gap-card); align-content: start; } .lm-catpick__list { display: grid; gap: var(--lm-gap-inline); align-content: start; } [data-tone] { --r: var(--lm-gold); } [data-tone="blank"] { --r: #cfd6e4; } [data-tone="survival"] { --r: #2fbf5a; } [data-tone="sky"] { --r: #45c9ff; } [data-tone="creative"] { --r: #b47cff; } [data-tone="pvp"] { --r: #ff5a5a; } [data-tone="event"] { --r: #ffc53a; } .lm-catcard { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; padding: 0.75rem 0.875rem; border: 1px solid color-mix(in oklab, var(--r) 34%, transparent); border-radius: var(--lm-r); background: radial-gradient(120% 180% at 0% 0%, color-mix(in oklab, var(--r) 22%, transparent), transparent 62%), linear-gradient(180deg, var(--lm-elev-2), var(--lm-elev-1)); box-shadow: var(--lm-shadow-sm), var(--lm-bevel-out); color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; overflow: hidden; list-style: none; transition: translate var(--lm-fast) var(--lm-ease), border-color var(--lm-fast) linear, box-shadow var(--lm-fast) linear; } .lm-catcard::-webkit-details-marker { display: none; } .lm-catcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, color-mix(in oklab, var(--r) 16%, transparent)); opacity: 0; transition: opacity var(--lm-fast) linear; pointer-events: none; } .lm-catcard:hover, .lm-catcard:focus-visible, .lm-catcard:active { translate: 0 -2px; border-color: color-mix(in oklab, var(--r) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--r) 50%, transparent), 0 14px 30px -18px var(--r), var(--lm-bevel-out); } .lm-catcard:active { translate: 0 0; } .lm-catcard:hover::after, .lm-catcard:focus-visible::after { opacity: 1; } .lm-catcard__ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: var(--lm-r-sm); border: 1px solid color-mix(in oklab, var(--r) 30%, transparent); background: color-mix(in oklab, var(--r) 16%, var(--lm-elev-1)); color: var(--r); } .lm-catcard__ico img { width: 2rem; height: 2rem; object-fit: contain; image-rendering: pixelated; } .lm-catcard__body { display: grid; gap: 1px; min-width: 0; } .lm-catcard__name { font-size: 0.9375rem; font-weight: 700; line-height: 1.3; } .lm-catcard__meta { font-family: var(--lm-pixel); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklab, var(--r) 62%, var(--lm-dim)); } .lm-catcard__go { display: grid; place-items: center; color: color-mix(in oklab, var(--r) 70%, var(--lm-dim)); transition: translate var(--lm-fast) var(--lm-ease), rotate var(--lm-mid) var(--lm-ease); } .lm-catcard:hover .lm-catcard__go, .lm-catcard:focus-visible .lm-catcard__go { translate: 0.25rem 0; } .lm-catfold { display: grid; } .lm-catfold[open] > .lm-catcard { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; } .lm-catfold[open] > .lm-catcard .lm-catcard__go { rotate: 90deg; translate: 0 0; } .lm-catsubs { display: grid; gap: 2px; padding: 0.375rem; border: 1px solid color-mix(in oklab, var(--r) 34%, transparent); border-top: 0; border-radius: 0 0 var(--lm-r) var(--lm-r); background: color-mix(in oklab, var(--r) 7%, var(--lm-elev-1)); } .lm-catfold[open] .lm-catsubs { animation: lm-unfold var(--lm-mid) var(--lm-ease) both; } .lm-catsub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: var(--lm-r-sm); color: var(--lm-dim); text-decoration: none; font-size: 0.875rem; transition: background-color var(--lm-fast) linear, color var(--lm-fast) linear; } .lm-catsub img { width: 1.5rem; height: 1.5rem; object-fit: contain; image-rendering: pixelated; } .lm-catsub > svg:last-child { opacity: 0; translate: -0.25rem 0; transition: opacity var(--lm-fast) linear, translate var(--lm-fast) var(--lm-ease); } .lm-catsub:hover, .lm-catsub:focus-visible { background: color-mix(in oklab, var(--r) 18%, transparent); color: color-mix(in oklab, var(--r) 70%, #fff); } .lm-catsub:hover > svg:last-child, .lm-catsub:focus-visible > svg:last-child { opacity: 1; translate: 0 0; } @media (min-width: 768px) { .lm-sections > .lm-catpick { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem 1.5rem; padding-block: 0.875rem; } .lm-sections > .lm-catpick .lm-catpick__list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; } .lm-sections > .lm-catpick .lm-catfold { position: relative; } .lm-sections > .lm-catpick .lm-catcard { min-width: 13rem; padding-block: 0.5rem; } .lm-sections > .lm-catpick .lm-catcard__ico { width: 2.25rem; height: 2.25rem; } .lm-sections > .lm-catpick .lm-catcard__ico img { width: 1.625rem; height: 1.625rem; } .lm-sections > .lm-catpick .lm-catsubs { position: absolute; top: 100%; inset-inline: 0; z-index: 6; background: color-mix(in oklab, var(--r) 10%, var(--lm-panel)); box-shadow: var(--lm-shadow); } } .lm-catpick__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .lm-catpick__count { color: var(--lm-dim); } .lm-catcard__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--art), repeating-linear-gradient(115deg, transparent 0 14px, color-mix(in oklab, var(--r) 22%, transparent) 14px 15px), repeating-linear-gradient(65deg, transparent 0 20px, color-mix(in oklab, var(--r) 14%, transparent) 20px 21px), radial-gradient(140% 120% at 100% 0%, color-mix(in oklab, var(--r) 30%, transparent), transparent 66%); background-size: 3.25rem 3.25rem, auto, auto, auto; background-position: right -0.5rem bottom -0.5rem, 0 0, 0 0, 0 0; background-repeat: no-repeat, repeat, repeat, no-repeat; image-rendering: pixelated; opacity: 0.5; transition: opacity var(--lm-mid) linear, background-position var(--lm-slow) var(--lm-ease); mask-image: linear-gradient(105deg, #000, transparent 88%); } .lm-catcard:hover .lm-catcard__art, .lm-catfold[open] > .lm-catcard .lm-catcard__art { opacity: 0.85; background-position: right -0.25rem bottom -0.25rem, 0 0, 0 0, 0 0; } .lm-catcard > *:not(.lm-catcard__art) { position: relative; z-index: 1; } @media (min-width: 900px) { .lm-catpick--mosaic .lm-catpick__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; align-items: start; } .lm-catpick--mosaic .lm-catcard { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; justify-items: start; align-content: end; min-height: 11.5rem; padding: 1rem; } .lm-catpick--mosaic .lm-catcard__art { background-size: 5.5rem 5.5rem, auto, auto, auto; background-position: right -0.75rem top 0.75rem, 0 0, 0 0, 0 0; mask-image: linear-gradient(200deg, #000, transparent 92%); opacity: 0.6; } .lm-catpick--mosaic .lm-catcard:hover .lm-catcard__art { opacity: 0.95; } .lm-catpick--mosaic .lm-catcard__ico { width: 3rem; height: 3rem; } .lm-catpick--mosaic .lm-catcard__ico img { width: 2rem; height: 2rem; } .lm-catpick--mosaic .lm-catcard__name { font-size: 1.0625rem; } .lm-catpick--mosaic .lm-catcard__go { position: absolute; top: 0.875rem; right: 0.875rem; } .lm-catpick--mosaic .lm-catfold[open] { grid-column: 1 / -1; } .lm-catpick--mosaic .lm-catfold[open] > .lm-catcard { min-height: 0; } .lm-catpick--mosaic .lm-catsubs { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } .lm-catpick--shelf .lm-catpick__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: start; } .lm-catpick--shelf .lm-catcard { min-height: 5.25rem; } .lm-catpick--shelf .lm-catcard__art { mask-image: linear-gradient(270deg, #000, transparent 72%); opacity: 0.55; } .lm-catpick--shelf .lm-catfold[open] { grid-column: 1 / -1; } } .lm-quick { display: grid; gap: 0.5rem; } .lm-quick__row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .lm-quick__btn { --qk: var(--lm-gold); display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.5rem 0.75rem; border: 1px solid color-mix(in oklab, var(--qk) 30%, var(--lm-line)); border-radius: 99px; background: color-mix(in oklab, var(--qk) 10%, var(--lm-elev-2)); color: var(--lm-text); font: inherit; font-size: 0.8125rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: translate var(--lm-fast) var(--lm-ease), border-color var(--lm-fast) linear; } .lm-quick__btn:hover { translate: 0 -2px; border-color: color-mix(in oklab, var(--qk) 65%, transparent); } .lm-quick__btn svg { width: 1rem; height: 1rem; flex: none; color: var(--qk); } .lm-quick__btn--ghost { --qk: var(--lm-line); } .lm-quick__btn--ghost svg { color: var(--lm-dim); } .lm-quick__btn--discord { --qk: #5865F2; } .lm-quick__row--palette { display: none; padding: var(--lm-sp-3) var(--lm-sp-4) var(--lm-sp-4); } .lm-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); } .lm-brandmark { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding-block: var(--lm-sp-4); background: color-mix(in oklab, var(--lm-bg) 60%, var(--lm-ink) 10%); } .lm-brandmark__glyph { display: inline-flex; color: color-mix(in oklab, var(--lm-gold) 70%, transparent); } .lm-brandmark__text { color: color-mix(in oklab, var(--lm-dim) 85%, transparent); letter-spacing: 0.02em; } .lm-brandmark__text b { color: var(--lm-text); font-weight: 700; } .lm-brandmark__owner { color: var(--lm-gold); text-decoration: none; font-weight: 700; } .lm-brandmark__owner:hover { text-decoration: underline; } @media (max-width: 767px) { .lm-quick__row--palette { display: flex; } } .lm-cathero { position: relative; display: grid; width: 100%; max-width: var(--lm-banner-w); margin-inline: auto; overflow: hidden; border: var(--lm-hair); border-radius: var(--lm-r-lg); background: var(--lm-elev-1); box-shadow: var(--lm-shadow); isolation: isolate; transform: translateZ(0); } .lm-cathero::before { content: ""; grid-area: 1 / 1; width: 100%; padding-top: 16.574%; pointer-events: none; } .lm-cathero__art { position: absolute; inset: 0; z-index: -2; } .lm-cathero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .lm-cathero__img--portrait { display: none; } .lm-cathero__img--placeholder { display: block; background: radial-gradient(120% 140% at 15% -10%, color-mix(in oklab, var(--lm-bolt) 16%, transparent), transparent 65%), radial-gradient(100% 130% at 100% 10%, color-mix(in oklab, var(--lm-gold) 12%, transparent), transparent 65%), var(--lm-elev-1); } .lm-cathero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in oklab, var(--lm-bg) 92%, transparent), transparent 70%); } .lm-cathero__inner { grid-area: 1 / 1; display: grid; align-content: space-between; gap: var(--lm-gap-group); min-height: 100%; padding: var(--lm-pad-page); } .lm-cathero__foot { display: grid; gap: var(--lm-gap-block); justify-items: start; max-width: min(100%, 46rem); } .lm-cathero__title { font-size: clamp(2rem, 5.5vw, 3.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; margin: 0; color: #fff; text-shadow: 0 2px 12px rgb(0 0 0 / 0.55); } .lm-cathero__desc { font-size: 0.9375rem; line-height: 1.7; max-width: 44rem; color: color-mix(in oklab, #fff 78%, transparent); text-shadow: 0 1px 8px rgb(0 0 0 / 0.5); } .lm-cathero__desc p { margin: 0; } .lm-cathero .lm-crumbs a, .lm-cathero .lm-crumbs > span { color: color-mix(in oklab, #fff 76%, transparent); text-shadow: 0 1px 6px rgb(0 0 0 / 0.6); } .lm-cathero .lm-crumbs a:hover { color: #fff; } .lm-cathero .lm-crumbs .is-current { color: var(--lm-gold); } .lm-cathero .lm-badge { text-shadow: 0 1px 6px rgb(0 0 0 / 0.55); box-shadow: 0 1px 8px -4px rgb(0 0 0 / 0.5); } .lm-cathero .lm-badge svg { opacity: 0.9; } .lm-cathero .lm-badge--link:hover { border-color: var(--lm-gold); color: var(--lm-gold); } .lm-crumbs { display: flex; align-items: center; gap: 0.4375rem; font-size: 0.75rem; } .lm-crumbs a { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--lm-dim); text-decoration: none; transition: color var(--lm-fast) linear; } .lm-crumbs a:hover { color: var(--lm-text); } .lm-crumbs > span { color: color-mix(in oklab, var(--lm-dim) 60%, transparent); } .lm-crumbs .is-current { color: var(--lm-gold); font-weight: 600; } .lm-badge--link { text-decoration: none; transition: border-color var(--lm-fast) linear, color var(--lm-fast) linear; } .lm-badge--link:hover { border-color: var(--lm-gold); color: var(--lm-gold); } /* La columna del formulario mide siempre lo mismo (--lm-login-form). Lo único que cambia con el ajuste del panel es el ancho de la imagen de la izquierda, y el diálogo crece o encoge con ella, así que el formulario nunca se deforma. */ .lm-dialog--login { --lm-login-art: 22rem; --lm-login-form: 25rem; width: min(calc(var(--lm-login-art) + var(--lm-login-form)), calc(100vw - 2rem)); max-height: min(92dvh, 52rem); overflow-y: auto; overscroll-behavior: contain; } /* Hereda las dos medidas del diálogo — no las redeclara, o el ajuste del panel dejaría de llegar hasta aquí. */ .lm-loginbox { display: grid; grid-template-columns: minmax(0, var(--lm-login-art, 22rem)) var(--lm-login-form, 25rem); } .lm-loginbox__art { position: relative; min-height: 100%; overflow: hidden; transform: translateZ(0); background: radial-gradient(120% 130% at 15% 0%, color-mix(in oklab, var(--lm-bolt) 20%, transparent), transparent 62%), radial-gradient(110% 120% at 100% 20%, color-mix(in oklab, var(--lm-gold) 16%, transparent), transparent 62%), var(--lm-elev-1); } .lm-loginbox__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .lm-loginbox__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, color-mix(in oklab, var(--lm-panel) 88%, transparent)); } .lm-loginbox__panel { display: grid; align-content: center; gap: 1rem; padding: clamp(1.5rem, 3.5vw, 2.25rem); } .lm-loginbox__head { display: grid; gap: 0.125rem; } .lm-loginbox__title { font-size: clamp(1.375rem, 4vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0; } @media (max-width: 720px) { .lm-dialog--login { width: calc(100vw - 2rem); } .lm-loginbox { grid-template-columns: minmax(0, 1fr); } .lm-loginbox__art { min-height: 8.5rem; } .lm-loginbox__scrim { background: linear-gradient(180deg, transparent 35%, color-mix(in oklab, var(--lm-panel) 90%, transparent)); } } @media (max-height: 560px) { #lm-login { max-height: calc(100dvh - 1rem); overflow-y: auto; } .lm-loginbox__art { min-height: 6rem; } } .lm-footer { margin-top: var(--lm-gap-section); padding-block: clamp(2rem, 4vw, 3.25rem) 0; --lm-bleed-bg: linear-gradient(180deg, transparent, color-mix(in oklab, var(--lm-panel) 55%, transparent)); } .lm-footer__inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 2.5fr); gap: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); } .lm-footer__brand { display: grid; gap: 0.875rem; justify-items: start; align-content: start; } .lm-footer__letters { max-width: min(100%, 18rem); max-height: 5rem; width: auto; height: auto; object-fit: contain; object-position: left center; image-rendering: auto; filter: drop-shadow(0 6px 18px rgb(0 0 0 / 0.55)); } .lm-footer__wordmark { font-family: var(--lm-pixel); font-size: 1.375rem; color: var(--lm-gold); margin: 0; } .lm-footer__pitch { max-width: 34ch; } .lm-footer__social { display: flex; flex-wrap: wrap; gap: 0.5rem; } .lm-social { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: var(--lm-hair); border-radius: var(--lm-r-sm); background: var(--lm-elev-2); color: var(--lm-dim); transition: translate var(--lm-fast) var(--lm-ease), color var(--lm-fast) linear, border-color var(--lm-fast) linear; } .lm-social:hover { translate: 0 -2px; color: var(--lm-gold); border-color: color-mix(in oklab, var(--lm-gold) 50%, var(--lm-line)); } .lm-footer__col { display: grid; gap: 0.5rem; align-content: start; } .lm-footer__label { font-family: var(--lm-pixel); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--lm-gold); margin: 0 0 0.25rem; } .lm-footer__link { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0; border: 0; background: none; color: var(--lm-dim); font: inherit; font-size: 0.875rem; text-align: start; text-decoration: none; cursor: pointer; justify-self: start; transition: color var(--lm-fast) linear, translate var(--lm-fast) var(--lm-ease); } .lm-footer__link:hover { color: var(--lm-text); translate: 2px 0; } .lm-footer__facts { display: grid; gap: 0.625rem; margin: 0; } .lm-footer__facts div { display: grid; gap: 1px; } .lm-footer__facts dt { font-size: 0.6875rem; color: color-mix(in oklab, var(--lm-dim) 80%, transparent); } .lm-footer__facts dd { margin: 0; font-size: 0.875rem; color: var(--lm-text); } .lm-footer__rail { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: var(--lm-sp-5); } .lm-footer__legal { max-width: 44ch; text-align: end; } .lm-tebex-footer { padding-inline: clamp(1rem, 3.5vw, 3rem); } .lm-forge { --lm-forge-tint: var(--lm-gold); display: grid; justify-items: center; align-content: center; gap: 1.25rem; min-height: min(72vh, 34rem); height: 100%; padding: clamp(1.5rem, 5vw, 3rem); } .lm-forge[data-rarity]:not([data-rarity=""]) { --lm-forge-tint: var(--r); } .lm-forge__stage { position: relative; display: grid; place-items: center; width: clamp(9rem, 34vw, 12rem); aspect-ratio: 1; } .lm-forge__ring { position: absolute; inset: 12%; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--lm-forge-tint) 30%, transparent); background: radial-gradient(closest-side, color-mix(in oklab, var(--lm-forge-tint) 12%, transparent), transparent 78%); animation: lm-forge-pulse 3.2s var(--lm-ease-in-out) infinite; } .lm-forge__orbit { position: absolute; inset: 0; animation: lm-forge-orbit 16s linear infinite; } .lm-forge__rune { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 1em; height: 1em; margin: -0.5em; font-family: var(--lm-pixel); font-size: 0.8125rem; line-height: 1; color: color-mix(in oklab, var(--lm-forge-tint) 82%, #fff); text-shadow: 0 0 10px color-mix(in oklab, var(--lm-forge-tint) 55%, transparent); transform: rotate(calc(var(--i) * 45deg)) translateY(calc(var(--lm-forge-r, 4.25rem) * -1)); animation: lm-forge-rune 3.2s var(--lm-ease-in-out) infinite; animation-delay: calc(var(--i) * 140ms); } .lm-forge__cube { position: relative; width: 3.25rem; height: 3.25rem; transform-style: preserve-3d; animation: lm-forge-spin 4.4s var(--lm-ease-in-out) infinite, lm-forge-lift 2.6s var(--lm-ease-in-out) infinite; } .lm-forge__face { position: absolute; inset: 0; border: 1px solid color-mix(in oklab, var(--lm-ink) 45%, transparent); background: var(--lm-forge-tint); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); } .lm-forge__face--top { filter: brightness(1.15); transform: rotateX(90deg) translateZ(1.625rem); } .lm-forge__face--left { filter: brightness(0.72); transform: rotateY(-90deg) translateZ(1.625rem); } .lm-forge__face--right { transform: translateZ(1.625rem); } .lm-forge__anvil { position: absolute; bottom: 16%; left: 50%; margin-left: -1.75rem; width: 3.5rem; height: 0.6rem; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.55), transparent); animation: lm-forge-shadow 2.6s var(--lm-ease-in-out) infinite; } .lm-forge__motes { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; } .lm-forge__mote { position: absolute; bottom: 18%; left: calc(12% + var(--i) * 8%); width: 3px; height: 3px; background: var(--lm-forge-tint); box-shadow: 0 0 8px var(--lm-forge-tint); opacity: 0; animation: lm-forge-mote 2.8s linear infinite; animation-delay: calc(var(--i) * 240ms); } .lm-forge__label { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lm-dim); margin: 0; text-align: center; } .lm-forge__label::after { content: ""; animation: lm-forge-dots 1.6s steps(1, end) infinite; } .lm-forge__bar { width: min(16rem, 70%); height: 8px; border-radius: var(--lm-r-sharp); background: var(--lm-sunken); box-shadow: var(--lm-bevel-in); overflow: hidden; } .lm-forge__bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in oklab, var(--lm-forge-tint) 40%, transparent), var(--lm-forge-tint), color-mix(in oklab, var(--lm-forge-tint) 40%, transparent)); animation: lm-forge-bar 1.5s var(--lm-ease-in-out) infinite; } @keyframes lm-forge-orbit { to { rotate: 360deg; } } @keyframes lm-forge-rune { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @keyframes lm-forge-spin { 0% { transform: rotateX(-24deg) rotateY(-40deg); } 50% { transform: rotateX(-24deg) rotateY(140deg); } 100% { transform: rotateX(-24deg) rotateY(320deg); } } @keyframes lm-forge-lift { 0%, 100% { translate: 0 4px; } 50% { translate: 0 -8px; } } @keyframes lm-forge-shadow { 0%, 100% { scale: 1; opacity: 0.5; } 50% { scale: 0.82; opacity: 0.28; } } @keyframes lm-forge-pulse { 0%, 100% { opacity: 0.55; scale: 0.97; } 50% { opacity: 1; scale: 1.03; } } @keyframes lm-forge-mote { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 1; } 100% { opacity: 0; translate: 0 -5.5rem; } } @keyframes lm-forge-bar { 0% { translate: -110% 0; } 100% { translate: 260% 0; } } @keyframes lm-forge-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } } @media (max-width: 480px) { .lm-forge { min-height: min(52vh, 20rem); gap: 1rem; } .lm-forge__stage { --lm-forge-r: 3.5rem; } .lm-forge__cube { width: 2.75rem; height: 2.75rem; } .lm-forge__face--top { transform: rotateX(90deg) translateZ(1.375rem); } .lm-forge__face--left { transform: rotateY(-90deg) translateZ(1.375rem); } .lm-forge__face--right { transform: translateZ(1.375rem); } .lm-forge__anvil { width: 3rem; margin-left: -1.5rem; } } @media (prefers-reduced-motion: reduce) { .lm-forge__cube { transform: rotateX(-24deg) rotateY(-40deg); } .lm-forge__mote { opacity: 0.6; } .lm-forge__bar i { width: 100%; } } .lm-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.5rem; } .lm-pick__opt { display: grid; justify-items: center; gap: 0.25rem; padding: 0.625rem 0.5rem; border: var(--lm-hair); border-radius: var(--lm-r-sm); background: var(--lm-elev-1); color: inherit; text-decoration: none; transition: border-color var(--lm-fast) linear, background-color var(--lm-fast) linear, translate var(--lm-fast) var(--lm-ease); } .lm-pick__opt:hover { translate: 0 -2px; border-color: color-mix(in oklab, var(--lm-gold) 50%, var(--lm-line)); } .lm-pick__opt[aria-current="true"] { border-color: var(--lm-gold); background: color-mix(in oklab, var(--lm-gold) 12%, var(--lm-elev-1)); } .lm-pick__sym { font-size: 1.125rem; font-weight: 800; color: var(--lm-gold); line-height: 1; } .lm-pick__code { font-family: var(--lm-pixel); font-size: 0.625rem; letter-spacing: 0.08em; color: var(--lm-dim); } @media (max-width: 1100px) { .lm-welcome { grid-template-columns: minmax(0, 1fr); } .lm-footer__inner { grid-template-columns: minmax(0, 1fr); } .lm-footer__brand { grid-column: 1 / -1; } .lm-footer__cols { grid-column: 1 / -1; } } @media (max-width: 900px) { .lm-promo { grid-template-columns: auto minmax(0, 1fr); justify-items: start; } .lm-promo__timer { grid-column: 1 / -1; justify-items: start; } .lm-promo__cta { grid-column: 1 / -1; width: 100%; } .lm-goal__body { justify-items: center; text-align: center; } } @media (max-width: 767px) { .lm-cathero__art:has(.lm-cathero__img--portrait) .lm-cathero__img:not(.lm-cathero__img--portrait) { display: none; } .lm-cathero__img--portrait { display: block; } /* Portada en móvil · «Header Background» (por defecto): manda la imagen vertical si está configurada. Vale también para checkout y opciones, que no llevan el atributo. */ .lm-hero:not([data-mobile-art="hero"]):has(.lm-hero__banner--portrait) .lm-hero__banner:not(.lm-hero__banner--portrait) { display: none; } .lm-hero:not([data-mobile-art="hero"]) .lm-hero__banner--portrait { display: block; aspect-ratio: 16 / 11; } .lm-hero:not([data-mobile-art="hero"]):not(:has(.lm-hero__banner--portrait)) .lm-hero__banner { aspect-ratio: 2.4 / 1; } /* Portada en móvil · «Hero Banner»: manda siempre la panorámica. */ .lm-hero[data-mobile-art="hero"] .lm-hero__banner:not(.lm-hero__banner--portrait) { display: block; aspect-ratio: 2.4 / 1; } .lm-hero[data-mobile-art="hero"] .lm-hero__banner--portrait { display: none; } .lm-topbar__inner { min-height: 5.25rem; gap: 0.5rem; } .lm-brand--lg img { max-height: 3.75rem; } .lm-iconbtn { width: 2.5rem; height: 2.5rem; } .lm-iconbtn--code { width: auto; min-width: 3rem; padding-inline: 0.5625rem; } .lm-iconbtn__code { font-size: 0.75rem; letter-spacing: 0.02em; } .lm-topbar__tools { gap: 0.375rem; flex: none; } .lm-account { padding: 0; } .lm-account__skin { width: 2.75rem; height: 2.75rem; } .lm-account__badge { display: grid; } .lm-account:active .lm-account__skin { filter: brightness(0.55) saturate(0.6); } .lm-account:active .lm-account__badge { opacity: 1; scale: 1; rotate: 0deg; } .lm-promo__mark { display: none; } .lm-promo { grid-template-columns: minmax(0, 1fr); } .lm-promo__unit { min-width: 2.75rem; } /* El hero de categoría usa en móvil exactamente las mismas relaciones que el de la portada — 16/11 con la imagen vertical, 2.4/1 con la panorámica — en lugar de una altura fija que dejaba una banda vacía debajo de la imagen. La caja sigue creciendo si el título y la descripción necesitan más sitio. */ .lm-cathero:has(.lm-cathero__img--portrait)::before { padding-top: 68.75%; } .lm-cathero:not(:has(.lm-cathero__img--portrait))::before { padding-top: 41.667%; } .lm-cathero__inner { padding: var(--lm-pad-panel); } .lm-cathero__desc { font-size: 0.875rem; } [data-lm-grid][data-view="list"] .lm-card__body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id price" "act act"; gap: 0.5rem 0.75rem; } [data-lm-grid][data-view="list"] .lm-card__foot .lm-actions__buy { width: 100%; } .lm-sale { width: 18rem; } .lm-footer__inner { grid-template-columns: minmax(0, 1fr); } .lm-footer__rail { justify-content: flex-start; } .lm-footer__legal { text-align: start; } } @media (max-width: 400px) { .lm-promo__units { gap: 0.1875rem; } .lm-promo__unit { min-width: 2.5rem; padding-inline: 0.25rem; } .lm-promo__sep { display: none; } } .lm-catalogue { --gap: var(--lm-gap-group); } #lm-package-body .lm-forge { min-height: 100%; } .mc-tt[data-tone="gold"] .mc-tt__line, .mc-tt[data-tone="gold"] .mc-tt__line--lore, .mc-tt[data-tone="gold"] .mc-tt__count { color: var(--lm-gold); } .mc-tt[data-tone="gold"] .mc-tt__name { color: color-mix(in oklab, var(--lm-gold) 55%, #fff); } .mc-tt[data-tone="gold"] { border-image-source: linear-gradient(180deg, color-mix(in oklab, var(--lm-gold) 80%, var(--lm-ink)), color-mix(in oklab, var(--lm-gold) 35%, var(--lm-ink))); } .lm-explorer__aside { position: relative; isolation: isolate; } /* * El halo de rareza va PEGADO a la caja, no desbordándola. * * Con `inset: -0.5rem -0.75rem` sobresalía media línea por debajo, y como la * columna es un contenedor con `overflow-y: auto`, ese medio centímetro contaba * como contenido que no cabe: aparecía una barra de desplazamiento de 8px en un * panel que no tiene nada que desplazar. El degradado ya se apaga solo antes * del borde, así que ceñirlo no cambia cómo se ve. */ .lm-explorer__aside::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--lm-r-lg); background: radial-gradient(120% 55% at 50% 0%, color-mix(in oklab, var(--r) 26%, transparent), transparent 68%), radial-gradient(80% 40% at 50% 100%, color-mix(in oklab, var(--r) 14%, transparent), transparent 70%); opacity: 0; transition: opacity var(--lm-slow) var(--lm-ease); } .lm-explorer[data-rarity]:not([data-rarity=""]) .lm-explorer__aside::before { opacity: 1; } /* * El halo de las rarezas con efecto respira solo con la opacidad. * * Con `lm-breathe` crecía hasta 1.05, y como la columna es un contenedor con * `overflow-y: auto`, esos ~20px que le sobraban por abajo contaban como * contenido: salía una barra de desplazamiento que además latía con la * animación, como si el fondo se moviera. Solo pasaba en los paquetes con * rareza con efecto, que son los únicos que encienden esta animación. */ .lm-explorer[data-fx] .lm-explorer__aside::before { opacity: 1; animation: lm-breathe-still 6s var(--lm-ease-in-out) infinite; } .lm-explorer[data-rarity]:not([data-rarity=""]) .lm-buybox { border-color: color-mix(in oklab, var(--r) 48%, var(--lm-line)); background: radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--r) 12%, transparent), transparent 70%), linear-gradient(180deg, var(--lm-elev-2), var(--lm-elev-1)); box-shadow: var(--lm-bevel-out), 0 18px 44px -30px var(--r); } .lm-explorer[data-fx] .lm-buybox { box-shadow: var(--lm-bevel-out), 0 0 0 1px color-mix(in oklab, var(--r) 22%, transparent), 0 22px 52px -28px var(--r); } .lm-sale { width: 19rem; padding: 0.75rem 1rem; border-radius: var(--lm-r); overflow: hidden; } .lm-sale[data-rarity]:not([data-rarity=""]) { border-color: color-mix(in oklab, var(--r) 52%, var(--lm-line)); background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--r) 22%, transparent), transparent 62%), radial-gradient(90% 120% at 100% 100%, color-mix(in oklab, var(--r) 12%, transparent), transparent 66%), linear-gradient(180deg, var(--lm-elev-2), var(--lm-elev-1)); box-shadow: var(--lm-bevel-out), 0 14px 34px -24px var(--r); } .lm-sale[data-rarity]:not([data-rarity=""])::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--r), transparent); } .lm-sale[data-fx] { box-shadow: var(--lm-bevel-out), 0 0 0 1px color-mix(in oklab, var(--r) 26%, transparent), 0 18px 42px -22px var(--r); } .lm-sale__face { position: relative; width: 2.5rem; height: 2.5rem; border-radius: var(--lm-r-sm); background: color-mix(in oklab, var(--r) 16%, var(--lm-sunken)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--r) 40%, transparent); } .lm-sale__who { font-size: 0.875rem; } .lm-sale[data-rarity]:not([data-rarity=""]) .lm-sale__who { color: #fff; } .lm-sale__what { font-family: var(--lm-pixel); font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; } .lm-sale__price { font-size: 1rem; } .lm-sale::after { content: var(--r-name, ""); position: absolute; right: 0.625rem; bottom: 0.3125rem; font-family: var(--lm-pixel); font-size: 0.4375rem; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklab, var(--r) 60%, transparent); pointer-events: none; } .lm-sale[data-rarity=""]::after { content: none; } /* Sin halo detrás del bloque: era un rectángulo de 1.25rem por fuera de la meta y, al no estar recortado, se le veían los cuatro cantos. El bloque ya trae su propio degradado dentro del borde, que es donde no canta. */ .lm-goal { position: relative; isolation: isolate; } .lm-goal__body { position: relative; padding: clamp(1rem, 2.5vw, 1.5rem); border-radius: var(--lm-r); border: 1px solid color-mix(in oklab, var(--lm-gold) 24%, var(--lm-line)); background: linear-gradient(155deg, rgb(255 255 255 / 0.06), transparent 46%), color-mix(in oklab, var(--lm-elev-2) 72%, transparent); backdrop-filter: blur(10px); box-shadow: var(--lm-bevel-out), inset 0 1px 0 rgb(255 255 255 / 0.08); overflow: hidden; } .lm-goal__body::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 0.1) 50%, transparent 62%); background-size: 280% 100%; animation: lm-goal-shine 7s var(--lm-ease-in-out) infinite; } @keyframes lm-goal-shine { 0% { background-position: 180% 0; } 100% { background-position: -180% 0; } } .lm-goal__pct { background: linear-gradient(180deg, color-mix(in oklab, var(--lm-gold) 40%, #fff), var(--lm-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px color-mix(in oklab, var(--lm-gold) 45%, transparent)); } .lm-goal .mc-xp__track { box-shadow: var(--lm-bevel-in), 0 0 22px -10px color-mix(in oklab, var(--lm-gold) 70%, transparent); } .lm-goal .mc-xp__fill { box-shadow: 0 0 18px -2px color-mix(in oklab, var(--lm-gold) 80%, transparent); } .lm-donor { position: relative; isolation: isolate; } .lm-donor::before { content: ""; position: absolute; inset: -1.25rem; z-index: -1; background: radial-gradient(60% 55% at 30% 20%, color-mix(in oklab, var(--r) 20%, transparent), transparent 70%); animation: lm-breathe 9s var(--lm-ease-in-out) infinite; } .lm-donor__card { position: relative; padding: clamp(0.75rem, 2vw, 1.125rem); border-radius: var(--lm-r); border: 1px solid color-mix(in oklab, var(--r) 32%, var(--lm-line)); background: linear-gradient(150deg, rgb(255 255 255 / 0.05), transparent 44%), color-mix(in oklab, var(--lm-elev-2) 68%, transparent); backdrop-filter: blur(10px); box-shadow: var(--lm-bevel-out), inset 0 1px 0 rgb(255 255 255 / 0.08); overflow: hidden; } .lm-donor__card::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--lm-gold), transparent); } .lm-donor__name { background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--lm-gold) 55%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lm-donor__amount { font-size: clamp(1.375rem, 3.5vw, 1.875rem); font-weight: 800; color: var(--lm-gold); text-shadow: 0 0 24px color-mix(in oklab, var(--lm-gold) 40%, transparent); } .lm-donor__medal::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--lm-gold) 85%, transparent) 0 1.4px, transparent 2.2px) 0 0 / 27px 31px repeat; mask: linear-gradient(0deg, #000, transparent 72%); animation: lm-donor-motes 7s linear infinite; opacity: 0.7; } @keyframes lm-donor-motes { to { background-position: 0 -186px; } } .lm-goalwrap { display: block; } /* --------------------------------------------------------------------------- Comunidad · diseño clásico Es el que trae el tema y el que se ve si no hay ningún addon instalado. El addon «Perihelio» lo reemplaza en caliente, sin tocar nada de esto. --------------------------------------------------------------------------- */ .lm-community { position: relative; isolation: isolate; display: grid; gap: var(--lm-gap-group); padding: var(--lm-pad-page) var(--lm-pad-panel); border-radius: var(--lm-r-lg); overflow: hidden; /* Cristal: una capa translúcida sobre dos luces frías, sin borde duro. */ background: radial-gradient(120% 90% at 50% 6%, color-mix(in oklab, var(--lm-bolt) 11%, transparent), transparent 62%), radial-gradient(90% 70% at 10% 92%, color-mix(in oklab, var(--lm-gold) 10%, transparent), transparent 66%), linear-gradient(180deg, color-mix(in oklab, var(--lm-elev-1) 88%, transparent), color-mix(in oklab, var(--lm-elev-0) 92%, transparent)); backdrop-filter: blur(14px) saturate(1.15); box-shadow: var(--lm-bevel-out), 0 24px 60px -40px rgb(0 0 0 / 0.9); } .lm-community__head { position: relative; z-index: 2; } .lm-community__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--lm-gap-group); align-items: start; } .lm-community__feed { min-width: 0; } /* Las compras heredan el color de la rareza del paquete: el marco, el precio y el nombre se tiñen con --r, igual que en las tarjetas del catálogo. */ .lm-community .lm-sale { width: 100%; background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--r) 12%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in oklab, var(--lm-elev-2) 82%, transparent), color-mix(in oklab, var(--lm-elev-1) 88%, transparent)); backdrop-filter: blur(8px); transition: translate var(--lm-fast) var(--lm-ease), box-shadow var(--lm-mid) var(--lm-ease); } .lm-community .lm-sale:hover { translate: 0 -2px; } .lm-community .lm-sale[data-fx] { box-shadow: var(--lm-bevel-out), 0 0 0 1px color-mix(in oklab, var(--r) 26%, transparent), 0 18px 42px -26px var(--r); } .lm-community .lm-ticker__track { gap: var(--lm-gap-inline); } @media (max-width: 900px) { .lm-community__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .lm-community { padding: var(--lm-pad-panel) var(--lm-gap-block); } } .lm-topbar--modern { --lm-bar: color-mix(in oklab, var(--lm-bg) 82%, var(--lm-ink) 6%); overflow: visible; } .lm-topbar--modern .lm-topbar__inner { min-height: 5.75rem; overflow: visible; } .lm-topbar--modern .lm-brand { position: relative; align-self: stretch; padding-inline: clamp(1rem, 2.5vw, 2rem); z-index: 1; } .lm-topbar__drop { position: absolute; left: 50%; top: 0; translate: -50% 0; width: clamp(9rem, 15vw, 13rem); height: calc(100% + clamp(2.25rem, 4vw, 3.25rem)); z-index: -1; pointer-events: none; background: var(--lm-bar); border-radius: 0 0 48% 48% / 0 0 34% 34%; box-shadow: 0 14px 30px -20px color-mix(in oklab, var(--lm-ink) 90%, transparent), inset 0 -1px 0 var(--lm-line); backdrop-filter: blur(16px) saturate(1.2); } .lm-topbar__drop::before, .lm-topbar__drop::after { content: ""; position: absolute; top: 0; width: 1.75rem; height: 1.75rem; background: radial-gradient(circle at 100% 100%, transparent 68%, var(--lm-bar) 69%); } .lm-topbar__drop::before { right: 100%; } .lm-topbar__drop::after { left: 100%; scale: -1 1; } .lm-topbar--modern .lm-brand img { position: relative; max-width: none !important; width: clamp(7.5rem, 13vw, 11rem); translate: 0 clamp(0.75rem, 1.6vw, 1.35rem); filter: drop-shadow(0 12px 20px color-mix(in oklab, var(--lm-ink) 85%, transparent)); transition: translate var(--lm-mid) var(--lm-ease), scale var(--lm-mid) var(--lm-ease); } .lm-topbar--modern .lm-brand:hover img { scale: 1.04; } .lm-topbar--modern .lm-brand__mark { translate: 0 clamp(0.5rem, 1.2vw, 1rem); font-size: clamp(2.25rem, 4vw, 3.25rem); } .lm-topbar--modern .lm-brand__name { display: none; } @media (max-width: 767px) { .lm-topbar--modern .lm-topbar__inner { min-height: 4.75rem; } .lm-topbar__drop { width: 7.5rem; height: calc(100% + 1.75rem); } .lm-topbar__drop::before, .lm-topbar__drop::after { width: 1.1rem; height: 1.1rem; } .lm-topbar--modern .lm-brand img { width: 6rem; translate: 0 0.6rem; } } .lm-hbcard--ip .lm-hbcard__value { font-family: var(--lm-font); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; font-feature-settings: "ss01", "tnum"; color: color-mix(in oklab, var(--lm-gold) 45%, #fff); text-shadow: 0 0 18px color-mix(in oklab, var(--lm-gold) 30%, transparent); } .lm-hbcard--ip:hover .lm-hbcard__value { color: var(--lm-gold); } .lm-hbcard--discord .lm-hbcard__ico { color: #fff; background: linear-gradient(155deg, #6d7cff, #4a5bd6); box-shadow: 0 8px 20px -10px #4a5bd6, inset 0 1px 0 rgb(255 255 255 / 0.25); } .lm-hbcard--discord:hover .lm-hbcard__ico { box-shadow: 0 12px 26px -10px #6d7cff, inset 0 1px 0 rgb(255 255 255 / 0.35); } .lm-signature { display: flex; align-items: center; justify-content: center; gap: 0.625rem; padding-block: 1.125rem 0.5rem; color: color-mix(in oklab, var(--lm-dim) 85%, transparent); transition: color var(--lm-mid) var(--lm-ease); } .lm-signature:hover { color: var(--lm-bolt); } .lm-signature__mark { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border-radius: 0.7rem; border: 1px solid color-mix(in oklab, currentColor 26%, transparent); background: linear-gradient(160deg, color-mix(in oklab, currentColor 12%, transparent), transparent 62%); } .lm-signature__word { display: grid; line-height: 1.15; } .lm-signature__word b { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in oklab, currentColor 60%, #fff); } .lm-signature__word small { font-family: var(--lm-pixel); font-size: 0.4375rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.75; }