/* ============================================================ Tarot Tiziana Juegos - Lenguaje de componentes (kit). Adaptado del UI Kit de Claude Design. Cargado siempre despues de tokens.css. Todo scope-eado a .tdt-juegos-app para no romper estilos del tema host. ============================================================ */ .tdt-juegos-app * { box-sizing: border-box; } /* v0.30.27: neutraliza el tap-highlight azul/celeste nativo del navegador móvil (no encaja con la paleta sepia/vino/pergamino). Es una propiedad heredada en WebKit, así que ponerla en los wrappers raíz cubre todos los elementos interactivos del plugin (tarjetas, botones, sectores de rueda, chips, nav). Scope-eada a las clases del plugin → no toca el bottom-nav del tema ni nada fuera del wrapper. */ .tdt-juegos-app, body.tdt-juegos-standalone { -webkit-tap-highlight-color: transparent; } /* Feedback de tap propio y sutil que sustituye al highlight nativo: un leve atenuado al presionar. No interfiere con los estados :hover/:active ni con las transiciones existentes (solo añade opacity). */ .tdt-juegos-app a:active, .tdt-juegos-app button:active, .tdt-juegos-app [role="button"]:active { opacity: 0.9; } /* Reset del margen por defecto del SOLO en la plantilla standalone de la sala (templates/standalone-sala.php añade la clase `tdt-juegos-standalone`). Sin tema host que lo resetee, el margen UA de 8px asomaba como "bordes blancos" alrededor de las pantallas full-bleed (visible sobre todo en la pantalla de login, cuyo fondo va en el propio elemento y no en un ::after fijo a viewport como el hub). Scope-eado a la clase para no tocar el de ninguna página del tema. */ body.tdt-juegos-standalone { margin: 0; } /* ============================================================ Atmosfera de fondo (cuando se usa como contenedor protagonista, p.ej. en la PWA fullscreen). En la pagina del demo se aplica solo dentro del visor de paleta. ============================================================ */ .tdt-juegos-app.has-bg { background: var(--bg); background-image: var(--bg-gradient-mobile); color: var(--fg); min-height: 320px; border-radius: var(--r-modal); padding: 22px; position: relative; isolation: isolate; } @media (min-width: 1024px) { .tdt-juegos-app.has-bg { background-image: var(--bg-gradient-desktop); } } /* Estrellas dispersas en modo oscuro (decoracion). */ .tdt-juegos-app[data-theme="dark"].has-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 18% 12%, rgba(255,216,155,0.55), transparent 60%), radial-gradient(1.4px 1.4px at 72% 8%, rgba(245,233,220,0.45), transparent 60%), radial-gradient(1.6px 1.6px at 86% 28%, rgba(255,216,155,0.40), transparent 60%), radial-gradient(1.4px 1.4px at 32% 38%, rgba(245,233,220,0.30), transparent 60%), radial-gradient(1.6px 1.6px at 12% 62%, rgba(255,216,155,0.30), transparent 60%), radial-gradient(1.4px 1.4px at 64% 70%, rgba(245,233,220,0.30), transparent 60%), radial-gradient(1.4px 1.4px at 92% 86%, rgba(255,216,155,0.25), transparent 60%); mix-blend-mode: screen; pointer-events: none; z-index: 0; border-radius: inherit; } .tdt-juegos-app.has-bg > * { position: relative; z-index: 1; } /* ============================================================ Bloques basicos de layout. ============================================================ */ .tdt-juegos-app .row { display: flex; align-items: center; gap: 12px; } .tdt-juegos-app .col { display: flex; flex-direction: column; gap: 12px; } .tdt-juegos-app .spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tdt-juegos-app .stack-tight > * + * { margin-top: 8px; } .tdt-juegos-app .flex-center { display: flex; align-items: center; justify-content: center; } /* ============================================================ Glassmorphism, tarjetas, CTAs. ============================================================ */ .tdt-juegos-app .glass { background: var(--glass-bg); backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: var(--r-card); } .tdt-juegos-app .glass.with-line { position: relative; } .tdt-juegos-app .glass.with-line::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--orange-glow), transparent); } .tdt-juegos-app .cta { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 24px; min-width: 140px; border-radius: 22px; background: var(--cta-gradient); box-shadow: var(--cta-shadow); color: var(--cream); font-family: var(--font-body); font-weight: 600; font-size: 16px; letter-spacing: 0.01em; border: none; cursor: pointer; transition: transform var(--t-base) var(--ease-out-soft), box-shadow var(--t-base); } .tdt-juegos-app .cta:hover { transform: translateY(-2px); } .tdt-juegos-app .cta.full { width: 100%; } .tdt-juegos-app .btn-secondary { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 22px; border-radius: 22px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--fg); font-family: var(--font-body); font-weight: 500; font-size: 15px; cursor: pointer; } .tdt-juegos-app .btn-circle { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--fg); cursor: pointer; } .tdt-juegos-app .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 100px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--fg); font-family: var(--font-body); font-size: 12px; font-weight: 500; cursor: pointer; } .tdt-juegos-app .chip.active { border-color: var(--accent); color: var(--accent); background: rgba(243, 159, 90, 0.10); } .tdt-juegos-app[data-theme="light"] .chip.active { background: rgba(122, 49, 39, 0.10); } /* ============================================================ Pildoras de stats, vidas, avatares. ============================================================ */ .tdt-juegos-app .pill-stat { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 8px; border-radius: 100px; background: var(--glass-bg); border: 1px solid var(--glass-border); font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--fg); font-variant-numeric: tabular-nums; } .tdt-juegos-app .lives { display: inline-flex; gap: 4px; align-items: center; height: 36px; padding: 0 12px; border-radius: 100px; background: var(--glass-bg); border: 1px solid var(--glass-border); } .tdt-juegos-app .lives svg { width: 14px; height: 14px; } .tdt-juegos-app .lives svg path { fill: var(--rose-wine); } .tdt-juegos-app .lives svg.dim path { fill: rgba(174, 68, 90, 0.25); } .tdt-juegos-app[data-theme="light"] .lives svg path { fill: var(--wine-sepia); } .tdt-juegos-app[data-theme="light"] .lives svg.dim path { fill: rgba(122, 49, 39, 0.25); } .tdt-juegos-app .avatar { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--orange), var(--burgundy) 70%); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 18px; color: var(--cream); border: 1px solid rgba(255, 216, 155, 0.35); } .tdt-juegos-app[data-theme="light"] .avatar { background: radial-gradient(circle at 35% 30%, var(--gold-aged), var(--wine-sepia) 70%); color: var(--parchment); border-color: rgba(201, 162, 74, 0.55); } /* ============================================================ Carta de tarot - miniatura (formato 70:110). ============================================================ */ .tdt-juegos-app .tarot-thumb { border-radius: 8px; border: 1.5px solid rgba(255, 216, 155, 0.55); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); background: linear-gradient(160deg, #2D0F3A, #451952); aspect-ratio: 70 / 110; position: relative; overflow: hidden; } .tdt-juegos-app .tarot-thumb .roman { position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 11px; color: var(--gold-light); } .tdt-juegos-app .tarot-thumb .name { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 9px; color: var(--gold-light); letter-spacing: 0.04em; } .tdt-juegos-app .tarot-thumb .glyph { position: absolute; inset: 22px 12px 22px 12px; display: flex; align-items: center; justify-content: center; } /* ================================================================= * v0.30.22 — Capa universal de prefers-reduced-motion. * * Scopeada al wrapper del plugin (.tdt-juegos-app / .tdt-juegos-hub / * .tdt-juegos-standalone y descendientes) para NO tocar animaciones del * tema ni de otros plugins. Anula todas las animaciones y transiciones * CSS del plugin (modales, fades de fin, select, pulso del CTA de la * rueda, login, hover/focus, P2/P5/P7, etc.): se vuelven instantaneas * (salto al estado final) en vez de animarse. iteration-count:1 corta * los loops infinitos (rayos del pentaculo epico, pulso del CTA). * * kit.css es dependencia de login.css, asi que .tdt-juegos-standalone * (login) tambien queda cubierto por este unico bloque. * * Lo que NO cubre esta capa (por diseno) y se maneja aparte: * - WAAPI de la rueda (trivia-rueda.js): CSS no controla .animate(); * guard JS salta el giro y revela la categoria con fade. * - View Transitions (app-router.js): guard JS hace swap instantaneo. * - Excepciones de "fade permitido" (revelado de categoria, +N de P3, * parpadeo de "Saber mas"): overrides especificos en trivia.css que * conservan un fade suave (~300 ms) como feedback accesible. * ================================================================= */ @media (prefers-reduced-motion: reduce) { .tdt-juegos-app, .tdt-juegos-app *, .tdt-juegos-app *::before, .tdt-juegos-app *::after, .tdt-juegos-hub, .tdt-juegos-hub *, .tdt-juegos-hub *::before, .tdt-juegos-hub *::after, .tdt-juegos-standalone, .tdt-juegos-standalone *, .tdt-juegos-standalone *::before, .tdt-juegos-standalone *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ================================================================= * v0.30.24 — Banner de actualizacion del PWA + toast de auto-aplicado. * * assets/js/pwa-update.js inyecta el banner y el toast como hijos * DIRECTOS de (NO del wrapper .tdt-juegos-app), para sobrevivir al * replaceWith del router SPA. Por eso van con valores LITERALES del tema * oscuro (default del PWA) en vez de var(--token): los tokens estan * scopeados a .tdt-juegos-app[data-theme] y no se heredan fuera del wrapper. * Por el mismo motivo el reduced-motion necesita su propia regla (la capa * universal de v0.30.22 esta scopeada al wrapper y no los alcanza). * * z-index 25: por encima del bottom-nav (5), por debajo de los modales * bloqueantes (>=30). * ================================================================= */ .tdt-pwa-update-banner { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 25; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(45, 15, 58, 0.92); backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%); border: 1px solid rgba(245, 233, 220, 0.14); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); color: #F5E9DC; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; opacity: 0; transform: translateY(12px); transition: opacity 280ms ease, transform 280ms ease; } .tdt-pwa-update-banner.is-shown { opacity: 1; transform: translateY(0); } /* La regla base pone display:flex (mas especifica que el [hidden] del UA), * asi que re-ocultamos explicitamente cuando el atributo hidden esta puesto. */ .tdt-pwa-update-banner[hidden] { display: none; } .tdt-pwa-update-banner__text { flex: 1 1 auto; font-size: 14px; line-height: 1.35; font-weight: 500; } .tdt-pwa-update-banner__btn-update { flex: 0 0 auto; height: 40px; padding: 0 18px; border: none; border-radius: 14px; cursor: pointer; background: linear-gradient(180deg, #F39F5A 0%, #E08544 100%); box-shadow: 0 6px 18px rgba(243, 159, 90, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30); color: #F5E9DC; font-family: inherit; font-weight: 600; font-size: 14px; transition: transform 160ms ease; } .tdt-pwa-update-banner__btn-update:hover { transform: translateY(-1px); } .tdt-pwa-update-banner__btn-close { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; background: transparent; border: 1px solid rgba(245, 233, 220, 0.20); color: #F5E9DC; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .tdt-pwa-update-toast { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 25; padding: 10px 18px; border-radius: 100px; background: rgba(45, 15, 58, 0.94); backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%); border: 1px solid rgba(245, 233, 220, 0.14); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); color: #F5E9DC; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateX(-50%) translateY(12px); transition: opacity 280ms ease, transform 280ms ease; } .tdt-pwa-update-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { .tdt-pwa-update-banner, .tdt-pwa-update-banner__btn-update, .tdt-pwa-update-toast { transition-duration: 0.01ms !important; } } /* ================================================================= * v0.30.28 — Reportar un problema: modal universal + toast. * * El root del modal lleva .tdt-juegos-app + data-theme (reporte.js lo * sincroniza con la pantalla activa al abrir), asi que los tokens * resuelven sobre el y el modal HEREDA claro/oscuro. Vive fuera del * wrapper que el router SPA reemplaza, por eso no esta dentro de * .tdt-juegos-hub. El texto e inputs se temean via tokens (--fg, * --fg-muted, --glass-*); solo el fondo de la tarjeta y del backdrop * necesitan una variante light explicita. * * z-index 60: modal bloqueante, por encima del bottom-nav (5) y del * banner PWA (25). El toast a 70. * ================================================================= */ .tdt-reporte-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 22px; } .tdt-reporte-modal[hidden] { display: none; } .tdt-reporte-modal__backdrop { position: absolute; inset: 0; background: rgba(13, 6, 18, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; } .tdt-reporte-modal__card { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 44px); overflow-y: auto; padding: 22px 22px 20px; border-radius: 22px; background: linear-gradient(160deg, rgba(45, 15, 58, 0.97), rgba(26, 11, 31, 0.97)); border: 1px solid rgba(245, 233, 220, 0.16); box-shadow: var(--shadow-elevated); color: var(--fg); } .tdt-reporte-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 12px; } .tdt-reporte-modal__titulo { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 20px; color: var(--fg); } .tdt-reporte-modal__cerrar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: transparent; border: 1px solid var(--glass-border); color: var(--fg-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .tdt-reporte-modal__form { display: flex; flex-direction: column; } .tdt-reporte-modal__label { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--fg-muted); margin: 10px 0 6px; } .tdt-reporte-modal__select, .tdt-reporte-modal__textarea { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 14px; color: var(--fg); background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: 12px; padding: 11px 12px; } .tdt-reporte-modal__textarea { resize: vertical; min-height: 110px; line-height: 1.4; } /* El desplegable nativo del select abre con el fondo del sistema (blanco en la mayoria de navegadores de escritorio). Las