/* Dev Clash - estilos custom complementarios a Tailwind */ :root { --dc-bg: #0a0a0b; --dc-panel: #121214; --dc-panel-2: #17171a; --dc-line: #242428; --dc-text: #ECECEE; --dc-mute: #8a8a92; --dc-yellow: #FFD23F; --dc-yellow-2: #FFB400; } html, body { background: var(--dc-bg); } body { font-feature-settings: "cv02", "cv03", "cv04", "cv11"; } /* Scrollbar dark */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #2a2a2f; } ::-webkit-scrollbar-thumb:hover { background: #3a3a42; } /* Transiciones globales suaves */ button, a, .dc-trans { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease; } /* Animaciones */ @keyframes dc-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .dc-fade-in { animation: dc-fade-in .28s ease-out both; } @keyframes dc-slide-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } .dc-slide-in { animation: dc-slide-in .24s ease-out both; } @keyframes dc-pulse-y { 0%,100% { box-shadow: 0 0 0 0 rgba(255,210,63,0.45); } 50% { box-shadow: 0 0 0 8px rgba(255,210,63,0); } } .dc-pulse-y { animation: dc-pulse-y 1.8s ease-out infinite; } @keyframes dc-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } } .dc-timer-bar { transform-origin: left center; animation: dc-progress linear forwards; } /* Escalas (font y layout) - Controladas por data attributes en */ html[data-font="0.75"] { font-size: 12px; } html[data-font="1"] { font-size: 14px; } html[data-font="1.25"] { font-size: 17.5px; } html[data-font="1.5"] { font-size: 21px; } html[data-layout="0.75"] #root { zoom: 0.875; } html[data-layout="1"] #root { zoom: 1; } html[data-layout="1.25"] #root { zoom: 1.12; } html[data-layout="1.5"] #root { zoom: 1.22; } /* Botones amarillos */ .btn-y { background: var(--dc-yellow); color: #1a1a00; font-weight: 600; padding: .55rem 1rem; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; line-height: 1.2; } .btn-y:hover { background: var(--dc-yellow-2); } .btn-y:disabled { opacity: .5; cursor: not-allowed; } .btn-ghost { background: transparent; color: var(--dc-text); padding: .55rem 1rem; border: 1px solid var(--dc-line); cursor: pointer; } .btn-ghost:hover { border-color: var(--dc-yellow); color: var(--dc-yellow); } .input { background: var(--dc-panel-2); color: var(--dc-text); padding: .55rem .75rem; width: 100%; border: 1px solid transparent; outline: none; } .input:focus { border-color: var(--dc-yellow); } .panel { background: var(--dc-panel); } .panel-2 { background: var(--dc-panel-2); } .divide-line > * + * { border-top: 1px solid var(--dc-line); } .online-dot { width: 3px; background: #4ade80; } /* Etiqueta de rank top3 */ .rank-gold { color: #FFD23F; } .rank-silver { color: #C0C6CE; } .rank-bronze { color: #CD7F32; } /* Toast */ .dc-toast { position: relative; overflow: hidden; cursor: grab; touch-action: pan-y; } .dc-toast:active { cursor: grabbing; } /* Tarjeta Próximamente (blur + tinte gris) */ .coming-soon { position: relative; overflow: hidden; } .coming-soon::before { content: ''; position: absolute; inset: 0; background: rgba(30, 30, 34, 0.55); backdrop-filter: blur(2px) saturate(0.3); -webkit-backdrop-filter: blur(2px) saturate(0.3); z-index: 1; pointer-events: none; } .coming-soon-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; } .coming-soon-label span { background: rgba(10, 10, 11, 0.75); color: #FFD23F; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; font-size: 11px; padding: 6px 14px; border: 1px solid rgba(255, 210, 63, 0.3); } /* Avatar/Badge preview */ .avatar-preview { width: 88px; height: 88px; display: inline-block; } .avatar-mini { width: 28px; height: 28px; display: inline-block; } .badge-mini { width: 16px; height: 16px; display: inline-block; } /* Input range-ish para color pick */ .color-swatch { width: 36px; height: 36px; cursor: pointer; transition: transform .15s ease, outline .15s ease; outline: 2px solid transparent; } .color-swatch:hover { transform: scale(1.08); } .color-swatch.selected { outline-color: #FFD23F; } /* Ribbon "Próximamente" sutil sobre items de nav desactivados */ .nav-soon { position: relative; opacity: 0.55; } .nav-soon::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; background: currentColor; transform: rotate(-4deg); opacity: 0.4; pointer-events: none; } /* Banner rectangular (perfil) */ .profile-banner { width: 100%; height: 120px; position: relative; overflow: hidden; isolation: isolate; z-index: 0; } @media (min-width: 768px) { .profile-banner { height: 160px; } } /* Todo el bloque del perfil crea su propio stacking context para que los avatares que "suben" no tapen el TopBar. */ .profile-wrap { position: relative; isolation: isolate; z-index: 0; } .profile-head { position: relative; z-index: 1; } .profile-avatar { width: 92px; height: 92px; border: 4px solid #0a0a0b; margin-top: -46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; } /* Bio con Markdown limitado */ .bio-md h1 { font-size: 1.15rem; font-weight: 700; margin: 0.2rem 0; color: #ECECEE; } .bio-md h2 { font-size: 1.02rem; font-weight: 600; margin: 0.2rem 0; color: #ECECEE; } .bio-md ul { margin: 0.2rem 0 0.2rem 1rem; list-style: disc; color: #ECECEE; } .bio-md li { margin: 0.05rem 0; } .bio-md strong { color: #FFD23F; font-weight: 700; } .bio-md em { font-style: italic; color: #ECECEE; } .bio-md p { margin: 0.15rem 0; color: #ECECEE; } .bio-md code { background: #242428; padding: 0 4px; font-family: ui-monospace, monospace; font-size: 0.85em; } /* Friend card */ .friend-card { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; background: #17171a; border: 1px solid #242428; transition: border-color .15s ease, transform .15s ease; cursor: pointer; } .friend-card:hover { border-color: #FFD23F; transform: translateY(-1px); } /* Docs estático */ .docs-md h2 { font-size: 1.2rem; font-weight: 700; margin: 0.4rem 0 0.5rem; color: #FFD23F; } .docs-md h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.3rem; color: #ECECEE; } .docs-md ul { list-style: disc; margin-left: 1.25rem; color: #ECECEE; font-size: 0.9rem; line-height: 1.55; } .docs-md li { margin: 0.1rem 0; } .docs-md p { margin: 0.4rem 0; color: #ECECEE; font-size: 0.9rem; line-height: 1.55; } .docs-md code { background: #242428; padding: 0 4px; font-family: ui-monospace, monospace; font-size: 0.85em; } .docs-md b { color: #FFD23F; } /* Rank rows (social-header style) */ .rank-row { border: 1px solid transparent; background: transparent; } .rank-row:hover { background: #17171a; border-color: #242428; } .rank-row.is-me { background: rgba(255, 210, 63, 0.05); border-color: rgba(255, 210, 63, 0.2); } .rank-row.is-me:hover { background: rgba(255, 210, 63, 0.1); } /* BETA badge animation */ .beta-badge { animation: beta-pulse 2s ease-in-out infinite; } @keyframes beta-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* ========================================================== TopList (componente unificado de rankings) ========================================================== */ .rl-list { display: flex; flex-direction: column; border: 1px solid transparent; } .rl-loading, .rl-empty { padding: 0.75rem 0.5rem; color: #8a8a92; font-size: 0.875rem; } .rl-separator { padding: 0.5rem 0.75rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #8a8a92; border-top: 1px solid #242428; } .rl-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; text-align: left; background: transparent; border: 1px solid transparent; border-bottom-color: #17171a; cursor: pointer; transition: background .15s ease, border-color .15s ease; width: 100%; } .rl-row:last-child { border-bottom-color: transparent; } .rl-row:hover { background: #17171a; border-color: #242428; } .rl-row-me { background: rgba(255, 210, 63, 0.06); border-color: rgba(255, 210, 63, 0.25); } .rl-row-me:hover { background: rgba(255, 210, 63, 0.12); } /* Atoms */ .rl-pos { width: 32px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rl-pos-empty { color: #8a8a92; } .rl-pos-num { font-weight: 700; font-size: 0.85rem; color: #8a8a92; font-variant-numeric: tabular-nums; } .rl-identity { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 auto; min-width: 0; } .rl-name-wrap { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; min-width: 0; } .rl-name { font-weight: 500; color: #ECECEE; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rl-name-me { color: #FFD23F; font-weight: 600; } .rl-metrics { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; } .rl-metric { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; } .rl-metric-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: #8a8a92; margin-bottom: 1px; } .rl-metric-value { font-size: 0.8rem; color: #ECECEE; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .rl-metric-hl .rl-metric-value { color: #FFD23F; font-weight: 700; font-family: inherit; } /* Variante compacta */ .rl-list-compact .rl-row { padding: 0.45rem 0.6rem; } .rl-list-compact .rl-metrics { gap: 0.75rem; } /* Menu flotante */ .rl-menu { width: 220px; padding: 0.25rem; animation: rl-menu-in 0.12s ease-out; } @keyframes rl-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .rl-menu-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid #242428; margin-bottom: 0.25rem; } .rl-menu-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: #ECECEE; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rl-menu-close { background: transparent; color: #8a8a92; padding: 2px; } .rl-menu-close:hover { color: #ECECEE; } .rl-menu-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.6rem; background: transparent; color: #ECECEE; font-size: 0.85rem; text-align: left; border: none; cursor: pointer; } .rl-menu-item:hover { background: #17171a; color: #FFD23F; } /* Rating picker (Nada / Un poco / Está bien / Me encanta) */ .rating-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.9rem 0.6rem; background: #17171a; border: 1px solid #242428; color: #8a8a92; font-size: 0.85rem; cursor: pointer; transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease; } .rating-btn:hover { background: #1f1f24; color: #ECECEE; transform: translateY(-1px); } .rating-btn-active { background: #17171a; border-width: 2px; font-weight: 600; } /* ============================================================ * Feedback banner en Home (CTA beta del proyecto) * ============================================================ */ .feedback-banner { position: relative; transition: background .15s ease; } .feedback-banner:hover { background: var(--dc-panel2); } .feedback-banner-compact { transition: background .15s ease; } .feedback-banner-compact:hover { background: var(--dc-panel2); } /* CTA buttons always single-line with icon aligned */ .feedback-cta-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; line-height: 1; } /* ============================================================ * Rankings: bloque por juego con 2 tops lado a lado * ============================================================ */ .rankings-game-block { min-width: 0; } .rankings-two-cols { display: grid; grid-template-columns: 1fr; gap: 1rem; } .rankings-col { min-width: 0; } .rankings-col-sep { height: 1px; background: var(--dc-line); width: 100%; } /* En pantallas anchas pasamos a 2 columnas separadas por una barra vertical */ @media (min-width: 1024px) { .rankings-two-cols { grid-template-columns: 1fr 1px 1fr; gap: 1.5rem; } .rankings-col-sep { height: auto; width: 1px; } }