/* ================================================================ DICCIONARIO DE PISTAS — Neo Puzzle Lovers ---------------------------------------------------------------- Los colores por defecto son los del tema Neon (el tema por defecto no pone clase en el ). Los otros tres temas los reescribe themes-apps.css, que se carga después de esta hoja: por eso aquí todo se pinta con --bg / --accent / --cell-* y no con colores fijos. Si añades un color a mano, ese trozo dejará de cambiar con el tema. ================================================================ */ :root { --bg: #07060d; --panel-bg: #140c22; --panel-border: rgba(255, 255, 255, 0.12); --cell-bg: rgba(255, 255, 255, 0.045); --cell-border: rgba(255, 255, 255, 0.14); --cell-text: #f8f2ff; --accent: #a96ae7; --accent-dim: rgba(169, 106, 231, 0.18); --accent-glow: rgba(169, 106, 231, 0.32); --accent2: #8deeff; --accent2-dim: rgba(141, 238, 255, 0.16); --error: #ff8da6; --error-glow: rgba(255, 141, 166, 0.22); --text-main: #f8f2ff; --text-muted: #bba9df; --text-dim: #7b6ca3; --gold: #fac850; --radius: 14px; --font-mono: 'Space Mono', monospace; --font-ui: 'Nunito', sans-serif; --font-head: 'Orbitron', sans-serif; --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* El atributo `hidden` lo aplica el navegador con display:none desde su hoja de estilos, que pierde contra cualquier regla nuestra que ponga display. Sin esta línea, .dx-form (grid) y .dx-locked (flex) se veían las dos a la vez pese a llevar hidden. */ [hidden] { display: none !important; } body { min-height: 100vh; background: var(--bg); color: var(--text-main); font-family: var(--font-ui); line-height: 1.6; overflow-x: hidden; } /* Fondo: piezas de puzzle a la deriva. Decorativo, nunca capta clics. */ .dx-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .dx-bg-glow { position: absolute; width: 46vw; height: 46vw; border-radius: 50%; filter: blur(90px); opacity: 0.4; } .dx-bg-glow.a { top: -14vw; left: -10vw; background: var(--accent); } .dx-bg-glow.b { bottom: -18vw; right: -8vw; background: var(--accent2); opacity: 0.28; } .dx-bg-piece { position: absolute; font-size: 2.4rem; opacity: 0.07; animation: dxDrift 26s linear infinite; } @keyframes dxDrift { from { transform: translateY(8vh) rotate(0deg); } to { transform: translateY(-108vh) rotate(360deg); } } .dx-shell { /* z-index:2, no 1: el escudo de contraste del tema synthwave (body.theme-synthwave::after) también usa z-index:1, y con el mismo valor gana el que pinta después en el DOM — el escudo, al ser un ::after del body. Con esto el contenido real vuelve a quedar siempre por delante, en vez de oscurecerse más cuanto más abajo de la página estés. */ position: relative; z-index: 2; max-width: 62rem; margin: 0 auto; padding: 0 1.25rem 5rem; } /* ══════════════════════════════════════════════════════════════ HERO — el título grande ══════════════════════════════════════════════════════════════ */ .dx-hero { padding: clamp(3.5rem, 11vh, 6rem) 0 2rem; text-align: center; } .dx-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.32rem 0.9rem; border-radius: 999px; border: 1px solid var(--cell-border); background: var(--cell-bg); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); } /* Cada letra es una pieza de puzzle. El escalonado del retardo lo pone el JS con --i, para no escribir 12 reglas a mano. */ .dx-title { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.18rem, 0.8vw, 0.4rem); margin: 1.1rem 0 0.9rem; } .dx-letter { display: grid; place-items: center; width: clamp(2.1rem, 6.2vw, 3.6rem); height: clamp(2.5rem, 7.4vw, 4.3rem); border-radius: 10px; border: 1px solid var(--cell-border); background: var(--cell-bg); font-family: var(--font-head); font-size: clamp(1.15rem, 3.4vw, 2rem); font-weight: 900; color: var(--cell-text); animation: dxLetterIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, dxLetterFloat 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * 55ms), calc(var(--i) * 120ms); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* Las letras impares llevan el acento secundario: rompe la uniformidad sin necesidad de colorear cada una a mano. */ .dx-letter:nth-child(odd) { border-color: var(--accent); box-shadow: inset 0 0 22px var(--accent-dim); } .dx-letter:nth-child(even) { border-color: var(--accent2); box-shadow: inset 0 0 22px var(--accent2-dim); } .dx-letter:hover { transform: translateY(-6px) rotate(-3deg) scale(1.06); box-shadow: 0 10px 26px var(--accent-glow); } .dx-letter.is-gap { border: none; background: none; box-shadow: none; width: 0.9rem; } @keyframes dxLetterIn { from { opacity: 0; transform: translateY(22px) rotate(-8deg) scale(0.8); } to { opacity: 1; transform: none; } } @keyframes dxLetterFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } } .dx-tagline { color: var(--text-muted); font-size: clamp(0.9rem, 2vw, 1.02rem); max-width: 34rem; margin: 0 auto; } .dx-counters { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin-top: 1.3rem; font-size: 0.82rem; color: var(--text-dim); } .dx-counters b { font-family: var(--font-head); font-size: 1.15rem; color: var(--accent2); margin-right: 0.35rem; } /* ══════════════════════════════════════════════════════════════ BUSCADOR ══════════════════════════════════════════════════════════════ */ .dx-search { display: flex; gap: 0.6rem; margin: 2rem auto 0; max-width: 34rem; } .dx-search-field { position: relative; flex: 1; } .dx-search-field::before { content: "🔍"; position: absolute; left: 1rem; top: 50%; translate: 0 -50%; font-size: 0.95rem; opacity: 0.55; pointer-events: none; } #dx-q { width: 100%; padding: 0.95rem 1rem 0.95rem 2.7rem; border-radius: 999px; border: 1.5px solid var(--cell-border); background: var(--cell-bg); color: var(--cell-text); font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #dx-q::placeholder { font-family: var(--font-ui); letter-spacing: normal; text-transform: none; color: var(--text-dim); } #dx-q:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); } .dx-btn { padding: 0.9rem 1.5rem; border-radius: 999px; border: none; background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%); color: #12001f; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease; } .dx-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--accent-glow); } .dx-btn:active { transform: translateY(0); } .dx-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .dx-btn-ghost { padding: 0.55rem 1.05rem; border-radius: 999px; border: 1px solid var(--cell-border); background: var(--cell-bg); color: var(--text-main); font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease; } .dx-btn-ghost:hover { border-color: var(--accent); color: var(--accent2); } .dx-quick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.45rem; margin-top: 1rem; font-size: 0.8rem; color: var(--text-dim); } .dx-chip { padding: 0.32rem 0.85rem; border-radius: 999px; border: 1px solid var(--cell-border); background: var(--cell-bg); color: var(--text-muted); font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .dx-chip:hover { border-color: var(--accent2); color: var(--accent2); transform: translateY(-2px); } /* ══════════════════════════════════════════════════════════════ RESULTADOS ══════════════════════════════════════════════════════════════ */ .dx-section { margin-top: 2.6rem; } .dx-section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1rem; padding-bottom: 0.7rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--panel-border); } .dx-section-title { font-family: var(--font-head); font-size: 1.02rem; font-weight: 900; letter-spacing: 0.04em; color: var(--cell-text); } .dx-section-sub { font-size: 0.8rem; color: var(--text-dim); } .dx-status { min-height: 1.4rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--text-dim); margin-bottom: 0.8rem; } .dx-status.is-ok { color: var(--accent2); } .dx-status.is-err { color: var(--error); } .dx-spinner { width: 13px; height: 13px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: dxSpin 0.7s linear infinite; flex-shrink: 0; } @keyframes dxSpin { to { transform: rotate(360deg); } } /* Etiqueta de fuente: ① comunidad ② wikcionario ③ wikipedia */ .dx-source { display: flex; align-items: center; gap: 0.5rem; margin: 1.6rem 0 0.75rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); } .dx-source:first-child { margin-top: 0; } .dx-source::after { content: ""; flex: 1; height: 1px; background: var(--panel-border); } .dx-source-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .src-community .dx-source-dot { background: var(--gold); } .src-wikt .dx-source-dot { background: var(--accent2); } .src-wiki .dx-source-dot { background: var(--accent); } .dx-source-link { color: var(--text-dim); text-decoration: none; border-bottom: 1px dotted currentColor; letter-spacing: normal; text-transform: none; font-weight: 600; } .dx-source-link:hover { color: var(--accent2); } /* ── Tarjeta de definición ── */ .dx-card { display: flex; align-items: stretch; gap: 0.9rem; padding: 0.95rem 1.1rem; margin-bottom: 0.6rem; border-radius: var(--radius); border: 1px solid var(--panel-border); background: var(--panel-bg); animation: dxCardIn 0.24s ease backwards; transition: border-color 0.2s ease, transform 0.2s ease; } .dx-card:hover { border-color: var(--accent); transform: translateX(2px); } .dx-card.is-top { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); } .dx-card.is-buried { opacity: 0.55; } .dx-card.is-buried:hover { opacity: 1; } .dx-card.is-going { opacity: 0; transform: translateX(-18px); transition: all 0.25s ease; } @keyframes dxCardIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } .dx-card-main { flex: 1; min-width: 0; } .dx-card-text { font-size: 0.96rem; color: var(--cell-text); overflow-wrap: anywhere; } .dx-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-top: 0.55rem; font-size: 0.74rem; color: var(--text-dim); } .dx-card-author { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-muted); text-decoration: none; } .dx-card-author:hover { color: var(--accent2); } .dx-card-author img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; } .dx-tag { padding: 0.1rem 0.55rem; border-radius: 999px; border: 1px solid var(--cell-border); background: var(--cell-bg); font-weight: 700; } .dx-tag.is-official { color: var(--gold); border-color: rgba(250, 200, 80, 0.4); } .dx-tag.is-crown { color: var(--gold); border-color: rgba(250, 200, 80, 0.4); } /* ── Votos ── */ .dx-votes { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; flex-shrink: 0; padding-left: 0.6rem; border-left: 1px solid var(--panel-border); } .dx-vote { width: 2rem; height: 1.7rem; display: grid; place-items: center; border: none; border-radius: 8px; background: transparent; color: var(--text-dim); font-size: 0.95rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .dx-vote:hover { background: var(--cell-bg); transform: scale(1.15); } .dx-vote.is-on.up { color: var(--accent2); } .dx-vote.is-on.down { color: var(--error); } .dx-vote[disabled] { cursor: default; opacity: 0.4; } .dx-vote[disabled]:hover { background: none; transform: none; } .dx-score { font-family: var(--font-head); font-size: 0.86rem; font-weight: 900; color: var(--text-muted); min-width: 1.5rem; text-align: center; } .dx-score.is-pos { color: var(--accent2); } .dx-score.is-neg { color: var(--error); } .dx-kill { align-self: flex-start; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-dim); font-size: 0.85rem; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .dx-kill:hover { color: var(--error); border-color: var(--error); background: var(--error-glow); } /* ── Vacío / sin resultados ── */ .dx-empty { text-align: center; padding: 2.6rem 1rem; color: var(--text-dim); font-size: 0.9rem; } .dx-empty-icon { display: block; font-size: 2.6rem; margin-bottom: 0.6rem; opacity: 0.45; } /* ══════════════════════════════════════════════════════════════ APORTAR UNA PALABRA ══════════════════════════════════════════════════════════════ */ .dx-give { margin-top: 2.6rem; padding: 1.4rem 1.5rem; border-radius: 20px; border: 1px solid var(--panel-border); background: var(--panel-bg); box-shadow: var(--shadow-lg); } .dx-give-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; font-family: var(--font-head); font-size: 1rem; font-weight: 900; color: var(--cell-text); } .dx-give-sub { font-size: 0.83rem; color: var(--text-dim); margin-bottom: 1.1rem; } .dx-form { display: grid; gap: 0.85rem; } .dx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } .dx-field { display: flex; flex-direction: column; gap: 0.35rem; } .dx-field > span { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .dx-field input, .dx-field textarea { padding: 0.7rem 0.9rem; border-radius: 11px; border: 1.5px solid var(--cell-border); background: var(--cell-bg); color: var(--cell-text); font: inherit; font-size: 0.92rem; outline: none; transition: border-color 0.18s ease; } .dx-field textarea { resize: vertical; min-height: 4.5rem; line-height: 1.6; } .dx-field input:focus, .dx-field textarea:focus { border-color: var(--accent); } #dx-new-word { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; } .dx-count { align-self: flex-end; font-size: 0.7rem; color: var(--text-dim); } .dx-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; } .dx-form-msg { font-size: 0.84rem; } .dx-form-msg.is-ok { color: var(--accent2); } .dx-form-msg.is-err { color: var(--error); } /* Caja propia en vez de una línea suelta: así el aviso no queda pegado a lo que tenga encima o debajo. */ .dx-locked { display: flex; align-items: center; gap: 0.7rem; margin: 0.4rem 0 0.5rem; padding: 0.85rem 1rem; border-radius: 12px; border: 1px dashed var(--cell-border); background: var(--cell-bg); font-size: 0.86rem; color: var(--text-muted); } /* ══════════════════════════════════════════════════════════════ EXPLORAR ══════════════════════════════════════════════════════════════ */ .dx-words { display: flex; flex-wrap: wrap; gap: 0.5rem; } .dx-word { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--cell-border); background: var(--cell-bg); color: var(--text-main); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; cursor: pointer; transition: border-color 0.16s ease, transform 0.16s ease, color 0.16s ease; } .dx-word:hover { border-color: var(--accent); color: var(--accent2); transform: translateY(-2px); } .dx-word b { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 800; color: var(--text-dim); letter-spacing: normal; } .dx-sort { display: flex; align-items: center; gap: 0.5rem; } .dx-sort > label { font-size: 0.76rem; color: var(--text-dim); } /* ── Tema pixel: sin curvas en ningún sitio ── */ body.theme-pixel .dx-letter, body.theme-pixel .dx-card, body.theme-pixel .dx-give, body.theme-pixel .dx-field input, body.theme-pixel .dx-field textarea, body.theme-pixel #dx-q, body.theme-pixel .dx-btn, body.theme-pixel .dx-btn-ghost, body.theme-pixel .dx-chip, body.theme-pixel .dx-word, body.theme-pixel .dx-locked, body.theme-pixel .dx-tag { border-radius: 0; } body.theme-pixel .dx-bg-glow { display: none; } /* ── Tema claro: el degradado del botón necesita texto oscuro y las sombras pensadas para fondo negro se ven sucias ── */ body.theme-light .dx-btn { color: #fff; } body.theme-light .dx-bg-glow { opacity: 0.16; } body.theme-light .dx-card, body.theme-light .dx-give { box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); } /* ── Tema synthwave: hasta ahora esta página solo heredaba los tokens genéricos (--accent/--cell-bg/…), sin ninguna de las firmas propias del tema. Aquí sí: letras del título con halo de neón que respira con la música, marco de degradado real en "Aporta una palabra" (mismo truco de doble fondo que el Muro y la barra lateral), y las píldoras de "Explorar el diccionario" con borde y fondo propios en vez de apoyarse solo en --cell-bg. ── */ body.theme-synthwave .dx-bg-glow.a { background: #00e5ff; opacity: 0.30; } body.theme-synthwave .dx-bg-glow.b { background: #d946ef; opacity: 0.26; } body.theme-synthwave .dx-letter { box-shadow: 0 0 calc(10px + var(--synth-beat, 0) * 16px) rgba(0, 229, 255, calc(0.25 + var(--synth-beat, 0) * 0.35)), inset 0 0 14px rgba(217, 70, 239, 0.12); } body.theme-synthwave .dx-letter:hover { border-color: #d946ef; box-shadow: 0 0 22px rgba(217, 70, 239, 0.5); } body.theme-synthwave .dx-give { border: 2px solid transparent; border-radius: 20px; background-image: linear-gradient(rgba(12, 4, 26, 0.9), rgba(12, 4, 26, 0.9)), var(--pl-grad, linear-gradient(135deg, #00e5ff, #7c3aed, #d946ef, #ff8a3d)); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 0 calc(24px + var(--synth-beat, 0) * 16px) rgba(217, 70, 239, calc(0.28 + var(--synth-beat, 0) * 0.2)), 0 0 44px rgba(0, 229, 255, 0.14); } body.theme-synthwave .dx-word { background: rgba(16, 6, 32, 0.85); border-color: rgba(0, 229, 255, calc(0.32 + var(--synth-beat, 0) * 0.35)); } body.theme-synthwave .dx-word:hover { border-color: #d946ef; box-shadow: 0 0 14px rgba(217, 70, 239, 0.4); } body.theme-synthwave .dx-btn { box-shadow: 0 0 calc(16px + var(--synth-beat, 0) * 14px) rgba(0, 229, 255, calc(0.25 + var(--synth-beat, 0) * 0.3)); } @media (max-width: 640px) { .dx-search { flex-direction: column; } .dx-row { grid-template-columns: 1fr; } .dx-card { flex-wrap: wrap; } .dx-votes { flex-direction: row; border-left: none; padding-left: 0; gap: 0.5rem; } } @media (prefers-reduced-motion: reduce) { .dx-letter, .dx-bg-piece, .dx-card { animation: none; } }