/* Estilos base de diseño para Mitos Olvidados: Bestiario Ibérico - Hextech Redesign */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Metamorphous&family=Piedra&family=New+Rocker&family=Outfit:wght@300;400;500;700;800;900&display=swap'); :root { /* El joc JA és fosc → evita el forçat de "mode fosc" de Samsung Internet (i similars), que tirava el daurat a granat. */ color-scheme: dark; /* Hextech Dark Fantasy Theme */ --bg-dark: #010a13; --bg-panel: rgba(10, 20, 40, 0.85); --border-color: rgba(200, 155, 60, 0.3); /* Esencias */ --fuego: #e74c3c; --fuego-glow: rgba(231, 76, 60, 0.4); --tierra: #27ae60; --tierra-glow: rgba(39, 174, 96, 0.4); --agua: #3498db; --agua-glow: rgba(52, 152, 219, 0.4); --aire: #bdc3c7; --aire-glow: rgba(189, 195, 199, 0.4); --eter: #9b59b6; --eter-glow: rgba(155, 89, 182, 0.4); /* Intervenciones */ --intervencion: #c89b3c; --intervencion-glow: rgba(200, 155, 60, 0.3); /* UI general */ --text-primary: #f0e6d2; --text-secondary: #c8aa6e; --accent: #0ac8b9; --accent-glow: rgba(10, 200, 185, 0.4); /* Rarezas → medalles: bronze / plata / or (nivells 1 / 2 / 3) */ --common: #cd7f32; /* nivell 1 = bronze */ --rare: #0ac8b9; --epic: #c0c9d4; /* nivell 2 = plata */ --legendary: #c89b3c; /* nivell 3 = or */ } * { box-sizing: border-box; margin: 0; padding: 0; } html { background-color: var(--bg-dark, #030504); /* `clip` (no `hidden`): retalla el desbordament horitzontal SENSE convertir en scroll-container (hidden forçaria overflow-y:auto i trencaria el `position:sticky` de la capçalera). */ overflow-x: clip; max-width: 100vw; } body { margin: 0; padding: 0; font-family: 'Outfit', sans-serif; background-color: var(--bg-dark); color: var(--text-primary); min-height: 100vh; display: flex; flex-direction: column; /* Desactiva el DOBLE-TAP ZOOM al mòbil (i l'espera de 300ms de clic que porta associada) mantenint el scroll (pan) i el pinch-zoom d'accessibilitat. `manipulation` = pan + pinch, res de double-tap. */ touch-action: manipulation; /* `clip` en lloc de `hidden` pel mateix motiu que a : manté el sticky de la capçalera i evita el desplaçament horitzontal de la web. */ overflow-x: clip; max-width: 100vw; background-image: radial-gradient(circle at 10% 20%, rgba(26, 188, 156, 0.04) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(155, 89, 182, 0.04) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(7, 11, 9, 1) 0%, rgba(3, 5, 4, 1) 100%); position: relative; } /* Bloqueig d'SCROLL de fons quan hi ha un MISSATGE/modal obert (lightbox premium, carta del dia, obertura de sobre...): així no es pot scrollejar ni veure el contingut de darrere. Via :has() → automàtic per a tots ells. Els .custom-lightbox-backdrop s'eliminen del DOM en tancar-se, i #opened-cards-panel es marca amb .hidden. */ html:has(.custom-lightbox-backdrop.active), html:has(.opened-cards-panel:not(.hidden)) { overflow: hidden !important; } body:has(.custom-lightbox-backdrop.active), body:has(.opened-cards-panel:not(.hidden)) { overflow: hidden !important; overscroll-behavior: none; } /* Efecto de Niebla de fondo animado */ .fog-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; opacity: 0.12; pointer-events: none; } .fog-layer { position: absolute; width: 200%; height: 100%; background: url('data:image/svg+xml;utf8,'); opacity: 0.4; animation: moveFog 120s linear infinite; } .fog-layer-2 { position: absolute; width: 200%; height: 100%; background: url('data:image/svg+xml;utf8,'); opacity: 0.3; animation: moveFogReverse 80s linear infinite; } @keyframes moveFog { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes moveFogReverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* Contenedor Principal */ .app-container { max-width: 1400px; width: 100%; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; flex: 1 0 auto; } /* Cabecera */ header { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 16px; backdrop-filter: blur(12px); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4); position: sticky; top: 0; z-index: 100; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); /* efecte "headroom": s'amaga/reapareix suau */ will-change: transform; } /* Header FIX amb "headroom": scroll AVALL l'amaga (surt del marc), scroll AMUNT el torna a mostrar a dalt. La classe la posa el JS. */ header.header-hidden { transform: translateY(-115%); } /* Wrapper del menÃº: en desktop es flex row, en mÃ³vil es drawer lateral */ .header-menu { display: flex; align-items: center; gap: 15px; flex: 1; justify-content: flex-end; margin-left: 45px; /* Margen de separación con el logotipo */ } /* Hamburger button (oculto en desktop) */ .hamburger-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; cursor: pointer; transition: background 0.2s ease; z-index: 1001; } .hamburger-btn:hover { background: rgba(255, 255, 255, 0.08); } .hamburger-line { display: block; width: 100%; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } /* AnimaciÃ³n X cuando el menÃº estÃ¡ abierto */ .hamburger-btn.active .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger-btn.active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger-btn.active .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Backdrop overlay */ .menu-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 98; opacity: 0; transition: opacity 0.3s ease; } .menu-backdrop.active { display: block; opacity: 1; } h1 { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 1.8rem; letter-spacing: 2px; background: linear-gradient(135deg, #1abc9c, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .subtitle { font-size: 0.85rem; color: var(--text-secondary); letter-spacing: 1px; text-transform: uppercase; } /* NavegaciÃ³n SPA */ .main-nav { display: flex; gap: 10px; background: rgba(0, 0, 0, 0.3); padding: 6px; border-radius: 30px; border: 1px solid var(--border-color); margin-right: auto; /* Empuja el perfil y economia a la derecha en escritorio, alineandose con el logo */ } .nav-btn { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--text-secondary); background: transparent; border: 1px solid transparent; /* reserva el gruix del border → l'estat .active (border de color) NO agranda l'alçada del header */ padding: 10px 20px; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .nav-icon-svg { display: inline-block; width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; } .nav-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.03); } .nav-btn.active { color: var(--text-primary); background: linear-gradient(135deg, rgba(26, 188, 156, 0.2), rgba(155, 89, 182, 0.2)); border: 1px solid rgba(26, 188, 156, 0.3); box-shadow: inset 0 0 10px rgba(26, 188, 156, 0.15); } /* Botones de acciÃ³n general */ .header-actions { display: flex; gap: 10px; } /* ===== Widget de Perfil de Usuario ===== */ .user-profile-widget { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 40px; cursor: default; transition: border-color 0.3s ease, background 0.3s ease; } /* Agrupador [perfil + monedes/cristalls]: el crea app.js (_muntarUserCluster). A ESCRIPTORI és transparent al layout (display:contents → els fills segueixen sent fills directes del header-menu); al MÒBIL es converteix en la PASTILLA que obre el menú d'usuari (bloc landscape+coarse, al final). La fletxa ▾ de final de pastilla (#user-caret-m) només es mostra al mòbil. */ #user-cluster { display: contents; } #user-caret-m { display: none; } .user-profile-widget:hover { border-color: rgba(26, 188, 156, 0.2); background: rgba(255, 255, 255, 0.05); } .user-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #1abc9c, #9b59b6); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 12px rgba(26, 188, 156, 0.3), inset 0 0 8px rgba(0, 0, 0, 0.2); border: 2px solid rgba(26, 188, 156, 0.4); position: relative; overflow: hidden; } .user-avatar::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%); animation: avatarShine 4s linear infinite; } @keyframes avatarShine { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Nivell del jugador sobre l'avatar: rodona daurada al cantó inferior-dret. Va en un WRAP (no dins de .user-avatar, que té overflow:hidden i el retallaria). L'anell fosc el separa de l'avatar. */ .user-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; } .avatar-lvl-badge { position: absolute; right: -3px; bottom: -3px; min-width: 17px; height: 17px; padding: 0 3px; box-sizing: border-box; border-radius: 9px; background: linear-gradient(135deg, #f5c542, #e08b1e); color: #2a1a05; font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 0.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; border: 2px solid #0f1826; box-shadow: 0 1px 4px rgba(0,0,0,0.55); z-index: 3; pointer-events: none; } .user-avatar-icon { font-size: 1.2rem; position: relative; z-index: 1; } .user-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .user-name-row { display: flex; align-items: center; gap: 6px; } .user-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--text-primary); cursor: pointer; transition: color 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .user-name:hover { color: var(--accent); } .user-edit-btn { background: none; border: none; cursor: pointer; font-size: 0.65rem; padding: 2px; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; transform: scale(0.8); } .user-profile-widget:hover .user-edit-btn { opacity: 0.5; transform: scale(1); } .user-edit-btn:hover { opacity: 1 !important; transform: scale(1.15) !important; } .user-level-row { display: flex; align-items: center; gap: 6px; } .user-level-badge { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.6rem; color: #1abc9c; background: rgba(26, 188, 156, 0.12); padding: 1px 7px; border-radius: 8px; letter-spacing: 0.5px; border: 1px solid rgba(26, 188, 156, 0.2); } .user-rank-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.6rem; color: var(--text-secondary); letter-spacing: 0.5px; text-transform: uppercase; } .user-xp-bar-container { width: 100%; height: 3px; background: rgba(255, 255, 255, 0.06); border-radius: 4px; overflow: hidden; margin-top: 1px; } .user-xp-bar { height: 100%; background: linear-gradient(90deg, #1abc9c, #9b59b6); border-radius: 4px; transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0 0 6px rgba(26, 188, 156, 0.4); } .btn { font-family: 'Outfit', sans-serif; font-weight: 700; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; } /* Feedback de pulsació (tàctil) unificat: el botó s'enfonsa i s'enfosqueix en prémer, i torna suau */ .btn:active:not(:disabled), .nav-btn:active { transform: scale(0.955); filter: brightness(0.92); transition: transform 0.06s ease, filter 0.06s ease; } .btn-primary { background: linear-gradient(135deg, #1abc9c, #16a085); color: white; box-shadow: 0 4px 15px rgba(26, 188, 156, 0.3); } .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26, 188, 156, 0.5); } .btn-primary:disabled { background: #2c3e50; color: #7f8c8d; box-shadow: none; cursor: not-allowed; } .btn-secondary { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); color: var(--text-primary); } .btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .btn-secondary:disabled { opacity: 0.3; cursor: not-allowed; } /* Secciones de Vistas */ .view-section { display: none; /* l'entrada (fundido + slide) la fa irAVista via WAAPI, fiable a cada navegació */ } .view-section.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* PÃ¡neles */ .panel { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 16px; padding: 20px; backdrop-filter: blur(12px); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); position: relative; } .panel-title { font-family: 'Outfit', sans-serif; font-size: 1.1rem; margin-bottom: 15px; letter-spacing: 1px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; color: var(--text-secondary); display: flex; justify-content: space-between; align-items: center; } /* ================= 1. ESTILOS DE COLECCIÃ“N ================= */ .collection-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .collection-stats { display: flex; gap: 12px; } .stat-card { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 6px 12px; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); white-space: nowrap; } #stat-card-discovered:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.04); border-color: rgba(26, 188, 156, 0.25); box-shadow: 0 6px 20px rgba(26, 188, 156, 0.08); } #stat-card-total:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.04); border-color: rgba(155, 89, 182, 0.25); box-shadow: 0 6px 20px rgba(155, 89, 182, 0.08); } .stat-card-label { font-family: 'Outfit', sans-serif; font-size: 0.72rem; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .stat-card-value { font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 700; } #stat-card-discovered .stat-card-value { color: var(--accent); } #stat-card-total .stat-card-value { color: #9b59b6; } .stat-card-sub { font-family: 'Outfit', sans-serif; font-size: 0.7rem; font-weight: 500; opacity: 0.85; } #stat-card-discovered .stat-card-sub { color: #1abc9c; } #stat-card-total .stat-card-sub { color: var(--text-secondary); } .collection-filters { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; } .select-filter { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: rgba(255, 255, 255, 0.04); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-primary); padding: 8px 36px 8px 16px; border-radius: 20px; /* PÃldora para alinearse con tab-btn */ font-family: 'Outfit', sans-serif; font-size: 0.8rem; outline: none; cursor: pointer; transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 2px 6px rgba(0,0,0,0.2); } .select-filter option { background-color: #111815; /* SÃ³lido oscuro para legibilidad en todos los navegadores y sistemas operativos */ color: var(--text-primary); } .select-filter:hover { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .select-filter:focus { border-color: var(--accent); box-shadow: 0 0 8px rgba(46, 204, 113, 0.3); } /* Toggle Switch Premium para Cartas Obtenidas */ .toggle-container { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-family: 'Outfit', sans-serif; font-size: 0.85rem; color: var(--text-secondary); background: none; border: none; padding: 0 10px 0 0; /* Un pequeÃ±o margen a la derecha */ transition: all 0.3s ease; height: 38px; /* Altura alineada con select-filter */ box-sizing: border-box; } .toggle-container:hover .toggle-label { color: var(--text-primary); } .toggle-container:hover .toggle-slider { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.15); } .toggle-input { display: none; } .toggle-slider { position: relative; width: 32px; height: 18px; background: rgba(255, 255, 255, 0.1); border-radius: 20px; transition: background 0.3s ease, border-color 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.05); } .toggle-slider::before { content: ""; position: absolute; width: 12px; height: 12px; left: 2px; bottom: 2px; background: #bdc3c7; border-radius: 50%; transition: transform 0.3s ease, background 0.3s ease; } .toggle-input:checked + .toggle-slider { background: rgba(46, 204, 113, 0.2); border-color: rgba(46, 204, 113, 0.4); } .toggle-input:checked + .toggle-slider::before { transform: translateX(14px); background: var(--accent); /* #2ecc71 / green */ box-shadow: 0 0 8px var(--accent); } .toggle-input:checked ~ .toggle-label { color: var(--text-primary); font-weight: 600; } .toggle-label { font-size: 0.82rem; letter-spacing: 0.5px; transition: color 0.3s ease; } /* ===== Botón de Búsqueda (Trigger) ===== */ .search-btn-trigger { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; padding: 0; box-sizing: border-box; flex-shrink: 0; } .search-btn-trigger:hover { background: rgba(26, 188, 156, 0.15); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 12px rgba(26, 188, 156, 0.2); } .search-icon { color: var(--text-secondary); flex-shrink: 0; transition: color 0.3s ease, filter 0.3s ease, transform 0.3s ease; min-width: 16px; } .search-btn-trigger:hover .search-icon { color: var(--accent); } /* Lightbox de Búsqueda */ .search-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 3000; opacity: 1; transition: opacity 0.3s ease; } .search-modal-overlay.hidden { opacity: 0; pointer-events: none; } .search-modal-content { background: rgba(20, 24, 30, 0.95); border: 1px solid rgba(26, 188, 156, 0.25); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 40px rgba(26, 188, 156, 0.15); border-radius: 24px; width: 90%; max-width: 500px; padding: 24px; position: relative; transform: scale(1); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .search-modal-overlay.hidden .search-modal-content { transform: scale(0.9); } .search-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .search-modal-header h3 { margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.25rem; color: var(--text-primary); font-weight: 600; } .search-modal-close { background: transparent; border: none; color: var(--text-secondary); font-size: 1.8rem; cursor: pointer; line-height: 1; transition: color 0.2s; padding: 0 5px; } .search-modal-close:hover { color: var(--accent); } /* ================= 9. MODAL DE SOBRES EN EL MITOLARI ================= */ .sobres-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(8, 8, 10, 0.93); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; z-index: 3500; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .sobres-modal-overlay:not(.hidden) { opacity: 1 !important; pointer-events: auto !important; } .sobres-modal-overlay.hidden { opacity: 0 !important; pointer-events: none !important; display: none !important; /* Asegurar que no consuma interacción ni renderizado al estar oculto */ } .sobres-modal-content-wrapper { width: 95%; max-width: 780px; position: relative; transform: scale(0.92); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .sobres-modal-overlay:not(.hidden) .sobres-modal-content-wrapper { transform: scale(1); } /* Efectos de pulso en el botón de abrir del Mitolari en caso de sobres acumulados */ #btn-trigger-sobres-modal { position: relative; overflow: hidden; } /* Adaptación responsive */ @media (max-width: 768px) { .mitolari-booster-panel { padding: 12px 18px !important; margin-bottom: 15px !important; flex-direction: column !important; align-items: stretch !important; text-align: center !important; } .mitolari-booster-panel div { align-items: center !important; justify-content: center !important; } } .search-modal-input-wrapper { display: flex; align-items: center; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; padding: 12px 18px; gap: 12px; } .search-modal-input-wrapper:focus-within { border-color: rgba(26, 188, 156, 0.5); box-shadow: 0 0 15px rgba(26, 188, 156, 0.15); } .search-modal-input-wrapper .search-icon { color: var(--text-secondary); } .search-input-modal { background: transparent; border: none; outline: none; color: var(--text-primary); font-family: 'Outfit', sans-serif; font-size: 1.1rem; width: 100%; } .search-modal-input-wrapper .search-clear-btn { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-secondary); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; flex-shrink: 0; transition: all 0.2s ease; padding: 0; line-height: 1; } .search-modal-input-wrapper .search-clear-btn:hover { background: rgba(231, 76, 60, 0.15); border-color: rgba(231, 76, 60, 0.3); color: #e74c3c; } .search-modal-input-wrapper .search-clear-btn.hidden { display: none; } .collection-grid { display: flex; flex-direction: column; gap: 35px; } /* Paneles de ExpansiÃ³n / RegiÃ³n (Seasons) */ .region-section { background: rgba(20, 24, 30, 0.45); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 22px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transition: border-color 0.3s ease; } .region-section:hover { border-color: rgba(255, 255, 255, 0.10); } .region-section-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid rgba(255, 255, 255, 0.08); padding-bottom: 12px; margin-bottom: 22px; cursor: pointer; user-select: none; } .region-header-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; flex-wrap: wrap; } .region-header-titlerow { display: flex; align-items: center; gap: 12px; min-width: 0; } .region-header-stats { display: flex; gap: 8px; flex-wrap: wrap; } /* Mòbil vertical: títol en una línia i contadors a sota */ @media (max-width: 768px) { .region-header-main { flex-direction: column; align-items: flex-start; gap: 6px; } .region-header-titlerow .region-section-title { white-space: nowrap; font-size: 1rem; letter-spacing: 1px; } .region-header-stats { width: 100%; } } .region-section-title { font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); letter-spacing: 1.5px; text-transform: uppercase; background: linear-gradient(90deg, var(--accent) 0%, #3498db 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .region-section-stats { font-family: 'Outfit', sans-serif; font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; background: rgba(255, 255, 255, 0.05); padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); } .region-section-header:hover .region-section-title { opacity: 0.85; } .region-section-header:hover .region-toggle-arrow { color: var(--accent); background: rgba(26, 188, 156, 0.2); border-color: rgba(26, 188, 156, 0.3); } .region-toggle-arrow { font-size: 0.7rem; color: var(--accent); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease, background 0.2s ease; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(26, 188, 156, 0.1); border: 1px solid rgba(26, 188, 156, 0.15); flex-shrink: 0; } .region-section.collapsed .region-card-grid { display: none; } .region-section.collapsed .region-toggle-arrow { transform: rotate(-90deg); } .region-section.collapsed { padding-bottom: 16px; } .region-section.collapsed .region-section-header { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .region-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; } @media (min-width: 992px) { .region-card-grid { grid-template-columns: repeat(5, 1fr) !important; justify-content: center; gap: 24px !important; max-width: 1300px; margin: 0 auto; } .region-card-grid .card-mito, .region-card-grid .card-wrapper { width: 100% !important; max-width: 240px !important; height: auto !important; aspect-ratio: 63 / 88 !important; } } /* Cartas de Mitos (Grandes y Premium) */ .card-mito { width: 186px; /* ratio 63/88 (abans 180) conservant l'alçada 260 */ height: 260px; aspect-ratio: 63 / 88; container-type: inline-size; /* el text de la carta escala amb l'ample (unitats cqw) */ border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(135deg, rgba(20, 30, 25, 0.9) 0%, rgba(10, 15, 12, 0.95) 100%); display: flex; flex-direction: column; padding: 0 0 10px 0; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; /* Fuerza a recortar hijos con overflow: hidden de manera estricta */ backface-visibility: hidden; transform: translateZ(0); /* Aceleracion GPU y correccion de bugs de recorte en Chrome/Safari */ transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); } /* Efecto brillo brillo */ .card-mito::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.13) 100%); transform: skewX(-25deg); transition: left 0.75s ease, opacity 0.3s ease; opacity: 0; pointer-events: none; } @media (hover: hover) { /* Brillo diagonal en hover RETIRAT (2026-08-24, l'usuari: "es veu malament"): el ::after skewejat feia una franja diagonal que quedava lletja. Es manté el ràfec (aixecar la carta), però sense el reflex. */ .card-mito:hover::after { opacity: 0 !important; } .card-mito:hover { transform: translateY(-8px) scale(1.03); border-color: rgba(26, 188, 156, 0.4); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(26, 188, 156, 0.25); } } /* Cartas bloqueadas / que no posee */ .card-mito.locked { filter: none; cursor: default; border-color: rgba(255, 255, 255, 0.05) !important; background: #111215 !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4) !important; } .card-mito.locked:hover { transform: none; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4) !important; } .card-mito.locked::after { display: none; } /* ── Rendiment del Mitolari: la col·lecció pinta MOLTES cartes alhora, i els efectes "sempre actius" o en BUCLE de les cartes són el que fa que a mòbil vagi a batzegades. El DUEL (#juego-tablero) ja els desactiva —per això joc.php va fi—; fem EL MATEIX a la col·lecció de forma INCONDICIONAL, així s'aplica segur a tots els dispositius (no depèn de cap @media que potser no matxeja). ── · .holo-foil: usa mix-blend-mode + will-change → és, de lluny, l'efecte més car a mòbil (visible sempre a les cartes Nv2/Nv3, no només en hover). · .secret-mark: la marca de Mítiks de les no aconseguides (abans .secret-padlock, un cadenat). · .card-mito::after: el brillo diagonal, que només es veu en :hover (a mòbil no existeix). */ #coleccion-grid .holo-foil { display: none !important; } #coleccion-grid .secret-mark { animation: none !important; } #coleccion-grid .card-mito::after { display: none !important; } /* Sense efecte HOVER a la col·lecció: l'aixecar + la VORA TEAL + el glow teal xocaven amb el daurat/element de la carta i l'afeaven. Es manté l'ombra base fosca. (petició usuari 2026-08) */ #coleccion-grid .card-mito:hover { transform: none !important; border-color: transparent !important; box-shadow: 0 10px 24px rgba(0,0,0,0.55) !important; } /* 🔴 PERF Xiaomi (2026-07-31): obrir el Mitolari encallava el Xiaomi perquè pintava 100 cartes DE COP, cadascuna amb el seu anell AAA (conic + màscara). La solució NO és treure els bordes (l'usuari els vol) — és **`content-visibility:auto`**: el navegador SALTA el layout/paint de les targetes fora de vista fins que s'hi arriba scrollejant, així només se'n pinten ~6-9 alhora en comptes de 100. Amb això, l'anell complet ja és assumible i els bordes es conserven íntegres. `contain-intrinsic-size` reserva l'espai (el grid ja fixa l'ample) perquè la barra de scroll no salti. Només perf-lite (mòbil). ⚠️ El que SÍ que pesa és l'INSPECTOR 3D en clicar una carta (rAF de física + reflex cònic): es capa a part. */ .perf-lite .region-card-grid > .card-wrapper, .perf-lite .region-card-grid > .mito-lvl-wrapper { content-visibility: auto; /* ⚠️ L'alçada reservada ha de coincidir amb la carta REAL (186×260, mesurat): abans reservava 190px i cada fila que entrava a vista CREIXIA 70px → reflow acumulat + salts de scroll (el "cuelgue" al Xiaomi). */ contain-intrinsic-size: 186px 260px; } /* El pols daurat de les mítiques (animació infinita) i els blur de la barra de filtres i la carta del dia es desactiven a mòbil via perf-lite (JS, fiable): vegeu el bloc .perf-lite d'aquest fitxer. */ /* (el resplendor daurat del Nivell 3 s'ha tret: aquesta regla de perf-lite ja no té res a apagar) */ /* Animació d'ENTRADA esglaonada de les cartes del Mitolari (abans apareixien de cop). El delay per carta el posa el JS (renderColeccion, esglaonat amb topall). fill-mode BACKWARDS a posta: amaga la carta durant el delay i, en acabar, TORNA el control al CSS normal → el hover del wrapper (translateY/scale) segueix funcionant. Amb `forwards`/`both` el transform final quedaria fixat i trencaria el hover. Només transform+opacity (compositor) → barat fins i tot en perf-lite. Es desactiva amb reduced-motion. */ @keyframes mitoCardIn { from { opacity: 0; transform: translateY(16px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } .mito-card-enter { animation: mitoCardIn 0.44s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } @media (prefers-reduced-motion: reduce) { .mito-card-enter { animation: none; } } /* Niveles en Fondos y Bordes */ .card-mito.level-1 { box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 0 15px rgba(255,255,255,0.05); } .card-mito.level-2 { box-shadow: 0 10px 20px rgba(0,0,0,0.55), inset 0 0 18px rgba(200, 210, 222, 0.22); } .card-mito.level-3 { box-shadow: 0 10px 22px rgba(0,0,0,0.6), inset 0 0 20px rgba(241, 196, 15, 0.35); } /* Contenedor Wrapper para cartas duplicadas con efecto de mazo apilado (una Ãºnica silueta trasera sutil) */ .card-wrapper { position: relative; display: block; overflow: visible; width: 186px; height: 260px; box-sizing: border-box; } .card-wrapper .card-mito { position: relative; z-index: 2; } /* Única silueta trasera que sobresale un poco por arriba y por la derecha */ .card-wrapper.has-duplicates::after { content: ''; position: absolute; top: -5px; /* Desplazamiento sutil hacia arriba */ left: 5px; /* Desplazamiento sutil hacia la derecha */ width: calc(100% - 5px); height: calc(100% - 5px); border-radius: 12px; background: linear-gradient(135deg, rgba(20, 30, 25, 0.95) 0%, rgba(10, 15, 12, 0.98) 100%); border: 1px solid rgba(255, 255, 255, 0.1); /* Mismo contorno de una carta normal */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55); z-index: 1; transform: rotate(1.2deg); transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); pointer-events: none; } /* Sutil efecto de deslizamiento interactivo al hacer Hover */ .card-wrapper.has-duplicates:hover::after { transform: translate(3px, -3px) rotate(2.5deg); border-color: rgba(26, 188, 156, 0.35); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.65); } /* Indicador de copias repetidas (Píldora 3D flotante y pulsante roja con texto) */ .card-count-badge { position: absolute; top: -7px; right: -7px; background: linear-gradient(135deg, #ff7675 0%, #d63031 100%); color: white; border-radius: 12px; padding: 3px 8px; height: 18px; display: flex; justify-content: center; align-items: center; font-size: 0.58rem; font-weight: 800; box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.2); border: 1px solid rgba(255, 255, 255, 0.4); z-index: 10; font-family: 'Outfit', sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,0.6); animation: badgePulse 2.5s ease-in-out infinite alternate; pointer-events: none; /* Asegura que hacer clic sobre el badge también cliquee la carta */ } @keyframes badgePulse { 0% { transform: scale(1); box-shadow: inset 0 1px 2px rgba(255,255,255,0.5), 0 4px 8px rgba(0,0,0,0.6); } 100% { transform: scale(1.08); box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), 0 6px 12px rgba(26, 188, 156, 0.4); } } .mito-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 7px; gap: 3px; width: 100%; flex-shrink: 0; /* Evita que el header se contraiga */ } /* .mito-title i .mito-region: definits al bloc "Immersió" (vora .mito-desc), única font de veritat */ .mito-img-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 11px; /* 🔴 El FONS DE L'ART segueix l'ELEMENT (mateix canvi que a joc.php). Era `#121c18` per a totes: un gris verdós que damunt d'una carta blava o verda es llegia com un forat negre, i com la majoria de mites encara no tenen il·lustració aquest bloc ÉS mig carta. `--scrim` ja porta el to fosc de cada element (el fa servir el degradat de sota el nom); el valor de reserva és el color antic. */ background-color: rgb(var(--scrim, 18,28,24)); background-position: top center; background-size: cover; z-index: 1; display: flex; justify-content: center; align-items: center; pointer-events: none; } /* Skeleton de càrrega d'imatge de carta: shimmer mentre baixa; l'engega crearElementoCartaMito(conSkeleton) */ .mito-img-bg.img-skeleton { background-color: #161f1b; background-image: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0) 70%); background-size: 220% 100%; background-repeat: no-repeat; animation: mitoSkeletonSweep 1.15s ease-in-out infinite; } @keyframes mitoSkeletonSweep { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } } .mito-img-bg.img-ready { animation: mitoImgFadeIn 0.35s ease; } @keyframes mitoImgFadeIn { from { opacity: 0.2; } to { opacity: 1; } } /* perf-lite i reduce-motion: placeholder estàtic, sense shimmer ni fade */ html.perf-lite .mito-img-bg.img-skeleton { animation: none; background-image: none; } @media (prefers-reduced-motion: reduce) { .mito-img-bg.img-skeleton { animation: none; background-image: none; } .mito-img-bg.img-ready { animation: none; } } .mito-overlay-text-container { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 3; display: flex; flex-direction: column; padding: 34px 0 10px 0; /* fade superior més llarg (desc de fins a 6 línies) */ pointer-events: none; border-bottom-left-radius: 11px; border-bottom-right-radius: 11px; overflow: hidden; } .level-1 .mito-overlay-text-container { background: linear-gradient(to top, rgba(26, 20, 12, 0.98) 0%, rgba(26, 20, 12, 0.9) 58%, rgba(40, 30, 16, 0.5) 84%, transparent 100%); } .level-2 .mito-overlay-text-container { background: linear-gradient(to top, rgba(20, 24, 28, 0.98) 0%, rgba(20, 24, 28, 0.9) 58%, rgba(38, 44, 50, 0.5) 84%, transparent 100%); } .level-3 .mito-overlay-text-container { background: linear-gradient(to top, rgba(30, 20, 5, 0.98) 0%, rgba(30, 20, 5, 0.9) 58%, rgba(45, 30, 10, 0.5) 84%, transparent 100%); } /* ===== Bloc de text de la carta (disseny "Immersió", estil AAA) ===== */ .mito-info-below-img { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; padding: 0 10px; margin-bottom: 4px; gap: 4px; } /* Nom: MAJÚSCULES, daurat degradat, màx 2 línies */ .mito-title { font-family: 'Outfit', sans-serif; font-size: 0.84rem; /* fallback sense container queries */ font-size: clamp(12px, 8.2cqw, 24px); /* escala amb l'ample de la carta */ font-weight: 900; line-height: 1.08; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; width: 100%; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: #ffdd80; /* fallback si background-clip:text no és suportat */ background: linear-gradient(180deg, #fff7e0, #ffdd80 58%, #e0a92e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)); } /* Coherència de metalls al títol: base = OR (Mític); nivell 1 = BRONZE, nivell 2 = PLATA */ .card-mito.level-1 .mito-title { color: #f0bd85; background: linear-gradient(180deg, #ffeedd, #f0bd85 58%, #c67f3a); -webkit-background-clip: text; background-clip: text; } .card-mito.level-2 .mito-title { color: #dfe7ee; background: linear-gradient(180deg, #ffffff, #e6edf3 58%, #aebbc7); -webkit-background-clip: text; background-clip: text; } /* Paràgraf del nivell 1: marró clar (a joc amb el fons bronze de la placa) */ .card-mito.level-1 .mito-desc { color: #e9d0ae; } /* Línia d'identitat: COL·LECCIÓ · #NÚM (esquerra) + tag de classe (dreta) */ .mito-meta { display: flex; justify-content: center; /* tot el bloc d'identitat CENTRAT: COL·LECCIÓ · #NÚM · [classe] */ align-items: center; gap: 4px; font-size: 0.44rem; font-size: clamp(6.5px, 4cqw, 11px); font-weight: 800; letter-spacing: 0.2px; text-transform: uppercase; color: #d5e9ef; } .mito-region { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mito-sep { opacity: 0.45; flex-shrink: 0; } .mito-classe { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 4px; border-radius: 20px; background: rgba(0, 0, 0, 0.48); border: 1px solid rgba(255, 255, 255, 0.22); color: #eef4f6; font-size: 0.43rem; font-size: clamp(6.5px, 3.9cqw, 11px); font-weight: 800; letter-spacing: 0.4px; white-space: nowrap; flex-shrink: 0; } .mito-classe svg { width: 1em; height: 1em; flex-shrink: 0; opacity: 0.85; } /* (La línia d'identitat ja escala amb cqw+clamp; els ajustos per mida es fan sols.) */ .mito-desc { font-size: 0.6rem; /* fallback sense container queries */ font-size: clamp(8.5px, 4.6cqw, 13px); /* paràgraf proporcional a l'ample de la carta */ color: #e2eef2; text-align: left; /* alineat a l'esquerra (millor lectura que justificat) */ line-height: 1.4; flex-grow: 1; overflow: hidden; margin-bottom: 5px; font-style: normal; font-weight: 400; padding: 0 14px; /* fallback */ padding: 0 clamp(14px, 9cqw, 30px); /* més aire als laterals, proporcional a l'ample */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); /* Elipsis multilínea nativa para evitar letras cortadas a la mitad */ display: -webkit-box; -webkit-line-clamp: 6; /* fins a ~190 caràcters */ -webkit-box-orient: vertical; text-overflow: ellipsis; } /* En cartes PETITES (prep, minicartes), menys línies de descripció → l'art no queda tapat. La col·lecció (210px+) i l'inspector (179px) conserven el text complet. */ @container (max-width: 168px) { .mito-desc { -webkit-line-clamp: 3; } } @container (max-width: 132px) { .mito-desc { display: none; } /* molt petites: només nom + identitat + matèries */ } /* HABILITAT IMPRESA (2026-07-24): divisor + icona del NIVELL + text a 1 línia. MATEIX bloc i mateixos textos que la carta del duel (joc.php); aquí escala amb container queries com la resta de la carta. Alineada a l'ESQUERRA per anar amb .mito-desc, que és qui té just a sobre. El GLYPH diu quina habilitat és; el COLOR el diu el nivell (els SVG van amb currentColor). */ .card-mito .hab-div { height: 1px; margin: 2.22cqw 7.11cqw 0; /* 5px 16px @225: ALINEAT amb bandes i desc */ background: linear-gradient(90deg, transparent, rgba(232,196,115,0.5), transparent); } .card-mito .hab-txt { display: flex; align-items: center; gap: 2.22cqw; /* 5px @225 */ margin: 1.78cqw 7.11cqw 0; /* 4px 16px @225: MATEIX caire esquerre que la desc */ text-align: left; font-size: clamp(7px, 4.1cqw, 19px); /* límits amplis: mida purament proporcional */ line-height: 1.25; color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.85); } .card-mito .hab-ic { flex: 0 0 auto; width: clamp(9px, 8cqw, 36px); height: clamp(9px, 8cqw, 36px); /* 18px @225, com la plantilla */ color: #fff; /* BLANC per a totes: el metall marcava el nivell, i ja no n'hi ha */ } .card-mito .hab-ic svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.85)); } /* Cartes molt petites (mateix llindar que .mito-desc): fora divisor i text, queda NOMÉS la icona */ @container (max-width: 132px) { .card-mito .hab-div { display: none; } .card-mito .hab-tx { display: none; } .card-mito .hab-txt { justify-content: center; margin-top: 3px; } } /* Permitir descripción e incrementar altura de la imagen en las cartas del tablero del duelo */ #juego-tablero .card-mito .mito-desc { display: block !important; } #juego-tablero .card-mito .mito-img-bg { height: 100% !important; } .mito-footer { display: flex; justify-content: flex-end; /* Alinea los costes de materias a la derecha en el footer inferior */ align-items: center; border-top: none; /* Eliminada la línea fina divisoria */ padding: 6px 12px 6px 12px; flex-shrink: 0; } /* Los costes de esencias vuelven a renderizarse dentro del footer inferior centrado */ .mito-rarity-text { font-size: 0.55rem; text-transform: uppercase; font-weight: 700; } .level-1 .mito-rarity-text { color: var(--common); } .level-2 .mito-rarity-text { color: var(--epic); } .level-3 .mito-rarity-text { color: var(--legendary); } .mito-cost { display: flex; gap: 4px; gap: clamp(3px, 1.8cqw, 6px); align-items: center; } .cost-dot { width: 20px; /* fallback sense container queries */ width: clamp(16px, 11cqw, 28px); /* esferes proporcionals a l'ample de la carta (≈ com a l'inspector) */ height: 20px; height: clamp(16px, 11cqw, 28px); border-radius: 50%; font-size: 11px; /* la icona és 1em → escala amb la mida de l'esfera */ font-size: clamp(9px, 6cqw, 15px); display: flex; justify-content: center; align-items: center; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.45), 0 2px 4px rgba(0,0,0,0.4); position: relative; transition: transform 0.2s ease; cursor: help; } .cost-dot:hover { transform: scale(1.25); z-index: 2; } .cost-emoji { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); line-height: 1; } .cost-dot.fuego { background: radial-gradient(circle at 35% 35%, #ff7675 0%, #d63031 75%, #7f0808 100%); border: 1px solid rgba(255, 255, 255, 0.45); } .cost-dot.tierra { background: radial-gradient(circle at 35% 35%, #a8e6cf 0%, #27ae60 75%, #14582f 100%); border: 1px solid rgba(255, 255, 255, 0.45); } .cost-dot.agua { background: radial-gradient(circle at 35% 35%, #74b9ff 0%, #0984e3 75%, #083b66 100%); border: 1px solid rgba(255, 255, 255, 0.45); } .cost-dot.aire { background: radial-gradient(circle at 35% 35%, #ffffff 0%, #b2bec3 75%, #4b5257 100%); border: 1px solid rgba(255, 255, 255, 0.45); } .cost-dot.eter { background: radial-gradient(circle at 35% 35%, #d6bcff 0%, #9540e8 72%, #46128c 100%); border: 1px solid rgba(255, 255, 255, 0.45); } /* ================= 2. ESTILOS DE SOBRES ================= */ /* ================= 2. ESTILOS DE SOBRES ================= */ /* Ressalt breu de la Botiga quan l'upsell (sobre extra sense monedes) hi porta l'usuari */ @keyframes botigaPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(241,196,15,0); } 50% { box-shadow: 0 0 0 5px rgba(241,196,15,0.35); } } .botiga-highlight { animation: botigaPulse 1.1s ease-in-out 2; border-radius: 20px; } /* Zona de pagaments: subscripció (esquerra) + botiga de moneda (dreta), en fila a desktop/tablet */ .pagaments-row { display: flex; flex-wrap: wrap; gap: 22px; align-items: stretch; justify-content: center; width: 100%; max-width: 100%; /* tan ampla com el banner de la Carta del Dia (= 100% de l'.app-container); abans 1120px */ margin: 12px auto 24px; box-sizing: border-box; } .pagaments-row > #subscripcio-content { flex: 1 1 300px; min-width: 280px; display: flex; /* perquè la targeta ompli tota la columna */ } .pagaments-row > #botiga-content { flex: 1.7 1 440px; min-width: 320px; /* marc propi (a joc amb la targeta de subscripció) per cohesió visual */ background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.10); border-radius: 20px; box-shadow: 0 12px 34px rgba(0,0,0,0.4); padding: 16px 18px 8px; box-sizing: border-box; } @media (max-width: 900px) { .pagaments-row { flex-direction: column; align-items: center; } .pagaments-row > #subscripcio-content, .pagaments-row > #botiga-content { flex: 1 1 auto; width: 100%; max-width: 620px; } } /* Fila ràpida de l'Inici: reclam de Cristalls gratis (JS, #inici-reclams) + teaser d'accés a la BOTIGA (→ botiga.php). Costat a costat SEMPRE (també en mòbil: l'inici es veu en horitzontal al telèfon). El teaser té EL MATEIX format que la targeta de Cristalls (renderReclamosInici, estils inline): targeta VERTICAL centrada = emoji en cercle a dalt · títol (1.12rem, = Cristalls) · subtítol · botó a baix. */ /* flex-wrap:wrap → mai desborda horitzontalment: en horitzontal (≥~552px, tots els telèfons) van costat a costat perquè el basis 250 hi cap; només s'apilen sota ~552px (vertical, que ja tapa el rotate-prompt). */ .inici-quick { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: stretch; max-width: 1100px; margin: 26px auto 10px; padding: 0 14px; box-sizing: border-box; } .inici-quick > #inici-reclams { margin: 0; padding: 0; max-width: none; flex: 1 1 250px; min-width: 0; } .botiga-teaser { flex: 1 1 250px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; padding: 24px 22px 22px; text-decoration: none; background: linear-gradient(160deg, rgba(241,196,15,0.10), rgba(0,210,211,0.05)); border: 1px solid rgba(200,155,60,0.38); border-radius: 18px; box-shadow: 0 10px 28px rgba(0,0,0,0.35); transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .botiga-teaser:hover { transform: translateY(-3px); border-color: rgba(200,155,60,0.65); box-shadow: 0 16px 42px rgba(0,0,0,0.5); } .botiga-teaser:active { transform: translateY(-1px) scale(0.99); } /* Emoji dins un cercle daurat de 64px, a dalt centrat (= .reclam de Cristalls) */ .botiga-teaser .bt-ic { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; line-height: 1; background: radial-gradient(circle at 30% 30%, rgba(241,196,15,0.32), rgba(241,196,15,0.04)); border: 1px solid rgba(241,196,15,0.45); box-shadow: inset 0 0 14px rgba(241,196,15,0.18), 0 0 20px rgba(241,196,15,0.12); } .botiga-teaser .bt-body { display: flex; flex-direction: column; align-items: center; gap: 6px; } .botiga-teaser .bt-title { font-family: 'Outfit',sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: 1.12rem; line-height: 1.25; background: linear-gradient(135deg,#c89b3c,#f0e6d2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .botiga-teaser .bt-sub { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.45; max-width: 250px; } /* Desktop: el sub del reclam de Cristalls i de Missions diàries agafa la mateixa mida que el subtítol del Sobre del Dia (1.08rem) */ @media (min-width: 1024px) { .botiga-teaser .bt-sub, .reclam-sub { font-size: 1.08rem !important; line-height: 1.5 !important; max-width: 340px !important; } } /* Botó "Accedir" a l'ample complet, empès a BAIX (margin-top:auto) com el botó de Cristalls */ .botiga-teaser .bt-btn { width: 100%; margin-top: auto; padding: 12px 18px; border-radius: 22px; font-family: 'Outfit',sans-serif; font-weight: 800; font-size: 0.9rem; box-sizing: border-box; color: #2a1a05; background: linear-gradient(135deg,#f5c542,#e0a92e); box-shadow: 0 4px 14px rgba(241,196,15,0.25); } @media (max-width: 900px) { /* Mòbil: segueixen COSTAT A COSTAT i amb el MATEIX format que Cristalls (no compactem res per no desquadrar-los); només reduïm una mica el gap perquè hi càpiguen tots dos en horitzontal. */ .inici-quick { gap: 12px; padding: 0 10px; margin-top: 16px; } } /* === CONTENIDOR PRINCIPAL DE SOBRES (inline a la colecció) === */ .sobres-container-inline { width: 100%; margin: 0 0 35px 0; background: radial-gradient(ellipse at 50% 0%, rgba(200, 155, 60, 0.08) 0%, rgba(15, 12, 8, 0.95) 70%); border: 1px solid rgba(200, 155, 60, 0.25); border-radius: 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 40px; /* una mica més baix que abans (36px) */ box-sizing: border-box; overflow: hidden; position: relative; } /* ===== Fons il·lustrat del banner "Sobre del Dia" segons l'estat ===== */ /* La classe (sobre-ok / sobre-no) la posa actualizarEstadoSobres() a app.js. Una vela fosca a sobre de la imatge perquè el títol daurat i el subtítol clar es llegeixin bé. */ .sobres-container-inline.sobre-ok, .sobres-container-inline.sobre-no { background-size: cover; background-position: center; } .sobres-container-inline.sobre-ok { background-image: linear-gradient(180deg, rgba(10,8,5,0.55) 0%, rgba(10,8,5,0.42) 45%, rgba(10,8,5,0.62) 100%), url("assets/sobre_del_dia_ok_background.jpg"); } .sobres-container-inline.sobre-no { background-image: linear-gradient(180deg, rgba(10,8,5,0.55) 0%, rgba(10,8,5,0.42) 45%, rgba(10,8,5,0.62) 100%), url("assets/sobre_del_dia_no_background.jpg"); } /* Estat SENSE sobre: s'amaga el "sobre" (pack pla + 3D + cadenat) i queda només el fons + el compte enrere + el botó de compra. En pagar cristalls, l'estat torna a sobre-ok i el sobre reapareix. */ .sobres-container-inline.sobre-no #booster-pack, .sobres-container-inline.sobre-no .booster-preloader { display: none !important; } .sobres-container-inline.sobre-no #booster-locked { background: transparent !important; border: none !important; box-shadow: none !important; min-height: 0 !important; } .sobres-container-inline.sobre-no #booster-locked .booster-pack-shine, .sobres-container-inline.sobre-no #booster-locked .booster-lock-container, .sobres-container-inline.sobre-no #booster-locked .booster-locked-title, .sobres-container-inline.sobre-no #booster-locked canvas { display: none !important; } .sobres-container-inline.sobre-no #booster-locked .booster-pack-art.locked-art { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; height: auto !important; } /* Ambient glow top strip */ .sobres-container-inline::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 2px; background: linear-gradient(90deg, transparent, rgba(200,155,60,0.7), transparent); border-radius: 2px; } /* Quan el botó d'obrir és ocult (cooldown), amagar també el separador */ #btn-open-booster[style*="display: none"] + .sobre-divider, #btn-open-booster[style*="display:none"] + .sobre-divider { display: none; } /* === SELECTOR PRINCIPAL (envoltura interna) === */ .sobre-selector { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; /* menys separació vertical → banner una mica més baix */ } /* DESKTOP: banner del Sobre del Dia HORITZONTAL (com el mòbil) — text a l'esquerra i el sobre VOLANT a la dreta, damunt del suport de la bústia del fons il·lustrat. (El mòbil landscape té la seva pròpia regla.) */ .sobre-br { display: none; } /* salt de línia del subtítol NOMÉS a desktop (s'activa a la media de sota) */ @media (min-width: 1024px) { .sobre-subtitle .sobre-br { display: inline; } .sobre-selector { position: relative; align-items: flex-start; justify-content: center; /* bloc de text CENTRAT verticalment (no enganxat a dalt) */ text-align: left; gap: 10px; padding: 26px 440px 26px 52px; /* espai reservat a la dreta per al sobre (més gran) */ min-height: 420px; box-sizing: border-box; } .sobre-header { text-align: left !important; margin: 0; } .sobre-selector .sobre-title { text-align: left !important; margin: 0 0 8px !important; } /* acotat: NO afecta el títol de la pantalla de Jugar */ .sobre-subtitle { text-align: left !important; margin: 0 !important; max-width: 440px; } #btn-open-booster { align-self: flex-start; margin: 8px 0 0; width: auto; } .sobre-comprar-simple { align-self: flex-start; margin: 6px 0 0; } .sobre-divider { display: none; } .sobre-selector .booster-pack-wrapper { position: absolute; right: 78px; top: 50%; transform: translateY(-56%); /* una mica a l'esquerra → dins de la bústia */ padding: 0; margin: 0; min-height: 0; } .sobre-selector .booster-pack { zoom: 0.8; } /* sobre més gran en desktop */ } /* Capçalera */ .sobre-header { text-align: center; } .sobre-title { font-family: 'Outfit', sans-serif; font-size: 2.2rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; background: linear-gradient(135deg, #c89b3c, #f0e6d2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0 auto 10px auto; text-shadow: 0 0 30px rgba(200, 155, 60, 0.2); width: 100%; } .sobre-subtitle { color: #fff; font-size: 1.08rem; /* mateixa mida que .cdb-subtitle (Carta del Dia) */ margin: 0 auto 25px auto; line-height: 1.5; text-align: center; max-width: 600px; } .sobre-subtitle strong { color: #ffd700; } /* Cos principal: sobre (esquerra) + info (dreta) */ .sobre-body { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 50px; width: 100%; flex-wrap: wrap; } /* Àrea visual del sobre */ .sobre-visual-area { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 0 0 auto; } /* Override: wrapper centrat sense padding excessiu */ .sobre-selector .booster-pack-wrapper { padding: 8px 0; justify-content: center; } /* Botó principal d'obrir */ .btn-sobre-obrir { width: 190px; padding: 12px 24px; background: linear-gradient(135deg, rgba(200, 155, 60, 0.18), rgba(200, 155, 60, 0.35)); border: 1.5px solid rgba(200, 155, 60, 0.55); border-radius: 50px; color: #ffd700; font-family: 'Outfit', sans-serif; font-size: 0.88rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 16px rgba(200, 155, 60, 0.2), inset 0 1px 0 rgba(255,255,255,0.1); } .btn-sobre-obrir:hover:not(:disabled) { background: linear-gradient(135deg, rgba(200, 155, 60, 0.3), rgba(200, 155, 60, 0.5)); box-shadow: 0 6px 24px rgba(200, 155, 60, 0.45); transform: translateY(-2px) scale(1.03); } .btn-sobre-obrir:disabled { opacity: 1; cursor: not-allowed; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.45); font-size: 0.82rem; letter-spacing: 0.5px; filter: none; transform: none; box-shadow: none; } /* Compra simplificada: una sola línia discreta */ .sobre-comprar-simple { display: flex; justify-content: center; } .btn-sobre-comprar-simple { /* Botó de compra AZUL amb lletres blanques — IGUAL que el de la Carta del Dia (.daily-offer-btn). */ background: linear-gradient(135deg, #3aa8ff, #2563eb); border: 1px solid rgba(255,255,255,0.28); border-radius: 50px; color: #fff; font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 800; padding: 12px 26px; cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.5px; text-transform: uppercase; white-space: normal; text-align: center; line-height: 1.25; box-shadow: 0 6px 18px rgba(37,99,235,0.35); } .btn-sobre-comprar-simple:hover { background: linear-gradient(135deg, #4db3ff, #2f6fe0); filter: brightness(1.05); } .btn-sobre-comprar-simple:hover:not(:disabled) { border-color: rgba(255,255,255,0.4); color: #fff; background: linear-gradient(135deg, #4db3ff, #2f6fe0); } .btn-sobre-comprar-simple strong { color: inherit; } /* Quan el sobre és tancat, el botó de compra es promou com a CTA principal (blau, amb una lluïssor extra). */ .btn-sobre-comprar-highlight { box-shadow: 0 6px 22px rgba(37,99,235,0.55) !important; } /* Àrea d'informació i accions (dreta) */ .sobre-info-area { display: flex; flex-direction: column; gap: 16px; min-width: 260px; max-width: 320px; flex: 1; padding-top: 10px; } /* Targeta d'estat del sobre gratuït */ .sobre-estat-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; } .sobre-estat-label { font-family: 'Outfit', sans-serif; font-size: 0.65rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); } .sobre-estat-value { display: flex; align-items: center; gap: 10px; font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700; color: #1abc9c; } .sobre-estat-icon { font-size: 1.3rem; line-height: 1; } /* Separador horitzontal */ .sobre-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); margin: 0; } /* Targeta de compra d'sobre extra */ .sobre-comprar-card { background: rgba(200, 155, 60, 0.05); border: 1px solid rgba(200, 155, 60, 0.2); border-radius: 16px; padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 300px; box-sizing: border-box; } .sobre-comprar-header { display: flex; align-items: flex-start; gap: 12px; } .sobre-comprar-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; margin-top: 2px; } .sobre-comprar-title { font-family: 'Outfit', sans-serif; font-size: 0.92rem; font-weight: 800; color: #ffd700; margin-bottom: 2px; } .sobre-comprar-desc { font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); line-height: 1.4; } .btn-sobre-comprar { width: 100%; padding: 11px 20px; background: linear-gradient(135deg, rgba(200, 155, 60, 0.15), rgba(200, 155, 60, 0.3)); border: 1.5px solid rgba(200, 155, 60, 0.4); border-radius: 12px; color: #ffd700; font-family: 'Outfit', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; transition: all 0.2s ease; text-align: center; } .btn-sobre-comprar:hover:not(:disabled) { background: linear-gradient(135deg, rgba(200, 155, 60, 0.25), rgba(200, 155, 60, 0.45)); box-shadow: 0 4px 16px rgba(200, 155, 60, 0.3); transform: translateY(-1px); } .btn-sobre-comprar strong { color: #ffe066; } /* Zona del botó de desenvolupador */ .sobre-dev-area { padding-top: 4px; border-top: 1px dashed rgba(255, 255, 255, 0.08); } .btn-dev-reset { background: none; border: 1px solid rgba(231, 76, 60, 0.2); border-radius: 8px; color: rgba(231, 76, 60, 0.7); font-size: 0.65rem; font-weight: 600; padding: 5px 12px; cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.5px; } .btn-dev-reset:hover { border-color: rgba(231, 76, 60, 0.5); color: #e74c3c; background: rgba(231, 76, 60, 0.06); } /* === Herència del .sobres-container original (mantenir compatibilitat) === */ .sobres-container { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 480px; padding: 10px 0; } /* === PANEL DE REVELACIÓ DE CARTES === */ .opened-cards-panel { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; padding: 32px 30px 28px; box-sizing: border-box; min-height: 520px; } /* ═══ Obertura de sobre com a MODAL centrat (missatge), NO inline sota el banner. El #opened-cards-panel es mou a via JS i fa de BACKDROP fosc; el contingut viu dins de .reveal-modal (caixa centrada). ═══ */ /* Especificitat d'ID (#) per guanyar a `#opened-cards-panel { min-height:420px; padding:25px }` (línies 4813/5085, herència del reveal inline) que feien el backdrop més alt que la pantalla i amb padding gros → el contingut baixava. */ #opened-cards-panel:not(.hidden) { position: fixed !important; inset: 0 !important; z-index: 100000 !important; display: flex !important; justify-content: center !important; align-items: center !important; width: auto !important; height: 100dvh !important; min-height: 0 !important; max-height: none !important; /* dvh: centra la carta en el viewport VISIBLE (barres incloses) */ padding: 6px !important; margin: 0 !important; background: rgba(4, 8, 6, 0.82) !important; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); animation: revealBackdropIn 0.25s ease both; } @keyframes revealBackdropIn { from { opacity: 0; } to { opacity: 1; } } .reveal-modal { display: flex; flex-direction: column; align-items: center; position: relative; /* ancoratge de la fletxa absoluta (.reveal-next-arrow, left:100% = vora dreta de la carta) */ background: none; border: none; box-shadow: none; /* SENSE rectangle: la carta flota sobre el backdrop */ padding: 12px 20px; width: auto; max-width: 96vw; max-height: 96vh; max-height: 96dvh; overflow: visible; /* visible perquè els sparks no es retallin */ animation: revealModalIn 0.32s cubic-bezier(0.34,1.56,0.64,1) both; } @keyframes revealModalIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Sense el títol "Mites Revelats!" ni la frase "Encara queden cartes...": el modal queda més compacte i clar (la carta + el progrés "Carta X de N" + el botó ja s'expliquen sols). */ .reveal-modal .reveal-title { display: none !important; } .reveal-modal .reveal-prompt { display: none !important; } .reveal-modal .reveal-header { display: none !important; } /* fora "Carta X de N" (i la capçalera, que quedava buida) */ /* dins del modal la carta no necessita el min-height gegant ni marges enormes del panell antic */ .reveal-modal .reveal-arena { transform: none !important; zoom: 1.05 !important; margin: 20px auto 14px !important; } /* IGUAL que al Mitolari (petició usuari): ~188px, la mateixa mida que una carta de la reixa (abans 1.35≈242px, més gran). `zoom` = petjada real, no desborda */ /* ═══ Spark/llum en revelar cada carta del sobre: glow darrere + burst radial de guspires. Base = turquesa suau; NOVA (.is-new) = DAURAT, més brillant i amb més guspires (les afegeix el JS). ═══ */ .reveal-card-front { position: relative; overflow: visible; } .reveal-card-front::before { content: ''; position: absolute; inset: -10%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(0,210,211,0.32) 0%, transparent 65%); filter: blur(18px); animation: revealGlowPulse 2.2s ease-in-out infinite; } .reveal-card-front.is-new::before { background: radial-gradient(circle, rgba(255,205,80,0.55) 0%, rgba(255,205,80,0.12) 45%, transparent 68%); animation-duration: 1.8s; } @keyframes revealGlowPulse { 0%,100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } } .reveal-sparks { position: absolute; top: 50%; left: 50%; width: 0; height: 0; z-index: 30; pointer-events: none; } .reveal-spark { position: absolute; top: 0; left: 0; width: var(--sz, 6px); height: var(--sz, 6px); margin: calc(var(--sz, 6px) / -2) 0 0 calc(var(--sz, 6px) / -2); border-radius: 50%; background: radial-gradient(circle, #fff 0%, #bfeee9 45%, rgba(0,210,211,0.2) 70%, transparent 72%); box-shadow: 0 0 6px rgba(191,238,233,0.85); opacity: 0; transform: rotate(var(--ang)) translateX(18px) scale(0.2); animation: revealSpark 1.15s ease-out var(--delay, 0s) both; } .reveal-sparks.is-new .reveal-spark { background: radial-gradient(circle, #fff 0%, #ffe6a0 45%, rgba(255,195,55,0.25) 70%, transparent 72%); box-shadow: 0 0 9px rgba(255,205,80,0.95); } @keyframes revealSpark { 0% { opacity: 0; transform: rotate(var(--ang)) translateX(18px) scale(0.2); } 25% { opacity: 1; transform: rotate(var(--ang)) translateX(var(--dist, 100px)) scale(1); } 100% { opacity: 0; transform: rotate(var(--ang)) translateX(calc(var(--dist, 100px) + 26px)) scale(0.2); } } /* FLETXA per avançar (#btn-next-card, que el JS ja cablava a `avancar`): NOMÉS la fletxa daurada — SENSE cercle de sota ni halo (el daurat de BOTÓ es reserva per al "Desar", així no competeixen). ABSOLUTA a la dreta de la carta: no ocupa flux → la CARTA queda CENTRADA. S'avança clicant la fletxa O la carta. Efecte: vaivé + ressalt al hover. */ .reveal-next-arrow { /* El top:50% és del MODAL (que inclou el footer) i l'arena té 10px més que la carta (260 vs 250) → la fletxa cauria per sota del centre REAL de la carta. Es compensa amb --arrow-dy, que depèn del padding de cada context (mesurat: base ≈ -11px, horitzontal ≈ -1px perquè allà el padding 22/8 ja compensa). */ --arrow-dy: -11px; position: absolute; left: 100%; top: 50%; margin-left: 6px; transform: translateY(calc(-50% + var(--arrow-dy))); display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: none; padding: 0; cursor: pointer; z-index: 30; background: none; box-shadow: none; /* sense la rodona de sota */ color: #ffd98a; /* fletxa daurada (l'SVG usa fill:currentColor) */ transition: filter 0.15s ease, transform 0.1s ease; } .reveal-next-arrow svg { width: 46px; height: 46px; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7)); /* es llegeix sobre el backdrop sense necessitar cercle */ animation: nextArrowNudge 1.4s ease-in-out infinite; } /* Pantalles ESTRETES (<480px): a la dreta de la carta hi caben ~54px → fletxa i marge més petits per no desbordar. (A la pràctica el telèfon va en horitzontal forçat —[[mobile-landscape-app]]— però així no se surt mai.) */ @media (max-width: 480px) { .reveal-next-arrow { width: 44px; height: 44px; margin-left: 0; } .reveal-next-arrow svg { width: 34px; height: 34px; } } .reveal-next-arrow:hover { filter: brightness(1.15); } .reveal-next-arrow:active { transform: translateY(calc(-50% + var(--arrow-dy))) scale(0.9); } @keyframes nextArrowNudge { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } } /* Botó "Desar a l'Àlbum" (última carta): estil DAURAT (mateixa família que els botons dels missatges) i a la CANTONADA INFERIOR DRETA de la carta. Absolut → no ocupa flux, així la carta segueix CENTRADA també a l'última. */ #btn-collect-booster { position: absolute; left: 100%; bottom: 12px; margin-left: 30px; /* desplaçat més a la dreta */ background: linear-gradient(180deg, #ffd98a, #e8a63a); color: #3a2708; border: none; white-space: nowrap; box-shadow: 0 3px 12px rgba(0,0,0,0.42); transition: filter 0.15s ease; } #btn-collect-booster:hover { filter: brightness(1.09); } @media (max-width: 480px) { /* estret: no hi cap al costat → torna al flux, sota la carta */ #btn-collect-booster { position: static; margin-left: 0; } } @keyframes tapBob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px) scale(0.92); } } @keyframes tapRipple { 0% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.35); } 70% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } } /* Sobre obert a HORITZONTAL (poca alçada): carta CENTRADA i més petita. Ja NO cal la fila (carta+botó al costat): la fletxa d'avançar és ABSOLUTA (.reveal-next-arrow) i no ocupa flux, així que la carta se centra sola i el modal només l'ha de contenir a ella. La carta amb `zoom` (redueix la petjada real). */ @media (orientation: landscape) and (max-height: 600px) { .reveal-modal { padding: 22px 14px 8px !important; max-height: 96vh; max-height: 96dvh; } /* padding-top = hueco per al badge "NOVA/REPETIDA" que flota sobre la carta */ .reveal-modal .reveal-header { margin: 0 !important; padding: 0 !important; } .reveal-modal .reveal-arena { transform: none !important; zoom: 1.05 !important; margin: 0 !important; } /* IGUAL que al Mitolari (petició usuari): ~188px, com una carta de la reixa (abans 1.25≈224px, més gran) */ .reveal-modal .reveal-footer { margin-top: 6px !important; } .reveal-modal .reveal-footer .btn { padding: 8px 16px !important; font-size: 0.78rem !important; white-space: nowrap; } .reveal-next-arrow { width: 50px; height: 50px; margin-left: 2px; --arrow-dy: -1px; } /* aquí el padding 22/8 ja centra */ .reveal-next-arrow svg { width: 40px; height: 40px; } } /* NOMÉS alçades MOLT baixes (mòbil landscape amb barres): abans reduïa des de 480px → la carta sortia MASSA PETITA a alçades normals. Ara el sobre manté la seva mida (zoom 1 del landscape / 1.35 base) fins a 330px, i només per sota redueix SUAUMENT perquè hi càpiga sencer. Van DESPRÉS del landscape (zoom:1) → guanyen; el desktop (min-height:601) no hi entra. */ @media (max-height: 330px) { .reveal-modal .reveal-arena { zoom: 1.02 !important; } } @media (max-height: 290px) { .reveal-modal .reveal-arena { zoom: 0.88 !important; } } /* TABLET/DESKTOP (pantalla ampla i alta): la carta del reveal IGUAL que a la reixa del Mitolari (petició usuari): zoom 1.34 ≈ 240px, la mateixa mida que una carta de la reixa de 5 columnes. (Abans era 1.65 ≈ 295px, deliberadament més gran com a moment "hero"; l'usuari vol paritat.) El guard min-height:601px evita xafar el telèfon-horitzontal. */ @media (min-width: 992px) and (min-height: 601px) { .reveal-modal .reveal-arena { transform: none !important; zoom: 1.34 !important; margin: 14px auto 10px !important; } } .reveal-header { text-align: center; margin-bottom: 0; padding-bottom: 6px; /* Deixa espai visual per al tag NOVA que flota sobre la carta */ } .reveal-title { font-family: 'Outfit', sans-serif; font-size: 1.7rem; font-weight: 800; letter-spacing: 1px; color: #1abc9c; text-shadow: 0 2px 12px rgba(26, 188, 156, 0.25); margin: 0 0 10px 0; border: none; } .reveal-progress-badge { display: inline-block; font-size: 0.72rem; color: #1abc9c; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; background: rgba(26, 188, 156, 0.1); padding: 5px 16px; border-radius: 20px; border: 1px solid rgba(26, 188, 156, 0.22); } .reveal-footer { text-align: center; width: 100%; margin-top: 8px; } .reveal-prompt { color: var(--text-secondary); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.5px; margin: 0 0 14px 0; animation: pulseText 1.5s infinite alternate; } .reveal-btn-row { text-align: center; min-height: 0; /* abans 48px per reservar el slot del hint; ara la fletxa és ABSOLUTA i no ocupa flux → amb 0 la fila no reserva alçada i la CARTA queda centrada a la pantalla. */ display: flex; justify-content: center; align-items: center; } .reveal-btn-row .btn.btn-primary { padding: 12px 30px; font-weight: 700; letter-spacing: 1px; box-shadow: 0 0 20px rgba(26, 188, 156, 0.4); text-transform: uppercase; font-size: 0.9rem; } /* Retrocompatibilitat (ID selectors) */ #opened-cards-panel { width: 100%; } .booster-pack-wrapper { display: flex; justify-content: center; align-items: center; padding: 30px 0; position: relative; } /* Sobre disponible: pulso de disponibilidad */ .booster-pack.pack-ready { animation: packReady 1.8s ease-in-out infinite; } @keyframes packReady { 0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 0px rgba(26,188,156,0); } 50% { transform: translateY(-8px) scale(1.02); box-shadow: 0 25px 45px rgba(0,0,0,0.7), 0 0 30px rgba(26,188,156,0.5); } } /* Sobre bloqueado */ .booster-pack.booster-locked { background: radial-gradient(circle at center, rgba(30, 25, 20, 0.98) 0%, rgba(10, 10, 10, 0.99) 100%) !important; border: 3px solid rgba(200, 155, 60, 0.25) !important; box-shadow: 0 15px 35px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.8) !important; position: relative; cursor: not-allowed !important; transition: all 0.3s ease-in-out; } .booster-pack.booster-locked::before, .booster-pack.booster-locked::after { background: repeating-linear-gradient(90deg, #cd7f32, #cd7f32 2px, #8b4513 2px, #8b4513 4px) !important; opacity: 0.6; } .booster-pack.booster-locked:hover { border-color: rgba(200, 155, 60, 0.45) !important; box-shadow: 0 15px 40px rgba(200, 155, 60, 0.15), inset 0 0 20px rgba(0,0,0,0.8) !important; } .booster-pack.booster-locked:hover .booster-pack-shine { left: 100%; } .booster-pack-art.locked-art { display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; padding: 35px 20px 32px 20px; box-sizing: border-box; } .booster-lock-container { background: rgba(200, 155, 60, 0.04); border: 2px solid rgba(200, 155, 60, 0.18); border-radius: 50%; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 20px rgba(0,0,0,0.4), inset 0 0 15px rgba(200, 155, 60, 0.05); animation: lockPulse 3s ease-in-out infinite; } .booster-lock-icon { font-size: 2.2rem; display: flex; justify-content: center; align-items: center; } @keyframes lockPulse { 0%, 100% { opacity: 0.7; transform: scale(1); box-shadow: 0 0 15px rgba(200, 155, 60, 0.1); } 50% { opacity: 1; transform: scale(1.06); box-shadow: 0 0 25px rgba(200, 155, 60, 0.25); } } .booster-locked-title { font-family: 'Outfit', sans-serif !important; font-size: 1.05rem !important; font-weight: 800 !important; letter-spacing: 2px !important; color: rgba(255, 255, 255, 0.45) !important; margin-top: 15px !important; text-transform: uppercase !important; line-height: 1.2 !important; } .booster-cooldown-container { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: auto; } .cooldown-label { font-size: 1.08rem; /* mateixa mida que el subtítol del banner */ color: #fff; font-weight: 600; max-width: none; line-height: 1.3; text-align: center; } .cooldown-timer-badge { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(0, 0, 0, 0.45); padding: 8px 18px; border-radius: 30px; border: 1px solid rgba(200, 155, 60, 0.35); width: auto; /* s'ajusta al contingut (la compte enrere) */ max-width: none; box-sizing: border-box; box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .cooldown-timer-badge .booster-timer { font-family: 'Outfit', monospace; font-size: 1.1rem; font-weight: 800; color: #ffd875; text-shadow: 0 0 8px rgba(255, 216, 117, 0.3); letter-spacing: 0.5px; margin: 0; } /* Slots de sobres acumulados */ .booster-slots-row { display: flex; gap: 12px; justify-content: center; padding: 5px 0; } .booster-slot { width: 70px; height: 100px; border-radius: 8px; border: 2px dashed rgba(255,255,255,0.15); background: rgba(0,0,0,0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: all 0.4s ease; position: relative; } .booster-slot.slot-filled { border-color: #1abc9c; background: linear-gradient(135deg, rgba(26,188,156,0.12), rgba(16,128,100,0.08)); box-shadow: 0 0 12px rgba(26,188,156,0.2); animation: slotGlow 2s ease-in-out infinite alternate; } @keyframes slotGlow { 0% { box-shadow: 0 0 8px rgba(26,188,156,0.15); } 100% { box-shadow: 0 0 20px rgba(26,188,156,0.4); } } .booster-slot-icon { font-size: 1.6rem; } .booster-slot-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); } .booster-slot-time { font-size: 0.65rem; color: rgba(255,255,255,0.3); font-weight: 600; letter-spacing: 0.5px; } /* Badge de cantidad de sobres */ .booster-badge { position: absolute; top: -12px; right: -12px; background: linear-gradient(135deg, #e74c3c, #c0392b); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 800; border: 2px solid #ffd700; box-shadow: 0 0 12px rgba(231, 76, 60, 0.6), 0 0 4px rgba(255, 215, 0, 0.4); z-index: 10; animation: boosterBadgePulse 2.0s infinite alternate; } @keyframes boosterBadgePulse { 0% { transform: scale(1); box-shadow: 0 0 8px rgba(231, 76, 60, 0.6); } 100% { transform: scale(1.12); box-shadow: 0 0 18px rgba(231, 76, 60, 0.9), 0 0 6px rgba(255, 215, 0, 0.6); } } .booster-pack { width: 240px; height: 360px; background: radial-gradient(circle at center, #117a65 0%, #0c1618 100%); border: 3px solid #ffd700; border-radius: 16px; box-shadow: 0 15px 35px rgba(0,0,0,0.6), inset 0 0 25px rgba(255,255,255,0.1); position: relative; cursor: pointer; transition: all 0.4s ease; overflow: hidden; } /* ===== SOBRE 3D (sobre3d.js) ===== Quan el mòdul WebGL s'ha muntat dins del pack, app.js hi posa .te-sobre3d i el sobre PLA d'aquí sota ha de desaparèixer del tot: fons, vora, ombra, els crimps dibuixats amb ::before/::after i tots els fills (brillantor, art, títol). Si no, es veuen les dues coses alhora i sembla que el 3D no hi sigui — que és exactament el que passava. `overflow:visible` perquè el sobre 3D pugui sortir una mica del rectangle en surar. */ .booster-pack.te-sobre3d { background: none !important; border: none !important; box-shadow: none !important; overflow: visible !important; } .booster-pack.te-sobre3d::before, .booster-pack.te-sobre3d::after { display: none !important; } /* `display:none` i no `visibility:hidden`: la brillantor (.booster-pack-shine) porta animació pròpia i se saltava l'amagada; amb display no hi ha discussió possible. */ .booster-pack.te-sobre3d > *:not(.sobre3d-ov) { display: none !important; } /* ESTAT BLOQUEJAT amb 3D: el sobre s'ha de veure NET. Res a sobre seu — ni cadenat ni títol, que el sobre ja porta la seva marca impresa— i el compte enrere A SOTA, fora de la peça. Tapar-li l'art amb text era el que feia que no es llegís com un producte sinó com una targeta amb coses a sobre. */ .booster-pack.te-sobre3d.booster-locked > .booster-pack-art { display: block !important; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; } .booster-pack.te-sobre3d.booster-locked .booster-lock-container, .booster-pack.te-sobre3d.booster-locked .booster-locked-title { display: none !important; } /* El compte enrere surt del sobre i se'n va SOTA EL BOTÓ de desbloquejar. Com que és fill del pack i el botó és molt més avall al DOM, app.js el REUBICA (el mou dins de .sobre-comprar-simple) en muntar el 3D; aquí només se li dona la forma: una sola línia, discreta, sota el botó. */ /* El contenidor del botó passa a COLUMNA quan hi entra el compte enrere (app.js hi posa .amb-compte). Sense això, en mòbil el botó de desbloquejar i el compte enrere quedaven un AL COSTAT DE L'ALTRE; el que ha d'anar en fila són l'etiqueta i el rellotge entre ells, no el bloc sencer amb el botó. */ .sobre-comprar-simple.amb-compte { display: flex !important; flex-direction: column !important; align-items: center; flex-wrap: nowrap; } /* El compte enrere, en UNA LÍNIA sota el botó. flex-direction en row EXPLÍCIT: la regla base .booster-cooldown-container el posa en columna i, sense això, l'etiqueta i el rellotge queden apilats. */ .sobre-comprar-simple .booster-cooldown-container { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0 0; width: 100%; text-align: center; } /* ⚠️ …PERÒ AMAGAT MANA MÉS. La regla de dalt és `display:flex !important` amb dues classes; `.hidden` només en té una, o sigui que perdia i el compte enrere seguia veient-se encara que app.js li posés la classe quan hi ha sobre disponible. Aquesta regla té la mateixa especificitat que la de dalt més `.hidden`, i per tant guanya. Sense això, "Proper sobre en:" surt amb un sobre per obrir. */ .sobre-comprar-simple .booster-cooldown-container.hidden { display: none !important; } .sobre-comprar-simple .booster-cooldown-container .cooldown-label { margin: 0; } .sobre-comprar-simple .booster-cooldown-container .cooldown-timer-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 12px; } /* Si per algun motiu no s'ha pogut reubicar, que almenys no tapi el sobre. */ .booster-pack.te-sobre3d.booster-locked .booster-cooldown-container { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin: 16px 0 0 0; width: max-content; text-align: center; } .booster-pack.te-sobre3d.booster-locked .sobre3d-ov { z-index: 0; } /* El compte enrere va en position:absolute, o sigui FORA DEL FLUX: el que ve a sota (el botó de desbloquejar) no li reserva espai i se li posava a sobre. Es compensa amb un marge inferior al propi pack, que és la manera de tornar-li el lloc sense treure'l de dins del pack. */ /* Sense el compte enrere penjant a sota (ara va sota el botó), el pack no necessita reservar-li lloc; només una mica d'aire respecte del que ve després. */ .booster-pack.te-sobre3d.booster-locked { margin-bottom: 18px; } /* QUIET. El pack porta `transition: all .4s` i un transform al :hover; com que el compte enrere és FILL seu, el text sencer llisca cada cop que hi passes el ratolí. Amb el 3D a dins això no té sentit: qui s'ha de moure és la peça 3D (que ja sura sola), no la caixa ni el text. */ .booster-pack.te-sobre3d, .booster-pack.te-sobre3d:hover { transform: none !important; transition: none !important; /* …i el HOVER no ha de tornar a dibuixar el sobre pla. Només matant el transform quedava el rectangle de la vora i l'ombra del pack antic dibuixant-se al voltant del 3D. */ border: none !important; box-shadow: none !important; outline: none !important; background: none !important; filter: none !important; } .booster-pack.te-sobre3d:hover::before, .booster-pack.te-sobre3d:hover::after { display: none !important; } /* Crimped/serrated gold-foil borders at top and bottom */ .booster-pack::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 14px; background: repeating-linear-gradient(90deg, #ffd700, #ffd700 2px, #b8860b 2px, #b8860b 4px); border-bottom: 2px solid rgba(0, 0, 0, 0.4); z-index: 5; } .booster-pack::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 14px; background: repeating-linear-gradient(90deg, #ffd700, #ffd700 2px, #b8860b 2px, #b8860b 4px); border-top: 2px solid rgba(0, 0, 0, 0.4); z-index: 5; } .booster-pack-shine { position: absolute; top: 0; left: -150%; width: 200%; height: 100%; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.12) 55%, transparent 70%); transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 4; pointer-events: none; } .booster-pack-art { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; color: white; padding: 20px; } .booster-pack-title { font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 800; letter-spacing: 2.2px; color: #ffd700; text-shadow: none; -webkit-text-stroke: none; -webkit-text-fill-color: initial; -webkit-background-clip: initial; background: none; margin-bottom: 15px; text-transform: uppercase; line-height: 1.2; filter: none; } /* Sello del booster CSS (evita emojis) */ .booster-seal-css { width: 60px; height: 60px; border: 2px double #ffd700; border-radius: 50%; margin-top: 15px; background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, transparent 70%); box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); position: relative; display: flex; justify-content: center; align-items: center; } .booster-seal-css::before { content: ''; } /* Icono de candado en CSS */ .booster-lock-icon-css { width: 20px; height: 16px; background: #cd7f32; border-radius: 3px; position: relative; margin-top: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .booster-lock-icon-css::before { content: ''; position: absolute; bottom: 100%; left: 3px; width: 10px; height: 10px; border: 2px solid #cd7f32; border-bottom: none; border-radius: 6px 6px 0 0; } .booster-title { font-family: 'Outfit', sans-serif; font-size: 2.2rem; font-weight: 900; letter-spacing: 3px; text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); background: linear-gradient(to bottom, #ffd875, #f1c40f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .booster-subtitle { font-size: 0.75rem; letter-spacing: 2px; color: #e8f8f5; margin-top: -5px; margin-bottom: 25px; } .booster-seal { font-size: 3rem; animation: pulseGlow 2s infinite alternate; } @keyframes pulseGlow { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.1); opacity: 1; text-shadow: 0 0 20px rgba(241, 196, 15, 0.8); } } .booster-pack:hover { transform: translateY(-10px) rotate(2deg); border-color: #ffd875; box-shadow: 0 20px 45px rgba(0,0,0,0.7), 0 0 20px rgba(26, 188, 156, 0.4); } .booster-pack:hover .booster-pack-shine { left: 100%; } /* AnimaciÃ³n temblor al abrir */ .booster-pack.shake { animation: shakePack 0.5s ease infinite; } @keyframes shakePack { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(0px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(2px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(2px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } .reveal-arena { width: 179px; /* carta interior 179×250 = ratio 63/88 exacte */ height: 260px; margin: 95px auto 55px auto; /* top: escala 1.3 desborda ~39px + tag NOVA ~16px + marge visual ~40px */ position: relative; transform: scale(1.3); transform-origin: center center; cursor: pointer; overflow: visible; } /* El tag NOVA dins l'arena de revelació: posicionat per ser visible sense solapar el header */ .reveal-arena .mito-nueva-tag { top: -22px; transform: translateX(-50%) scale(0.95); font-size: 0.58rem; letter-spacing: 1.8px; } /* La carta de reverso (visible de inicio) */ .reveal-card-back { position: absolute; top: 0; /* Centrado absoluto para evitar rotaciones descentradas u oscilaciones raras */ width: 100%; height: 250px; /* Altura nativa y fija de la carta para evitar estiramientos */ border-radius: 12px; background: linear-gradient(155deg, #0d3b30 0%, #16a085 40%, #0a2820 100%); border: 3px solid #1abc9c; box-shadow: 0 0 30px rgba(26,188,156,0.4), 0 15px 35px rgba(0,0,0,0.6); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; color: white; cursor: pointer; /* AnimaciÃ³n de apariciÃ³n/desapariciÃ³n via scaleX */ transform-origin: center; transition: transform 0.25s ease-in, opacity 0.1s ease; } .reveal-card-back.hide { transform: scaleX(0); opacity: 0; } .reveal-card-back-seal { font-size: 4.5rem; animation: backSealPulse 2s infinite alternate; line-height: 1; } .reveal-card-back-label { font-family: 'Outfit', sans-serif; font-size: 0.65rem; letter-spacing: 3px; color: #1abc9c; text-transform: uppercase; font-weight: 700; opacity: 0.9; } /* DecoraciÃ³n del reverso: lÃneas diagonales */ .reveal-card-back::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 10px; background: repeating-linear-gradient( -45deg, transparent, transparent 12px, rgba(255,255,255,0.02) 12px, rgba(255,255,255,0.02) 13px ); pointer-events: none; } /* Destello al hacer hover */ .reveal-card-back::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.08), transparent); transform: skewX(-20deg); transition: left 0.5s ease; pointer-events: none; } .reveal-card-back:hover::after { left: 150%; } /* La carta revelada (frontal, visible por defecto si entra revelada) */ .reveal-card-front { position: absolute; top: 0; /* Centrado absoluto alineado con el reverso y el centro de escala/rotaciÃ³n */ width: 100%; height: 250px; /* Altura nativa y fija de la carta para evitar estiramientos */ border-radius: 12px; opacity: 0; pointer-events: none; transform-origin: center; } /* La carta mito dentro del frontal ocupa todo el espacio */ .reveal-card-front .card-mito { width: 100% !important; height: 100% !important; box-sizing: border-box; } .reveal-card-front.show { opacity: 1; pointer-events: auto; } .reveal-card-badge-new { position: absolute; top: -26px; /* Flota de forma estable en el hueco superior */ left: 50%; transform: translateX(-50%) scale(0.82); background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: white; font-family: 'Outfit', sans-serif; font-size: 0.52rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; box-shadow: 0 4px 10px rgba(231, 76, 60, 0.4), inset 0 1px 2px rgba(255,255,255,0.4); border: 1px solid rgba(255, 255, 255, 0.35); z-index: 30; text-shadow: 0 1px 2px rgba(0,0,0,0.5); pointer-events: none; animation: bounceInNew 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .mito-nueva-tag.no-anim { animation: none !important; } .reveal-card-badge-xp { position: absolute; top: -12px; right: -12px; background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); color: white; font-family: 'Outfit', sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 12px; box-shadow: 0 4px 10px rgba(155, 89, 182, 0.4), inset 0 1px 2px rgba(255,255,255,0.4); border: 1px solid rgba(255, 255, 255, 0.35); z-index: 25; text-shadow: 0 1px 2px rgba(0,0,0,0.5); pointer-events: none; animation: bounceInXP 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } @keyframes bounceInXP { 0% { transform: scale(0) translateY(12px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } @keyframes bounceInNew { 0% { transform: translateX(-50%) scale(0) translateY(12px); opacity: 0; } 100% { transform: translateX(-50%) scale(1) translateY(0); opacity: 1; } } /* ====== EFECTOS PREMIUM POR NIVEL EN LA ARENA ====== */ /* Nivel 2: aura morada viva */ .reveal-card-front .card-mito.level-2 { box-shadow: 0 0 30px rgba(203, 213, 225, 0.75), 0 0 10px rgba(203, 213, 225, 0.4), 0 15px 35px rgba(0, 0, 0, 0.6) !important; border-color: #cbd5e1 !important; } /* Nivel 3: aura dorada y brillo holográfico dinámico y premium */ .reveal-card-front .card-mito.level-3 { box-shadow: 0 0 45px rgba(241, 196, 15, 0.9), 0 0 15px rgba(241, 196, 15, 0.5), 0 15px 35px rgba(0, 0, 0, 0.6) !important; border-color: #f39c12 !important; position: relative; overflow: hidden; } /* Brillo holográfico espectacular (Pokémon-like) */ .reveal-card-front .card-mito.level-3::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 8px; background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.35) 55%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0) 100% ); background-size: 300% 300%; animation: holoShine 2.5s ease-in-out infinite; pointer-events: none; mix-blend-mode: color-dodge; z-index: 10; } @keyframes holoShine { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ====== SISTEMA DE HOLOGRAMAS FOIL PREMIUM POR RAREZA ====== */ .holo-foil { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 12px; pointer-events: none; z-index: 5; will-change: opacity; transition: opacity 0.5s ease; opacity: 0.4; /* Sutil por defecto para que no tape el arte */ } /* --- NIVEL 1: Plata Metalizado / Platino --- */ .holo-level-1 { background: linear-gradient( 115deg, transparent 20%, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.15) 55%, rgba(255, 255, 255, 0.03) 70%, transparent 80% ); background-size: 250% 250%; /* El gradiente se desplaza reactivamente con var(--mx) y var(--my) */ background-position: calc(var(--mx, 50%) * 1.5) calc(var(--my, 50%) * 1.5); mix-blend-mode: overlay; opacity: 0.35; } /* --- NIVEL 2: Foil metàl·lic PLATA (sheen argentat i reflexos freds) --- */ .holo-level-2 { background-image: /* Capa 1: Destello radial del cursor (mÃ¡s sutil) */ radial-gradient( circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.26) 0%, rgba(205, 215, 226, 0.12) 20%, transparent 65% ), /* Capa 2: Línies fines de reflex argentat, diagonals i sutils */ repeating-linear-gradient( 135deg, rgba(214, 222, 230, 0.09) 0px, rgba(255, 255, 255, 0.06) 15px, rgba(188, 199, 211, 0.10) 30px, rgba(150, 163, 177, 0.08) 45px, rgba(214, 222, 230, 0.09) 60px ); background-size: 100% 100%, 200px 200px; background-position: 0% 0%, calc(var(--mx, 50%) * 1.8) calc(var(--my, 50%) * 1.8); mix-blend-mode: color-dodge; } /* --- NIVEL 3: Prismático Arcoíris Láser + Destellos Cruzados (Ultra Sutil y Premium) --- */ .holo-level-3 { background-image: /* Capa 1: Punto de luz solar interactivo muy fino */ radial-gradient( circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35) 0%, rgba(255, 220, 100, 0.12) 15%, transparent 55% ), /* Capa 2: LÃneas LÃ¡ser arcoÃris espectrales super difuminadas (7% de opacidad) */ repeating-linear-gradient( 135deg, rgba(255, 0, 0, 0.07) 0px, rgba(255, 120, 0, 0.07) 12px, rgba(255, 255, 0, 0.07) 24px, rgba(0, 255, 0, 0.07) 36px, rgba(0, 255, 255, 0.07) 48px, rgba(0, 0, 255, 0.07) 60px, rgba(150, 0, 255, 0.07) 72px, rgba(255, 0, 0, 0.07) 84px ), /* Capa 3: Destellos de luz cruzados sumamente elegantes (Cross-hatch Laser) */ repeating-linear-gradient( 65deg, transparent 0px, transparent 40px, rgba(255, 255, 255, 0.04) 45px, rgba(255, 255, 255, 0.09) 50px, rgba(255, 255, 255, 0.04) 55px, transparent 60px, transparent 120px ); background-size: 100% 100%, 240px 240px, 300px 300px; background-position: 0% 0%, calc(var(--mx, 50%) * 2.2) calc(var(--my, 50%) * 2.2), calc(var(--mx, 50%) * -1.5) calc(var(--my, 50%) * -1.5); mix-blend-mode: color-dodge; } @media (hover: hover) { /* Efecto de intensidad aumentada de purpurina en hover (moderada) */ .card-mito:hover .holo-foil { opacity: 0.7; } } /* ====== ANIMACIONES DE ENTRADA Y SALIDA DE CARTAS ====== */ .card-slide-in { animation: cardEnter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2) both; } @keyframes cardEnter { 0% { transform: translateY(50px) scale(0.88); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } .card-slide-out { animation: cardExit 0.45s cubic-bezier(0.55, 0, 1, 0.45) forwards; } @keyframes cardExit { 0% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; } 100% { transform: translate(-280px, -60px) rotate(-18deg) scale(0.8); opacity: 0; } } /* ===== FLAIR de revelació d'un sobre (rajos + flaix + espurnes + brillantor foil). Color via --ray. ===== */ .reveal-rays { position: absolute; left: 50%; top: 125px; width: 330px; height: 330px; transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; z-index: 12; background: radial-gradient(circle, rgba(var(--ray),0.55) 0%, rgba(var(--ray),0.22) 34%, transparent 66%); will-change: transform, opacity; /* glow lleuger (la carta tapa el centre → surt al voltant); sense conic/mask per no saturar mòbil */ } .reveal-bloom { position: absolute; left: 50%; top: 125px; width: 250px; height: 250px; transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; z-index: 14; background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(var(--ray),0.42) 40%, transparent 70%); will-change: transform, opacity; } .reveal-spark { position: absolute; border-radius: 50%; pointer-events: none; z-index: 22; background: radial-gradient(circle, #fff 0%, rgba(var(--ray),0.95) 50%, rgba(var(--ray),0) 100%); box-shadow: 0 0 7px rgba(var(--ray),0.9); will-change: transform, opacity; } /* Barrido diagonal del revelat RETIRAT (2026-08-24, l'usuari: "es veu malament"): l'animació no duia `forwards`, així que en acabar el gradient tornava a la posició 0% i deixava una FRANJA diagonal CONGELADA damunt de la carta revelada. Es desactiva del tot; la resta de la cerimònia (espurnes, badges) es manté. */ .reveal-card-front.reveal-shine::before { display: none !important; } @keyframes revealShineSweep { from { background-position: 160% 0; } to { background-position: -160% 0; } } /* AnimaciÃ³n de texto parpadeante/pulso */ @keyframes pulseText { 0% { opacity: 0.6; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1.03); text-shadow: 0 0 10px rgba(26,188,156,0.5); } } /* ── FITXA DE CARTA: la X de tancar ha de ser un CERCLE ─────────────────────────────────────────── El botó porta `class="btn"`, i `.btn` li encolomava `padding: 10px 20px` i `letter-spacing: 0.5px`. Amb 44px d'ample i 40 de farciment horitzontal, a l'aspa li quedaven 4px de caixa de contingut: el glif sortia empès i descentrat, i el cercle es llegia com un òval xafat. Aquí es neutralitza tot el que hi aporta `.btn` i es fixa la proporció, així no depèn de com quedi aquella classe. `aspect-ratio` a més el protegeix de qualsevol amplada que li vingui de fora. */ #inspector-3d-close.btn { padding: 0; letter-spacing: 0; line-height: 1; aspect-ratio: 1 / 1; flex: none; text-transform: none; /* el glif ✕ no és text: en majúscules no canvia, però evita sorpreses */ } /* (El balanceig de repòs de la fitxa ERA una animació CSS `.insp-vaiven` aquí. Retirada el 2026-07-29: ara el moviment de repòs el fa el bucle de física d'app.js —gir en Y per ensenyar el reflex de la vora + bob vertical— sobre el mateix wrapper que la rotació manual, així no hi ha dues capes competint ni el `will-change` que trencava el gir a mòbil. Veure updatePhysics a abrirInspector3D.) */ /* ── CARTA NO ACONSEGUIDA (Mitolari) ────────────────────────────────────────────────────────────── Abans hi havia un cadenat i un número de sèrie ("MITE #037"). El número no diu res: el NOM sí que crea ganes —"em falta el Dip"—, i la marca de Mítiks fa de segell d'aigua sense el to de porta tancada del cadenat. La carta és CLICABLE: obre la fitxa amb el tast de la llegenda. */ .mito-locked-secret { cursor: pointer; } /* La marca és la M de Mítiks DE VERITAT (`SVG_M_MARCA`, el mateix traçat que porten gravat els reversos de les matèries al duel), no una lletra "M" tipogràfica: així la carta que et falta duu el mateix segell que veus a la taula. El traçat va en `currentColor` → el to es decideix aquí. */ .secret-mark { width: 46%; max-width: 62px; line-height: 0; color: #d8a63a; opacity: 0.26; animation: pulseLock 2.5s infinite alternate; } .secret-mark svg { width: 100%; height: auto; display: block; } .secret-name { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.78rem; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255,255,255,0.62); text-shadow: 0 1px 6px rgba(0,0,0,0.6); /* El nom pot ser llarg ("Drac de Sant Llorenç del Munt") i la carta és estreta: fins a 3 línies i després punts suspensius, mai desbordant la carta ni empenyent l'etiqueta de sota. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; } .secret-hint { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-secondary); opacity: 0.55; font-weight: 700; } /* La marca puja de to en passar-hi per sobre: pista que s'hi pot clicar. */ .card-mito.locked:hover .secret-mark { opacity: 0.42; } /* AnimaciÃ³n de pulso mÃstico para cartas bloqueadas y misteriosas */ @keyframes pulseLock { 0% { transform: scale(0.95); opacity: 0.25; filter: drop-shadow(0 0 5px rgba(255,255,255,0.02)); } 100% { transform: scale(1.05); opacity: 0.55; filter: drop-shadow(0 0 15px rgba(255,255,255,0.15)); } } .hidden { display: none !important; } /* #juego-tablero és un .board-grid que en mòbil té display:flex !important; empatava amb .hidden (mateixa especificitat, i .board-grid va després) i deixava veure part del tauler a la pantalla de preparació. Amb ID+classe aquesta regla guanya i el tauler queda ben amagat fins que es juga. */ #juego-tablero.hidden { display: none !important; } /* ================= 3. ESTILOS DE PREPARACIÃ“N DE JUEGO ================= */ .juego-prep-container { display: flex; flex-direction: column; gap: 20px; } .prep-header { background: var(--bg-panel); } .prep-main-layout { display: flex; flex-direction: column; gap: 25px; align-items: stretch; } .chosen-panel { display: flex; flex-direction: column !important; align-items: stretch !important; gap: 20px !important; background: radial-gradient(circle at 10% 10%, #1a2522 0%, #0c0e11 100%) !important; /* Totalmente opaco para que las cartas al hacer scroll pasen por detrÃ¡s limpiamente */ border: 1px solid rgba(26, 188, 156, 0.25); box-shadow: 0 15px 35px rgba(0,0,0,0.6); padding: 22px 30px; border-radius: 12px; position: relative; top: 0; z-index: 1; } /* Panell UNIFICAT del preparatiu: una sola caixa, columna centrada (títol → subtítol → dificultat → INICIAR → Regles) */ .prep-panel-unified { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box; /* omple l'àrea com el menú/Mitolari (.app-container, 1400px) */ /* Fons il·lustrat de Leteu (de la landing) + vela fosca perquè el text i les targetes es llegeixin. A TOTS els tamanys. */ background: linear-gradient(180deg, rgba(6,9,14,0.60) 0%, rgba(6,9,14,0.80) 55%, rgba(6,9,14,0.92) 100%), url("assets/leteu_deessa_oblit_mitiks.jpg") center 20% / cover no-repeat; border: 1px solid rgba(140, 90, 210, 0.32); box-shadow: 0 15px 35px rgba(0,0,0,0.6); border-radius: 16px; padding: 26px 30px 30px; } .prep-panel-unified .sobre-title { text-align: center; width: 100%; } /* títol de Jugar centrat a tots els tamanys */ .prep-panel-unified .sobre-title { text-align: center; } .prep-subtitle-text { text-align: center; color: var(--text-secondary); font-size: clamp(0.78rem, 2vw, 1rem); line-height: 1.4; max-width: 520px; margin: 0 auto; } .prep-panel-unified #btn-start-duel { display: block; width: 100%; max-width: 380px; margin: 6px auto 0; } /* El botó de Regles va SEMPRE al flux, sota INICIAR (anul·la l'absolute top-right heretat de .btn-rules-header) */ .prep-secondary-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 2px; } /* Regles + Tutorial: sempre al flux dins de la fila (anul·la l'absolute top-right heretat de .btn-rules-header) */ .prep-panel-unified .prep-secondary-btns .btn-rules-header { position: static !important; top: auto !important; right: auto !important; margin: 0 !important; align-self: auto !important; width: auto !important; } /* 🔴 "Aprendre a jugar" dins de la tria de MODE (#prep-modes) — mateixa anul·lació, i per CONTENIDOR. `.btn-rules-header` porta `position:absolute; top:22px; right:30px` d'una època en què el botó vivia a la cantonada d'una capçalera. L'única fugida que hi havia era el `@media (max-width:768px)` de més avall... i un TELÈFON EN HORITZONTAL fa uns 846px d'ample: no hi entra. Resultat: al mòbil el botó se n'anava volant a la dreta de la targeta (el duel es juga en horitzontal → passava sempre). Ancorat al contenidor i no a l'amplada de pantalla, funciona a TOTES les mides i no depèn de cap llindar: dins d'aquest bloc el botó va al flux, centrat sota els dos botons de mode. ⚠️ Qualsevol lloc NOU que faci servir `.btn-rules-header` fora d'una capçalera necessitarà la seva pròpia anul·lació. Ve d'una classe que barreja ESTIL i POSICIÓ; si un dia es parteixen en dues, això desapareix. */ .prep-panel-unified .prep-modes .btn-rules-header { position: static !important; top: auto !important; right: auto !important; align-self: center !important; width: auto !important; } /* ═══ TARGETES DE MODE (Joc individual / Joc en línia) — AAA, una al costat de l'altra (2026-07-31) ═══ */ .prep-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0 4px; } .prep-mode-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 16px 16px; border-radius: 16px; cursor: pointer; overflow: hidden; color: inherit; background: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 22px rgba(0,0,0,0.35); transition: transform .16s cubic-bezier(.2,1,.3,1), box-shadow .18s ease, border-color .18s ease; } .prep-mode-card::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .2s ease; pointer-events: none; background: radial-gradient(120% 78% at 50% 0%, var(--pmc-glow, rgba(245,197,66,0.18)), transparent 68%); } .prep-mode-card:hover { transform: translateY(-4px); border-color: var(--pmc-accent, #f5c542); box-shadow: 0 16px 36px rgba(0,0,0,0.5), 0 0 0 1px var(--pmc-accent, #f5c542); } .prep-mode-card:hover::before { opacity: 1; } .prep-mode-card:active { transform: translateY(-1px) scale(.99); } .pmc-ico { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--pmc-accent, #f5c542); background: var(--pmc-icobg, rgba(245,197,66,0.12)); border: 1px solid var(--pmc-accent, rgba(245,197,66,0.5)); position: relative; z-index: 1; } .pmc-ico svg { width: 30px; height: 30px; } /* Avatar de Leteu al mode individual: omple el cercle (la vora del color fa d'anell). */ .pmc-ico-av { overflow: hidden; background: transparent; } .pmc-ico .pmc-av { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .pmc-title { font-weight: 900; font-size: 1.06rem; letter-spacing: .3px; color: #f4ead2; position: relative; z-index: 1; } .pmc-sub { font-size: .78rem; color: var(--text-secondary, #9fb0c4); line-height: 1.35; max-width: 250px; position: relative; z-index: 1; } .pmc-go { margin-top: 3px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--pmc-accent, #f5c542); position: relative; z-index: 1; } .pmc-individual { --pmc-accent: #5fb0e6; --pmc-icobg: rgba(95,176,230,0.12); --pmc-glow: rgba(95,176,230,0.20); } .pmc-online { --pmc-accent: #f5c542; --pmc-icobg: rgba(245,197,66,0.12); --pmc-glow: rgba(245,197,66,0.20); } /* El tutorial ocupa tota l'amplada, sota les dues targetes (l'anul·lació de .btn-rules-header ja el centra). */ .prep-modes .pmc-tutorial { grid-column: 1 / -1; justify-self: center !important; margin-top: 8px; } @media (max-width: 360px) { .prep-modes { grid-template-columns: 1fr; } .pmc-sub { max-width: 260px; } } /* ═══ Pantalla de JUGAR a DESKTOP (2026-08-24): fons il·lustrat de Leteu + targetes de mode més grans + títol centrat ═══ */ @media (min-width: 1024px) { .prep-panel-unified { padding: 44px 44px 48px; } /* fons de Leteu + títol centrat ja són a la base */ .prep-panel-unified .prep-subtitle-text { font-size: 1.05rem; } #prep-modes.prep-modes { max-width: 920px; margin: 30px auto 6px; gap: 30px; } /* àrees de joc més amples (2026-08-24) */ #prep-modes .prep-mode-card { padding: 40px 32px 30px; gap: 14px; border-radius: 20px; background: linear-gradient(165deg, rgba(22,28,40,0.85), rgba(10,14,20,0.92)); border-color: rgba(255,255,255,0.16); box-shadow: 0 14px 34px rgba(0,0,0,0.5); } #prep-modes .prep-mode-card .pmc-ico { width: 90px; height: 90px; } #prep-modes .prep-mode-card .pmc-ico svg { width: 44px; height: 44px; } #prep-modes .prep-mode-card .pmc-title { font-size: 1.42rem; white-space: nowrap; } /* "JOC CONTRA LETEU" en UNA línia */ #prep-modes .prep-mode-card .pmc-sub { font-size: 0.95rem; max-width: 300px; line-height: 1.45; } #prep-modes .prep-mode-card .pmc-go { font-size: 0.9rem; } #prep-modes .pmc-tutorial { margin-top: 18px; } /* Més aire entre INICIAR JOC i la fila de sota (Enrere / Regles / Tutorial) a la pantalla de dificultat */ .prep-panel-unified #btn-start-duel { margin-top: 14px; } .prep-panel-unified .prep-secondary-btns { margin-top: 26px; gap: 14px; } } /* Cabecera y layout de preparaciÃ³n de duelo */ .chosen-info-col { width: 100%; display: flex; flex-direction: column; gap: 8px; } .prep-title-container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; width: 100%; } .chosen-panel .panel-title { font-size: 1.4rem; border: none; margin: 0; } .prep-subtitle { color: var(--text-secondary); font-size: 0.95rem; margin: 0; line-height: 1.45; } .prep-slots-row { display: flex; flex-direction: row; gap: 25px; align-items: flex-end; flex-wrap: wrap; justify-content: center; width: 100%; } .prep-slot-label { font-size: 0.65rem; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; } .prep-slot-label.rival-label { color: #ffd875; } .prep-slot-label.player-label { color: var(--text-secondary); } #prep-rival-wager-container { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; position: relative; } #wager-rotation-timer { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); z-index: 5; white-space: nowrap; } .prep-player-slots-container { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; } .prep-action-col { min-width: 180px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; align-self: flex-end; height: 155px; flex: 0 0 auto; } .prep-action-col #btn-rules { width: 100%; padding: 10px 15px; font-size: 0.82rem; font-weight: 600; margin: 0; } .prep-action-col #btn-start-duel { width: 100%; padding: 14px 25px; font-size: 0.95rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(26, 188, 156, 0.25); margin: 0; } @media (max-width: 768px) { .prep-slots-row { gap: 15px; flex-direction: column !important; align-items: center !important; } .prep-action-col { height: auto !important; align-self: center !important; width: 100% !important; max-width: 280px !important; } .prep-slot-label { font-size: 0.55rem; } .prep-pool-header { flex-direction: column !important; align-items: center !important; text-align: center; gap: 12px !important; } .prep-pool-title-group { flex-direction: column; gap: 6px; align-items: center; } .prep-controls { justify-content: center; width: 100%; gap: 8px; } #prep-filter-level, #prep-sort-order { flex-grow: 1; min-width: 130px; } } .chosen-slots-row { display: flex; flex-direction: row; gap: 15px; justify-content: center; align-items: center; flex-wrap: wrap; } .slot { width: 186px; height: 260px; border: 2px dashed rgba(255, 255, 255, 0.15); border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; background: rgba(0,0,0,0.45); cursor: pointer; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); text-align: center; padding: 10px; box-sizing: border-box; box-shadow: inset 0 2px 8px rgba(0,0,0,0.6); } .slot:hover { border-color: var(--accent); background: rgba(26, 188, 156, 0.08); transform: translateY(-3px); box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), 0 4px 10px rgba(26, 188, 156, 0.15); } .slot.occupied { border: 1.5px solid var(--accent); background: linear-gradient(135deg, rgba(20, 30, 25, 0.95), rgba(10, 15, 12, 0.95)); color: var(--text-primary); font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700; text-transform: none; box-shadow: 0 5px 12px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.15); animation: slotPulse 0.4s ease-out; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 12px 6px; text-align: center; } @keyframes slotPulse { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } } .slot.occupied.level-1 { border-color: var(--common); } .slot.occupied.level-2 { border-color: var(--epic); } .slot.occupied.level-3 { border-color: var(--legendary); } /* Ranura de Apuesta del Jugador */ .slot.slot-wager { border-color: rgba(231, 76, 60, 0.45); color: #ff7675; } .slot.slot-wager:hover { border-color: #e74c3c; background: rgba(231, 76, 60, 0.08); box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), 0 4px 10px rgba(231, 76, 60, 0.25); } .slot.slot-wager.occupied { border: 2.2px solid #e74c3c !important; box-shadow: 0 5px 15px rgba(231, 76, 60, 0.45), inset 0 1px 2px rgba(255,255,255,0.15) !important; } /* Ranura de Apuesta del Rival IA */ .slot.slot-rival-wager { cursor: default; border: 2px solid rgba(241, 196, 15, 0.3); box-shadow: inset 0 0 10px rgba(241, 196, 15, 0.1); color: #ffd875; background: rgba(0,0,0,0.55); } .slot.slot-rival-wager:hover { background: rgba(0,0,0,0.55); box-shadow: inset 0 0 10px rgba(241, 196, 15, 0.1); border-color: rgba(241, 196, 15, 0.3); transform: none; } .slot.slot-rival-wager.occupied { border: 2.2px solid #f1c40f !important; box-shadow: 0 5px 18px rgba(241, 196, 15, 0.5), inset 0 1px 2px rgba(255,255,255,0.15) !important; } .prep-available-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; max-height: none !important; overflow-y: visible !important; padding-right: 0 !important; } .card-mito.prep-card.selected-for-duel { border: 2px solid rgba(46, 204, 113, 0.9) !important; box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.35), 0 0 28px rgba(46, 204, 113, 0.6), 0 12px 30px rgba(0,0,0,0.6) !important; transform: translateY(-8px) scale(1.04); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease; } /* Overlay real injectat per JS */ .duel-select-overlay { position: absolute; inset: 0; border-radius: inherit; background: rgba(15, 70, 40, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: none; } .duel-select-badge { background: linear-gradient(135deg, #27ae60, #2ecc71); color: #fff; font-size: 0.65rem; font-weight: 900; letter-spacing: 1.5px; padding: 9px 18px; border-radius: 30px; white-space: nowrap; box-shadow: 0 4px 18px rgba(46, 204, 113, 0.75), 0 0 0 2px rgba(255,255,255,0.2), inset 0 1px 0 rgba(255,255,255,0.3); text-shadow: 0 1px 3px rgba(0,0,0,0.5); } /* ================= 4. TABLERO DE JUEGO ================= */ .board-grid { display: flex; flex-direction: column; gap: 16px; flex-grow: 1; } /* Filas de IA y Jugador: mano + rescatados en una sola lÃnea */ .rival-game-row, .player-game-row { padding: 12px 16px !important; } /* TÃtulo del panel con puntos alineados */ .panel-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); min-height: 32px; } .panel-title-text { font-family: 'Outfit', sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rival-panel-theme .panel-title-text { color: #ff8a80; } .player-panel-theme .panel-title-text { color: #a2f3c4; } .panel-title-points { font-size: 0.75rem; font-weight: 700; color: #ffd875; background: rgba(255, 216, 117, 0.1); border: 1px solid rgba(255, 216, 117, 0.25); border-radius: 12px; padding: 3px 10px; white-space: nowrap; } /* Layout de fila horizontal: mano | divisor | rescatados */ .row-layout { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; overflow: hidden; min-height: 130px; } /* Divisor visual entre mano y rescatados */ .row-divider { width: 1px; height: 120px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.12), transparent); flex-shrink: 0; } /* La mano del jugador/rival ocupa espacio fijo â€” calculado para 10 cartas de 56px + 8px gap */ .row-layout .hand-cards, .row-layout .rival-hand-back { flex-shrink: 0; /* 10 cartas * 56px + 9 gaps * 6px = 614px. Damos margen con 640px */ width: 640px; min-width: 240px; overflow: visible !important; /* Permitir que las cartas seleccionadas se desplacen hacia arriba sin cortarse */ } /* Contenedor de mitos rescatados en fila horizontal con tÃtulo */ .rescued-container { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 4px; justify-content: center; height: 100%; } .rescued-title { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding-left: 4px; } .rival-panel-theme .rescued-title { color: rgba(255, 138, 128, 0.7); } .player-panel-theme .rescued-title { color: rgba(162, 243, 196, 0.7); } .rival-rescued-row, .player-rescued-row { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap !important; height: 108px; min-height: 108px; max-height: 108px; align-items: center; padding: 0 4px; gap: 4px !important; box-sizing: border-box; width: 100%; transition: box-shadow 0.15s ease; } /* Flash daurada quan una carta aterra al panell de rescatades */ .rescued-panel-flash { box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.8), 0 0 22px rgba(255, 215, 0, 0.5) !important; animation: rescuedFlashPulse 0.55s ease-out forwards; } @keyframes rescuedFlashPulse { 0% { box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.9), 0 0 30px rgba(255, 215, 0, 0.7); } 60% { box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5), 0 0 16px rgba(255, 215, 0, 0.35); } 100% { box-shadow: none; } } /* Grilla dividida para las manos y los mitos rescatados */ .game-row-split-grid { display: grid; grid-template-columns: 780px 1fr; gap: 16px; width: 100%; align-items: stretch; } @media (min-width: 769px) { .game-row-split-grid .panel { padding: 15px 12px; } } /* Grilla del medio: Niebla ocupa el espacio, Claro del Bosque fijo */ .middle-game-grid { display: grid; grid-template-columns: 1fr 210px; gap: 16px; } .niebla-panel .panel-title-row { border-bottom-color: rgba(255, 255, 255, 0.07); flex-wrap: wrap; gap: 8px; } .claro-panel { display: flex; flex-direction: column; align-items: center; height: 100%; } .claro-panel .panel-title-row { width: 100%; border-bottom-color: rgba(255, 255, 255, 0.07); } .claro-panel .claro-deck-zone { margin: 8px auto; } /* Reducir mazo en el claro panel (mÃ¡s pequeÃ±o, interior) */ .claro-panel .claro-deck-zone .deck { width: 140px !important; height: 140px !important; } .claro-panel .claro-deck-zone .deck::before { width: 84% !important; height: 84% !important; } .claro-panel .claro-deck-zone .deck .deck-inner { font-size: 2.7rem !important; } .claro-panel .claro-deck-zone .deck .deck-count-badge-inner { bottom: -10px !important; font-size: 0.75rem !important; } /* Inline essence cards rendered in claro zone */ .claro-panel .claro-deck-zone .card-essence { width: 55px !important; height: 55px !important; } /* Marcador y Estado del Duelo */ .duel-status-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: rgba(15, 15, 20, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); margin-bottom: 8px; position: relative; z-index: 10; } .status-bar-side { display: flex; flex-direction: column; width: 28%; gap: 4px; } .status-bar-side.status-bar-player { align-items: flex-start; text-align: left; } .status-bar-side.status-bar-rival { align-items: flex-end; text-align: right; } .status-bar-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; font-family: 'Outfit', sans-serif; } .status-bar-player .status-bar-label { color: #a2f3c4; text-shadow: 0 0 10px rgba(162, 243, 196, 0.3); } .status-bar-rival .status-bar-label { color: #ff8a80; text-shadow: 0 0 10px rgba(255, 138, 128, 0.3); } .status-bar-stats { display: flex; align-items: center; gap: 10px; } .status-bar-player .status-bar-stats { flex-direction: row; } .status-bar-rival .status-bar-stats { flex-direction: row-reverse; } .status-bar-points { font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 700; color: #ffd875; background: rgba(255, 216, 117, 0.1); border: 1px solid rgba(255, 216, 117, 0.25); border-radius: 6px; padding: 2px 8px; white-space: nowrap; text-shadow: 0 0 8px rgba(255, 216, 117, 0.2); } .status-bar-rescued { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; } .status-bar-center { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40%; gap: 6px; } #turn-display { padding: 6px 20px; border-radius: 20px; font-size: 0.85rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; text-align: center; box-shadow: inset 0 1px 2px rgba(255,255,255,0.1); min-width: 140px; box-sizing: border-box; } .action-instructions-inline { text-align: center; font-size: 0.78rem; color: #ffd875; line-height: 1.45; font-weight: 500; padding: 6px 14px; background: rgba(255, 216, 117, 0.05); border-radius: 8px; border: 1px solid rgba(255, 216, 117, 0.12); transition: all 0.3s ease; max-width: 100%; word-break: break-word; } /* Turn display centrado en el panel de niebla, fuera del title-row */ .niebla-turn-display { display: block; width: 100%; text-align: center; margin: 6px 0 0 0; padding: 5px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; box-sizing: border-box; } .game-area { display: flex; flex-direction: column; gap: 16px; } .card-row { display: flex; gap: 15px; min-height: 150px; align-items: center; flex-wrap: wrap; } /* Sidebar: Claro en columna vertical */ .sidebar-resource-zone { display: flex; gap: 20px; align-items: flex-start; justify-content: center; width: 100%; } .claro-vertical { display: flex; flex-direction: column; gap: 8px; flex: 1; } /* Ocultar botones que solo JS necesita */ .hidden-btn { display: none !important; } .resource-zone { display: flex; gap: 30px; align-items: center; } .deck-container { display: flex; flex-direction: column; align-items: center; gap: 8px; } .deck { width: 90px; height: 130px; background: linear-gradient(135deg, #1e3c72, #2a5298); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 8px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; box-shadow: 0 8px 16px rgba(0,0,0,0.5), inset 0 0 15px rgba(255,255,255,0.2); transition: all 0.3s ease; } .deck:hover:not(.disabled) { transform: translateY(-5px) scale(1.02); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 12px 24px rgba(0,0,0,0.6), 0 0 10px rgba(52, 152, 219, 0.4); } .deck.disabled { cursor: not-allowed; opacity: 0.5; } .deck::before { content: ''; position: absolute; width: 80%; height: 85%; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; } .deck-inner { font-family: 'Outfit', sans-serif; font-size: 2.2rem; font-weight: 700; color: rgba(255, 255, 255, 0.3); transform: rotate(-15deg); } .deck-inner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8%; width: 46%; height: 46%; opacity: 0.65; transition: opacity 0.3s ease, transform 0.3s ease; } .deck:hover:not(.disabled) .deck-inner-grid { opacity: 0.95; transform: scale(1.05); } .deck-icon-wrapper { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: all 0.25s ease; } .deck-icon-wrapper svg { width: 100%; height: 100%; filter: drop-shadow(0 0 2px currentColor); } .deck-icon-wrapper.fuego { color: rgba(255, 118, 117, 0.85); } .deck-icon-wrapper.agua { color: rgba(116, 185, 255, 0.85); } .deck-icon-wrapper.tierra { color: rgba(85, 239, 196, 0.85); } .deck-icon-wrapper.aire { color: rgba(223, 230, 233, 0.85); } .deck-count { font-size: 0.8rem; color: var(--text-secondary); } .market-cards { display: flex; gap: 15px; flex-grow: 1; } /* Cartas de Esencia */ /* Cartas de Esencia */ /* Esencias en la mano del duelo: tamaÃ±o fijo 56px para que quepan 10 en lÃnea */ .card-essence { width: 56px; height: 56px; min-width: 56px; min-height: 56px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); display: flex; justify-content: center; align-items: center; padding: 0; cursor: pointer; user-select: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; box-shadow: 0 3px 8px rgba(0,0,0,0.45); overflow: visible; } .card-essence::before { display: none !important; } /* Hover: brillo sin desplazamiento vertical para no salirse del contenedor */ .card-essence:hover { border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 4px 16px rgba(255,255,255,0.25), inset 0 0 10px rgba(255, 255, 255, 0.2); filter: brightness(1.15); } /* Seleccionada: anillo dorado brillante + elevación + checkmark */ .card-essence.selected { border: 3px solid #ffd700 !important; box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.7), inset 0 0 12px rgba(255, 215, 0, 0.3) !important; filter: brightness(1.25); transform: translateY(-14px) scale(1.1) !important; animation: essenceSelectedPulse 1s ease-in-out infinite alternate; z-index: 10; } @keyframes essenceSelectedPulse { 0% { box-shadow: 0 0 0 3px rgba(255,215,0,0.35), 0 0 16px rgba(255,215,0,0.55), inset 0 0 10px rgba(255,215,0,0.25); } 100%{ box-shadow: 0 0 0 4px rgba(255,215,0,0.6), 0 0 30px rgba(255,215,0,0.9), inset 0 0 18px rgba(255,215,0,0.45); } } .essence-icon { position: relative; z-index: 1; font-size: 1.6rem; align-self: center; color: white !important; text-shadow: 0 2px 6px rgba(0,0,0,0.45); margin: 0; line-height: 1; display: flex; justify-content: center; align-items: center; } /* Colores de Esencias y Marcas de Agua (Estilo PokÃ©mon) */ .essence-fuego { background: radial-gradient(circle at 35% 35%, #ff7675 0%, #d63031 75%, #7f0808 100%) !important; border: 1.5px solid rgba(255, 255, 255, 0.45) !important; box-shadow: 0 0 6px rgba(231, 76, 60, 0.5), inset 0 1px 2px rgba(255,255,255,0.4) !important; } .essence-tierra { background: radial-gradient(circle at 35% 35%, #a8e6cf 0%, #27ae60 75%, #14582f 100%) !important; border: 1.5px solid rgba(255, 255, 255, 0.45) !important; box-shadow: 0 0 6px rgba(46, 204, 113, 0.5), inset 0 1px 2px rgba(255,255,255,0.4) !important; } .essence-agua { background: radial-gradient(circle at 35% 35%, #74b9ff 0%, #0984e3 75%, #083b66 100%) !important; border: 1.5px solid rgba(255, 255, 255, 0.45) !important; box-shadow: 0 0 6px rgba(52, 152, 219, 0.5), inset 0 1px 2px rgba(255,255,255,0.4) !important; } .essence-aire { background: radial-gradient(circle at 35% 35%, #ffffff 0%, #b2bec3 75%, #4b5257 100%) !important; border: 1.5px solid rgba(255, 255, 255, 0.45) !important; box-shadow: 0 0 6px rgba(213, 219, 219, 0.5), inset 0 1px 2px rgba(255,255,255,0.4) !important; } .essence-eter { background: linear-gradient(135deg, #6c3483 0%, #9b59b6 60%, #8e44ad 100%) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.4), 0 4px 10px rgba(0,0,0,0.45); } .card-intervention { background: linear-gradient(135deg, #9a7d0a 0%, #f1c40f 60%, #f5b041 100%) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.45), 0 4px 10px rgba(0,0,0,0.45); } .card-essence.market-highlight { animation: pulseMarketBorder 1.5s infinite alternate; } @keyframes pulseMarketBorder { 0% { border-color: rgba(26, 188, 156, 0.3); } 100% { border-color: rgba(26, 188, 156, 1); box-shadow: 0 0 10px rgba(26, 188, 156, 0.3); } } /* IndicaciÃ³n de que se puede rescatar */ .card-mito.can-rescue { border-color: var(--accent) !important; box-shadow: 0 0 15px var(--accent-glow) !important; animation: pulseBorder 1.5s infinite alternate; } @keyframes pulseBorder { 0% { border-color: rgba(46, 204, 113, 0.4); } 100% { border-color: rgba(46, 204, 113, 1); } } /* Mitos Durmientes (afectados por Velo de Olvido) */ .card-mito.sleeping { transform: rotate(15deg); opacity: 0.6; border-color: rgba(255,255,255,0.2) !important; box-shadow: none !important; } .card-mito.sleeping::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65); border-radius: 10px; z-index: 10; } /* Temas especÃficos de paneles (Rojo sutil para Rival, Verde sutil para Jugador) */ .player-panel-theme { background: radial-gradient(circle at top left, rgba(20, 45, 25, 0.45), rgba(15, 20, 16, 0.8)) !important; border: 1px solid rgba(46, 204, 113, 0.25) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45), 0 0 15px rgba(46, 204, 113, 0.05) !important; padding: 14px 16px !important; } .player-panel-theme .panel-title, .player-panel-theme .panel-title-row { color: #a2f3c4 !important; border-bottom-color: rgba(46, 204, 113, 0.2) !important; } .rival-panel-theme { background: radial-gradient(circle at top left, rgba(45, 20, 20, 0.45), rgba(20, 15, 15, 0.8)) !important; border: 1px solid rgba(231, 76, 60, 0.25) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45), 0 0 15px rgba(231, 76, 60, 0.05) !important; padding: 14px 16px !important; } .rival-panel-theme .panel-title, .rival-panel-theme .panel-title-row { color: #ff8a80 !important; border-bottom-color: rgba(231, 76, 60, 0.2) !important; } .rival-hand-back { display: flex; gap: 6px; flex-wrap: nowrap !important; overflow: hidden !important; height: 80px !important; min-height: 80px !important; max-height: 80px !important; align-items: center; padding: 0; box-sizing: border-box; } .rival-hand-back .card-back-mini { width: 56px !important; height: 56px !important; background: linear-gradient(135deg, #1e3c72, #2a5298); border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 50% !important; box-shadow: 0 3px 8px rgba(0,0,0,0.45); transition: border-color 0.2s ease, box-shadow 0.2s ease; cursor: default; flex-shrink: 0; } .rival-hand-back .card-back-mini:hover { transform: translateY(-8px) scale(1.05); border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 8px 20px rgba(0,0,0,0.55); } /* Mano general — sin scroll interno, altura fija */ .hand-cards { display: flex; gap: 4px; flex-wrap: nowrap !important; overflow: visible !important; /* Permitir que las cartas se desplacen arriba */ height: 80px !important; min-height: 80px !important; max-height: 80px !important; align-items: center; justify-content: flex-start; /* Alinear a la izquierda para que aparezcan de izquierda a derecha */ padding: 0 10px; box-sizing: border-box; } .card-essence-placeholder, .card-back-mini-placeholder { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; border-radius: 50% !important; border: 2px dashed rgba(255, 255, 255, 0.12) !important; background: rgba(0, 0, 0, 0.25) !important; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5) !important; flex-shrink: 0 !important; box-sizing: border-box !important; } @media (max-width: 768px), (max-height: 600px) { .card-essence-placeholder, .card-back-mini-placeholder { display: none !important; } } #player-hand::-webkit-scrollbar, #rival-hand::-webkit-scrollbar { height: 4px; } #player-hand::-webkit-scrollbar-thumb, #rival-hand::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; } /* Las rescued-row dentro de row-layout son controladas por .row-layout rules arriba */ .rival-rescued-row, .player-rescued-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; align-items: center !important; overflow-x: auto !important; overflow-y: hidden !important; flex-grow: 1 !important; } /* Minicartas Rescatadas */ .card-mito.es-rescatado { width: 65px !important; height: auto !important; min-width: 65px !important; min-height: auto !important; padding: 6px !important; border-radius: 6px !important; flex-shrink: 0 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } .card-mito.es-rescatado:hover { transform: translateY(-4px) scale(1.03) !important; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4) !important; } .card-mito.es-rescatado .mito-header { display: none !important; } .card-mito.es-rescatado .mito-title { display: none !important; } /* La imagen ocupa todo el espacio central disponible */ .card-mito.es-rescatado .mito-img { flex: 1 !important; width: 100% !important; border-radius: 4px !important; margin: 3px 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; font-size: 2rem !important; min-height: 0 !important; } .card-mito.es-rescatado .mito-desc { display: none !important; } .card-mito.es-rescatado .mito-footer { padding-top: 0 !important; margin-top: 0 !important; width: 100% !important; justify-content: center !important; border-top: none !important; } .card-mito.es-rescatado .mito-cost { gap: 4px !important; justify-content: center !important; width: 100% !important; } .card-mito.es-rescatado .cost-dot { width: 20px !important; height: 20px !important; border-radius: 50% !important; display: flex !important; justify-content: center !important; align-items: center !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } .card-mito.es-rescatado .cost-emoji { font-size: 0.85rem !important; line-height: 1 !important; } /* Badge de puntos posicionado en la esquina superior de la minicarta rescatada */ .card-mito.es-rescatado .mito-pts-badge { display: none !important; } /* Sidebar: Historial y Controles */ .sidebar { display: flex; flex-direction: column; gap: 20px; } .action-card { display: flex; flex-direction: column; gap: 10px; } .btn-action-group { display: flex; flex-direction: column; gap: 10px; } /* Scrollbar personalizado */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } /* Ventanas Modales */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); z-index: 100; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .modal-overlay.active { opacity: 1; pointer-events: auto; } /* ===== Modal Iniciativa - Moneda cara o cruz ===== */ .initiative-modal-box { background: linear-gradient(160deg, #0d1f1a 0%, #080d0b 100%); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 80px rgba(0,0,0,0.9), 0 0 40px rgba(26,188,156,0.15); border-radius: 24px; padding: 28px 44px; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 320px; text-align: center; } .initiative-title { font-family: 'Outfit', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--accent); text-shadow: 0 0 20px var(--accent-glow); letter-spacing: 1px; } .initiative-subtitle { font-size: 1.5rem; font-weight: 800; color: var(--accent); text-shadow: 0 0 20px var(--accent-glow); letter-spacing: 1px; text-transform: uppercase; } /* Contenedor con perspectiva 3D */ .coin-wrapper { perspective: 600px; width: 104px; height: 104px; margin: 4px 0; } .coin { width: 104px; height: 104px; position: relative; transform-style: preserve-3d; border-radius: 50%; /* Arranca girando rÃ¡pido */ animation: coinSpin 0.15s linear infinite; } .coin.landed-green { animation: coinLandGreen 0.6s ease-out forwards; } .coin.landed-red { animation: coinLandRed 0.6s ease-out forwards; } .coin-face { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 900; letter-spacing: 2px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: inset 0 0 20px rgba(0,0,0,0.4), 0 4px 15px rgba(0,0,0,0.5); } .coin-green { background: radial-gradient(circle at 35% 35%, #52e09c, #1abc9c 50%, #0e7a5c); color: #fff; border: 3px solid rgba(255,255,255,0.25); transform: rotateY(0deg); } .coin-red { background: radial-gradient(circle at 35% 35%, #ff6b6b, #e74c3c 50%, #a01f1f); color: #fff; border: 3px solid rgba(255,255,255,0.15); transform: rotateY(180deg); } /* Giro rÃ¡pido continuo mientras "estÃ¡ en el aire" */ @keyframes coinSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } /* Aterriza mostrando verde (TÃš) */ @keyframes coinLandGreen { 0% { transform: rotateY(var(--spin-from)); } 70% { transform: rotateY(calc(var(--spin-end) + 20deg)); } 85% { transform: rotateY(calc(var(--spin-end) - 8deg)); } 100% { transform: rotateY(var(--spin-end)); } } /* Aterriza mostrando rojo (IA) */ @keyframes coinLandRed { 0% { transform: rotateY(var(--spin-from)); } 70% { transform: rotateY(calc(var(--spin-end) + 20deg)); } 85% { transform: rotateY(calc(var(--spin-end) - 8deg)); } 100% { transform: rotateY(var(--spin-end)); } } .initiative-result { font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 700; min-height: 28px; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; } .initiative-result.visible { opacity: 1; transform: translateY(0); } .initiative-result.result-player { color: #2ecc71; } .initiative-result.result-rival { color: #e74c3c; } .initiative-btn { margin-top: 6px; padding: 12px 36px; font-size: 1rem; letter-spacing: 1px; } .modal { background: rgba(13, 22, 18, 0.96); border: 1px solid var(--border-color); box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 25px rgba(26, 188, 156, 0.2); border-radius: 20px; padding: 20px 25px; max-width: 500px; width: 90%; text-align: center; transform: translateY(20px); transition: transform 0.3s ease; max-height: 90vh; overflow-y: auto; overflow-x: hidden; } #end-modal .modal { max-width: 650px; padding: 20px 25px; overflow-x: hidden; } #end-modal .card-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px !important; margin-top: 10px; } #end-modal .card-row .card-mito { width: 140px !important; height: 200px !important; flex: 0 0 140px !important; } .modal-overlay.active .modal { transform: translateY(0); } .modal h2 { font-family: 'Outfit', sans-serif; font-size: 1.8rem; margin-top: 5px; margin-bottom: 8px; } .modal-win h2 { color: var(--accent); text-shadow: 0 0 20px var(--accent-glow); } .modal-lose h2 { color: #e74c3c; text-shadow: 0 0 20px rgba(231, 76, 60, 0.3); } .modal p { color: var(--text-secondary); margin-bottom: 12px; line-height: 1.4; font-size: 0.95rem; } .modal-actions { display: flex; justify-content: center; gap: 15px; } /* Indicador de Turno */ .turn-indicator { padding: 6px 12px; border-radius: 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .turn-indicator.player-turn { background: rgba(46, 204, 113, 0.15); color: var(--accent); border: 1px solid rgba(46, 204, 113, 0.3); } .turn-indicator.rival-turn { background: rgba(231, 76, 60, 0.15); color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.3); } /* Overlay de objetivo â€” oculto siempre por defecto */ .targeting-overlay { display: none; } /* InteracciÃ³n de selecciÃ³n de objetivo para cartas */ .targeting-mode .card-mito { animation: targetGlow 1s infinite alternate; cursor: pointer; } /* Solo mostrar el overlay al hacer hover en modo targeting */ .targeting-mode .card-mito:hover .targeting-overlay { display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(231, 76, 60, 0.35); border: 2px dashed #e74c3c; border-radius: 12px; z-index: 20; justify-content: center; align-items: center; font-weight: 700; font-size: 0.95rem; color: white; text-shadow: 0 2px 4px black; pointer-events: none; } @keyframes targetGlow { 0% { border-color: rgba(231, 76, 60, 0.3); box-shadow: 0 0 5px rgba(231, 76, 60, 0.2); } 100% { border-color: rgba(231, 76, 60, 1); box-shadow: 0 0 15px rgba(231, 76, 60, 0.5); } } /* SelecciÃ³n de BotÃn */ .card-mito.loot-card-option { border-color: var(--intervencion); animation: lootGlow 1.5s infinite alternate; } .card-mito.loot-card-option:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 0 20px var(--intervencion-glow); } @keyframes lootGlow { 0% { border-color: rgba(241, 196, 15, 0.3); } 100% { border-color: rgba(241, 196, 15, 1); } } /* ================= FOOTER ================= */ .site-footer { flex-shrink: 0; margin-top: auto; padding: 40px 24px 32px; background: transparent; border-top: none; position: relative; } .footer-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .footer-logo { height: 38px; width: auto; display: block; opacity: 0.95; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; } .footer-nav a { font-family: 'Outfit', sans-serif; font-size: 0.82rem; color: var(--text-secondary); text-decoration: none; opacity: 0.72; transition: color 0.2s ease, opacity 0.2s ease; } .footer-nav a:hover { color: var(--accent); opacity: 1; } .footer-socials { display: flex; gap: 10px; } .social-link { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); color: var(--text-secondary); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); text-decoration: none; } .social-link:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .social-link:nth-child(1):hover { background: rgba(29, 161, 242, 0.15); border-color: rgba(29, 161, 242, 0.3); color: #1da1f2; } .social-link:nth-child(2):hover { background: rgba(225, 48, 108, 0.15); border-color: rgba(225, 48, 108, 0.3); color: #e1306c; } .social-link:nth-child(3):hover { background: rgba(88, 101, 242, 0.15); border-color: rgba(88, 101, 242, 0.3); color: #5865f2; } .social-link:nth-child(4):hover { background: rgba(255, 0, 80, 0.15); border-color: rgba(255, 0, 80, 0.3); color: #ff0050; } .footer-legal { font-family: 'Outfit', sans-serif; font-size: 0.72rem; line-height: 1.6; color: var(--text-secondary); opacity: 0.45; letter-spacing: 0.3px; max-width: 580px; margin: 4px 0 0 0; } /* ================= RESPONSIVE ================= */ /* ---------- TABLET (â‰¤1024px) ---------- */ @media (max-width: 1024px) { .middle-game-grid { grid-template-columns: 1fr 160px; } .panel-height-aligned, .panel-top-aligned { height: auto !important; min-height: 0 !important; } .sobres-container { grid-template-columns: 1fr; } .prep-main-layout { grid-template-columns: 1fr; } .collection-header { flex-direction: column; align-items: stretch; gap: 12px; } .collection-filters { flex-wrap: wrap; } } /* ---------- MOBILE (≤768px) or LANDSCAPE SHORT SHIELD ---------- */ @media (max-width: 768px), (max-height: 600px) { .app-container { padding: 10px; gap: 12px; } /* Header: solo brand + hamburger */ header { padding: 8px 12px; border-radius: 12px; } .text-logo { font-size: 1.25rem; -webkit-text-stroke: 1px #2b1d42; } .brand-logo { height: 48px !important; } .economy-widget-mobile { display: flex !important; position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; margin-right: 0 !important; padding: 4px 10px !important; font-size: 0.85rem !important; gap: 6px !important; z-index: 10 !important; } .economy-widget-mobile .currency-item { font-size: 0.85rem !important; gap: 3px !important; } .economy-widget-desktop { display: none !important; } .subtitle { font-size: 0.65rem; display: none; } /* Mostrar hamburger */ .hamburger-btn { display: flex; } /* Drawer lateral */ .header-menu { position: fixed; top: 0; right: 0; width: 280px; height: 100vh; background: linear-gradient(180deg, rgba(18, 20, 26, 0.98) 0%, rgba(12, 14, 18, 0.99) 100%); backdrop-filter: blur(20px); border-left: 1px solid rgba(255, 255, 255, 0.06); flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 80px 20px 30px; gap: 20px; z-index: 99; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.35s; box-shadow: none; overflow-y: auto; visibility: hidden; } .header-menu.open { transform: translateX(0); visibility: visible; box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5); } /* Nav dentro del drawer: vertical */ .main-nav { flex-direction: column; border-radius: 16px; padding: 8px; gap: 4px; margin-right: 0 !important; /* Desactiva el alineado a la izquierda en el drawer movil */ } .nav-btn { width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px; font-size: 0.9rem; } /* User profile dentro del drawer */ .user-profile-widget { border-radius: 16px; padding: 14px; } .user-edit-btn { opacity: 0.5; transform: scale(1); } /* Header actions dentro del drawer */ .header-actions { flex-direction: column; gap: 8px; } .header-actions .btn { width: 100%; justify-content: center; } /* Collection header */ .collection-header { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; } .collection-stats { gap: 16px; } .collection-filters { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; gap: 6px !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; } .collection-filters .select-filter { flex: 1 1 auto !important; min-width: 0 !important; padding: 8px 20px 8px 8px !important; font-size: 0.75rem !important; background-position: right 6px center !important; border-radius: 10px !important; height: 36px !important; } .collection-filters #owned-toggle-container { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; font-size: 0.75rem !important; gap: 4px !important; } .collection-filters .search-btn-trigger { flex: 0 0 36px !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: var(--text-secondary) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.3s ease !important; } .collection-filters .search-btn-trigger:hover { background: rgba(26, 188, 156, 0.15) !important; border-color: var(--accent) !important; color: var(--accent) !important; } /* Cards grid adaptada */ .region-card-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .card-mito, .card-wrapper, .recycle-card-wrapper { width: 100% !important; height: auto !important; align-self: start !important; min-height: 200px !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; } .card-mito, .card-wrapper, .recycle-card-wrapper .card-mito { aspect-ratio: 63 / 88 !important; } .card-wrapper { display: block !important; } .card-mito { display: flex !important; } .card-wrapper .card-mito { width: 100% !important; height: 100% !important; } #mercado-ofertas { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 15px !important; width: 100%; margin: 0 auto; } #mercado-ofertas > div { width: 100% !important; max-width: 220px !important; } .prep-available-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 8px !important; } /* Region sections */ .region-section { padding: 14px; border-radius: 12px; } .region-section-header { flex-direction: row; gap: 8px; padding-bottom: 10px; margin-bottom: 14px; } .region-section-title { font-size: 0.85rem; } .region-section-stats { font-size: 0.7rem; white-space: nowrap; } /* Sobres */ .sobre-selector { padding: 20px; } .sobres-container { min-height: auto; padding: 10px 0; } #opened-cards-panel { min-height: 420px !important; padding: 25px 20px !important; } .reveal-arena { transform: scale(1.1) !important; margin: 35px auto 20px auto !important; } /* Panel general */ .panel { padding: 14px; border-radius: 12px; } /* Footer */ .site-footer { margin-top: 35px; padding: 32px 18px 28px; } .footer-nav { gap: 8px 16px; } .footer-legal { font-size: 0.68rem; } /* Inspector 3D en mÃ³vil */ #inspector-3d-modal .card-mito { width: 260px; height: auto; } /* ================= OPTIMIZACIONES DEL DUELO PARA MÃ“VILES ================= */ /* Panel title rows en mÃ³vil: stack vertical */ .panel-title-row { flex-wrap: wrap; gap: 6px; } .panel-title-text { font-size: 0.7rem; } .panel-title-points { font-size: 0.7rem; padding: 2px 8px; } /* middle grid: stack vertical en mÃ³vil */ .middle-game-grid { grid-template-columns: 1fr !important; gap: 8px; } /* claro panel inline en mÃ³vil */ .claro-panel { flex-direction: row !important; align-items: center; padding: 10px 12px !important; gap: 12px; } .claro-panel .panel-title-row { display: none !important; } .claro-panel .claro-deck-zone { margin: 0; flex-shrink: 0; height: auto !important; } .claro-panel .claro-deck-zone .deck { width: 68px !important; height: 68px !important; } .claro-panel .claro-deck-zone .deck .deck-inner { font-size: 1.5rem !important; } .claro-panel .claro-instruction-text { font-size: 0.7rem !important; text-align: left !important; margin: 0 !important; } /* Niebla en swiper horizontal */ #niebla-zone { display: flex; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; align-content: stretch !important; scroll-snap-type: x mandatory; } #niebla-zone .card-mito { flex: 0 0 120px !important; width: 120px !important; height: 175px !important; scroll-snap-align: start; overflow: visible !important; } #niebla-zone .card-mito .mito-desc { display: none !important; } #niebla-zone .card-mito .mito-img { height: 75px !important; font-size: 1.6rem !important; } #niebla-zone .card-mito .mito-title { font-size: 0.68rem !important; padding: 0 4px !important; } #niebla-zone .card-mito .mito-region { font-size: 0.5rem !important; } #niebla-zone .card-mito .cost-dot { width: 15px !important; height: 15px !important; } #niebla-zone .card-mito .cost-emoji { font-size: 0.6rem !important; } #niebla-zone .card-mito .mito-pts-badge { font-size: 0.65rem !important; width: 14px !important; height: 14px !important; top: 4px !important; left: 4px !important; } #niebla-zone::-webkit-scrollbar { height: 4px; } #niebla-zone::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; } /* row-layout en mÃ³vil: tamaÃ±o de mano adaptado para 10 cartas de 44px */ .row-layout { gap: 6px; } .row-layout .hand-cards, .row-layout .rival-hand-back { /* 12 cartas * 44px + 11 gaps * 4px = 572px */ width: 580px; min-width: 180px; overflow: hidden !important; } .row-divider { height: 56px; } #player-hand .card-essence, #rival-hand .card-back-mini { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; flex-shrink: 0 !important; padding: 0 !important; border-radius: 50% !important; } #player-hand .card-essence .essence-icon { font-size: 1.3rem !important; margin: 0 !important; } /* Reducir gap de la mano en mÃ³vil para que 10 cartas de 44px quepan sin scroll */ #player-hand, #rival-hand { gap: 4px !important; padding: 0 !important; height: 60px !important; min-height: 60px !important; max-height: 60px !important; } /* Ocultar botÃ³n de reglas del duelo en mÃ³vil (mueve a header) */ #btn-rules-duel.btn-rules-inline { display: none !important; } } /* ---------- SMALL MOBILE (â‰¤480px) ---------- */ @media (max-width: 480px) { .app-container { padding: 8px; gap: 10px; } header { padding: 6px 10px; border-radius: 10px; } .text-logo { font-size: 0.95rem; letter-spacing: 0.5px; } .region-card-grid, .prep-available-grid, #recycle-available-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } #mercado-ofertas { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; } .card-mito, .card-wrapper, .recycle-card-wrapper { width: 100% !important; height: auto !important; align-self: start !important; min-height: 200px !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; } .card-mito, .card-wrapper, .recycle-card-wrapper .card-mito { aspect-ratio: 63 / 88 !important; } .card-wrapper { display: block !important; } .card-mito { display: flex !important; } .card-wrapper .card-mito { width: 100% !important; height: 100% !important; } .card-mito { padding: 8px !important; } .mito-header .mito-title { font-size: 0.65rem; } .mito-header .mito-region { font-size: 0.5rem; } /* .mito-desc ja escala amb cqw+clamp (no forcem rem aquí) */ .region-section { padding: 10px; } .region-section-header { flex-wrap: wrap; } .region-section-title { font-size: 0.75rem; } .collection-stats { flex-direction: row; gap: 6px; width: 100%; } .stat-card { min-width: 0; padding: 4px 8px; gap: 4px; border-radius: 6px; } .stat-card-value { font-size: 0.75rem; } .stat-card-label { font-size: 0.65rem; } .stat-card-sub { font-size: 0.62rem; } /* Inspector 3D mÃ¡s pequeÃ±o */ #inspector-3d-modal .card-mito { width: 220px; height: auto; } #opened-cards-panel { min-height: 400px !important; padding: 15px 15px !important; } .reveal-arena { transform: scale(1.0) !important; margin: 20px auto 15px auto !important; } } /* ================= FICHAS DE MAYORÃA Y SELLO DE RESCATE ================= */ /* Nuevo Chasis de Rareza y Fichas en el Footer */ .mito-rarity-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 20px; font-size: 0.52rem; text-transform: uppercase; font-weight: 800; font-family: 'Outfit', sans-serif; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); transition: all 0.2s ease; } .mito-rarity-badge.with-tokens { padding: 2.5px 6px; gap: 4px; font-size: 0.48rem; } /* Colores personalizados segÃºn nivel de maestrÃa */ .level-1 .mito-rarity-badge, .mito-rarity-badge.badge-level-1 { background: rgba(205, 127, 50, 0.14); color: #e0a86a; /* bronze clar llegible sobre fons fosc */ border-color: rgba(205, 127, 50, 0.38); } .level-2 .mito-rarity-badge, .mito-rarity-badge.badge-level-2 { background: rgba(190, 202, 214, 0.2); color: #dfe6ec; /* plata clara, llegible sobre fons fosc */ border-color: rgba(190, 202, 214, 0.45); } .level-3 .mito-rarity-badge, .mito-rarity-badge.badge-level-3 { background: rgba(241, 196, 15, 0.18); color: #ffd700; border-color: rgba(241, 196, 15, 0.45); box-shadow: 0 2px 8px rgba(241, 196, 15, 0.35); } /* Fichas Inline en el badge de la Niebla */ .tokens-separator { opacity: 0.3; font-weight: 300; margin: 0 1px; color: var(--text-primary); } .inline-tokens { display: flex; gap: 4px; align-items: center; } /* Fichas posicionadas externamente debajo de la carta */ .card-external-tokens-wrapper { position: absolute; bottom: -25px; /* Se sitúa flotando con margen de separación debajo de la carta */ left: 50%; transform: translateX(-50%); z-index: 10; background: rgba(10, 15, 12, 0.95); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); padding: 4px 10px; border-radius: 12px; pointer-events: auto; } /* Ajustes de flex para evitar que las cartas se encabalguen en el tablero */ #niebla-zone { overflow: visible !important; } #niebla-zone .card-mito { overflow: visible !important; } .inline-token { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .inline-token.empty { background: rgba(0, 0, 0, 0.55); border-color: rgba(0, 0, 0, 0.35); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.8); } .inline-token.player { background: radial-gradient(circle at 35% 35%, #2ecc71 0%, #2cbd62 70%, #1e8449 100%); border-color: #58d68d; box-shadow: 0 0 6px rgba(46, 204, 113, 0.8); } .inline-token.rival { background: radial-gradient(circle at 35% 35%, #ff7675 0%, #ff3838 70%, #d63031 100%); border-color: #ff7675; box-shadow: 0 0 8px rgba(255, 71, 87, 0.8); } /* Sello de Rescate en mano */ .card-essence.essence-sello { background: linear-gradient(135deg, #d4af37 0%, #aa7c11 50%, #d4af37 100%) !important; border: 2.2px solid #ffd700 !important; box-shadow: inset 0 0 15px rgba(255,215,0,0.6), 0 4px 12px rgba(0,0,0,0.5); animation: selloGlowPulse 2.5s infinite alternate; } .card-essence.essence-sello::before { content: 'ðŸ’®' !important; font-size: 3.6rem !important; opacity: 0.22 !important; } .card-essence.essence-sello.selected { /* Hereda el anillo dorado del .card-essence.selected base */ box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.55), 0 0 28px rgba(255, 215, 0, 0.9), inset 0 0 18px rgba(255, 255, 255, 0.7) !important; transform: translateY(-14px) scale(1.1) !important; } @keyframes selloGlowPulse { 0% { box-shadow: inset 0 0 12px rgba(255,215,0,0.4), 0 4px 10px rgba(0,0,0,0.5); } 100% { box-shadow: inset 0 0 22px rgba(255,215,0,0.75), 0 6px 20px rgba(255,215,0,0.45); } } /* ================= 5. ADAPTACIÃ“N SIMÃ‰TRICA DEL CLARO / DECK EN 2X2 ================= */ .panel-height-aligned { height: 430px; min-height: 430px; display: flex; flex-direction: column; justify-content: space-between; } /* La zona de cartes de la niebla omple l'espai sota el marcador (no 100% que desborda i talla) */ .niebla-panel #niebla-zone { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; } .panel-top-aligned { height: 240px; min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; } .claro-instruction-text { margin-top: 10px; font-size: 0.75rem; color: var(--text-secondary); text-align: center; line-height: 1.45; } @media (min-width: 769px) { .claro-instruction-text { flex-grow: 1; display: flex; align-items: center; justify-content: center; margin: 0 !important; padding: 8px 4px; box-sizing: border-box; } } .claro-deck-zone { display: flex; justify-content: center; align-items: center; margin: 15px auto; min-height: 170px; flex-shrink: 0; } .claro-deck-zone .deck { width: 160px !important; height: 160px !important; border-radius: 50% !important; background: linear-gradient(135deg, #382218, #180d07) !important; border: 2.5px solid #c8aa6e !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(200, 170, 110, 0.25), 0 0 10px rgba(200, 170, 110, 0.15) !important; } .claro-deck-zone .deck::before { border-radius: 50% !important; width: 84% !important; height: 84% !important; } .claro-deck-zone .deck .deck-inner { font-size: 3.2rem !important; transform: rotate(0deg); } .claro-deck-zone .deck .deck-count-badge-inner { bottom: -10px !important; font-size: 0.8rem !important; padding: 3px 10px !important; } /* Badge del contador de cartas dentro del mazo */ .deck-count-badge-inner { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffd875; font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); z-index: 15 !important; } /* Reducir el desplazamiento hover en el mazo */ .claro-deck-zone .deck:hover:not(.disabled) { transform: translateY(-5px) scale(1.04); } .card-essence.disabled { cursor: not-allowed !important; opacity: 0.45; pointer-events: none; } /* ================= 6. INDICADOR INLINE DE SELLO REQUERIDO ================= */ .inline-sello-required { font-size: 0.85rem; margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; color: #ffd700; text-shadow: 0 0 6px rgba(255, 215, 0, 0.8); animation: pulseInlineSello 1.5s infinite alternate; line-height: 1; } @keyframes pulseInlineSello { 0% { transform: scale(0.85); opacity: 0.8; } 100% { transform: scale(1.1); opacity: 1; } } /* ================= 7. ETIQUETA DE NUEVA CARTA ================= */ .card-mito.has-new-tag { overflow: visible !important; clip-path: inset(-20px -20px -20px -20px); } .mito-nueva-tag { position: absolute; top: -14px; /* Flota exactamente por encima de la carta de forma estable */ left: 50%; transform: translateX(-50%) scale(1); background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: white; font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; padding: 5px 16px; border-radius: 20px; box-shadow: 0 4px 10px rgba(231, 76, 60, 0.4), inset 0 1px 2px rgba(255,255,255,0.4); border: 1px solid rgba(255, 255, 255, 0.35); z-index: 20; text-shadow: 0 1px 2px rgba(0,0,0,0.5); pointer-events: none; animation: bounceInNew 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } /* Logo texto */ .text-logo { font-family: 'Piedra', cursive; font-weight: bold; font-size: 1.7rem; letter-spacing: 1.5px; margin: 0; padding: 0; background: linear-gradient(135deg, #1abc9c, #9b59b6); -webkit-background-clip: text; color: transparent; -webkit-text-stroke: 1.5px #2b1d42; /* Borde oscuro para que resalte mÃ¡s como el logo original */ filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)); text-transform: uppercase; } .brand-logo { height: 65px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)); } .economy-widget-mobile { display: none !important; } .economy-widget-desktop { display: flex !important; } /* ================= 8. BADGE DE PUNTOS EN DUELO ================= */ .card-mito.has-pts-badge { /* No requiere overflow visible especial ya que el badge se dibuja dentro de los lÃmites de la carta */ } /* El nom viu a la part BAIXA de la carta (Immersió) i l'emblema a dalt: ja no col·lideixen */ /* Emblema de nivell = escut SVG per costats (hexàgon 1 / heptàgon 2 / octàgon 3). El número va gravat dins l'SVG → amaguem el text del div (color transparent). */ .mito-pts-badge { position: absolute; top: 9px; left: 9px; width: 29px; height: 29px; z-index: 25; pointer-events: none; color: transparent; font-size: 0; background: url('assets/nivells/1.svg') center/contain no-repeat; transition: all 0.3s ease; } .mito-pts-badge.level-1 { background-image: url('assets/nivells/1.svg'); } .mito-pts-badge.level-2 { background-image: url('assets/nivells/2.svg'); } .mito-pts-badge.level-3 { background-image: url('assets/nivells/3.svg'); } /* Estilos para renderizar cartas reales "tal cual" (mismo tamaÃ±o y contenido) dentro de slots de preparaciÃ³n */ .slot.occupied { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; } .slot.occupied .card-mito { width: 100% !important; height: auto !important; aspect-ratio: 63 / 88 !important; margin: 0 !important; pointer-events: none; /* Dejar que el clic pase a la ranura para deseleccionar */ box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important; } /* Ranura de Apuesta del Jugador con brillo rojo */ .slot.slot-wager.occupied .card-mito { border: 2.2px solid #e74c3c !important; box-shadow: 0 10px 22px rgba(231, 76, 60, 0.45) !important; } /* Ranura de Apuesta de la IA con brillo dorado */ .slot.slot-rival-wager.occupied .card-mito { border: 2.2px solid #f1c40f !important; box-shadow: 0 10px 24px rgba(241, 196, 15, 0.5) !important; } /* Para mÃ³vil: slots idÃ©nticos en tamaÃ±o a las cartas de Niebla de combate (120x175px) */ @media (max-width: 768px) { .slot { width: 120px !important; height: 175px !important; font-size: 0.65rem !important; padding: 10px !important; } .chosen-slots-row { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; justify-items: center !important; justify-content: center !important; width: 100% !important; padding: 8px 4px !important; overflow-x: visible !important; } .chosen-slots-row .slot { width: 100% !important; max-width: 200px !important; min-width: 0 !important; height: auto !important; aspect-ratio: 63 / 88 !important; flex: initial !important; } /* Mostrar look completo de las cartas en slots en vertical móvil, tal como las de abajo */ .slot.occupied .card-mito { width: 100% !important; height: 100% !important; padding: 6px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } .slot.occupied .card-mito .mito-header { margin-bottom: 2px !important; } .slot.occupied .card-mito .mito-title { font-size: 0.65rem !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .slot.occupied .card-mito .mito-region { display: block !important; font-size: 0.45rem !important; margin-top: 1px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .slot.occupied .card-mito .mito-img { height: 60px !important; font-size: 1.4rem !important; margin: 2px 0 !important; display: flex !important; } .slot.occupied .card-mito .mito-desc { display: block !important; font-size: 0.48rem !important; line-height: 1.15 !important; margin: 2px 0 !important; height: 38px !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; } .slot.occupied .card-mito .mito-footer { padding: 2px 2px 0 2px !important; margin-top: auto !important; } .slot.occupied .card-mito .cost-dot { width: 13px !important; height: 13px !important; } .slot.occupied .card-mito .cost-emoji { font-size: 0.55rem !important; } .slot.occupied .card-mito .mito-pts-badge { font-size: 0.6rem !important; width: 14px !important; height: 14px !important; top: 4px !important; left: 4px !important; } .chosen-panel { position: relative !important; top: 0 !important; z-index: 1 !important; } } /* --- SYSTEM LIGHTBOX ALERTS (MODALES EMERGENTES DE ADVERTENCIA) --- */ .custom-lightbox-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; /* viewport VISIBLE (dinàmic): en mòbil amb barres, 100vh sobrepassa → el missatge queda descentrat/tallat. dvh el centra en l'espai realment visible. */ background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; z-index: 999999; /* Por encima de todo, incluyendo inspectores y otros modales */ opacity: 0; transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: all; } .custom-lightbox-backdrop.active { opacity: 1; } .custom-lightbox-card { background: radial-gradient(circle at 50% 0%, rgba(26, 188, 156, 0.12) 0%, rgba(15, 17, 20, 0.98) 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 30px; width: 90%; max-width: 420px; max-height: 90vh; max-height: 90dvh; /* mai més alt que el viewport VISIBLE (barres del navegador incloses) */ overflow-y: auto; /* si tot i així no hi cap, scroll INTERN → el botó ACCEPTAR sempre accessible (el backdrop és fixed i no scrolla) */ text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(26, 188, 156, 0.08); transform: scale(0.85); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Carta del dia adquirida: estava escalada 1.2x (transform) i desbordava tapant el botó ACCEPTAR. La deixem a mida natural perquè el botó quedi clarament a sota i clicable. */ /* Carta ESCALA per ALÇADA (width:auto + aspect-ratio 63/88 la manté proporcional): mai més alta que el viewport visible → sempre sencera, centrada amb marges dinàmics amunt/avall. min(260px,...) = mida natural en pantalla alta. */ #noti-card-container .card-mito { transform: scale(1) !important; margin: 10px auto !important; width: auto !important; height: min(260px, 56dvh) !important; } /* DESKTOP (≥992px = la reixa del Mitolari són 5 columnes ~240px d'ample): la carta del modal de compra es veia PETITA (~185px). L'igualem —com a MÍNIM— a la mida del Mitolari (petició usuari): height 340px → ~243px d'ample (aspect 63/88). El guard min-height:601 evita xafar-la en pantalles baixes; cap sobradament al modal (max 90dvh). */ @media (min-width: 992px) and (min-height: 601px) { #noti-card-container .card-mito { height: min(340px, 62dvh) !important; } } /* ═══ Missatge "Nova Carta Adquirida!" amb CARINYO: subtítol + glow pulsant darrere la carta + sparks + entrada ═══ */ .noti-subtitle { color: #bfeee9; font-size: 0.95rem; line-height: 1.35; margin: 0 0 16px; opacity: 0.92; } #noti-card-container { position: relative; animation: notiCardIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both; } /* Entrada de la carta: "pop" amb rebot (des de petita + puja + gira lleugerament). Animem el CONTENIDOR perquè la carta té `transform !important` (que bloquejaria una animació de transform directa sobre .card-mito). */ @keyframes notiCardIn { 0% { opacity: 0; transform: scale(0.5) translateY(24px) rotate(-7deg); } 100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); } } #noti-card-container::before { content: ''; position: absolute; top: 50%; left: 50%; width: 72%; height: 82%; z-index: 0; pointer-events: none; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(0,210,211,0.5) 0%, rgba(0,210,211,0.12) 45%, transparent 70%); filter: blur(16px); animation: notiGlow 2.2s ease-in-out infinite; } @keyframes notiGlow { 0%,100% { opacity: 0.45; transform: translate(-50%,-50%) scale(0.88); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); } } #noti-card-container .card-mito { position: relative; z-index: 2; } .noti-sparks { position: absolute; top: 50%; left: 50%; width: 0; height: 0; z-index: 4; pointer-events: none; } .noti-spark { position: absolute; top: 0; left: 0; width: var(--sz, 6px); height: var(--sz, 6px); margin: calc(var(--sz, 6px) / -2) 0 0 calc(var(--sz, 6px) / -2); border-radius: 50%; background: radial-gradient(circle, #fff 0%, #7ff3f0 45%, rgba(0,210,211,0.25) 70%, transparent 72%); box-shadow: 0 0 6px rgba(127,243,240,0.85); opacity: 0; transform: rotate(var(--ang)) translateX(24px) scale(0.2); animation: notiSpark 2.6s ease-in-out var(--delay, 0s) infinite; } @keyframes notiSpark { 0% { opacity: 0; transform: rotate(var(--ang)) translateX(24px) scale(0.2); } 30% { opacity: 1; transform: rotate(var(--ang)) translateX(var(--dist, 90px)) scale(1); } 60% { opacity: 0.5; } 100% { opacity: 0; transform: rotate(var(--ang)) translateX(calc(var(--dist, 90px) + 16px)) scale(0.2); } } .carta-claim .noti-title, .carta-claim .noti-subtitle { animation: notiFadeUp 0.5s ease both; } .carta-claim .noti-subtitle { animation-delay: 0.12s; } @keyframes notiFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Carta del dia adquirida — a HORITZONTAL (poca alçada): reixa (carta a l'ESQUERRA; títol+subtítol+botó a la DRETA, centrats verticalment amb files 1fr de marge) perquè el lightbox encaixi a la pantalla SENSE scroll. */ @media (orientation: landscape) and (max-height: 600px) { .custom-lightbox-card.carta-claim { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: "card ." "card title" "card subtitle" "card button" "card ."; justify-items: start; column-gap: 34px; row-gap: 4px; width: auto !important; max-width: 96vw !important; padding: 22px 38px !important; overflow: hidden !important; /* retalla sparks que surtin de la vora (sense scroll); el contingut hi cap */ } .carta-claim .noti-title { grid-area: title; margin: 0 !important; text-align: left !important; font-size: 1.35rem !important; } .carta-claim .noti-subtitle { grid-area: subtitle; margin: 2px 0 0 !important; text-align: left !important; font-size: 0.92rem !important; } .carta-claim #noti-card-container { grid-area: card; align-self: center; margin: 0 !important; } /* Els DOS botons van dins de #noti-btn-row → és la FILA la que ocupa l'àrea `button` del grid (abans només #noti-accept-btn tenia grid-area i, en embolcallar-los, el div sense àrea saltava a dalt). */ .carta-claim #noti-btn-row { grid-area: button; width: 100% !important; justify-self: stretch; margin: 12px 0 0 !important; } .carta-claim #noti-card-container .card-mito { transform: none !important; margin: 0 !important; width: auto !important; height: min(230px, 64dvh) !important; } } .custom-lightbox-card.active { transform: scale(1); } /* ═══════ INTRO de benvinguda (onboarding Fase 1): overlay full-screen amb 4 pantalles "què és Mítiks". Tot namespacejat sota #game-intro + classes gi- perquè NO xoqui amb res de la SPA (.title/.lead/.step/.nav…). Alçada 100dvh (viewport visible; barres del navegador incloses). Construït des d'app.js (mostrarIntroJoc). ═══════ */ #game-intro { position: fixed; inset: 0; z-index: 1000000; opacity: 0; transition: opacity 0.4s ease; display: flex; flex-direction: column; height: 100dvh; font-family: 'Outfit', system-ui, sans-serif; color: #efe8d6; background: radial-gradient(ellipse 70% 50% at 50% 34%, rgba(72,112,172,.18), transparent 70%), radial-gradient(circle at 50% 44%, #16233c 0%, #0d1526 52%, #0a0f18 100%); } #game-intro.on { opacity: 1; } #game-intro .gi-fog { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background: radial-gradient(60% 40% at 30% 70%, rgba(120,150,200,.10), transparent 60%), radial-gradient(50% 40% at 75% 30%, rgba(160,140,200,.08), transparent 60%); animation: giFog 14s ease-in-out infinite alternate; } @keyframes giFog { from { transform: translateX(-14px); } to { transform: translateX(14px); } } #game-intro .gi-slides { position: relative; flex: 1 1 auto; min-height: 0; } #game-intro .gi-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 30px 96px; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1), visibility .5s; } #game-intro .gi-slide.on { opacity: 1; visibility: visible; transform: none; } #game-intro .gi-eyebrow { font-size: .72rem; letter-spacing: 3px; font-weight: 800; color: #c89b3c; text-transform: uppercase; margin-bottom: 14px; } #game-intro .gi-title { font-size: clamp(1.7rem,5vw,2.7rem); font-weight: 800; line-height: 1.02; color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.5); border: none; margin: 0; } #game-intro .gi-title .gi-accent { color: #f5c542; } #game-intro .gi-sub { font-size: clamp(.8rem,2.4vw,1rem); letter-spacing: 5px; font-weight: 700; color: #e0c67a; text-transform: uppercase; margin-top: 6px; } #game-intro .gi-lead { max-width: 44ch; margin-top: 16px; font-size: clamp(.92rem,2.5vw,1.06rem); line-height: 1.5; color: #a9b1bd; } #game-intro .gi-lead b { color: #efe8d6; font-weight: 700; } #game-intro .gi-emblem { width: 92px; height: 92px; border-radius: 50%; margin-bottom: 18px; display: grid; place-items: center; font-size: 2.9rem; background: radial-gradient(circle at 40% 32%, rgba(245,197,66,.35), rgba(200,155,60,.06) 60%, transparent 72%); border: 1px solid rgba(245,197,66,.4); box-shadow: 0 0 34px rgba(245,197,66,.22), inset 0 0 22px rgba(245,197,66,.12); animation: giFloat 3.4s ease-in-out infinite; } @keyframes giFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } #game-intro .gi-mats { display: flex; gap: 10px; margin-top: 20px; } #game-intro .gi-mat { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 -2px 4px rgba(0,0,0,.4), inset 0 2px 4px rgba(255,255,255,.35), 0 2px 5px rgba(0,0,0,.4); } #game-intro .gi-mat.foc { background: radial-gradient(circle at 36% 30%,#ffb0a8,#ff6b5e 60%,#a3352b); } #game-intro .gi-mat.aigua { background: radial-gradient(circle at 36% 30%,#a9d4f5,#4aa3e8 60%,#245e8c); } #game-intro .gi-mat.terra { background: radial-gradient(circle at 36% 30%,#9de9bd,#2ecc71 60%,#166b3a); } #game-intro .gi-mat.aire { background: radial-gradient(circle at 36% 30%,#fff,#cfd6d8 60%,#8b93a0); } #game-intro .gi-score { display: flex; align-items: center; gap: 22px; margin: 22px 0 4px; } #game-intro .gi-who { display: flex; flex-direction: column; align-items: center; gap: 8px; } #game-intro .gi-lbl { font-size: .72rem; letter-spacing: 2px; font-weight: 800; text-transform: uppercase; } #game-intro .gi-who.you .gi-lbl { color: #2ecc71; } #game-intro .gi-who.foe .gi-lbl { color: #ff6b5e; } #game-intro .gi-pts { width: 72px; height: 72px; border-radius: 16px; display: grid; place-items: center; font-size: 2.1rem; font-weight: 800; color: #fff; } #game-intro .gi-who.you .gi-pts { background: radial-gradient(circle at 38% 30%,#3fe08a,#12693b); box-shadow: 0 8px 20px rgba(46,204,113,.28), inset 0 1px 2px rgba(255,255,255,.4); } #game-intro .gi-who.foe .gi-pts { background: radial-gradient(circle at 38% 30%,#ff8579,#8c1d14); box-shadow: 0 8px 20px rgba(231,76,60,.28), inset 0 1px 2px rgba(255,255,255,.35); } #game-intro .gi-vs { font-size: .9rem; font-weight: 800; color: #c89b3c; letter-spacing: 2px; } #game-intro .gi-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; width: min(430px,100%); } #game-intro .gi-step { display: flex; align-items: center; gap: 14px; text-align: left; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 12px 15px; } #game-intro .gi-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 1.3rem; font-weight: 800; color: #0a0f18; } #game-intro .gi-step:nth-child(1) .gi-ico { background: linear-gradient(135deg,#5db3f0,#2f7fc4); } #game-intro .gi-step:nth-child(2) .gi-ico { background: linear-gradient(135deg,#ffd76a,#e0a92e); } #game-intro .gi-step:nth-child(3) .gi-ico { background: linear-gradient(135deg,#b9a6ff,#7d63e0); } #game-intro .gi-tx { font-size: .92rem; line-height: 1.35; color: #a9b1bd; } #game-intro .gi-tx b { color: #efe8d6; font-weight: 700; } #game-intro .gi-x2 { color: #f5c542; font-weight: 800; } #game-intro .gi-rounds { display: flex; gap: 10px; margin: 20px 0 6px; } #game-intro .gi-rd { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; border: 1px solid rgba(255,255,255,.14); color: #a9b1bd; } #game-intro .gi-rd.win { background: radial-gradient(circle at 38% 32%,#6ee79b,#1e9e5a); color: #fff; border-color: rgba(255,255,255,.5); box-shadow: 0 0 12px rgba(46,204,113,.4); } #game-intro .gi-meta { margin-top: 16px; max-width: 42ch; font-size: .9rem; line-height: 1.5; color: #a9b1bd; } #game-intro .gi-meta b { color: #e0c67a; font-weight: 700; } #game-intro .gi-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px 24px calc(18px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(0deg, rgba(6,9,14,.85), transparent); } #game-intro .gi-dots { display: flex; gap: 8px; } #game-intro .gi-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); transition: all .3s; cursor: pointer; } #game-intro .gi-dot.on { background: #f5c542; width: 22px; border-radius: 5px; } #game-intro .gi-skip { background: none; border: none; color: #a9b1bd; font: inherit; font-size: .82rem; cursor: pointer; padding: 8px 6px; } #game-intro .gi-skip:hover { color: #efe8d6; } #game-intro .gi-next { font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; color: #2a1a05; padding: 11px 26px; border: none; border-radius: 11px; background: linear-gradient(135deg,#f5c542,#e0a92e); box-shadow: 0 6px 18px rgba(241,196,15,.28); transition: transform .15s ease, box-shadow .2s ease; white-space: nowrap; } #game-intro .gi-next:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(241,196,15,.4); } @media (max-height: 430px) { #game-intro .gi-slide { padding: 20px 26px 80px; } #game-intro .gi-emblem { width: 62px; height: 62px; font-size: 1.9rem; margin-bottom: 10px; } #game-intro .gi-lead, #game-intro .gi-meta { margin-top: 10px; } #game-intro .gi-steps { gap: 8px; margin-top: 12px; } #game-intro .gi-step { padding: 9px 12px; } #game-intro .gi-ico { width: 36px; height: 36px; } #game-intro .gi-score { margin: 12px 0 2px; } #game-intro .gi-pts { width: 58px; height: 58px; font-size: 1.7rem; } #game-intro .gi-rounds { margin: 10px 0 4px; } } .lightbox-icon-container { font-size: 2.5rem; margin-bottom: 12px; filter: drop-shadow(0 0 10px rgba(26, 188, 156, 0.2)); animation: alertBounce 2s infinite ease-in-out; } @keyframes alertBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .lightbox-title { font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--text-primary); margin: 0 0 12px 0; text-transform: uppercase; letter-spacing: 1px; } .lightbox-message { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 24px 0; } .lightbox-confirm-btn, .lightbox-cancel-btn { width: 100%; max-width: 160px; padding: 10px 24px !important; font-size: 0.82rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 20px !important; margin: 0 !important; transition: all 0.3s ease !important; } .lightbox-confirm-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(26, 188, 156, 0.5) !important; } .lightbox-cancel-btn:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.25) !important; transform: translateY(-2px) !important; } /* --- ESTILOS DE CHASIS DE CARTA POR NIVEL (Marvel Snap & Fortnite Style) --- */ /* --- ESTILOS DE CHASIS DE CARTA POR NIVEL (Marvel Snap & Fortnite Style) --- */ .card-mito { border: 1px solid rgba(0, 0, 0, 0.45) !important; } /* VORA amb DEGRADAT metàl·lic per tier (el color el posa .level-N::before). Tècnica de màscara: l'::before s'omple amb el degradat i la màscara només deixa veure l'ANELL del gruix del padding → vora amb cantonades arrodonides (border-radius:inherit). Substitueix el `border: 6px solid ` d'abans. */ .card-mito::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; /* Hereda dinámicamente el border-radius de la carta padre en cualquier vista (móvil, tablero, rescatado) */ pointer-events: none; z-index: 5; /* Por encima de la imagen de fondo (z-index: 1) y debajo de los textos interactivos si fuera necesario */ box-sizing: border-box; padding: 6px; /* gruix de la vora (2mm proporcional) */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .card-mito.level-1 { background: linear-gradient(135deg, #4a3620 0%, #2a2015 35%, #14100a 100%) !important; /* fons bronze fosc */ box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important; } .card-mito.level-1::before { background: linear-gradient(150deg, #f4c088, #cd7f32 46%, #6f4118); /* BRONZE metàl·lic */ } .card-mito.level-2 { background: linear-gradient(135deg, #48525c 0%, #2a3036 35%, #13161a 100%) !important; /* fons acer fosc (plata) */ box-shadow: 0 10px 20px rgba(0,0,0,0.55) !important; } .card-mito.level-2::before { background: linear-gradient(150deg, #f2f5f8, #a7b1bd 46%, #57616c); /* PLATA metàl·lica */ } /* 🔴 FORA el resplendor daurat (2026-07-28). Era la marca del Nivell 3 quan el nivell era PROGRÉS: una carta maxada brillava. Ara el nivell és el cost, i el 47% del set en té 3 → mitja col·lecció brillava sense haver fet res per merèixer-ho, i el Mitolari es veia com un arbre de Nadal. El fons fosc també se'n va: el posa la paleta per element. */ .card-mito.level-3 { box-shadow: 0 10px 22px rgba(0,0,0,0.6); } .card-mito.level-3::before { /* OR "intens": degradat CÒNIC amb múltiples reflexos; --gold-a el mou el JS quan gires la carta (fitxa) → el reflex daurat viatja per la vora. Estàtic (col·lecció) = --gold-a 120deg per defecte. */ background: conic-gradient(from var(--gold-a, 120deg), #5a3d0e, #ffe9a8 11%, #fff9e0 15%, #c8922a 26%, #5a3d0e 38%, #ffe9a8 50%, #fff9e0 54%, #c8922a 64%, #5a3d0e 76%, #ffe9a8 88%, #fff9e0 92%, #c8922a 98%, #5a3d0e 100%); } /* ═══ VORA AMB DEGRADAT PER ELEMENT (2026-07-28) ══════════════════════════════════════════════════ Mateixa tècnica de màscara que les vores de tier (l'::before s'omple amb el degradat i la màscara només en deixa veure l'anell), però amb la paleta de l'element dominant. Tres parades i no dues, com els metalls: clar a dalt-esquerra → to pur → ombra a baix-dreta. És el que li dona el toc metàl·lic; un degradat de dues parades es veu pla. Va DESPRÉS de `.card-mito.level-N::before` per guanyar-li la cascada. ═════════════════════════════════════════════════════════════════════════════════════════════════ */ .card-mito.elem-fuego { background-image: linear-gradient(135deg, #4a221c 0%, #2a1512 35%, #140a09 100%) !important; } .card-mito.elem-agua { background-image: linear-gradient(135deg, #1c3149 0%, #121e2c 35%, #080d14 100%) !important; } .card-mito.elem-tierra { background-image: linear-gradient(135deg, #1d4030 0%, #12261c 35%, #08110c 100%) !important; } .card-mito.elem-aire { background-image: linear-gradient(135deg, #3c454b 0%, #232a2e 35%, #101316 100%) !important; } /* Vora CÒNICA amb reflexos múltiples (mateixa estructura que l'or del Nivell 3, que és la que llueix). `--gold-a` el mou el JS en girar la carta → el reflex viatja per la vora. */ .card-mito.elem-fuego::before { background: conic-gradient(from var(--gold-a, 120deg), #36130d, #ef806c 9%, #f1b2a7 12%, #e0533a 22%, #36130d 38%, #ef806c 47%, #f1b2a7 50%, #e0533a 60%, #36130d 76%, #ef806c 85%, #f1b2a7 88%, #e0533a 98%, #36130d 100%); } .card-mito.elem-agua::before { background: conic-gradient(from var(--gold-a, 120deg), #102033, #76abe5 9%, #accbec 12%, #2f79c9 22%, #102033 38%, #76abe5 47%, #accbec 50%, #2f79c9 60%, #102033 76%, #76abe5 85%, #accbec 88%, #2f79c9 98%, #102033 100%); } .card-mito.elem-tierra::before { background: conic-gradient(from var(--gold-a, 120deg), #133020, #80dbaa 9%, #b2e6ca 12%, #34a066 22%, #133020 38%, #80dbaa 47%, #b2e6ca 50%, #34a066 60%, #133020 76%, #80dbaa 85%, #b2e6ca 88%, #34a066 98%, #133020 100%); } .card-mito.elem-aire::before { background: conic-gradient(from var(--gold-a, 120deg), #1f2224, #a6afb5 9%, #c8cdd0 12%, #7d8a92 22%, #1f2224 38%, #a6afb5 47%, #c8cdd0 50%, #7d8a92 60%, #1f2224 76%, #a6afb5 85%, #c8cdd0 88%, #7d8a92 98%, #1f2224 100%); } /* Al MITOLARI el reflex cònic va a TOTES les mides: la carta hi és gran i es llegeix bé fins i tot al mòbil. El color pla només es queda al DUEL (joc.php), on la carta és petita. */ /* Nivell 3: el nom daurat ja és el look base per a tots els nivells (disseny Immersió). Només conservem un matís càlid a la descripció del Mític. */ .card-mito.level-3 .mito-desc { color: #dde3ea !important; /* BLANC com la resta de cartes (petició usuari): abans #ffeb9c "oro arena" es veia groc */ font-weight: 500 !important; opacity: 1 !important; } .card-mito.level-3 .mito-img { border: 1.5px solid #ffd700 !important; box-shadow: 0 0 8px rgba(241, 196, 15, 0.4) !important; } @keyframes legendCardPulse { 0%, 100% { box-shadow: 0 0 15px rgba(241, 196, 15, 0.4), inset 0 0 10px rgba(255, 215, 0, 0.25); border-color: #ffd700 !important; } 50% { box-shadow: 0 0 25px rgba(241, 196, 15, 0.7), inset 0 0 20px rgba(255, 215, 0, 0.45); border-color: #ffe066 !important; } } /* --- BARRA DE PROGRESO DE NIVEL INFERIOR (SUTIL) --- */ .card-progress-bar-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 11px; /* Incrementado a 11px para mayor visibilidad */ background: rgba(0, 0, 0, 0.65); z-index: 4; /* Por debajo del borde (z-index: 5) para que no tape las esquinas redondeadas */ overflow: hidden; pointer-events: none; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .card-progress-bar-bottom .progress-fill { height: 100%; width: 0%; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 8px rgba(255, 255, 255, 0.4); /* Mayor brillo en la línea de progreso */ } /* Colores dinÃ¡micos por nivel de carta */ .card-mito.level-1 .card-progress-bar-bottom .progress-fill { background: linear-gradient(90deg, #e0a15a, #a86a2e); color: #cd7f32; } .card-mito.level-2 .card-progress-bar-bottom .progress-fill { background: linear-gradient(90deg, #eef3f7, #97a3af); color: #aab4bf; } .card-mito.level-3 .card-progress-bar-bottom .progress-fill { background: linear-gradient(90deg, #ffd700, #ffe066, #f1c40f); color: #ffd700; animation: goldBarPulse 2s infinite ease-in-out alternate; } @media (hover: hover) { /* Brillo en Hover */ .card-mito:hover .card-progress-bar-bottom .progress-fill { filter: brightness(1.25) drop-shadow(0 0 3px currentColor); } } @keyframes goldBarPulse { 0% { opacity: 0.85; filter: brightness(1); } 100% { opacity: 1; filter: brightness(1.3) drop-shadow(0 0 2px #ffd700); } } /* --- HOLOGRAMA DE NIVEL 3: Purpurina Dorada MetÃ¡lica --- */ .holo-level-3 { background-image: radial-gradient( circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.5) 0%, rgba(241, 196, 15, 0.2) 20%, transparent 60% ), repeating-linear-gradient( 45deg, rgba(241, 196, 15, 0.15) 0px, rgba(243, 156, 18, 0.1) 15px, rgba(255, 255, 255, 0.15) 30px, rgba(241, 196, 15, 0.15) 45px ); background-size: 100% 100%, 200px 200px; background-position: 0% 0%, calc(var(--mx, 50%) * 2) calc(var(--my, 50%) * 2); mix-blend-mode: color-dodge; opacity: 0.65; } /* Ajustes de flexibilidad para el panel de preparaciÃ³n */ .prep-action-col { height: auto !important; } .prep-action-col #btn-mix-active { width: 100%; padding: 10px 15px; font-size: 0.82rem; font-weight: 600; margin: 0; } /* --- TEMPORIZADOR DE ROTACIÃ“N DE APUESTA DE LA IA --- */ .wager-rotation-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(241, 196, 15, 0.06); border: 1px solid rgba(241, 196, 15, 0.18); padding: 3.5px 10px; border-radius: 20px; font-size: 0.65rem; font-weight: 700; color: #ffd875; letter-spacing: 0.5px; backdrop-filter: blur(4px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); margin-left: 0; font-family: 'Outfit', sans-serif; vertical-align: middle; transition: all 0.3s ease; } .wager-rotation-badge.urgent { background: rgba(231, 76, 60, 0.08); border-color: rgba(231, 76, 60, 0.25); color: #ff7675; animation: urgentPulse 1s infinite alternate; } .wager-rotation-badge .timer-icon { font-size: 0.72rem; display: inline-block; animation: rotateHourglass 2s infinite linear; } .wager-rotation-badge.urgent .timer-icon { animation: rotateHourglass 1s infinite linear; } @keyframes rotateHourglass { 0% { transform: rotate(0deg); } 45% { transform: rotate(0deg); } 55% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } } @keyframes urgentPulse { 0% { box-shadow: 0 0 5px rgba(231, 76, 60, 0.1), 0 4px 15px rgba(0, 0, 0, 0.2); } 100% { box-shadow: 0 0 12px rgba(231, 76, 60, 0.22), 0 4px 15px rgba(0, 0, 0, 0.2); } } /* ================= PREPARACIÃ“N DE DUELO: PESTAÃ‘AS Y FILTROS ================= */ .prep-pool-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 12px; } .prep-pool-title-group { display: flex; align-items: center; gap: 15px; } .prep-pool-title-group .panel-title { margin: 0; } .prep-pool-count { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; } .prep-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* Selector de DIFICULTAT: 4 targetes premium amb fons temàtic (tier → sesga el sorteig; Leteu iguala). */ .prep-difficulty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; margin: 6px 0 2px; } .prep-diff-card { position: relative; overflow: hidden; cursor: pointer; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 178px; padding: 16px 12px; border-radius: 14px; text-align: center; border: 1px solid rgba(255,255,255,0.12); color: #fff; font-family: 'Outfit',sans-serif; transition: transform 0.16s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease; } /* Fons temàtic per tier (substituïble per background-image: url(...) en el futur) */ .prep-diff-card[data-tier="facil"] { background: linear-gradient(150deg,#1f5136 0%,#0c2318 100%); } .prep-diff-card[data-tier="normal"] { background: linear-gradient(150deg,#1d3a63 0%,#0c1a30 100%); } .prep-diff-card[data-tier="dificil"] { background: linear-gradient(150deg,#5a4413 0%,#241a08 100%); } .prep-diff-card[data-tier="extrem"] { background: linear-gradient(150deg,#5e1a1a 0%,#240a0a 100%); } /* Emblema (numeral romà del tier) darrere + brill superior */ .prep-diff-card::before { content: ""; position: absolute; top: -14px; right: 2px; z-index: -1; font-family: 'Outfit',sans-serif; font-weight: 900; font-size: 5.4rem; line-height: 1; opacity: 0.13; color: #fff; pointer-events: none; } .prep-diff-card[data-tier="facil"]::before { content: "I"; } .prep-diff-card[data-tier="normal"]::before { content: "II"; } .prep-diff-card[data-tier="dificil"]::before { content: "III"; } .prep-diff-card[data-tier="extrem"]::before { content: "IV"; } .prep-diff-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 75% at 50% -20%, rgba(255,255,255,0.16), transparent 60%); } .pdc-name { font-weight: 900; font-size: 1.35rem; letter-spacing: 0.5px; text-transform: uppercase; } /* Badge de recompensa (multiplicador de Cristalls del mode), en flux sota el nom → no solapa amb l'emblema ni les minicartes. Estil "neó cian" (el color dels cristalls) amb el ×N gran com a protagonista + un brill que travessa. SEMPRE en una sola línia (nowrap). */ .pdc-reward { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 20px; position: relative; z-index: 1; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg, rgba(70,210,238,0.34), rgba(18,112,152,0.22)); border: 1px solid rgba(130,238,250,0.72); color: #e8fdff; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.2px; box-shadow: 0 2px 10px rgba(0,0,0,0.35), 0 0 14px rgba(80,220,245,0.32), inset 0 1px 0 rgba(255,255,255,0.22); text-shadow: 0 1px 2px rgba(0,0,0,0.55); } .pdc-reward .rw-ic { font-size: 0.82rem; filter: drop-shadow(0 0 3px rgba(120,220,240,0.85)); } .pdc-reward .pdc-mult { font-size: 1rem; font-weight: 900; color: #fff; line-height: 1; } .pdc-reward .pdc-crlbl { font-size: 0.58rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #bfeef7; opacity: 0.9; } .pdc-reward::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent); transform: skewX(-18deg); animation: pdcSheen 2.8s ease-in-out infinite; } @keyframes pdcSheen { 0%, 55% { left: -60%; } 82%, 100% { left: 130%; } } @media (prefers-reduced-motion: reduce) { .pdc-reward::after { animation: none; left: 20%; } } /* Explicació DINS del botó, en BLANC. Alçada mínima perquè tots els botons quedin igual (locked/unlocked). */ .pdc-desc { font-size: 0.8rem; color: #ffffff; line-height: 1.34; margin-top: 4px; min-height: 2.6em; font-variant-numeric: tabular-nums; } .pdc-desc strong { color: #ffe08a; font-weight: 800; } .pdc-desc.locked { color: #ffe4dc; } .pdc-desc.locked strong { color: #ffb6a4; } .prep-diff-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.5); filter: brightness(1.08); } .prep-diff-card.active { transform: translateY(-3px); border-color: rgba(255,255,255,0.9); } .prep-diff-card[data-tier="facil"].active { box-shadow: 0 0 0 2px #7bd88f, 0 12px 30px rgba(76,175,114,0.4); } .prep-diff-card[data-tier="normal"].active { box-shadow: 0 0 0 2px #7fb3f5, 0 12px 30px rgba(63,127,216,0.4); } .prep-diff-card[data-tier="dificil"].active { box-shadow: 0 0 0 2px #f5c542, 0 12px 30px rgba(224,169,46,0.45); } .prep-diff-card[data-tier="extrem"].active { box-shadow: 0 0 0 2px #f57f7f, 0 12px 30px rgba(216,75,75,0.5); } /* Mini-mites amb ESTIL de MINICARTA del joc (com les cartes rescatades .badge del duel): targeta fosca + vora del color del tier + cercle de PUNTS (nivell) a la cantonada. A dins, ✓ (la tens) o ✗ (te'n falta). */ .pdc-mites { display: flex; gap: 8px; margin-top: 4px; justify-content: center; position: relative; z-index: 1; } /* 1 fila: UNA casella per NIVELL amb el nombre requerit (sobre 10 = la partida sencera) */ .pr-need { font-family: 'Outfit',sans-serif; font-size: 0.84rem; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); line-height: 1; letter-spacing: -0.2px; } .pdc-mite { position: relative; width: 38px; height: 50px; border-radius: 5px; font-size: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,14,22,0.55); border: 1.5px solid #c8813a; box-shadow: 0 2px 7px rgba(0,0,0,0.4), inset 0 0 10px rgba(0,0,0,0.4); } .pdc-mite.l1 { border-color: #c8813a; } /* bronze (Nv1) */ .pdc-mite.l2 { border-color: #c3ccd6; } /* plata (Nv2) */ .pdc-mite.l3 { border-color: #f1c40f; } /* or (Nv3) */ /* Cercle de PUNTS a la cantonada superior-esquerra amb el nivell (idèntic a .badge .pts del duel) */ .pdc-pts { position: absolute; top: -7px; left: -7px; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Outfit',sans-serif; font-size: 0.66rem; font-weight: 900; border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.55); } .pdc-mite.l1 .pdc-pts { background: #c8813a; color: #2a1708; } .pdc-mite.l2 .pdc-pts { background: #c3ccd6; color: #20252b; } .pdc-mite.l3 .pdc-pts { background: #f1c40f; color: #241000; } /* ✓ verd (la tens) / ✗ vermella (te'n falta), centrada dins la minicarta */ .pdc-mite svg { width: 56%; height: auto; display: block; color: #45d17d; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } .pdc-mite.missing { border-style: dashed; border-color: #ff5a4d; opacity: 0.92; } .pdc-mite.missing .pr-need { color: #ff9182; } .pdc-mite.missing .pdc-pts { filter: grayscale(0.35); } /* Tier BLOQUEJAT: apagat + cadenat, no clicable */ .prep-diff-card.locked { opacity: 0.62; filter: grayscale(0.55); cursor: not-allowed; } /* no seleccionable; el text del botó ja diu què falta */ .prep-diff-card.locked:hover { transform: none; box-shadow: none; filter: grayscale(0.55); } .pdc-lock { display: none; } .prep-diff-card.locked .pdc-lock { display: flex; position: absolute; top: 8px; left: 8px; z-index: 4; align-items: center; justify-content: center; color: #ffd88a; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); } @media (max-width: 700px) { .prep-difficulty { grid-template-columns: repeat(2, 1fr); } .prep-diff-card { min-height: 178px; padding: 13px 8px; } .pdc-name { font-size: 1.18rem; } .pdc-desc { font-size: 0.74rem; min-height: 3em; } .pdc-mites { gap: 6px; margin-top: 3px; } .pr-need { font-size: 0.62rem; } .pdc-mite { width: 26px; height: 34px; } .pdc-pts { width: 14px; height: 14px; font-size: 0.55rem; top: -6px; left: -6px; } } .prep-tabs { display: flex; gap: 8px; } #prep-filter-level { min-width: 140px; } #prep-sort-order { min-width: 180px; } .tab-btn { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-secondary); padding: 6px 14px; border-radius: 20px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: all 0.25s ease; } .tab-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); border-color: rgba(255, 255, 255, 0.15); } .tab-btn.active { background: linear-gradient(135deg, var(--accent) 0%, rgba(0, 206, 201, 0.4) 100%); color: #000 !important; font-weight: 600; border-color: transparent; box-shadow: 0 0 10px rgba(0, 206, 201, 0.25); } .prep-controls .select-filter { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: rgba(255, 255, 255, 0.04); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-primary); padding: 6px 36px 6px 14px; border-radius: 20px; /* Cambiado a 20px pill para unificar con tab-btn */ font-family: 'Outfit', sans-serif; font-size: 0.8rem; cursor: pointer; transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); } .prep-controls .select-filter:hover { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); } .prep-controls .select-filter:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 8px rgba(46, 204, 113, 0.3); } .chosen-slots-row .slot.occupied { cursor: pointer; position: relative; transition: transform 0.2s ease, border-color 0.2s ease; } .chosen-slots-row .slot.occupied:hover { transform: translateY(-2px); border-color: var(--accent) !important; } .chosen-slots-row .slot.occupied::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(231, 76, 60, 0.45) 0%, rgba(20, 20, 25, 0.8) 100%); border-radius: 12px; opacity: 0; transition: opacity 0.25s ease; z-index: 2; backdrop-filter: blur(2px); pointer-events: none; } .chosen-slots-row .slot.occupied::after { content: "QUITAR MITO"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.85); background: linear-gradient(135deg, #e74c3c, #c0392b); color: white; padding: 8px 16px; font-size: 0.72rem; font-weight: 800; letter-spacing: 1px; font-family: 'Outfit', sans-serif; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4); opacity: 0; transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 3; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; } .chosen-slots-row .slot.occupied:hover::before { opacity: 1; } .chosen-slots-row .slot.occupied:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* ================= BOTÃ“N DE INICIAR DUELO HORIZONTAL PREMIUM ================= */ .btn-start-duel-large { min-width: 280px; padding: 14px 40px !important; font-size: 1.1rem !important; font-weight: 800 !important; letter-spacing: 3px !important; border-radius: 40px !important; font-family: 'Outfit', sans-serif !important; transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important; border: none !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; } .btn-start-duel-large:disabled { background: rgba(255, 255, 255, 0.05) !important; color: rgba(255, 255, 255, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; cursor: not-allowed !important; box-shadow: none !important; } .btn-start-duel-large:not(:disabled) { background: linear-gradient(135deg, var(--accent) 0%, #6c5ce7 100%) !important; color: #fff !important; cursor: pointer !important; animation: buttonPulse 2s infinite alternate; } .btn-start-duel-large:not(:disabled):hover { transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 10px 25px rgba(0, 206, 201, 0.35), 0 4px 15px rgba(0, 0, 0, 0.2) !important; background: linear-gradient(135deg, #00fff2 0%, #8272ff 100%) !important; } .btn-start-duel-large:not(:disabled):active { transform: translateY(-1px) scale(0.99) !important; } @keyframes buttonPulse { 0% { box-shadow: 0 4px 15px rgba(0, 206, 201, 0.15), 0 0 0 0px rgba(0, 206, 201, 0.15); } 100% { box-shadow: 0 8px 25px rgba(0, 206, 201, 0.3), 0 0 0 10px rgba(0, 206, 201, 0); } } .btn-recycle-duel { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: 50% !important; margin: 0 !important; display: none; /* Controlled by JS via inline display property */ align-items: center !important; justify-content: center !important; text-align: center !important; z-index: 10 !important; background: rgba(229, 62, 62, 0.95) !important; border: 2px solid #fc8181 !important; font-size: 0.95rem !important; font-weight: 900 !important; color: #fff !important; cursor: pointer !important; font-family: 'Outfit', sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; box-shadow: 0 0 15px rgba(229, 62, 62, 0.7) !important; transition: all 0.2s ease !important; line-height: 1.15 !important; box-sizing: border-box !important; padding: 8px !important; } .btn-recycle-duel:hover:not(:disabled) { background: rgba(229, 62, 62, 1) !important; transform: scale(1.05) !important; box-shadow: 0 0 25px rgba(229, 62, 62, 0.9) !important; } .btn-recycle-duel:disabled { opacity: 0.4; cursor: not-allowed; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; color: var(--text-secondary) !important; } @media (max-width: 768px) { .chosen-slots-row .slot.occupied::after { padding: 5px 10px; font-size: 0.58rem; content: "QUITAR"; } } /* Desplazamiento por apuestas en Duelo de Leyendas - Eliminado por petición (mantener cartas fijas) */ #niebla-zone .card-mito.wager-player-leading { transform: none; } #niebla-zone .card-mito.wager-player-leading:hover { transform: translateY(-8px) scale(1.03); } #niebla-zone .card-mito.wager-rival-leading { transform: none; } #niebla-zone .card-mito.wager-rival-leading:hover { transform: translateY(-8px) scale(1.03); } /* Cartas de Velo de Olvido en la mano */ .card-essence.essence-velo { background: linear-gradient(135deg, #3d0066 0%, #120024 100%) !important; border: 2.2px solid #8e44ad !important; box-shadow: inset 0 0 12px rgba(142, 68, 173, 0.6), 0 4px 10px rgba(0,0,0,0.5); animation: veloGlowPulse 2.5s infinite alternate; } .card-essence.essence-velo::before { content: 'ðŸ’¤' !important; font-size: 3.6rem !important; opacity: 0.18 !important; } .card-essence.essence-desfer { background: linear-gradient(135deg, #661a00 0%, #240900 100%) !important; border: 2.2px solid #d35400 !important; box-shadow: inset 0 0 12px rgba(211, 84, 0, 0.6), 0 4px 10px rgba(0,0,0,0.5); animation: desferGlowPulse 2.5s infinite alternate; } .card-essence.essence-desfer::before { content: "🚫" !important; font-size: 3.6rem !important; opacity: 0.18 !important; } .card-essence.essence-desfer.selected { box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.4), 0 0 24px rgba(255, 215, 0, 0.75), inset 0 0 14px rgba(255, 215, 0, 0.3) !important; transform: translateY(-14px) scale(1.1) !important; } @keyframes desferGlowPulse { 0% { box-shadow: inset 0 0 12px rgba(211, 84, 0, 0.5), 0 0 10px rgba(211, 84, 0, 0.2); } 100% { box-shadow: inset 0 0 20px rgba(211, 84, 0, 0.85), 0 0 22px rgba(211, 84, 0, 0.6); } } .card-essence.essence-velo.selected { box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.4), 0 0 24px rgba(255, 215, 0, 0.75), inset 0 0 14px rgba(255, 215, 0, 0.3) !important; transform: translateY(-14px) scale(1.1) !important; } @keyframes veloGlowPulse { 0% { box-shadow: inset 0 0 12px rgba(142, 68, 173, 0.5), 0 0 10px rgba(142, 68, 173, 0.2); } 100% { box-shadow: inset 0 0 18px rgba(142, 68, 173, 0.8), 0 0 25px rgba(142, 68, 173, 0.5); } } /* Badge Premium para indicar cartas Repetidas individuales en preparaciÃ³n */ .mito-repetida-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) scale(1); background: linear-gradient(135deg, #ff7675 0%, #d63031 100%); color: white; font-family: 'Outfit', sans-serif; font-size: 0.66rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; padding: 5px 14px; border-radius: 20px; box-shadow: 0 4px 10px rgba(214, 48, 49, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.35); z-index: 10; pointer-events: none; animation: bounceInNew 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } /* Overlay de asignaciÃ³n de slots en preparaciÃ³n */ .card-assign-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 15, 12, 0.93); backdrop-filter: blur(6px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; border-radius: 12px; z-index: 100; padding: 15px; box-sizing: border-box; animation: fadeIn 0.25s ease forwards; } .card-assign-overlay .btn { width: 100% !important; padding: 8px 12px !important; font-size: 0.7rem !important; font-family: 'Outfit', sans-serif !important; font-weight: 800 !important; letter-spacing: 1.2px !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,0.1) !important; cursor: pointer !important; transition: all 0.2s ease !important; box-sizing: border-box !important; text-align: center !important; } .card-assign-overlay .btn-assign-active { background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%) !important; color: white !important; box-shadow: 0 4px 10px rgba(26, 188, 156, 0.25) !important; } .card-assign-overlay .btn-assign-active:hover:not(:disabled) { transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(26, 188, 156, 0.4) !important; } .card-assign-overlay .btn-assign-wager { background: linear-gradient(135deg, #ff7675 0%, #d63031 100%) !important; color: white !important; box-shadow: 0 4px 10px rgba(231, 76, 60, 0.25) !important; } .card-assign-overlay .btn-assign-wager:hover:not(:disabled) { transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(231, 76, 60, 0.4) !important; } .card-assign-overlay .btn-assign-cancel { background: rgba(255, 255, 255, 0.08) !important; color: var(--text-secondary) !important; } .card-assign-overlay .btn-assign-cancel:hover { background: rgba(255, 255, 255, 0.15) !important; color: var(--text-primary) !important; } .card-assign-overlay .btn:disabled { opacity: 0.35 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } /* Responsive overrides for the Scoreboard */ @media (max-width: 768px) { .duel-status-bar { flex-direction: column; gap: 12px; padding: 12px 16px; align-items: stretch; } .status-bar-side { width: 100% !important; flex-direction: row; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.02); padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.03); box-sizing: border-box; } .status-bar-side.status-bar-player { text-align: left; } .status-bar-side.status-bar-rival { text-align: right; flex-direction: row-reverse; } .status-bar-stats { gap: 8px; } .status-bar-player .status-bar-stats { flex-direction: row; } .status-bar-rival .status-bar-stats { flex-direction: row; } .status-bar-center { width: 100% !important; order: -1; /* Place turn display and instructions at the top */ margin-bottom: 4px; } #turn-display { font-size: 0.8rem; padding: 4px 16px; min-width: 120px; } #juego-tablero .rival-game-row .hand-cards, #juego-tablero .player-game-row .hand-cards { height: 60px !important; min-height: 60px !important; max-height: 60px !important; flex-grow: 0 !important; } } /* Cartes durant el duel: SENSE efectes de hover ni foil reactiu. El foil hologràfic (reactiu al cursor, amb will-change + mix-blend-mode) i les transicions/brillos de hover són cars i innecessaris al tauler → més lleuger tant a mòbil com a desktop, i la disposició queda estable. */ #juego-tablero .card-mito, #juego-tablero .card-mito.es-rescatado { transition: none !important; } #juego-tablero .card-mito::after, #juego-tablero .card-mito.es-rescatado::after { display: none !important; } #juego-tablero .holo-foil { display: none !important; } #juego-tablero .card-mito:hover, #juego-tablero .card-mito.es-rescatado:hover, #juego-tablero .rival-hand-back .card-back-mini:hover, #juego-tablero .deck:hover:not(.disabled) { transform: none !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5) !important; } /* El hover no canvia la vora de la carta */ #juego-tablero .card-mito.level-1:hover, #juego-tablero .card-mito.level-2:hover, #juego-tablero .card-mito.level-3:hover { border-color: rgba(0, 0, 0, 0.45) !important; } /* Keep sleeping cards transform unchanged on hover */ #juego-tablero .card-mito.sleeping:hover { transform: rotate(15deg) !important; box-shadow: none !important; } /* Ensure the hand panels are flex containers and take full height to center contents */ #juego-tablero .rival-game-row, #juego-tablero .player-game-row { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; height: 100% !important; box-sizing: border-box !important; } /* Center the hand cards container vertically and horizontally */ #juego-tablero .rival-game-row .hand-cards, #juego-tablero .player-game-row .hand-cards { flex-grow: 1 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; height: auto !important; min-height: 80px !important; max-height: none !important; margin: 0 !important; padding: 0 10px !important; } /* Ensure scoreboard instructions stay on a single line on desktop */ @media (min-width: 769px) { .action-instructions-inline { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 500px !important; } } /* Floating Reward Animation */ .floating-reward { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.88); border: none; border-radius: 12px; padding: 9px 18px; color: #fff; font-size: 1.05rem; font-weight: bold; white-space: nowrap; max-width: 94%; text-shadow: 0 2px 4px rgba(0,0,0,0.8); box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); z-index: 9999; pointer-events: none; animation: floatUpFadeOut 4.5s forwards cubic-bezier(0.1, 0.8, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 9px; } .floating-reward .fr-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; } .floating-reward .fr-text { line-height: 1; } @media (orientation: landscape) and (max-height: 600px) { .floating-reward { font-size: 0.82rem; padding: 6px 12px; gap: 6px; border-radius: 9px; } .floating-reward .fr-icon { font-size: 1.05rem; } } .floating-reward.reward-rival { box-shadow: 0 0 20px rgba(255, 68, 68, 0.5); } @keyframes floatUpFadeOut { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -80%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -100%) scale(0.9); } } /* Animaciï¿½n para carta reciï¿½n rescatada */ .just-rescued { animation: bounceInRescue 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important; position: relative; z-index: 50; } .just-rescued::after { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: radial-gradient(circle, rgba(255,215,0,0.8) 0%, transparent 70%); z-index: -1; border-radius: inherit; animation: rescueGlowFade 1s ease-out forwards; } @keyframes bounceInRescue { 0% { transform: scale(0.2) translateY(50px); opacity: 0; filter: brightness(2); } 50% { transform: scale(1.1) translateY(-10px); opacity: 1; filter: brightness(1.5); } 100% { transform: scale(1) translateY(0); opacity: 1; filter: brightness(1); } } @keyframes rescueGlowFade { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } } /* Tutorial Overlay System */ #tutorial-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.3s; pointer-events: none; } #tutorial-overlay.hidden { display: none; opacity: 0; } .tutorial-tooltip { background: linear-gradient(145deg, #1f2235, #11131f); border: 2px solid #5d669c; border-radius: 12px; padding: 20px; width: 90%; max-width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); position: absolute; color: #fff; pointer-events: auto; } .tutorial-tooltip h3 { margin-top: 0; margin-bottom: 10px; color: #ffd700; font-size: 1.3rem; } .tutorial-tooltip p { font-size: 1rem; line-height: 1.5; margin-bottom: 20px; } .tutorial-footer { display: flex; justify-content: space-between; align-items: center; } #tutorial-step-counter { font-size: 0.9rem; color: #888; } .tutorial-close { position: absolute; top: 10px; right: 15px; background: none; border: none; color: #888; font-size: 1.5rem; cursor: pointer; } .tutorial-close:hover { color: #fff; } .tutorial-highlight { position: relative !important; z-index: 10000 !important; box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.5) !important; border-radius: 8px; } #tutorial-next-btn { background: linear-gradient(135deg, #ffd700, #ff8c00); border: none; color: #111; font-weight: bold; padding: 10px 24px; border-radius: 20px; cursor: pointer; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); transition: all 0.2s ease-in-out; text-transform: uppercase; letter-spacing: 1px; } #tutorial-next-btn:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6); background: linear-gradient(135deg, #ffe55c, #ffa500); } #tutorial-next-btn:active { transform: scale(0.95); box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4); } /* Capa de inactividad durante el turno del otro jugador */ .inactive-turn-panel { opacity: 0.5; filter: grayscale(40%) brightness(0.8); } .player-game-row, .rival-game-row { transition: opacity 0.5s ease, filter 0.5s ease; } @media (min-width: 769px) { #juego-tablero .rival-game-row .hand-cards, #juego-tablero .player-game-row .hand-cards { flex-grow: 1 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; height: auto !important; min-height: 80px !important; max-height: none !important; margin: 0 !important; padding: 0 10px !important; } } .inactive-turn-panel .card-essence, .inactive-turn-panel .btn-recycle-duel { cursor: not-allowed !important; pointer-events: none !important; } /* ---------- MOBILE LANDSCAPE / SHORT SCREEN OPTIMIZATIONS (max-height: 540px) ---------- */ @media (max-height: 600px) { /* Header ultra compacto */ header { padding: 4px 12px !important; min-height: 36px !important; margin-bottom: 2px !important; } header h1 { font-size: 1.1rem !important; } .brand-logo { height: 38px !important; } .economy-widget-mobile { display: flex !important; position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; margin-right: 0 !important; padding: 3px 8px !important; font-size: 0.8rem !important; gap: 5px !important; z-index: 10 !important; } .economy-widget-mobile .currency-item { font-size: 0.8rem !important; gap: 3px !important; } .economy-widget-desktop { display: none !important; } .hamburger-btn { width: 28px !important; height: 28px !important; gap: 3.5px !important; } .hamburger-line { height: 2px !important; width: 18px !important; } /* Reducir padding de la app y del scroll con soporte de Safe Areas */ .app-container { padding: 4px 8px !important; gap: 4px !important; } /* Bloquear scroll de la app y del body solo si el juego está activo. --app-vh el fixa el JS amb window.innerHeight (alt REAL visible a iOS). */ .game-active, .game-active .app-container { height: 100vh !important; height: 100dvh !important; height: var(--app-vh, 100dvh) !important; overflow: hidden !important; padding-top: calc(4px + env(safe-area-inset-top)) !important; padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important; padding-left: calc(4px + env(safe-area-inset-left)) !important; padding-right: calc(4px + env(safe-area-inset-right)) !important; width: 100% !important; max-width: 100% !important; } /* El tablero de juego adaptable al 100% de la pantalla sin desbordar */ .board-grid { display: flex !important; flex-direction: column !important; gap: 1.5% !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; width: 100% !important; } body.game-active #row-middle { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* game-area-full: distribuye el espacio vertical en las tres filas principales */ .game-area-full { gap: 1.5% !important; height: 100% !important; display: flex !important; flex-direction: column !important; } /* Fila Rival (Umbra): distribuida en columnas en % con altura mínima de seguridad */ .game-row-split-grid { height: 15% !important; min-height: 44px !important; max-height: none !important; flex-shrink: 0 !important; display: grid !important; grid-template-columns: 1fr 25% !important; gap: 8px !important; } /* Fila Jugador: distribuida en columnas en % con altura mínima de seguridad */ .game-area-full > .game-row-split-grid:last-of-type { height: 20% !important; min-height: 56px !important; max-height: none !important; grid-template-columns: 1fr 25% !important; } /* La fila del medio (niebla + claro) toma el espacio restante de forma flexible */ .middle-game-grid { grid-template-columns: 1fr 25% !important; gap: 8px !important; flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; } /* Override de panel-height-aligned para que llene el contenedor flexible sin desbordar */ .panel-height-aligned { height: 100% !important; min-height: 0 !important; } .row-layout { min-height: 32px !important; height: 32px !important; gap: 4px !important; } .row-divider { height: 28px !important; margin: 0 2px !important; } /* Paneles ultra compactos */ .panel { padding: 3px 6px !important; margin-bottom: 0 !important; border-radius: 5px !important; } .panel-title-row { margin-bottom: 1px !important; padding-bottom: 1px !important; min-height: auto !important; border-bottom: none !important; } .panel-title-text { font-size: 0.6rem !important; } /* Alturas y minimizaciones */ .rival-game-row, .player-game-row { padding: 2px 6px !important; overflow: hidden !important; } /* Manos del jugador y del rival */ #juego-tablero .rival-game-row .hand-cards, #juego-tablero .player-game-row .hand-cards { min-height: 28px !important; height: 28px !important; gap: 2px !important; } /* Override del combined query que fuerza 60px */ #player-hand, #rival-hand { height: 28px !important; min-height: 28px !important; max-height: 28px !important; gap: 2px !important; padding: 0 !important; } #player-hand .card-essence, #rival-hand .card-back-mini { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; border-radius: 50% !important; } #player-hand .card-essence .essence-icon { font-size: 0.85rem !important; line-height: 1 !important; margin: 0 !important; } #player-hand .card-essence .essence-overlay-value { font-size: 0.55rem !important; bottom: -3px !important; } /* Mitos Rescatados compactos */ .player-rescued-row, .rival-rescued-row { gap: 3px !important; height: 28px !important; align-items: center !important; } .card-mito.es-rescatado { width: 32px !important; min-width: 32px !important; padding: 1px !important; gap: 2px !important; } .card-mito.es-rescatado .mito-cost { gap: 1px !important; } .card-mito.es-rescatado .cost-dot { width: 9px !important; height: 9px !important; } .card-mito.es-rescatado .cost-emoji { font-size: 0.4rem !important; } /* Niebla y sus cartas */ .niebla-panel { overflow: hidden !important; display: flex !important; flex-direction: column !important; } /* Turn display compacto */ #turn-display { font-size: 0.75rem !important; padding: 3px 12px !important; min-width: 90px !important; } #action-instructions { font-size: 0.78rem !important; font-weight: 600 !important; color: #ffd875 !important; } #niebla-zone { gap: 6px !important; padding: 4px 0 !important; flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; align-items: center !important; justify-content: center !important; display: flex !important; flex-wrap: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; scroll-snap-type: none !important; } #niebla-zone .card-mito { flex: 0 0 auto !important; width: 85px !important; height: 135px !important; border-radius: 6px !important; padding: 4px 3px 2px 3px !important; border-width: 1.5px !important; } #niebla-zone .card-mito .mito-header { padding: 0 2px !important; margin-bottom: 2px !important; } #niebla-zone .card-mito .mito-title { font-size: 0.52rem !important; line-height: 1.1 !important; text-align: center !important; width: 100% !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #niebla-zone .card-mito .mito-img { height: 90px !important; font-size: 2rem !important; margin: 2px 0 !important; flex: none !important; display: flex !important; align-items: center !important; justify-content: center !important; aspect-ratio: 160 / 150 !important; } #niebla-zone .card-mito .mito-desc { display: none !important; } #niebla-zone .card-mito .mito-region { display: none !important; } #niebla-zone .card-mito .inline-tokens { display: flex !important; gap: 3px !important; align-items: center !important; } #niebla-zone .card-mito .inline-token { width: 7px !important; height: 7px !important; } #niebla-zone .card-mito .inline-sello-required { font-size: 0.5rem !important; } #niebla-zone .card-mito .mito-rarity-badge { padding: 2px 4px !important; height: 15px !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; } #niebla-zone .card-mito .mito-footer { padding: 0 2px !important; margin-top: 2px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; } #niebla-zone .card-mito .cost-dot { width: 15px !important; height: 15px !important; border-radius: 50% !important; } #niebla-zone .card-mito .cost-emoji { font-size: 0.75rem !important; } #niebla-zone .card-mito .mito-pts-badge { width: 15px !important; height: 15px !important; font-size: 0.7rem !important; top: 2px !important; left: 2px !important; } /* Claro del Bosque / Mazo */ .claro-panel { padding: 3px 4px !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 1px !important; overflow: hidden !important; } .claro-panel .panel-title-row { display: flex !important; } .claro-panel .claro-deck-zone { margin: 0 !important; } .claro-panel .claro-deck-zone .deck { width: 60px !important; height: 60px !important; } .claro-panel .claro-deck-zone .deck .deck-inner { font-size: 2.2rem !important; } .claro-panel .claro-instruction-text { font-size: 0.55rem !important; line-height: 1.1 !important; text-align: center !important; width: 100% !important; } .claro-panel .btn-rules-inline, .claro-panel #btn-tutorial-inline { display: none !important; } /* Status bar stats compactos */ .status-bar-stats { gap: 4px !important; font-size: 0.6rem !important; } .status-bar-stats span { padding: 1px 4px !important; font-size: 0.6rem !important; } /* Boton reciclar duelo */ .btn-recycle-duel { font-size: 0.55rem !important; padding: 1px 4px !important; } /* Slots de preparación en móvil landscape */ .chosen-slots-row { flex-wrap: nowrap !important; overflow-x: hidden !important; justify-content: center !important; width: 100% !important; padding: 4px !important; gap: 8px !important; } .chosen-slots-row .slot { width: 100px !important; height: 150px !important; min-width: 100px !important; max-width: 100px !important; min-height: 150px !important; max-height: 150px !important; font-size: 0.55rem !important; padding: 4px !important; border-radius: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; border-width: 1.5px !important; } /* Ajustar cartas ocupadas en slots para landscape manteniendo el look completo con descripción */ .chosen-slots-row .slot.occupied .card-mito { width: 100% !important; height: 100% !important; padding: 5px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } .chosen-slots-row .slot.occupied .card-mito .mito-header { margin-bottom: 2px !important; } .chosen-slots-row .slot.occupied .card-mito .mito-title { font-size: 0.55rem !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .chosen-slots-row .slot.occupied .card-mito .mito-region { display: block !important; font-size: 0.4rem !important; margin-top: 1px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .chosen-slots-row .slot.occupied .card-mito .mito-img { height: 50px !important; font-size: 1.2rem !important; margin: 2px 0 !important; display: flex !important; } .chosen-slots-row .slot.occupied .card-mito .mito-desc { display: block !important; font-size: 0.42rem !important; line-height: 1.15 !important; margin: 2px 0 !important; height: 32px !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; } .chosen-slots-row .slot.occupied .card-mito .mito-footer { padding: 2px 2px 0 2px !important; margin-top: auto !important; } .chosen-slots-row .slot.occupied .card-mito .cost-dot { width: 11px !important; height: 11px !important; } .chosen-slots-row .slot.occupied .card-mito .cost-emoji { font-size: 0.45rem !important; } .chosen-slots-row .slot.occupied .card-mito .mito-pts-badge { font-size: 0.5rem !important; width: 12px !important; height: 12px !important; top: 3px !important; left: 3px !important; } .chosen-panel { position: relative !important; top: 0 !important; z-index: 1 !important; } /* Escalar modal del inspector 3D en horizontal para que encaje al alto de la pantalla */ #inspector-3d-modal button#inspector-3d-close { top: 15px !important; right: 15px !important; width: 36px !important; height: 36px !important; font-size: 1rem !important; } #inspector-3d-modal div[style*="top:40px"] { top: 15px !important; font-size: 0.6rem !important; } #inspector-3d-modal #inspector-3d-footer { bottom: 15px !important; font-size: 0.75rem !important; } } /* ---------- TABLET & SMALL DESKTOP / SHORT SCREEN (height <= 900px or width <= 1280px) ---------- */ #rival-rescued-val, #player-rescued-val { display: none !important; } @media (min-width: 769px) and (min-height: 601px) and (max-height: 900px) { header { padding: 10px 20px !important; } .app-container { gap: 12px !important; padding: 12px !important; } .panel { padding: 10px 14px !important; } .panel-height-aligned { height: 290px !important; min-height: 290px !important; } .panel-title-row { margin-bottom: 8px !important; padding-bottom: 6px !important; min-height: auto !important; } /* Reducir el tamaño de las cartas en la Niebla para evitar desbordamientos y saltos de línea */ #niebla-zone .card-mito { width: 135px !important; height: 195px !important; padding: 8px !important; } #niebla-zone .card-mito .mito-desc { display: none !important; } #niebla-zone .card-mito .mito-img { flex-grow: 1 !important; height: auto !important; aspect-ratio: 160 / 150 !important; font-size: 1.8rem !important; margin: 4px 0 !important; } #niebla-zone .card-mito .mito-title { font-size: 0.72rem !important; line-height: 1.2 !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; width: 100% !important; } #niebla-zone .card-mito .mito-region { display: none !important; } #niebla-zone .card-mito .cost-dot { width: 13px !important; height: 13px !important; } #niebla-zone .card-mito .cost-emoji { font-size: 0.55rem !important; } #niebla-zone .card-mito .mito-pts-badge { width: 18px !important; height: 18px !important; font-size: 0.75rem !important; } #niebla-zone { gap: 10px !important; padding: 4px 0 !important; } /* Reducir altura mínima de las manos */ #juego-tablero .rival-game-row .hand-cards, #juego-tablero .player-game-row .hand-cards { min-height: 70px !important; } /* Reducir altura del Claro del Bosque */ .claro-panel .claro-deck-zone .deck { width: 80px !important; height: 80px !important; } .claro-panel .claro-deck-zone .deck .deck-inner { font-size: 1.7rem !important; } /* DUEL horitzontal (alt 541-900): el panell central era massa alt (290px) i el buit empenyia la mà fora. El baixem una mica i les cartes van just sota el marcador. */ body.game-active .panel-height-aligned { height: 188px !important; min-height: 0 !important; justify-content: flex-start !important; } body.game-active .niebla-panel { justify-content: center !important; } body.game-active .niebla-panel #niebla-zone { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 0 !important; } body.game-active #niebla-zone .card-mito { width: auto !important; height: auto !important; max-width: 95px !important; max-height: 100% !important; aspect-ratio: 63 / 88 !important; flex: 1 1 0 !important; min-width: 0 !important; min-height: 0 !important; padding: 4px 3px 2px 3px !important; } body.game-active #niebla-zone .card-mito .mito-img { height: auto !important; } } @media (max-width: 1280px) { /* Forzar que las cartas de la Niebla no hagan wrap al tener pantallas algo estrechas */ #niebla-zone { flex-wrap: nowrap !important; justify-content: center !important; } #niebla-zone .card-mito { width: 135px !important; height: 195px !important; padding: 8px !important; flex-shrink: 0 !important; } #niebla-zone .card-mito .mito-desc { display: none !important; } #niebla-zone .card-mito .mito-img { flex-grow: 1 !important; height: auto !important; aspect-ratio: 160 / 150 !important; font-size: 1.8rem !important; } #niebla-zone .card-mito .mito-title { font-size: 0.72rem !important; line-height: 1.2 !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; width: 100% !important; } #niebla-zone .card-mito .mito-region { display: none !important; } } /* ===== Rotate device prompt overlay ===== */ .rotate-prompt-overlay { position: fixed; inset: 0; /* cobreix TOT el viewport (top/right/bottom/left: 0). Abans width:100vw+height:100vh deixava una franja blanca a baix en mòbil (100vh no és fiable) */ /* OPAC del tot, no 0,95. Amb un 5% de transparència, qualsevol tros del fons de sota que no arribés fins a baix es transparentava com una franja al peu — que és el que es veia en VERTICAL, que és quan surt aquest avís. Sent un avís que bloqueja, no hi ha cap raó per deixar veure el que hi ha darrere; i essent opac, el `backdrop-filter` no es podia arribar a veure i només costava GPU a cada frame en pantalla completa. */ background: #0a0c10; z-index: 2000000; /* PER SOBRE de tots els modals (sobre=100000, lightbox carta=999999): si gires a vertical amb un missatge obert, l'avís de rotar ha de sortir igualment */ display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.3s ease; } .rotate-prompt-overlay.hidden { opacity: 0; pointer-events: none; display: none !important; } .rotate-prompt-content { background: rgba(20, 24, 30, 0.95); border: 1px solid rgba(26, 188, 156, 0.25); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 50px rgba(26, 188, 156, 0.15); border-radius: 28px; width: 90%; max-width: 400px; padding: 35px 25px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 15px; box-sizing: border-box; } .rotate-icon-wrapper { width: 80px; height: 80px; background: rgba(26, 188, 156, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; border: 1px solid rgba(26, 188, 156, 0.2); } .rotate-device-icon { color: var(--accent); animation: rotatePromptAnimation 2.8s ease-in-out infinite; } @keyframes rotatePromptAnimation { 0% { transform: rotate(0deg); } 15% { transform: rotate(-90deg); } 60% { transform: rotate(-90deg); } 75% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } .rotate-prompt-content h3 { margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.4rem; color: var(--text-primary); font-weight: 600; letter-spacing: 0.5px; } .rotate-prompt-content p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); } /* Ocultación automática cuando la pantalla ya está en horizontal */ @media (orientation: landscape) { .rotate-prompt-overlay { display: none !important; } } /* Ocultar el indicador de progreso y EXP en móviles para evitar que se superponga con la carta */ @media (max-width: 768px), (max-height: 600px) { #inspector-3d-exp-container { display: none !important; } /* Estil de l'essència "Desfer" (NO ha d'afectar les seleccionades normals) */ .card-essence.essence-desfer { background: linear-gradient(135deg, #661a00 0%, #240900 100%) !important; border: 2.2px solid #d35400 !important; box-shadow: inset 0 0 12px rgba(211, 84, 0, 0.6), 0 4px 10px rgba(0,0,0,0.5); animation: desferGlowPulse 2.5s infinite alternate; } .card-essence.essence-desfer::before { content: "🚫" !important; font-size: 3.6rem !important; opacity: 0.18 !important; } .card-essence.essence-desfer.selected { box-shadow: 0 8px 30px rgba(211, 84, 0, 0.9), inset 0 0 20px rgba(255, 255, 255, 0.8) !important; transform: translateY(-12px) scale(1.05) !important; } @keyframes desferGlowPulse { 0% { box-shadow: inset 0 0 12px rgba(211, 84, 0, 0.5), 0 0 10px rgba(211, 84, 0, 0.2); } 100% { box-shadow: inset 0 0 20px rgba(211, 84, 0, 0.85), 0 0 22px rgba(211, 84, 0, 0.6); } } .card-essence.essence-velo.selected { transform: scale(1.05) !important; /* Mantiene la escala de selección pero sin translateY */ } .card-mito:hover { transform: none !important; /* Desactiva el escalado en hover para evitar efectos pegajosos en táctiles */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5) !important; } .card-essence:hover { transform: none !important; } } /* Animaciones para la subida de nivel de cartas en el resumen */ @keyframes levelUpPulse { 0% { transform: scale(1); box-shadow: 0 0 10px rgba(241, 196, 15, 0.4), inset 0 0 5px rgba(241, 196, 15, 0.2); } 50% { transform: scale(1.05); box-shadow: 0 0 35px rgba(241, 196, 15, 0.95), 0 0 50px rgba(243, 156, 18, 0.8), inset 0 0 25px rgba(241, 196, 15, 0.6); border-color: #f1c40f !important; background: linear-gradient(135deg, rgba(80, 60, 15, 0.7) 0%, rgba(40, 30, 8, 0.9) 100%) !important; } 100% { transform: scale(1); box-shadow: 0 0 20px rgba(241, 196, 15, 0.6), inset 0 0 15px rgba(241, 196, 15, 0.35); border-color: rgba(241, 196, 15, 0.7) !important; } } @keyframes badgeLevelSpin { 0% { transform: scale(1) rotate(0deg); filter: brightness(1); } 30% { transform: scale(1.6) rotate(12deg); filter: brightness(2) drop-shadow(0 0 12px #f1c40f); } 70% { transform: scale(1.6) rotate(-12deg); filter: brightness(2) drop-shadow(0 0 12px #f1c40f); } 100% { transform: scale(1) rotate(0deg); filter: brightness(1); } } .level-up-row-highlight { animation: levelUpPulse 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important; z-index: 10 !important; position: relative !important; } .badge-spin-anim { display: inline-block !important; animation: badgeLevelSpin 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important; } /* ================= CARTA DEL DÍA (MERCADO) PREMIUM STYLING ================= */ .daily-card-showcase-panel { background: radial-gradient(135deg, rgba(20, 24, 33, 0.95) 0%, rgba(13, 16, 22, 0.98) 100%) !important; border: 1px solid rgba(26, 188, 156, 0.15) !important; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important; border-radius: 20px !important; padding: 35px 30px !important; margin-bottom: 40px !important; position: relative; overflow: hidden; } /* Subtítol de la Carta del Dia: una línia en escriptori, embolcalla en mòbil per no desbordar */ .daily-card-subtitle { white-space: nowrap; } @media (max-width: 900px) { .daily-card-subtitle { white-space: normal; } } /* Efecto de niebla o brillo de fondo en el panel */ .daily-card-showcase-panel::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(155, 89, 182, 0.03) 0%, rgba(26, 188, 156, 0.03) 30%, transparent 60%); pointer-events: none; z-index: 0; animation: slowSpin 30s linear infinite; } @keyframes slowSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .daily-card-pedestal { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 20px; padding: 24px 20px 20px 20px; border-radius: 16px; background: transparent; border: none; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: none; z-index: 2; overflow: visible; } .daily-card-pedestal::after { content: ''; position: absolute; bottom: 0; left: 10%; width: 80%; height: 8px; background: rgba(0, 0, 0, 0.4); border-radius: 50%; filter: blur(4px); transition: all 0.4s ease; z-index: -1; } /* Levitación sutil */ @keyframes pedestalFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0px); } } .daily-card-pedestal .card-mito, .daily-card-aura { animation: pedestalFloat 6s ease-in-out infinite; } /* Desfasar la animación para que no floten todas al mismo tiempo */ .daily-card-pedestal:nth-child(2) .card-mito, .daily-card-pedestal:nth-child(2) .daily-card-aura { animation-delay: -2s; } .daily-card-pedestal:nth-child(3) .card-mito, .daily-card-pedestal:nth-child(3) .daily-card-aura { animation-delay: -4s; } /* Hover en el pedestal */ .daily-card-pedestal:hover { transform: translateY(-12px) scale(1.02) !important; } .daily-card-pedestal:hover .card-mito, .daily-card-pedestal:hover .daily-card-aura { animation-play-state: paused; /* Pause float on hover */ } /* Cambios de borde según rareza en el pedestal al pasar el cursor */ .daily-card-pedestal.level-1:hover { border-color: rgba(205, 127, 50, 0.45); } .daily-card-pedestal.level-2:hover { border-color: rgba(203, 213, 225, 0.6); } .daily-card-pedestal.level-3:hover { border-color: rgba(241, 196, 15, 0.8); } /* Aura mística */ .daily-card-aura { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); width: 140px; height: 180px; filter: blur(35px); opacity: 0.18; border-radius: 50%; pointer-events: none; transition: all 0.4s ease; z-index: -1; } .daily-card-pedestal:hover .daily-card-aura { opacity: 0.35; filter: blur(25px); width: 160px; height: 200px; } /* Colores de Aura específicos */ .daily-card-aura.level-1 { background: radial-gradient(circle, rgba(224, 161, 90, 0.8) 0%, transparent 70%); } .daily-card-aura.level-2 { background: radial-gradient(circle, rgba(203, 213, 225, 0.8) 0%, transparent 70%); } .daily-card-aura.level-3 { background: radial-gradient(circle, rgba(241, 196, 15, 0.9) 0%, transparent 70%); } /* (Regles de l'antic intent .daily-card-inner/.daily-buy-row tretes: el botó "Obtenir" ara viu al slot .daily-buy-row DINS de .carta-dia-banner, que li dóna estil propi — vegeu el bloc "Carta del Dia".) */ /* Botones de compra modernizados */ .daily-offer-btn { width: auto !important; white-space: nowrap !important; font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 0.88rem !important; letter-spacing: 0.3px !important; padding: 10px 16px !important; border-radius: 10px !important; text-transform: none !important; transition: all 0.3s ease !important; margin-top: 5px; border: 1px solid rgba(255,255,255,0.1) !important; background: rgba(0, 0, 0, 0.4) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; } /* Hover en botones según rareza */ .daily-offer-btn.level-1:hover:not(:disabled) { background: linear-gradient(135deg, #a86a2e, #7d4e20) !important; border-color: #e0a15a !important; box-shadow: 0 0 15px rgba(205, 127, 50, 0.45) !important; transform: translateY(-1px); } .daily-offer-btn.level-2:hover:not(:disabled) { background: linear-gradient(135deg, #8593a0, #b9c4cf) !important; border-color: #cbd5e1 !important; box-shadow: 0 0 15px rgba(203, 213, 225, 0.5) !important; transform: translateY(-1px); } .daily-offer-btn.level-3:hover:not(:disabled) { background: linear-gradient(135deg, #d35400, #f1c40f) !important; border-color: #ffd700 !important; box-shadow: 0 0 20px rgba(241, 196, 15, 0.6) !important; transform: translateY(-1px); } .daily-offer-btn:disabled { opacity: 0.25 !important; background: rgba(255,255,255,0.02) !important; border-color: rgba(255,255,255,0.05) !important; color: rgba(255,255,255,0.3) !important; cursor: not-allowed !important; box-shadow: none !important; } /* ================= CENTERPIECE LAYOUT FOR SINGLE DAILY CARD ================= */ /* Clean, centered layout where the card itself is the hero */ @keyframes hourglassSpin { 0% { transform: rotate(0deg); } 45% { transform: rotate(0deg); } 55% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } } .timer-emoji-spin { display: inline-block; animation: hourglassSpin 3s cubic-bezier(0.77, 0, 0.175, 1) infinite; transform-origin: center; } /* ================= THEMATIC BACKGROUNDS ================= */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; /* Soporte para Dynamic Viewport Height en móviles modernos */ z-index: -10; background-color: var(--bg-dark); background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; pointer-events: none; transition: background-image 0.3s ease-in-out; } /* Optimized CSS abstract glowing gradient background for Mitolari (Collection) */ body[data-view="coleccion"]::before { background-color: #0b0916 !important; background-image: radial-gradient(circle at 15% 25%, rgba(156, 39, 176, 0.22) 0%, transparent 55%), radial-gradient(circle at 85% 80%, rgba(255, 111, 0, 0.18) 0%, transparent 60%), radial-gradient(circle at 50% 50%, rgba(26, 35, 126, 0.28) 0%, transparent 70%) !important; } /* Soft animated magic fog overlay with warm lights for Mitolari */ /* Glow decoratiu del Mitolari. ABANS: 200vw×200vh amb blur(55px) que rotava/escalava en bucle (mitolariBgDrift) → es re-blurejava cada frame = el cost més gran a mòbil. ARA: estàtic, sense blur ni animació (els degradats radials ja són suaus). Barat a qualsevol dispositiu. */ body[data-view="coleccion"]::after { content: "" !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: -9 !important; pointer-events: none !important; background-image: radial-gradient(circle at 22% 28%, rgba(233, 30, 99, 0.13) 0%, transparent 48%), radial-gradient(circle at 78% 72%, rgba(255, 152, 0, 0.10) 0%, transparent 52%), radial-gradient(circle at 50% 32%, rgba(103, 58, 183, 0.15) 0%, transparent 52%) !important; opacity: 0.85 !important; } @keyframes mitolariBgDrift { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(-4%, 4%) rotate(45deg) scale(1.08); } 100% { transform: translate(4%, -4%) rotate(90deg) scale(0.95); } } /* A mòbil (tàctil) els FONS ANIMATS a pantalla completa són, de lluny, el cost més gran: la boira SVG (feTurbulence) i sobretot aquest overlay de 200vw×200vh amb blur 55px que gira/escala sense parar (es re-blureja cada frame). Els desactivem en tàctil; el fons estàtic (::before amb degradats) es manté, així que segueix bonic però ja no repinta tota la pantalla contínuament. */ @media (hover: none) { .fog-wrapper { display: none !important; } body[data-view="coleccion"]::after, body[data-view="juego"]::after, body[data-view="mercado"]::after { display: none !important; } /* Fons més simple a mòbil: treu els 2 radials d'accent (teal + lila) del body, deixant el degradat fosc base. */ body { background-image: radial-gradient(circle at 50% 50%, rgba(7,11,9,1) 0%, rgba(3,5,4,1) 100%) !important; } /* Amaga la barra de scroll a mòbil: en alguns Android NO és overlay i "empeny" el contingut cap a l'esquerra quan apareix (per contingut més alt). El scroll tàctil segueix funcionant igual. */ html, body { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } } body[data-view="sobres"]::before { background-image: url('assets/bg/bg_sobres.jpg') !important; } /* Optimized CSS abstract glowing gradient background for Mercado (Crystallize) - Blue & Amber */ body[data-view="mercado"]::before { background-color: #060b1e !important; background-image: radial-gradient(circle at 15% 25%, rgba(29, 78, 216, 0.28) 0%, transparent 55%), radial-gradient(circle at 85% 80%, rgba(217, 119, 6, 0.18) 0%, transparent 60%), radial-gradient(circle at 50% 50%, rgba(13, 148, 136, 0.22) 0%, transparent 70%) !important; } /* Soft animated magic fog overlay with blue and amber lights for Mercado */ body[data-view="mercado"]::after { content: "" !important; position: fixed !important; top: -50% !important; left: -50% !important; width: 200vw !important; height: 200vh !important; z-index: -9 !important; pointer-events: none !important; background-image: radial-gradient(circle at 35% 35%, rgba(6, 182, 212, 0.15) 0%, transparent 40%), radial-gradient(circle at 65% 65%, rgba(245, 158, 11, 0.12) 0%, transparent 45%), radial-gradient(circle at 50% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 45%) !important; filter: blur(55px) !important; animation: mitolariBgDrift 45s ease-in-out infinite alternate !important; opacity: 0.85 !important; } /* Optimized CSS abstract glowing gradient background for Juego (Duel) - 5 Elemental Lights */ body[data-view="juego"]::before { background-color: #07060f !important; background-image: radial-gradient(circle at 15% 25%, rgba(231, 76, 60, 0.12) 0%, transparent 50%), /* Fuego - Red */ radial-gradient(circle at 85% 20%, rgba(46, 204, 113, 0.1) 0%, transparent 50%), /* Tierra - Green */ radial-gradient(circle at 50% 85%, rgba(52, 152, 219, 0.12) 0%, transparent 55%), /* Agua - Blue */ radial-gradient(circle at 15% 80%, rgba(155, 89, 182, 0.1) 0%, transparent 50%) !important; /* Éter - Violet */ } /* Soft animated magic fog overlay with elemental light points (Red, Green, Blue, White, Violet) */ body[data-view="juego"]::after { content: "" !important; position: fixed !important; top: -50% !important; left: -50% !important; width: 200vw !important; height: 200vh !important; z-index: -9 !important; pointer-events: none !important; background-image: radial-gradient(circle at 30% 30%, rgba(231, 76, 60, 0.12) 0%, transparent 35%), /* Red */ radial-gradient(circle at 70% 30%, rgba(46, 204, 113, 0.1) 0%, transparent 35%), /* Green */ radial-gradient(circle at 30% 70%, rgba(52, 152, 219, 0.12) 0%, transparent 40%), /* Blue */ radial-gradient(circle at 70% 70%, rgba(155, 89, 182, 0.12) 0%, transparent 40%), /* Violet */ radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 30%) !important; /* White */ filter: blur(60px) !important; animation: mitolariBgDrift 45s ease-in-out infinite alternate !important; opacity: 0.85 !important; } /* Active gameplay screen custom background image */ body.game-active::before { background-image: linear-gradient(rgba(10, 15, 30, 0.45), rgba(10, 15, 30, 0.45)), url('assets/background_mitiks.jpg') !important; } body.game-active::after { display: none !important; } /* Custom Playmat outline aesthetic for the active game board */ #juego-tablero .panel { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 2px solid rgba(200, 155, 60, 0.6) !important; box-shadow: none !important; } #juego-tablero .player-panel-theme { background: transparent !important; border: 2px solid rgba(46, 204, 113, 0.5) !important; box-shadow: none !important; } #juego-tablero .rival-panel-theme { background: transparent !important; border: 2px solid rgba(231, 76, 60, 0.5) !important; box-shadow: none !important; } /* Enhancing Panels with Glassmorphism for better readability against new backgrounds */ .panel { background: rgba(10, 20, 40, 0.85) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(200, 155, 60, 0.3) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(200, 155, 60, 0.05) !important; } .view-section { position: relative; z-index: 1; } .daily-card-showcase-panel { background: rgba(10, 20, 40, 0.85) !important; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(200, 155, 60, 0.4) !important; box-shadow: 0 15px 40px rgba(0,0,0,0.9), inset 0 0 30px rgba(200, 155, 60, 0.08) !important; padding: 30px; border-radius: 15px; margin-bottom: 20px; } /* Override rules for mobile landscape specifically to avoid overrides from wider max-width media queries */ @media (max-height: 600px) { #niebla-zone .card-mito { width: 85px !important; height: 135px !important; padding: 4px 3px 2px 3px !important; flex-shrink: 0 !important; } #niebla-zone .card-mito .mito-img { height: 60px !important; /* Prevents inner overflow */ font-size: 1.5rem !important; } #niebla-zone .card-mito .mito-title { font-size: 0.5rem !important; } } /* Layout horizontal per al contenidor de sobres integrat */ .inline-horizontal-layout { display: flex !important; flex-direction: row; align-items: center; justify-content: space-around; padding: 30px !important; gap: 40px; width: 100% !important; box-sizing: border-box; } .sobres-left-col { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; } .sobres-right-col { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .sobres-actions-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; width: 100%; margin-top: 10px; } .sobres-buy-container { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .sobres-buy-hint { font-size: 0.72rem; color: var(--text-secondary); } .sobres-slots-container { width: 100%; margin-top: 15px; } /* Responsivitat mòbil */ @media (max-width: 820px) { .inline-horizontal-layout { flex-direction: column !important; align-items: center; text-align: center; padding: 20px !important; gap: 20px; } .sobres-right-col { align-items: center; text-align: center; width: 100%; } .sobres-right-col .panel-title { justify-content: center !important; text-align: center !important; } .sobres-right-col p { text-align: center !important; } .sobres-actions-row { justify-content: center; flex-direction: column; align-items: center; } .sobres-buy-container { align-items: center; } .sobres-slots-container div { text-align: center !important; } .sobres-slots-container .booster-slots-row { justify-content: center !important; } .sobres-right-col div { text-align: center !important; } } /* ================= 9. ANIMACIONES PARA LA CARTA DESFER ================= */ .desfer-token-burst { animation: desferBurstKeyframes 0.75s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important; } .desfer-card-flash { animation: desferCardFlashKeyframes 0.75s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important; position: relative; z-index: 100 !important; } @keyframes desferBurstKeyframes { 0% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 2px #e67e22); } 35% { transform: scale(2.4); background: #ffffff !important; border-color: #e67e22 !important; box-shadow: 0 0 15px #e67e22, 0 0 25px #ff7675 !important; opacity: 1; } 100% { transform: scale(0); opacity: 0; background: #ff4757 !important; } } @keyframes desferCardFlashKeyframes { 0% { box-shadow: 0 0 0px transparent; transform: scale(1); } 30% { box-shadow: 0 0 30px #e67e22, inset 0 0 20px rgba(230, 126, 34, 0.6); transform: scale(1.03); } 100% { box-shadow: 0 0 0px transparent; transform: scale(1); } } /* Indicador flotant temporari quan s'usa la carta Desfer */ .desfer-indicator-pop { position: fixed !important; transform: translate(-50%, -50%) !important; background: rgba(192, 57, 43, 0.95) !important; /* Crimson Red */ color: #ffffff !important; font-family: 'Outfit', sans-serif !important; font-size: 1.05rem !important; font-weight: 800 !important; padding: 6px 14px !important; border-radius: 20px !important; border: 2px solid #e74c3c !important; box-shadow: 0 0 15px rgba(231, 76, 60, 0.7) !important; pointer-events: none !important; z-index: 9999 !important; /* Per sobre d'hologrames i elements de la carta */ animation: desferPopRise 2.0s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; white-space: nowrap !important; } @keyframes desferPopRise { 0% { transform: translate(-50%, -20%) scale(0.5); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 75% { transform: translate(-50%, -60%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -90%) scale(0.85); opacity: 0; } } /* ========================================== BOTÓN DE CRISTALIZAR Y RECYCLE CARD ========================================== */ .recycle-card-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; position: relative !important; width: 180px !important; transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important; cursor: pointer !important; } .recycle-card-wrapper:hover { transform: translateY(-8px) scale(1.03) !important; } .recycle-card-wrapper:active { transform: translateY(-8px) scale(1.01) !important; } .btn-cristalizar-card { position: relative !important; width: 100% !important; margin-top: -1px !important; background: linear-gradient(180deg, #54a0ff 0%, #2e86de 100%) !important; border: none !important; color: #ffffff !important; border-radius: 0 0 12px 12px !important; padding: 8px 2px !important; cursor: pointer !important; font-family: 'Outfit', sans-serif !important; font-size: 0.70rem !important; font-weight: 800 !important; text-align: center !important; text-transform: uppercase !important; letter-spacing: 0.1px !important; box-sizing: border-box !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) !important; display: block !important; white-space: nowrap !important; } .card-mito.recycle-card { border-radius: 12px 12px 0 0 !important; border-bottom: none !important; border-color: rgba(84, 160, 255, 0.8) !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; transform: translateZ(0) !important; /* Evita transformaciones dobles manteniendo el recorte 3D */ } .card-mito.recycle-card::before { border: 4px solid rgba(84, 160, 255, 0.85) !important; border-bottom: none !important; border-radius: 12px 12px 0 0 !important; box-shadow: inset 0 0 15px rgba(84, 160, 255, 0.25) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } /* Unified Hover Effects driven by the wrapper */ .recycle-card-wrapper:hover .card-mito.recycle-card { border-color: rgba(84, 160, 255, 1) !important; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6) !important; } .recycle-card-wrapper:hover .card-mito.recycle-card::before { border-color: rgba(133, 188, 252, 1) !important; box-shadow: inset 0 0 20px rgba(84, 160, 255, 0.45) !important; } .recycle-card-wrapper:hover .btn-cristalizar-card { background: linear-gradient(180deg, #85bcfc 0%, #54a0ff 100%) !important; box-shadow: 0 10px 20px rgba(52, 152, 219, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; } /* Mitolari: carta obtinguda amb botó de "Pujar de nivell" FUSIONAT a sota (mateix patró que cristal·litzar, en daurat) */ .mito-lvl-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; max-width: 240px; margin: 0 auto; transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); } .mito-lvl-wrapper .card-mito { width: 100% !important; height: auto !important; aspect-ratio: 63 / 88; } .mito-lvl-wrapper .card-mito.has-lvl-btn { border-radius: 12px 12px 0 0; border-bottom: none; } @media (hover: hover) { .mito-lvl-wrapper:hover { transform: translateY(-6px) scale(1.02); } } .btn-nivell-card { position: relative; width: 100%; margin-top: -1px; background: linear-gradient(180deg, #54a0ff 0%, #2e86de 100%); border: none; color: #ffffff; border-radius: 0 0 12px 12px; padding: 8px 2px; cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 0.70rem; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 0.1px; box-sizing: border-box; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); display: block; white-space: nowrap; transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); } @media (hover: hover) { /* Hover UNIFICAT: la carta i el botó reaccionen com un sol bloc (com a cristal·litzar). El wrapper gestiona el moviment; anul·lem el hover propi de la carta perquè no faci doble efecte. */ .mito-lvl-wrapper .card-mito.has-lvl-btn:hover { transform: none !important; } .mito-lvl-wrapper:hover .btn-nivell-card { background: linear-gradient(180deg, #85bcfc 0%, #54a0ff 100%); } .mito-lvl-wrapper:hover .card-mito.has-lvl-btn { border-color: rgba(84, 160, 255, 0.7) !important; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.6), 0 0 16px rgba(84, 160, 255, 0.25) !important; } .mito-lvl-wrapper:hover .card-mito.has-lvl-btn::after { left: 200%; opacity: 1; } } .btn-nivell-card.is-max { background: linear-gradient(180deg, #f5c542 0%, #d4a017 100%); color: #2a1f08; text-shadow: none; cursor: default; } /* Repartiment de cartes a la preparació (efecte de "barreja" en repartir / re-barrejar) */ @keyframes prepDealIn { 0% { opacity: 0; transform: translateY(34px) scale(0.72) rotate(-9deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } } .prep-card-dealt { animation: prepDealIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.35) both; } .daily-offer-btn.can-cristalizar-blue { background: linear-gradient(180deg, #54a0ff 0%, #2e86de 100%) !important; border: none !important; color: #ffffff !important; box-shadow: 0 4px 15px rgba(84, 160, 255, 0.4) !important; } .daily-offer-btn.can-cristalizar-blue:hover { background: linear-gradient(180deg, #85bcfc 0%, #54a0ff 100%) !important; box-shadow: 0 6px 20px rgba(84, 160, 255, 0.6) !important; transform: translateY(-2px) !important; } /* ========================================== NUEVO INSPECTOR DE DOS COLUMNAS RESPONSIVO ========================================== */ .inspector-layout-container { display: flex; flex-direction: row; gap: 40px; align-items: center; justify-content: center; max-width: 1350px; width: 90%; z-index: 10000; margin-top: 40px; box-sizing: border-box; } .inspector-card-column { flex: 0 0 358px; /* = amplada de la carta de l'inspector (2× CARD_W 179) */ display: flex; justify-content: center; align-items: center; } #inspector-3d-scene { perspective: 1600px; width: 358px; height: 500px; display: flex; justify-content: center; align-items: center; cursor: grab; user-select: none; touch-action: none; position: relative; } .inspector-details-panel { flex: 1; max-width: 900px; height: 500px; background: transparent; border: none; padding: 20px 30px; box-sizing: border-box; display: flex; flex-direction: column; color: #ffffff; font-family: 'Outfit', sans-serif; overflow: hidden; } .inspector-dossier-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; text-align: left; } #inspector-char-name { font-size: 1.8rem; font-weight: 800; margin: 0; text-transform: uppercase; letter-spacing: 1px; background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 4px 20px rgba(165, 180, 252, 0.15); } .inspector-char-location-badge { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; letter-spacing: 2px; align-self: flex-start; margin-top: 2px; } .inspector-char-divider { height: 1px; background: linear-gradient(90deg, rgba(165, 180, 252, 0.25) 0%, rgba(255, 255, 255, 0.02) 100%); margin-bottom: 20px; } .inspector-char-body { flex: 1; overflow-y: auto; padding-right: 10px; margin-bottom: 20px; text-align: left; } /* Scrollbar personalizada del dossier */ .inspector-char-body::-webkit-scrollbar { width: 6px; } .inspector-char-body::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: 4px; } .inspector-char-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; } .inspector-char-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } .inspector-char-history-text { font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); margin: 0; text-align: justify; font-weight: 400; /* Android infla la lletra segons l'ample del bloc (font-boosting): en eixamplar el panell creixia sola. Fixem-la a la mida real, sigui quin sigui l'ample. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ---------- RESPONSIVE MOBILE ---------- */ @media (max-width: 768px), (max-height: 600px) { #inspector-3d-modal { justify-content: flex-start !important; align-items: center !important; overflow-y: auto !important; padding-top: 95px !important; padding-bottom: 30px !important; -webkit-overflow-scrolling: touch; } .inspector-layout-container { flex-direction: column !important; gap: 20px !important; width: 95% !important; height: auto !important; max-height: none !important; overflow: visible !important; margin-top: 0 !important; padding-bottom: 0 !important; } .inspector-card-column { flex: 0 0 auto !important; width: 100% !important; height: 240px !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; overflow: visible !important; } #inspector-3d-scene { width: 358px !important; height: 500px !important; transform: scale(0.45) !important; transform-origin: top center !important; } .inspector-details-panel { width: 100% !important; height: auto !important; max-height: none !important; overflow: visible !important; padding: 20px !important; border-radius: 16px !important; } .inspector-char-body { max-height: 250px !important; } #inspector-char-name { font-size: 1.4rem !important; } #inspector-3d-modal #inspector-3d-footer { position: relative !important; bottom: auto !important; left: auto !important; transform: none !important; margin-top: 25px !important; margin-bottom: 25px !important; width: 100% !important; box-sizing: border-box !important; font-size: 0.75rem !important; } } /* ===== Inspector 3D en MÒBIL HORITZONTAL: layout com a DESKTOP (carta a l'ESQUERRA, text a la DRETA). La media query de dalt apila per (max-height:600px), que en horitzontal salta tot i haver-hi espai horitzontal de sobra; aquí restaurem la FILA i escalem la carta perquè càpiga en poca alçada. ===== */ @media (orientation: landscape) and (max-height: 600px) { #inspector-3d-modal { justify-content: center !important; align-items: center !important; padding-top: 8px !important; padding-bottom: 8px !important; overflow-y: auto !important; } .inspector-layout-container { flex-direction: row !important; align-items: center !important; gap: 16px !important; width: 96% !important; max-width: 780px !important; height: auto !important; max-height: none !important; margin-top: 0 !important; overflow: visible !important; } .inspector-card-column { flex: 0 0 auto !important; width: 200px !important; height: 290px !important; align-items: center !important; justify-content: center !important; overflow: visible !important; } #inspector-3d-scene { width: 358px !important; height: 500px !important; transform: scale(0.55) !important; transform-origin: center center !important; } .inspector-details-panel { flex: 1 1 auto !important; width: auto !important; height: auto !important; max-height: 88vh !important; overflow-y: auto !important; padding: 8px 12px !important; border-radius: 14px !important; } .inspector-char-body { max-height: none !important; } #inspector-char-name { font-size: 1.2rem !important; } .inspector-char-history-text { font-size: 0.85rem !important; line-height: 1.45 !important; } /* La pista d'arrossegar sobra en horitzontal (poca alçada) i solaparia la carta */ #inspector-3d-modal > div[style*="top:40px"] { display: none !important; } } /* ================= GLOBAL FILTERS & INLINE SEARCH ================= */ .collection-global-filters-bar { display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 14px 24px; margin-bottom: 24px; gap: 20px; flex-wrap: wrap; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24); } /* ═══ CAPÇALERA ÚNICA DEL MITOLARI (2026-08-24): bandera + títol + toggle Obtingudes + comptador + cerca + plegar. Substitueix la barra de filtres i la capçalera de regió; és estàtica perquè la cerca no perdi el focus. ═══ */ .mitolari-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 12px 20px; margin-bottom: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24); } .mitolari-header .mh-flag { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255, 215, 0, 0.6); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .mitolari-header .mh-title { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 1.15rem; white-space: nowrap; background: linear-gradient(135deg, #f5d76e, #e0a92e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .mitolari-header .mh-toggle .toggle-label { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); text-shadow: none; } .mitolari-header .mh-count { font-size: 0.8rem; font-weight: 700; color: #cdd9e6; white-space: nowrap; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); padding: 5px 12px; border-radius: 20px; } .mitolari-header .mh-search { margin-left: auto; flex: 0 0 260px; width: 260px; padding: 8px 16px; } .mitolari-header .mh-arrow { margin-left: auto; flex-shrink: 0; cursor: pointer; color: #e6c06a; font-size: 0.9rem; line-height: 1; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); transition: transform 0.25s ease; } .mitolari-header .mh-arrow.collapsed { transform: rotate(-90deg); } .mitolari-header .mh-arrow:hover { background: rgba(255, 255, 255, 0.12); } /* Plegat: amaga les graelles (el toggle va a #coleccion-grid, que persisteix entre re-renders) */ #coleccion-grid.collapsed .region-card-grid { display: none !important; } @media (max-width: 640px) { .mitolari-header { gap: 10px 12px; padding: 10px 14px; } .mitolari-header .mh-title { font-size: 1rem; } .mitolari-header .mh-search { margin-left: 0; flex: 1 1 100%; width: 100%; } } .filter-controls-group { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .search-input-wrapper { display: flex; align-items: center; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; padding: 10px 18px; gap: 12px; width: 340px; max-width: 100%; transition: all 0.3s ease; } .search-input-wrapper:focus-within { border-color: rgba(26, 188, 156, 0.5); box-shadow: 0 0 18px rgba(26, 188, 156, 0.2); } .search-input-inline { background: transparent; border: none; outline: none; color: var(--text-primary); font-family: 'Outfit', sans-serif; font-size: 1rem; width: 100%; } .search-input-inline::placeholder { color: rgba(255, 255, 255, 0.35); } .search-input-wrapper .search-icon { color: rgba(255, 255, 255, 0.4); flex-shrink: 0; } .search-input-wrapper .search-clear-btn { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-secondary); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; flex-shrink: 0; transition: all 0.2s ease; padding: 0; line-height: 1; } .search-input-wrapper .search-clear-btn:hover { background: rgba(231, 76, 60, 0.15); border-color: rgba(231, 76, 60, 0.3); color: #e74c3c; } .search-input-wrapper .search-clear-btn.hidden { display: none; } /* responsive filters bar — MÒBIL: les TRES peces (Obtingudes · classes · cercador) a la MATEIXA línia. Abans la barra passava a columna i el cercador queia a sota. DOS disparadors (coma = OR): · max-width 768px (tauletes estretes / finestres petites) · telèfon en HORITZONTAL (pointer:coarse + max-height:540, el mateix parell que fa servir la barra del header): els mòbils moderns en landscape fan 800–915px d'AMPLE i el max-width sol NO els agafava. El cercador absorbeix l'espai sobrant (flex:1 + min-width:0 perquè pugui encongir dins del flex). */ @media (max-width: 768px), (orientation: landscape) and (max-height: 540px) and (pointer: coarse) { .collection-global-filters-bar { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 10px 14px; } .filter-controls-group { flex: 0 0 auto; width: auto; gap: 10px; flex-wrap: nowrap; } .filter-controls-group .toggle-container { white-space: nowrap; } .filter-controls-group .select-filter { font-size: 0.8rem; padding: 8px 10px; max-width: 168px; } .search-input-wrapper { flex: 1 1 auto; width: auto; min-width: 0; padding: 8px 12px; gap: 8px; } } /* ================= 5-COLUMN GRID UNIFICATION FOR PLAY & RECYCLE VIEWS ================= */ @media (min-width: 992px) { .prep-available-grid { grid-template-columns: repeat(5, 1fr) !important; justify-content: center; gap: 24px !important; margin: 0 auto; } .prep-available-grid .card-mito, .prep-available-grid .card-wrapper, .prep-available-grid .recycle-card-wrapper { width: 100% !important; max-width: 240px !important; height: auto !important; } .prep-available-grid .card-wrapper, .prep-available-grid .recycle-card-wrapper .card-mito { aspect-ratio: 63 / 88 !important; } .prep-available-grid .recycle-card-wrapper .card-mito { width: 100% !important; max-width: 240px !important; height: auto !important; } /* Ranuras de preparación alineadas en 5 columnas con el mismo tamaño */ .prep-player-slots-container { width: 100% !important; } .chosen-slots-row { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; justify-content: center; gap: 24px !important; margin: 0 auto; width: 100% !important; max-width: 1300px; } .chosen-slots-row .slot { width: 100% !important; max-width: 240px !important; height: auto !important; aspect-ratio: 63 / 88 !important; } /* Carta del día (Mercat) a mòbil vertical: MÉS PETITA + sense min-height forçat + títol/subtítol reduïts, perquè el botó "Obtenir" pugi i sigui accessible (abans quedava massa avall, gairebé fora de l'abast). */ #mercado-ofertas { min-height: auto !important; } .daily-card-showcase-panel { margin-bottom: 18px !important; } .daily-card-showcase-panel .panel-title { font-size: 1.55rem !important; margin-bottom: 6px !important; } .daily-card-showcase-panel .daily-card-subtitle { font-size: 0.86rem !important; margin-bottom: 12px !important; } .daily-card-pedestal { width: 185px !important; padding: 6px 0 12px !important; gap: 12px !important; } .daily-card-pedestal .card-mito { width: 185px !important; max-width: 185px !important; height: auto !important; aspect-ratio: 63 / 88 !important; } .daily-card-pedestal .daily-card-aura { width: 150px !important; height: 190px !important; } } /* ================= PÀGINA INICI · Reclams gratuïts ================= */ .inici-reclams { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; max-width: 780px; margin: 26px auto 10px; padding: 0 14px; } .reclam-card { flex: 1 1 320px; min-width: 280px; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, rgba(0,210,211,0.10) 0%, rgba(0,210,211,0.02) 100%); border: 1px solid rgba(0,210,211,0.28); font-family: 'Outfit', sans-serif; } .reclam-icon { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: radial-gradient(circle at 30% 30%, rgba(0,210,211,0.35), rgba(0,210,211,0.05)); border: 1px solid rgba(0,210,211,0.4); box-shadow: inset 0 0 12px rgba(0,210,211,0.15); } .reclam-body { flex: 1; min-width: 0; } .reclam-title { font-weight: 800; font-size: 1.02rem; color: #fff; margin-bottom: 3px; } .reclam-desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.35; } .reclam-desc strong { color: #ffd875; } .reclam-action { flex-shrink: 0; } .reclam-btn { padding: 10px 18px; border: none; border-radius: 20px; background: linear-gradient(135deg, #00d2d3, #3498db); color: #06121a; font-weight: 800; font-size: 0.85rem; cursor: pointer; font-family: 'Outfit', sans-serif; box-shadow: 0 4px 14px rgba(0,210,211,0.3); transition: transform 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } .reclam-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,210,211,0.45); } .reclam-btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; } .reclam-timer { display: flex; flex-direction: column; align-items: center; padding: 6px 14px; border-radius: 14px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); min-width: 92px; } .reclam-timer-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); } .reclam-timer-val { font-size: 1rem; font-weight: 800; color: #e5c59e; font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .reclam-card { flex: 1 1 100%; } } /* ===== Mòbil en HORITZONTAL durant el duel ===== */ @media (orientation: landscape) and (max-height: 600px) { /* La capçalera/menú no aporta res jugant i ocupa espai: amagar-la */ body.game-active header { display: none !important; } /* Modal de resultat: més ample i amb scroll, perquè el missatge es vegi bé */ #end-modal .modal { max-width: 95vw !important; width: 95vw !important; padding: 12px 18px !important; max-height: 94vh !important; overflow-x: hidden !important; } #end-modal .modal h2 { font-size: 1.3rem !important; margin: 0 0 6px !important; } /* Barres d'EXP en DUES columnes per reduir l'alçada */ #exp-cards-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px 14px !important; } #exp-cards-row > div { padding: 5px 10px !important; gap: 7px !important; } /* La columna del nom té amplada FIXA → totes les barres queden igual de llargues */ #exp-cards-row > div > div:first-child { flex: 0 0 132px !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; } /* La barra de progrés ocupa l'espai disponible */ #exp-cards-row > div > div:nth-child(2) { flex: 1 1 auto !important; min-width: 70px !important; } /* El badge de nivell (sovint buit) no ha de reservar amplada */ #exp-cards-row > div > div:nth-child(3) { flex: 0 0 auto !important; min-width: 0 !important; } } /* Botó de sortir del duel: només quan la capçalera està amagada (mòbil horitzontal) */ #btn-sortir-duel { display: none; } @media (orientation: landscape) and (max-height: 600px) { body.game-active #btn-sortir-duel { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 7px; right: 7px; left: auto; z-index: 9000; width: 36px; height: 36px; border-radius: 50%; background: rgba(231, 76, 60, 0.92); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); font-family: 'Outfit', sans-serif; } /* Cartes de la Boira: sense descripció ni regió i amb vora fina → més netes */ body.game-active #niebla-zone .card-mito .mito-desc, body.game-active #niebla-zone .card-mito .mito-region { display: none !important; } body.game-active #niebla-zone .card-mito { border-width: 1px !important; } /* Marcador sobre les cartes (UMBRA | torn | TU) + tira de badges compactes */ body.game-active .niebla-panel .duel-scorebar { margin-bottom: 2px !important; } body.game-active .niebla-panel .duel-scorebar #turn-display { font-size: 0.7rem !important; padding: 2px 10px !important; min-width: 0 !important; } body.game-active .duel-rescued-strip { align-items: center !important; flex-wrap: nowrap !important; justify-content: center !important; padding: 6px 2px !important; gap: 0 !important; } body.game-active .middle-game-grid { display: grid !important; grid-template-columns: 1fr 33% !important; gap: 10px !important; flex: 1 1 auto !important; min-height: 180px !important; } /* Nom sencer (sense truncar) i materies agrupades com a desktop */ body.game-active #niebla-zone .card-mito .mito-title { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; display: block !important; font-size: 0.5rem !important; line-height: 1.05 !important; } body.game-active #niebla-zone .card-mito .mito-footer { justify-content: center !important; gap: 3px !important; } /* Vora interior una mica més fina i el nº (1/2/3) amb marge respecte la vora */ body.game-active #niebla-zone .card-mito::before { border-width: 2.5px !important; } body.game-active #niebla-zone .card-mito .mito-pts-badge { top: 5px !important; left: 5px !important; } /* Marcadors de fitxes (verdes/vermelles): que no els retalli el panell */ body.game-active .niebla-panel { overflow: visible !important; } body.game-active #niebla-zone { overflow: visible !important; } body.game-active #niebla-zone .card-mito .card-external-tokens-wrapper { bottom: -22px !important; padding: 3px 8px !important; } /* Botó "Descartar i Robar": circular a sobre del mazo */ body.game-active #btn-recycle-duel { font-size: 0.52rem !important; padding: 4px !important; } /* Mites rescatats: centrats i SENSE tallar-se. La fila ja no té alçada fixa; la carta es fa prou alta perquè el seu art no es retalli i cap al panell. */ body.game-active .player-rescued-row, body.game-active .rival-rescued-row { align-items: center !important; overflow: visible !important; } body.game-active .player-rescued-row { height: auto !important; min-height: 0 !important; } body.game-active .desktop-rescued-cards { display: flex !important; gap: 2px !important; justify-content: center !important; align-items: center !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } body.game-active .materials-dashboard { display: none !important; } body.game-active .mini-card-rescued { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; border-radius: 4px !important; box-sizing: border-box !important; padding: 4px 2px 2px 2px !important; width: 26px !important; height: 38px !important; background: transparent !important; flex-shrink: 0 !important; overflow: visible !important; margin: 0 3px !important; } body.game-active .mini-card-rescued.level-1 { border: 1.5px solid #cd7f32 !important; } body.game-active .mini-card-rescued.level-2 { border: 1.5px solid #cbd5e1 !important; } body.game-active .mini-card-rescued.level-3 { border: 1.5px solid #f1c40f !important; } body.game-active .mini-card-pts { position: absolute !important; top: -6px !important; left: -6px !important; font-family: 'Outfit', sans-serif !important; font-size: 0.5rem !important; font-weight: 900 !important; color: #fff !important; width: 13px !important; height: 13px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; } body.game-active .mini-card-cost-below { display: flex !important; flex-direction: column !important; gap: 2px !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin-top: 2px !important; } body.game-active .mini-cost-item { display: flex !important; align-items: center !important; gap: 1px !important; } body.game-active .mini-cost-icon { width: 10px !important; height: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; font-size: 0.58rem !important; line-height: 1 !important; } body.game-active .mini-cost-count { font-family: 'Outfit', sans-serif !important; font-size: 0.58rem !important; font-weight: 900 !important; color: rgba(255, 255, 255, 0.9) !important; line-height: 1 !important; } /* Mall "M": més gran i fàcil de tocar */ body.game-active .claro-deck-zone .deck { width: 86px !important; height: 86px !important; } body.game-active .claro-deck-zone .deck .deck-inner { font-size: 2rem !important; } /* Botó "Regles del Duel" també visible en horitzontal (com a desktop), compacte */ body.game-active .claro-panel #btn-rules-duel { display: inline-block !important; width: auto !important; margin-top: 6px !important; padding: 3px 12px !important; font-size: 0.62rem !important; } /* La Clariana del Bosc: el títol sobra, l'amaguem per guanyar espai */ body.game-active .claro-panel .panel-title-row { display: none !important; } /* Ocultar els títols de la mà de recursos (IA i Jugador) en mòbil horitzontal per guanyar alçada */ body.game-active .rival-game-row:first-of-type .panel-title-row, body.game-active .player-game-row:first-of-type .panel-title-row { display: none !important; } /* Margen interno uniforme para todos los paneles del juego (más espaciado, estilo desktop) */ body.game-active #juego-tablero .panel { padding: 10px 14px !important; border-radius: 8px !important; overflow: visible !important; } /* Altura perfecta para el rectángulo de las cartas en juego (Boira) y Claro del Bosque */ body.game-active .panel-height-aligned { height: 100% !important; min-height: 180px !important; max-height: none !important; } /* Mà de recursos més compacta en horitzontal perquè hi caben 12 essències còmodament */ body.game-active #juego-tablero .player-game-row .hand-cards { height: 38px !important; min-height: 38px !important; max-height: 38px !important; width: 100% !important; gap: 2px !important; padding: 0 2px !important; justify-content: center !important; flex-wrap: nowrap !important; overflow: visible !important; } body.game-active #player-hand .card-essence, body.game-active #player-hand .card-essence-placeholder { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; } /* Tornar a mostrar els slots negres del fons (com a desktop) */ body.game-active #player-hand .card-essence-placeholder { display: block !important; border-radius: 50% !important; border: 2px dashed rgba(255, 255, 255, 0.12) !important; background: rgba(0, 0, 0, 0.25) !important; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5) !important; } body.game-active #player-hand .card-essence .essence-icon { font-size: 1.25rem !important; } /* Esències seleccionades: elevació idèntica per a totes (les dues per igual) */ body.game-active #player-hand .card-essence.selected { transform: translateY(-13px) scale(1.08) !important; z-index: 30 !important; } /* Ajustar amplada i alçada de la fila grid per a mòbil landscape */ body.game-active .game-row-split-grid { grid-template-columns: 1fr 33% !important; gap: 10px !important; } body.game-active .card-mito { min-height: 0 !important; } /* Filas de Umbra y Jugador: altura determinada por las mini-cartas (40px + padding 8px = ~52px) */ body.game-active .game-area-full > .game-row-split-grid:first-of-type, body.game-active .game-area-full > .game-row-split-grid:last-of-type { height: auto !important; min-height: 52px !important; max-height: 60px !important; flex-shrink: 0 !important; } /* Garantir que els panells alineÃ¯n la seva alÃ§ada al 100% de la graella de la fila */ body.game-active .game-row-split-grid .panel { height: 100% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } /* Modal d'iniciativa mÃ©s compacte (moneda mÃ©s petita) */ .coin-wrapper, .coin { width: 84px !important; height: 84px !important; } .initiative-modal-box { padding: 18px 36px !important; gap: 8px !important; } .initiative-subtitle { font-size: 1.25rem !important; } /* Mostrar y ajustar el tÃtulo legend en mobile horizontal */ body.game-active #juego-tablero .panel-legend, body.game-active #juego-tablero .turn-indicator { display: block !important; font-size: 0.65rem !important; margin: 0 0 0 10px !important; letter-spacing: 1px !important; } body.game-active #juego-tablero .turn-indicator { display: inline-block !important; margin: 0 !important; } body.game-active #juego-tablero .niebla-panel .panel-legend, body.game-active #juego-tablero .claro-panel .panel-legend { margin: 0 auto !important; } } /* PRELOADER DEL SOBRE DEL DIA — indicador de càrrega, NO un sobre. Porta la classe `booster-pack`, o sigui que heretava el sobre pla sencer: degradat, vora de guions, ombra, la brillantor animada i el marc de l'art. Mentre baixava el 3D es veia el disseny vell i just després el substituïa el nou: el pitjor dels dos mons. Ara no es veu res tret del text i el filador —el rectangle es manté perquè la pàgina no faci un salt quan hi entri el sobre— i el que apareix en acabar és directament el sobre 3D surant. ⚠️ Aquesta regla ha de quedar-se AQUÍ, al final del fitxer: hi ha les de `.te-sobre3d` molt més amunt i totes van amb `!important`; posant-la abans, la que mana és la que ve després. */ .booster-pack.booster-preloader { background: none !important; border: none !important; box-shadow: none !important; cursor: default !important; animation: boosterPreloadFade 1.5s ease-in-out infinite !important; } .booster-pack.booster-preloader::before, .booster-pack.booster-preloader::after { display: none !important; } /* La brillantor porta animació pròpia i se salta `visibility:hidden`; amb display no hi ha discussió. */ .booster-pack.booster-preloader > .booster-pack-shine { display: none !important; } .booster-pack.booster-preloader > .booster-pack-art { background: none !important; border: none !important; box-shadow: none !important; } /* El text de "CARREGANT..." i el filador SÍ que s'han de veure: són l'únic que queda del preloader. El títol del pack pot venir amb color retallat sobre el degradat que acabem de treure, així que se li dona color propi i s'assegura que no l'amagui cap regla del sobre pla. */ .booster-pack.booster-preloader .booster-pack-title { display: block !important; opacity: 0.85 !important; color: #e5c59e !important; -webkit-text-fill-color: #e5c59e !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; text-shadow: 0 0 10px rgba(229, 197, 158, 0.35) !important; letter-spacing: 3px; } .booster-pack.booster-preloader .preloader-spinner { display: block !important; } /* Sense l'ombra pulsant de l'antic: allò dibuixava el contorn del sobre vell. Només batega el text. */ @keyframes boosterPreloadFade { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @keyframes boosterPreloadPulse { 0%, 100% { opacity: 0.7; box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 5px rgba(200, 155, 60, 0.1); } 50% { opacity: 1; box-shadow: 0 20px 40px rgba(0,0,0,0.7), 0 0 15px rgba(200, 155, 60, 0.3); } } .preloader-spinner { width: 40px; height: 40px; border: 3px solid rgba(200, 155, 60, 0.1); border-top: 3px solid #ffd700; border-radius: 50%; animation: boosterPreloadSpin 1s linear infinite; margin-top: 30px; } @keyframes boosterPreloadSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ===== Celebració de pujada de nivell d'usuari ===== */ .levelup-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(2, 6, 12, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s ease; } .levelup-overlay.show { opacity: 1; } .levelup-box { position: relative; max-width: 380px; width: 100%; overflow: hidden; background: linear-gradient(160deg, #1a2336 0%, #0a0f1c 100%); border: 1px solid rgba(200, 155, 60, 0.4); border-radius: 22px; padding: 32px 28px 26px; text-align: center; box-shadow: 0 25px 70px rgba(0,0,0,0.6), 0 0 40px rgba(200,155,60,0.15); transform: translateY(18px) scale(0.96); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); } .levelup-overlay.show .levelup-box { transform: none; } .levelup-rays { position: absolute; top: -40%; left: 50%; width: 220%; height: 200%; transform: translateX(-50%); pointer-events: none; z-index: 0; background: conic-gradient(from 0deg, transparent 0 8deg, rgba(241,196,15,0.08) 8deg 16deg); animation: levelupSpin 16s linear infinite; } @keyframes levelupSpin { to { transform: translateX(-50%) rotate(360deg); } } .levelup-box > *:not(.levelup-rays) { position: relative; z-index: 1; } .levelup-kicker { display: inline-block; font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: #06121a; margin-bottom: 14px; background: linear-gradient(135deg, #ffd700, #e8b94a); padding: 5px 16px; border-radius: 20px; } .levelup-emoji { font-size: 4.4rem; line-height: 1; margin-bottom: 6px; filter: drop-shadow(0 6px 18px rgba(241,196,15,0.4)); animation: levelupPop 0.6s cubic-bezier(0.2,1.4,0.4,1) both; } @keyframes levelupPop { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .levelup-title { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 1.5rem; letter-spacing: 0.5px; margin: 0 0 4px; background: linear-gradient(135deg, #ffd700, #fff3c4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .levelup-rank { color: var(--text-secondary); font-size: 1rem; margin: 0 0 20px; } .levelup-rank strong { color: var(--text-primary); } .levelup-perks { display: flex; flex-direction: column; gap: 10px; text-align: left; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 14px 16px; margin-bottom: 22px; } .levelup-perk { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-primary); } .levelup-perk span { font-size: 1.2rem; flex-shrink: 0; } .levelup-btn { width: 100%; padding: 13px; border: none; border-radius: 12px; cursor: pointer; color: #06121a; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: 0.5px; background: linear-gradient(135deg, #1abc9c, #16a085); box-shadow: 0 6px 20px rgba(26,188,156,0.35); transition: transform 0.2s, box-shadow 0.2s; } .levelup-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,188,156,0.5); } /* Boosters d'EXP (CristalÂ·litzar): en mÃ²bil s'apilen en vertical perquÃ¨ la pastilla (GRATIS / cost / reclamar) no se surti del marc. Icona a dalt, desprÃ©s el nom, la XP i a sota el botÃ³. */ @media (max-width: 768px) { .xp-booster-btn { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 10px !important; min-height: 0 !important; padding: 18px 14px !important; } .xp-booster-btn > span:nth-child(2) { flex: 0 0 auto !important; width: 100% !important; text-align: center !important; align-items: center !important; } .xp-booster-btn > span:nth-child(3) { white-space: normal !important; margin-top: 2px; } } /* ===== Icones SVG de les essÃ¨ncies (unifiquen els emojis entre dispositius) ===== */ .ess-svg { width: 1em; height: 1em; display: block; } .cost-emoji { display: flex; align-items: center; justify-content: center; } /* Color de la icona segons l'element (blanc; l'aire fosc sobre la seva plata clara) */ .cost-dot.fuego .ess-svg, .cost-dot.agua .ess-svg, .cost-dot.tierra .ess-svg, .essence-fuego .ess-svg, .essence-agua .ess-svg, .essence-tierra .ess-svg { color: #fff; } .cost-dot.aire .ess-svg, .essence-aire .ess-svg { color: #2471a3; } /* Treure els emojis decoratius de fons dels tokens de la mÃ (varien per dispositiu) */ .essence-fuego::before, .essence-tierra::before, .essence-agua::before, .essence-aire::before { content: '' !important; } .card-essence.essence-sello::before { content: '' !important; } /* ===== Sello de Rescat: insÃgnia sola (sense el cercle daurat), mida com les altres materies ===== */ .card-essence.essence-sello { background: transparent !important; border: none !important; box-shadow: none !important; animation: none !important; } .card-essence.essence-sello:hover { border: none !important; box-shadow: none !important; } .card-essence.essence-sello .essence-icon { width: 100%; height: 100%; } .card-essence.essence-sello .ess-svg { width: 100%; height: 100%; } /* Seleccionat: el resalt segueix la forma de la insÃgnia (no un cercle) */ .card-essence.essence-sello.selected { border: none !important; box-shadow: none !important; background: transparent !important; filter: none !important; animation: none !important; } .card-essence.essence-sello.selected .ess-svg { filter: drop-shadow(1.5px 0 0 #ffd700) drop-shadow(-1.5px 0 0 #ffd700) drop-shadow(0 1.5px 0 #ffd700) drop-shadow(0 -1.5px 0 #ffd700) drop-shadow(0 0 5px rgba(255, 215, 0, 0.7)); } /* ===== Badges de mites rescatats (punts de la carta guanyada + materies) ===== */ .rescued-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; cursor: pointer; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.12); border-radius: 9px; padding: 4px 6px 5px; transition: transform 0.2s ease, border-color 0.2s ease; } .rescued-badge:hover { transform: translateY(-2px); } .rescued-badge.level-1 { border-color: rgba(200,214,229,0.4); } .rescued-badge.level-2 { border-color: rgba(162,155,254,0.5); } .rescued-badge.level-3 { border-color: rgba(241,196,15,0.6); } .rescued-badge .rb-pts { display: none !important; } .rescued-badge.level-1 .rb-pts { background: linear-gradient(135deg,#e0a15a,#8f5722); } .rescued-badge.level-2 .rb-pts { background: linear-gradient(135deg,#eef3f7,#8593a0); color:#2b3138; } .rescued-badge.level-3 .rb-pts { background: linear-gradient(135deg,#ffe07a,#c8901a); box-shadow: 0 0 8px rgba(241,196,15,0.5); } .rescued-badge .rb-cost { display: inline-flex; gap: 3px; } .rescued-badge .rb-cost .cost-dot { width: 16px; height: 16px; font-size: 9px; } /* ===== Marcador dins la zona de cartes: UMBRA (+ fitxes petites) | torn | TU, amb badges a sota ===== */ .duel-scorebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; margin-bottom: 6px; } .duel-scorebar .sb-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 0; } .duel-scorebar .sb-col.sb-tu { align-items: flex-end; } .duel-scorebar .sb-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .duel-scorebar .sb-name { font-size: 0.8rem; font-weight: 700; } .duel-scorebar #turn-display { flex: 0 0 auto; } /* Fitxes petites de la mÃ d'Umbra al costat del seu marcador */ .sb-hand { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; overflow: hidden; } .duel-scorebar #rival-hand .card-back-mini { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; } .duel-scorebar #rival-hand .card-back-mini-placeholder { display: none !important; } /* Tira de badges sota cada marcador (nomÃ©s els badges, sense fons) */ .duel-rescued-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 0; } .duel-rescued-strip:empty { display: none; } .sb-tu .duel-rescued-strip { justify-content: flex-end; } /* MÃ del jugador a tot l'ample (les rescatades sÃ³n badges al marcador) */ .game-row-hand-full { width: 100%; flex-shrink: 0; } .game-row-hand-full .player-game-row { width: 100%; } /* Marcador (UMBRA / TU) a sobre del mall, dins del Claro */ .claro-scoreboard { display: flex; align-items: center; justify-content: space-around; gap: 8px; width: 100%; flex-wrap: wrap; margin-bottom: 6px; } .claro-scoreboard .cs-side { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .claro-scoreboard .cs-name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; } /* ===== MODE LLEUGER (dispositius de gamma baixa): treu efectes GPU cars ===== */ /* El blur de fons (backdrop-filter) i les animacions contÃnues sÃ³n el que fa anar a empentes Android de gamma mitjana. iPhone NO activa aquest mode. */ .perf-lite *, .perf-lite *::before, .perf-lite *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 🔴 SCROLL A TROMPICONS AL REDMI NOTE 5 (2026-08-24): confirmat amb ?flat que la causa és el cost de RASTER de les OMBRES BORROSES (~145 `box-shadow` amb blur gran) en fer scroll a l'Inici/Mitolari/Jugar —el `bloquejos` es quedava a 0, o sigui GPU/paint, no fil principal. Aquí les aplanem NOMÉS a la home (`body:not(.game-active)`, que és el que scrolleja) i NOMÉS en perf-lite. El DUEL (`game-active`) NO es toca: no scrolleja i ja té el seu ajust d'ombres propi. Es conserva `filter` (el gris de les cartes bloquejades COMUNICA) i `text-shadow` (barat i ajuda a llegir sobre el fons). box-shadow és paint-only → treure-la no afecta cap layout. */ .perf-lite body:not(.game-active) *, .perf-lite body:not(.game-active) *::before, .perf-lite body:not(.game-active) *::after { box-shadow: none !important; } /* Aturar la boira animada de fons i les animacions decoratives en bucle */ .perf-lite .fog-wrapper { display: none !important; } .perf-lite body::before, .perf-lite body::after, .perf-lite body[data-view="mercado"]::after, .perf-lite body[data-view="juego"]::after, .perf-lite .card-mito.level-3, .perf-lite .card-mito::after, .perf-lite .levelup-rays, .perf-lite .card-progress-bar-bottom .progress-fill, .perf-lite .booster-pack.booster-preloader, .perf-lite .card-essence.selected, .perf-lite .card-essence.essence-sello, .perf-lite .card-essence.essence-desfer, .perf-lite .card-count-badge, .perf-lite .secret-mark { animation: none !important; } /* Inici (sobre/booster): atura els brillos/polsos en BUCLE (box-shadow/gradient = repintat continu). No els cobria perf-lite i són el cost residual a mòbils febles (p.ex. Xiaomi), un cop la boira i el blur ja estan fora. */ .perf-lite .booster-pack.pack-ready, .perf-lite .booster-lock-container, .perf-lite .booster-slot.slot-filled, .perf-lite .booster-badge, .perf-lite .booster-seal, .perf-lite .reveal-prompt, .perf-lite .booster-pack.shake, .perf-lite .reveal-card-back-seal, .perf-lite .reveal-card-front .card-mito.level-3::after, .perf-lite .pdc-reward::after { animation: none !important; } .turn-indicator { padding: 6px 12px; border-radius: 4px; font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } /* Center active game board vertically in desktop view */ @media (min-width: 769px) { #juego-tablero { min-height: calc(100vh - 140px) !important; min-height: calc(var(--app-vh, 100vh) - 140px) !important; justify-content: center !important; } } /* Estilo general para las leyendas de los paneles */ #juego-tablero fieldset.panel { margin: 0 !important; min-width: 0 !important; } #juego-tablero .panel-legend { font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; padding: 0 8px !important; margin: 0 0 0 14px !important; background: transparent !important; border: none !important; width: auto !important; display: block !important; } /* Color para el rival (rojo) */ #juego-tablero .rival-panel-theme .panel-legend { color: rgba(231, 76, 60, 0.95) !important; } /* Color para el jugador (verde) */ #juego-tablero .player-panel-theme .panel-legend { color: rgba(46, 204, 113, 0.95) !important; } /* Color por defecto / Boira / Claro (dorado) */ #juego-tablero .panel-legend { color: rgba(200, 155, 60, 0.95) !important; } /* Centrar las leyendas de los paneles de la Boira y Claro (Materies) */ #juego-tablero .niebla-panel .panel-legend, #juego-tablero .claro-panel .panel-legend { margin: 0 auto !important; text-align: center !important; }/* Enforçar la pantalla de rotació quan estigui en vertical durant el duel */ @media (max-width: 1024px) and (orientation: portrait) { body.game-active .rotate-prompt-overlay { display: flex !important; opacity: 1 !important; pointer-events: auto !important; } body.game-active .rotate-prompt-overlay #rotate-prompt-close { display: none !important; } } /* Estil per al botÃ³ de regles de la capÃ§alera de preparaciÃ³ */ .btn-rules-header { position: absolute !important; top: 22px !important; right: 30px !important; display: flex !important; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; z-index: 10; width: auto !important; min-width: unset !important; padding: 6px 14px !important; } .btn-rules-header .rules-text-desktop { display: inline !important; } .btn-rules-header .rules-text-mobile { display: none !important; } @media (max-width: 768px) { .btn-rules-header { position: static !important; margin-top: 8px !important; align-self: center !important; width: auto !important; display: flex !important; } .btn-rules-header .rules-text-desktop { display: none !important; } .btn-rules-header .rules-text-mobile { display: inline !important; } } /* Las dos cajas de la derecha (marcador y cartas rescatadas) siempre permanecen iluminadas */ #juego-tablero .panel-rescued-right { opacity: 1 !important; filter: none !important; pointer-events: auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } /* Dashboard de materias acumuladas/gastadas (Caben todos en la misma línea) */ .materials-dashboard { display: flex; justify-content: space-around; align-items: center; width: 100%; gap: 12px; padding: 6px 8px; box-sizing: border-box; } .material-metric { display: flex; position: relative; } .material-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); padding: 4px; box-sizing: border-box; transition: transform 0.2s ease; } .material-metric:hover .material-icon { transform: scale(1.15); } .material-icon.fuego { background: radial-gradient(circle at 35% 35%, #ff7675 0%, #d63031 75%, #7f0808 100%); border-color: rgba(255, 255, 255, 0.45); color: #fff; } .material-icon.tierra { background: radial-gradient(circle at 35% 35%, #a8e6cf 0%, #27ae60 75%, #14582f 100%); border-color: rgba(255, 255, 255, 0.45); color: #fff; } .material-icon.agua { background: radial-gradient(circle at 35% 35%, #74b9ff 0%, #0984e3 75%, #083b66 100%); border-color: rgba(255, 255, 255, 0.45); color: #fff; } .material-icon.aire { background: radial-gradient(circle at 35% 35%, #ffffff 0%, #b2bec3 75%, #4b5257 100%); border-color: rgba(255, 255, 255, 0.45); color: #2471a3; } .material-icon .ess-svg { width: 100%; height: 100%; } .material-count { position: absolute; top: -6px; right: -6px; font-family: 'Outfit', sans-serif; font-size: 0.6rem; font-weight: 800; color: #fff; background: #0d121d; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,0.4); } /* Contenedor de cartas rescatadas solo visible en desktop */ .desktop-rescued-cards { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; width: 100%; align-items: center; justify-content: flex-start; padding-left: 8px; padding-right: 8px; padding-top: 6px; box-sizing: border-box; } /* Alinear a la derecha en la columna del jugador ("TU") */ .sb-tu .desktop-rescued-cards { justify-content: flex-end; } /* Mini cartas rescatadas */ .mini-card-rescued { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border-radius: 6px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, filter 0.2s ease; box-sizing: border-box; padding: 12px 6px 8px 6px; width: 44px; min-height: 64px; background: transparent !important; /* Quitar fondo */ } .mini-card-rescued:hover { transform: translateY(-2px) scale(1.05); filter: brightness(1.2); } /* Categorías por nivel: bordes que engloban las materias con sus colores correctos */ .mini-card-rescued.level-1 { border: 2px solid #cd7f32 !important; /* Bronze */ } .mini-card-rescued.level-1:hover { box-shadow: 0 0 8px rgba(205, 127, 50, 0.6); background: rgba(255, 255, 255, 0.05) !important; } .mini-card-rescued.level-2 { border: 2px solid #cbd5e1 !important; /* Plata */ } .mini-card-rescued.level-2:hover { box-shadow: 0 0 8px rgba(203, 213, 225, 0.6); background: rgba(255, 255, 255, 0.05) !important; } .mini-card-rescued.level-3 { border: 2px solid #f1c40f !important; /* Amarillo */ } .mini-card-rescued.level-3:hover { box-shadow: 0 0 10px rgba(241, 196, 15, 0.7); background: rgba(255, 255, 255, 0.05) !important; } .mini-card-pts { position: absolute; top: -8px; left: -8px; font-family: 'Outfit', sans-serif; font-size: 0.65rem; font-weight: 900; color: #fff; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.4); } .mini-card-pts.level-1 { background: #c8813a; } .mini-card-pts.level-2 { background: #c3ccd6; color: #20252b; } .mini-card-pts.level-3 { background: #f1c40f; color: #000; border: 1px solid rgba(0,0,0,0.4); } /* Contenedor vertical de costes agrupados dentro de la mini-carta */ .mini-card-cost-below { display: flex; flex-direction: column; gap: 6px; justify-content: center; align-items: center; width: 100%; margin-top: 6px; } .mini-cost-item { display: flex; align-items: center; gap: 3px; } .mini-cost-icon { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .mini-cost-icon .ess-svg { width: 100%; height: 100%; } .mini-cost-item.fuego .mini-cost-icon { color: #e74c3c; } .mini-cost-item.tierra .mini-cost-icon { color: #2ecc71; } .mini-cost-item.agua .mini-cost-icon { color: #3498db; } .mini-cost-item.aire .mini-cost-icon { color: #a29bfe; } .mini-cost-count { font-family: 'Outfit', sans-serif; font-size: 0.75rem; font-weight: 900; color: rgba(255, 255, 255, 0.9); line-height: 1; } @media (min-width: 769px) { .materials-dashboard { display: none !important; } } @media (max-width: 768px) { .desktop-rescued-cards { display: none !important; } } /* Prevent the draw deck from moving when the recycle/draw button appears on desktop */ @media (min-width: 769px) { .claro-panel.panel-height-aligned { justify-content: flex-start !important; gap: 12px !important; } .claro-panel.panel-height-aligned #claro-instruction { margin-top: 5px !important; } .claro-panel.panel-height-aligned #btn-rules-duel { margin-top: auto !important; } } /* XP Boosters horizontal alignment in mobile landscape */ @media (max-width: 980px) and (orientation: landscape) { .daily-card-showcase-panel { flex: 1 1 100% !important; max-width: none !important; } #xp-booster-options { flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; } #xp-booster-options .xp-booster-btn { flex: 1 1 0% !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding: 12px 6px !important; min-height: 145px !important; text-align: center !important; gap: 8px !important; } #xp-booster-options .xp-booster-btn > span:nth-child(1) { width: 44px !important; height: 44px !important; font-size: 1.4rem !important; } #xp-booster-options .xp-booster-btn > span:nth-child(2) { text-align: center !important; gap: 2px !important; } #xp-booster-options .xp-booster-btn > span:nth-child(2) > span:nth-child(1) { font-size: 0.95rem !important; text-transform: uppercase !important; } #xp-booster-options .xp-booster-btn > span:nth-child(2) > span:nth-child(2) { font-size: 1.05rem !important; } #xp-booster-options .xp-booster-btn > span:nth-child(3) { padding: 6px 12px !important; font-size: 0.85rem !important; } /* Success XP modal scaling and layout fixes for landscape */ .custom-lightbox-card { padding: 12px 20px !important; max-height: 94vh !important; max-height: 94dvh !important; overflow-y: auto !important; } #xp-noti-card .card-mito { transform: scale(0.65) !important; margin: -35px 0 !important; } } /* Bring the resource deck instruction message closer to the deck on all screens */ .claro-panel { justify-content: flex-start !important; gap: 6px !important; } .claro-panel.panel-height-aligned { justify-content: flex-start !important; gap: 6px !important; } .claro-instruction-text { margin-top: 4px !important; flex-grow: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Ocultar footer cuando el juego esté activo para prevenir scrolls */ body.game-active .site-footer { display: none !important; } /* ========================================================= */ /* JUEGO MOBILE OVERRIDES (INTEGRACIÓN DESDE MAQUETA) */ /* ========================================================= */ @media (max-width: 980px) and (orientation: landscape), (max-width: 768px), (max-height: 600px) { /* 1. CARTAS FLUIDAS (Mito y Contenedores) */ #niebla-zone .card-mito, #niebla-zone .card-wrapper { width: calc((100% - 32px) / 5) !important; max-width: 86px !important; height: auto !important; aspect-ratio: 1 / 1.28 !important; } /* 2. ESPACIADO DE LA NIEBLA */ .niebla-panel { padding-top: 4px !important; } /* 3. PÍLDORA DINÁMICA DE TURNO (Sustituye MATERIES en Claro) */ #turn-display.panel-legend { top: -1px !important; left: -1px !important; bottom: auto !important; right: auto !important; border-radius: 0 0 4px 0 !important; font-size: 0.55rem !important; padding: 2.5px 8px !important; margin: 0 !important; border: 1px solid transparent !important; display: inline-block !important; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; position: absolute !important; z-index: 10 !important; } /* Estados dinámicos de turno incrustado */ #turn-display.turno-jugador { color: #2ecc71 !important; border-color: rgba(46, 204, 113, 0.45) !important; background: rgba(46, 204, 113, 0.12) !important; } #turn-display.turno-rival { color: #ff7675 !important; border-color: rgba(231, 76, 60, 0.45) !important; background: rgba(231, 76, 60, 0.12) !important; } /* ========================================= NUEVOS MAPEOS (Integración de mock classes) ========================================= */ /* Limpieza de Paneles y bordes */ .rival-game-row .panel-legend, .player-game-row .panel-legend { display: none !important; } .panel { padding: 2px !important; border-width: 1px !important; } .rival-game-row, .player-game-row { background: transparent !important; border: 2px solid rgba(255, 255, 255, 0.05) !important; } /* Panel de Claro y Niebla */ .claro-panel, .niebla-panel { background: rgba(200, 155, 60, 0.02) !important; border-color: rgba(200, 155, 60, 0.35) !important; } /* Esencias Compactas */ #juego-tablero .card-essence, #juego-tablero .card-essence-placeholder, #juego-tablero .card-back-mini { width: var(--circle-sz, 32px) !important; height: var(--circle-sz, 32px) !important; min-width: var(--circle-sz, 32px) !important; min-height: var(--circle-sz, 32px) !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; } #juego-tablero .card-essence .essence-icon { width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; } #juego-tablero .card-essence .essence-overlay-value { font-size: 0.7rem !important; } /* Cartas Rescatadas Ultra-Compactas */ .duel-rescued-strip { padding: 4px 2px !important; gap: 6px !important; flex-wrap: wrap !important; justify-content: center !important; } .es-rescatado { width: 27px !important; height: 38px !important; min-width: 27px !important; min-height: 38px !important; padding: 4px 2px 2px 2px !important; background: transparent !important; border-width: 1.5px !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; border-radius: 4px !important; } .es-rescatado .mito-desc, .es-rescatado .mito-region, .es-rescatado .mito-title, .es-rescatado .mito-img, .es-rescatado .mito-footer { display: none !important; } /* Costos de la carta rescatada en móvil (debe mostrarse si es posible) */ .es-rescatado .mito-header { position: relative !important; height: 100% !important; width: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; background: transparent !important; border: none !important; } .es-rescatado.level-1 { border-color: #cd7f32 !important; } .es-rescatado.level-2 { border-color: #cbd5e1 !important; } .es-rescatado.level-3 { border-color: #f1c40f !important; } /* Mazo del Claro Compacto (2x2) */ .claro-deck-zone { padding: 0 !important; margin: 0 !important; flex: 1 !important; display: flex !important; justify-content: center !important; align-items: center !important; } #resource-deck { width: 70px !important; height: 70px !important; border-width: 2.5px !important; padding: 0 !important; } .deck-inner-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 4px !important; padding: 10px !important; width: 100% !important; height: 100% !important; box-sizing: border-box !important; } .deck-icon-wrapper svg { width: 12px !important; height: 12px !important; } #deck-card-count { bottom: -8px !important; font-size: 0.62rem !important; padding: 1px 8px !important; } .claro-instruction-text { font-size: 0.6rem !important; margin: 4px 0 !important; text-align: center !important; } /* Botones Claro alineados en base */ .claro-panel > button { margin: 2px 0 0 0 !important; padding: 4px 8px !important; font-size: 0.55rem !important; } } /* ============================================================ PONT joc_dev → joc.php : CARTES DE LA BOIRA (#duel-niebla-bridge) Viu aquí (i no inline a joc.php) perquè index.css es carrega sempre amb ?v=timestamp = mai queda cachejat. Especificitat reforçada amb #juego-tablero per guanyar qualsevol versió antiga del pont. app.js injecta .card-mito dins #niebla-zone amb markup propi; index.css les forçava a 120x175px fixes amb scroll. Aquí: 5 cartes LÍQUIDES centrades, sense scroll, com .mito-card-mock. Scope body.game-active = només durant el duel (no la Col·lecció). FORA de cap @media = val per a mòbil-horitzontal I desktop (tots dos són apaïsats durant el duel). ============================================================ */ /* Fila de la Boira: 5 cartes líquides centrades, SENSE scroll horitzontal */ body.game-active #juego-tablero #niebla-zone { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 100% !important; overflow: visible !important; padding: 4px 6px 20px 6px !important; scroll-snap-type: none !important; } /* Carta de Mito líquida: 5 omplen l'amplada, proporció de carta */ body.game-active #juego-tablero #niebla-zone .card-mito { flex: 0 1 calc((100% - 32px) / 5) !important; width: calc((100% - 32px) / 5) !important; min-width: 0 !important; max-width: 92px !important; height: auto !important; max-height: 100% !important; aspect-ratio: 1 / 1.28 !important; overflow: visible !important; scroll-snap-align: none !important; } /* Il·lustració omple TOTA la carta */ body.game-active #juego-tablero #niebla-zone .card-mito .mito-img-bg { width: 100% !important; height: 100% !important; opacity: 1 !important; } /* Vora interior més fina a la carta petita (mock fa servir 2px, no 4px) */ body.game-active #juego-tablero #niebla-zone .card-mito.level-1::before, body.game-active #juego-tablero #niebla-zone .card-mito.level-2::before, body.game-active #juego-tablero #niebla-zone .card-mito.level-3::before { border-width: 2px !important; } /* Franja de text inferior compacta i superposada (com .mito-info-mock) */ body.game-active #juego-tablero #niebla-zone .card-mito .mito-desc { display: none !important; } body.game-active #juego-tablero #niebla-zone .card-mito .mito-region { display: none !important; } body.game-active #juego-tablero #niebla-zone .card-mito .mito-overlay-text-container { padding: 12px 0 4px 0 !important; } body.game-active #juego-tablero #niebla-zone .card-mito .mito-info-below-img { margin-bottom: 1px !important; padding: 0 5px !important; gap: 0 !important; } /* Nom en UNA sola línia amb el·lipsi (evita que la carta s'estiri i s'enfosqueixi) */ body.game-active #juego-tablero #niebla-zone .card-mito .mito-title { display: block !important; -webkit-line-clamp: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 0.56rem !important; line-height: 1.15 !important; padding: 0 2px !important; } /* Costos compactes al peu */ body.game-active #juego-tablero #niebla-zone .card-mito .mito-footer { padding: 1px 6px 3px 6px !important; } body.game-active #juego-tablero #niebla-zone .card-mito .mito-cost { gap: 2px !important; } body.game-active #juego-tablero #niebla-zone .card-mito .cost-dot { width: 13px !important; height: 13px !important; min-width: 13px !important; min-height: 13px !important; } body.game-active #juego-tablero #niebla-zone .card-mito .cost-emoji { font-size: 0.55rem !important; } /* Punts a dalt a l'esquerra */ body.game-active #juego-tablero #niebla-zone .card-mito .mito-pts-badge { font-size: 0.58rem !important; width: 14px !important; height: 14px !important; top: 4px !important; left: 4px !important; } /* Càpsula de fitxes (majories) just sota la carta */ body.game-active #juego-tablero #niebla-zone .card-mito .card-external-tokens-wrapper { bottom: -15px !important; padding: 3px 6px !important; } body.game-active #juego-tablero #niebla-zone .card-mito .inline-token { width: 7.5px !important; height: 7.5px !important; } /* ============================================================ CARTA "FILIGRANA" (disseny AAA definitiu, 2026-07-04) — col·lecció / Mitolari / sobres / inspector (.card-mito): full-art + banda del NOM (fosca, es fon a la dreta) + subbanda del color del TIER (regió + classe) + descripció sobre l'art + matèries al peu amb fils/diamants + número. Va al FINAL del full per guanyar la cascada a les regles antigues. ===== */ /* Traç dels ornaments tintat pel TIER (or per defecte = nivell 3) */ .card-mito { --s:#e6c473; --s-lo:#c99a3e; --s-a5:rgba(232,196,115,0.5); --band-a:rgba(201,154,62,0.55); --band-b:rgba(150,108,40,0.36); --scrim:26,20,8; padding-bottom: 0; /* treu el 10px legacy: el marge de baix el fixa NOMÉS .mito-overlay-text-container, com al duel (.mist-card no té aquest padding) */ } .card-mito.level-1 { --s:#d9995a; --s-lo:#b87333; --s-a5:rgba(205,127,50,0.55); --band-a:rgba(205,127,50,0.58); --band-b:rgba(139,84,33,0.4); --scrim:32,18,9; } .card-mito.level-2 { --s:#c3ccd6; --s-lo:#8f9aa7; --s-a5:rgba(180,190,202,0.55); --band-a:rgba(154,166,180,0.55); --band-b:rgba(100,110,122,0.38); --scrim:16,20,28; } /* ═══ IDENTITAT PER ELEMENT (2026-07-28) ══════════════════════════════════════════════════════════ Mateixa decisió que al duel (veure joc.php): el bronze/plata/or deia el NIVELL, que era progrés del jugador; ara el nivell és el cost i el que identifica la carta és el seu ELEMENT dominant. Els tons són els de la paleta de matèries, perquè la carta i la seva matèria es reconeguin com el mateix color. Va DESPRÉS de `.card-mito.level-N` per guanyar-li la cascada amb la mateixa especificitat. ═════════════════════════════════════════════════════════════════════════════════════════════════ */ .card-mito.elem-fuego { --s:#ff7e6b; --s-lo:#c0503c; --s-a5:rgba(255,126,107,0.55); --band-a:rgba(200,80,60,0.58); --band-b:rgba(140,50,35,0.40); --scrim:34,14,12; box-shadow: 0 10px 20px rgba(0,0,0,0.55), inset 0 0 18px rgba(255,126,107,0.22); } .card-mito.elem-agua { --s:#74b9ff; --s-lo:#3d7fc0; --s-a5:rgba(116,185,255,0.55); --band-a:rgba(70,130,200,0.58); --band-b:rgba(35,80,140,0.40); --scrim:10,20,34; box-shadow: 0 10px 20px rgba(0,0,0,0.55), inset 0 0 18px rgba(116,185,255,0.22); } .card-mito.elem-tierra { --s:#7bed9f; --s-lo:#3fa86a; --s-a5:rgba(123,237,159,0.55); --band-a:rgba(70,170,110,0.58); --band-b:rgba(35,110,70,0.40); --scrim:10,28,18; box-shadow: 0 10px 20px rgba(0,0,0,0.55), inset 0 0 18px rgba(123,237,159,0.22); } .card-mito.elem-aire { --s:#cdd5d9; --s-lo:#8b969c; --s-a5:rgba(205,213,217,0.55); --band-a:rgba(150,162,170,0.55); --band-b:rgba(95,105,112,0.38); --scrim:20,24,28; box-shadow: 0 10px 20px rgba(0,0,0,0.55), inset 0 0 18px rgba(205,213,217,0.22); } .card-mito.elem-fuego .mito-title { color:#ffb3a6; background:linear-gradient(180deg,#ffe6e0,#ffb3a6 58%,#c0503c); -webkit-background-clip:text; background-clip:text; } .card-mito.elem-agua .mito-title { color:#a9d4ff; background:linear-gradient(180deg,#e6f2ff,#a9d4ff 58%,#3d7fc0); -webkit-background-clip:text; background-clip:text; } .card-mito.elem-tierra .mito-title { color:#a9f0c2; background:linear-gradient(180deg,#e4fbec,#a9f0c2 58%,#3fa86a); -webkit-background-clip:text; background-clip:text; } .card-mito.elem-aire .mito-title { color:#dde3e7; background:linear-gradient(180deg,#ffffff,#dde3e7 58%,#8b969c); -webkit-background-clip:text; background-clip:text; } /* Bloc inferior DINÀMIC ancorat a baix (matèries = punt fix) amb scrim fosc */ .mito-overlay-text-container { flex-direction: column; align-items: stretch; gap: 0; text-align: left; /* CORREGIT 2026-07-24: el comentari antic deia que aquesta carta no tenia el marc gruixut del template i per això duia ~7cqw de coixí. Ja NO és cert — el rediseny Filigrana li va posar el mateix marc metàl·lic (.card-mito::before amb padding:6px), així que aquell extra separava les matèries del caire 7.6px MÉS que a la plantilla. Ara va calcat: 8px @225 = 3.56cqw. */ padding: 0 0 clamp(5px, 4.45cqw, 20px); /* 10px @225: una mica més d'aire entre matèries i caire */ background: none; } /* Les regles velles .level-N .mito-overlay-text-container (degradats per tier amb base opaca) tenen més especificitat que la d'aquí dalt → anul·lades explícitament (el scrim viu a .mito-img-bg::after) */ .level-1 .mito-overlay-text-container, .level-2 .mito-overlay-text-container, .level-3 .mito-overlay-text-container { background: none; } /* Scrim com a la PLANTILLA: fon el 54% inferior de la CARTA (independent de l'alçada del bloc de text) */ .mito-img-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 54%; border-radius: 0 0 11px 11px; background: linear-gradient(180deg, transparent 0%, rgba(var(--scrim,8,12,20),0.5) 42%, rgba(var(--scrim,8,12,20),0.9) 80%, rgba(var(--scrim,8,12,20),0.98) 100%); /* scrim tintat cap al color del tier */ } .mito-info-below-img { padding: 0; margin-bottom: 0; gap: 0; } /* bandes ENGANXADES: sense marge entre el gradient del nom i el de Catalunya */ /* Banda del NOM: mida fixa; si no hi cap → 2 línies (mai s'encongeix) */ /* PROPORCIONS CALCADES DE LA PLANTILLA (maqueta_habilitats.html, carta de 225px → cqw): el Mitolari i el duel han de quedar EXACTAMENT iguals. Conversió: px ÷ 2.25 = cqw. Aquí només canvien MIDES; els degradats, colors i el centrat del nivell 3 es queden com estaven. */ .mito-nmband { background: linear-gradient(92deg, var(--band-a) 0%, var(--band-b) 55%, transparent 100%); padding: 1.9cqw 7.11cqw; } /* caixa del títol MÉS BAIXA (2026-07-24): 4.3px dalt/baix @225 */ .mito-title, .card-mito.level-1 .mito-title, .card-mito.level-2 .mito-title, .card-mito.level-3 .mito-title { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: #fff; /* la regla vella el posa transparent (text metàl·lic) i guanyaria a color → títol invisible */ /* CENTRAT (2026-07-28): abans `left`. Aquesta regla porta la llista `.card-mito.level-N .mito-title`, i quan un selector de la llista casa, la seva especificitat (0,3,0) guanya a qualsevol `.card-mito .mito-title` (0,2,0) escrit més avall — per això centrar-ho des d'una altra regla no feia res. S'ha de canviar AQUÍ. */ color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 0.4px; font-size: clamp(8px, 6.4cqw, 29px); line-height: 1.2; /* 0.9rem = 14.4px @225. L-h ajustat (era 1.39, que igualava els 30px de la plantilla) perquè a la carta REAL la caixa groga es veia massa alta. */ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Subbanda del TIER: regió + xip de classe */ .mito-meta { justify-content: flex-start; gap: 3.11cqw; margin: 0; padding: 1.33cqw 7.11cqw; /* 7px · 3px 16px @225 */ background: linear-gradient(92deg, rgba(16,28,46,0.95) 0%, rgba(21,36,58,0.9) 70%, transparent 100%); /* INVERTIT: subbanda navy */ color: #efe0b4; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: clamp(5px, 3.56cqw, 16px); text-shadow: 0 1px 2px rgba(0,0,0,0.8); /* 0.5rem = 8px @225 */ } .card-mito .mito-classe { font-size: clamp(5px, 3.34cqw, 15px); padding: 0.44cqw 2.22cqw 0.44cqw 1.33cqw; } /* 0.47rem = 7.52px @225 */ .card-mito .mito-classe svg { width: 4cqw; height: 4cqw; max-width: 18px; max-height: 18px; } /* 9px @225 */ /* Descripció directament sobre l'art (variant "Sobre l'art") */ .mito-desc, .card-mito.level-1 .mito-desc { color: #dde3ea; text-shadow: 0 1px 3px rgba(0,0,0,0.9); /* Límits AMPLIS a propòsit: la carta real es pinta a ~186px i un mínim de 9px inflava el text (a 186 li toquen 8.2px) → les 3 línies creixien i el bloc pujava més amunt que a la plantilla. Amb marges amplis la mida és PURAMENT proporcional i la carta es veu igual a qualsevol mida. */ font-size: clamp(7px, 4.4cqw, 20px); line-height: 1.34; margin: 1.78cqw 7.11cqw 0; padding: 0; flex-grow: 0; /* 4px 16px @225: MATEIX caire esquerre que les bandes i la habilitat */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Peu: matèries flanquejades per fil + diamant (tintats pel tier) */ .mito-footer { justify-content: center; align-items: center; gap: 2.67cqw; margin: 1.33cqw 7.11cqw 2.22cqw; padding: 0; } /* menys aire habilitat↔matèries */ .mito-lnd { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--s-lo)); } .mito-lnd.r { background: linear-gradient(90deg, var(--s-lo), transparent); } .mito-dia { width: clamp(2.5px, 2.22cqw, 10px); height: clamp(2.5px, 2.22cqw, 10px); background: var(--s); transform: rotate(45deg); flex: 0 0 auto; box-shadow: 0 0 5px var(--s-a5); } /* 5px @225 */ .mito-cost { display: inline-flex; gap: 1.78cqw; flex: 0 0 auto; } /* 4px @225 */ /* Matèries: a la plantilla són 20px en una carta de 225 → 8.89cqw (abans 11cqw = massa grosses). Va SCOPEJAT a .card-mito per no tocar les .cost-dot d'altres pantalles. */ .card-mito .cost-dot { width: clamp(10px, 8.89cqw, 40px); height: clamp(10px, 8.89cqw, 40px); font-size: clamp(5px, 4.85cqw, 22px); /* icona a la MATEIXA proporció que l'original (6cqw sobre 11cqw) */ /* LOOK-AND-FEEL: el relleu original anava en px FIXOS (2px/4px). En encongir l'esfera, el bisell es quedava igual de gruixut i la matèria perdia el seu aspecte. Ara escala amb ella (mateix percentatge de diàmetre que tenia), així el vidre i el volum es veuen exactament com abans. */ box-shadow: inset 0 -0.72cqw 1.44cqw rgba(0,0,0,0.5), inset 0 0.72cqw 1.44cqw rgba(255,255,255,0.45), 0 0.72cqw 1.44cqw rgba(0,0,0,0.4); } /* ===== Diferenciació per NIVELL ===== */ /* Nivell 2 (plata): filets del títol que arriben al caire esquerre */ .card-mito.level-2 .mito-nmband { position: relative; } .card-mito.level-2 .mito-nmband::before, .card-mito.level-2 .mito-nmband::after { content: ""; position: absolute; left: 0; right: 18%; height: 1px; background: linear-gradient(90deg, var(--s) 0%, var(--s) 52%, transparent 100%); } .card-mito.level-2 .mito-nmband::before { top: 0; } .card-mito.level-2 .mito-nmband::after { bottom: 0; } /* BANDES CENTRADES (mirall) per a TOTES les cartes (2026-07-28): abans només el Nivell 3. El nivell ja no és progrés, així que no hi ha res a premiar — i una carta d'1 matèria no s'ha de veure pitjor. */ .card-mito .mito-nmband { position: relative; text-align: center; background: linear-gradient(90deg, transparent 0%, var(--band-a) 20%, var(--band-a) 80%, transparent 100%); } .card-mito .mito-nmband::before, .card-mito .mito-nmband::after { content: ""; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--s) 25%, var(--s) 75%, transparent); } .card-mito .mito-nmband::before { top: 0; } .card-mito .mito-nmband::after { bottom: 0; } .card-mito .mito-meta { justify-content: center; background: linear-gradient(90deg, rgba(21,36,58,0) 0%, rgba(16,28,46,0.94) 25%, rgba(16,28,46,0.94) 75%, rgba(21,36,58,0) 100%); } .card-mito .mito-desc { text-align: center; } /* Número de col·lecció */ .mito-num { position: absolute; z-index: 5; pointer-events: none; /* mínim en px (clamp) perquè a la rella (186px) el número no el retalli la cantonada arrodonida de .card-mito (border-radius 12px + overflow:hidden) */ bottom: clamp(8px, 3.9cqw, 15px); right: clamp(10px, 4.9cqw, 18px); font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: 1px; font-size: clamp(4px, 2.65cqw, 9px); color: var(--s); opacity: 0.85; /* una mica més petit (era 2.97cqw) */ text-shadow: 0 1px 2px rgba(0,0,0,0.9); } /* ============================================================ CELEBRACIÓ AAA de PUJADA DE NIVELL (Mitolari): ZOOM des de la rella → VIBRA → FLAIX de llum + ona expansiva + halo + espurnes → es transforma en la nova. N2 (plata) = èpic · N3 (or) = espectacular. ===== */ .clu-overlay { position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center; --ovc: 232,196,115; /* color del tier per il·luminar el fons */ background: radial-gradient(circle at 50% 44%, rgba(var(--ovc),0.2) 0%, rgba(var(--ovc),0.06) 36%, rgba(5,7,13,0.92) 70%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s ease; } .clu-overlay.t2 { --ovc: 200,214,228; } .clu-overlay.t3 { --ovc: 241,196,15; } .clu-overlay.show { opacity: 1; } /* Raigs girant (més densos) */ .clu-rays { position: absolute; left: 50%; top: 44%; width: 760px; height: 760px; transform: translate(-50%,-50%); pointer-events: none; z-index: 0; opacity: 0; background: conic-gradient(from 0deg, transparent 0 6deg, rgba(232,196,115,0.2) 6deg 12deg); -webkit-mask: radial-gradient(circle, #000 22%, transparent 66%); mask: radial-gradient(circle, #000 22%, transparent 66%); animation: cluSpin 20s linear infinite; transition: opacity 0.6s ease 0.3s; } .clu-overlay.show .clu-rays { opacity: 0.55; } .clu-overlay.show.t3 .clu-rays { opacity: 0.9; } .clu-overlay.t3 .clu-rays { animation-duration: 13s; background: conic-gradient(from 0deg, transparent 0 6deg, rgba(241,196,15,0.24) 6deg 12deg); } @keyframes cluSpin { to { transform: translate(-50%,-50%) rotate(360deg); } } /* Halo radial que batega darrere la carta */ .clu-glow { position: absolute; left: 50%; top: 44%; width: 520px; height: 520px; transform: translate(-50%,-50%); pointer-events: none; z-index: 1; opacity: 0; border-radius: 50%; background: radial-gradient(circle, rgba(232,196,115,0.5) 0%, rgba(232,196,115,0.14) 42%, transparent 70%); transition: opacity 0.6s ease 0.3s; } .clu-overlay.show .clu-glow { opacity: 1; animation: cluGlowPulse 2.6s ease-in-out infinite; } @keyframes cluGlowPulse { 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:0.65 } 50%{ transform:translate(-50%,-50%) scale(1.13); opacity:1 } } .clu-overlay.t2 .clu-glow { background: radial-gradient(circle, rgba(200,214,228,0.5) 0%, rgba(200,214,228,0.14) 42%, transparent 70%); } /* Escenari: zoom des de l'origen fins al centre */ .clu-stage { position: fixed; aspect-ratio: 63/88; z-index: 3; pointer-events: none; transition: left 0.5s cubic-bezier(0.2,0.9,0.3,1), top 0.5s cubic-bezier(0.2,0.9,0.3,1), transform 0.5s cubic-bezier(0.2,0.9,0.3,1); filter: drop-shadow(0 14px 42px rgba(0,0,0,0.6)); } .clu-shake { width: 100%; height: 100%; } .clu-shake.shaking { animation: cluShake 0.44s ease-in-out; } @keyframes cluShake { 0%,100%{transform:translate(0)} 15%{transform:translate(-6px,1px) rotate(-1.8deg)} 32%{transform:translate(6px,-1px) rotate(1.8deg)} 50%{transform:translate(-5px,1px) rotate(-1.3deg)} 68%{transform:translate(4px) rotate(1deg)} 84%{transform:translate(-2px) rotate(-0.5deg)} } /* N3 (Mític): vibració més llarga i insistent */ .clu-overlay.t3 .clu-shake.shaking { animation: cluShakeLong 0.78s ease-in-out; } @keyframes cluShakeLong { 0%,100%{transform:translate(0)} 10%{transform:translate(-6px,1px) rotate(-1.9deg)} 21%{transform:translate(6px,-1px) rotate(1.9deg)} 33%{transform:translate(-6px,1px) rotate(-1.7deg)} 45%{transform:translate(6px,-1px) rotate(1.6deg)} 57%{transform:translate(-5px,1px) rotate(-1.3deg)} 69%{transform:translate(4px) rotate(1deg)} 81%{transform:translate(-3px) rotate(-0.7deg)} 92%{transform:translate(2px) rotate(0.4deg)} } /* Zoom endins (acostament) just tras la vibració, abans del flaix */ .clu-stage.zoom { transform: translate(-50%,-50%) scale(1.17) !important; transition: transform 0.34s cubic-bezier(0.25,0.85,0.3,1); } .clu-card { width: 100%; height: 100%; } .clu-card.reveal { animation: cluReveal 0.5s cubic-bezier(0.2,1.5,0.4,1); } @keyframes cluReveal { 0%{ transform:scale(0.84) } 55%{ transform:scale(1.09) } 100%{ transform:scale(1) } } .clu-card .card-mito { width: 100% !important; height: 100% !important; margin: 0 !important; transform: none !important; animation: none !important; } .clu-card .card-mito::after { display: none !important; } /* Ona expansiva (shockwave) al moment de la transformació */ .clu-burst { position: absolute; left: 50%; top: 44%; width: 130px; height: 130px; transform: translate(-50%,-50%) scale(0); pointer-events: none; z-index: 4; border-radius: 50%; border: 5px solid rgba(255,244,210,0.9); opacity: 0; } .clu-burst.go { animation: cluBurst 0.72s cubic-bezier(0.2,0.7,0.3,1) forwards; } @keyframes cluBurst { 0%{ transform:translate(-50%,-50%) scale(0.2); opacity:0.95; border-width:7px } 100%{ transform:translate(-50%,-50%) scale(7.5); opacity:0; border-width:1px } } .clu-overlay.t2 .clu-burst { border-color: rgba(226,235,244,0.9); } /* Flaix radial de llum (amaga el canvi de carta) */ .clu-flash { position: absolute; left: 50%; top: 44%; width: 620px; height: 620px; transform: translate(-50%,-50%); pointer-events: none; z-index: 5; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(255,250,235,0.96) 0%, rgba(255,240,200,0.5) 30%, transparent 62%); } .clu-flash.go { animation: cluFlash 0.5s ease-out forwards; } @keyframes cluFlash { 0%{ opacity:0; transform:translate(-50%,-50%) scale(0.4) } 28%{ opacity:1 } 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.12) } } .clu-overlay.t2 .clu-flash { background: radial-gradient(circle, rgba(248,251,255,0.96) 0%, rgba(224,232,240,0.5) 30%, transparent 62%); } /* Caption */ .clu-caption { position: absolute; left: 0; right: 0; bottom: 7%; text-align: center; z-index: 6; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2,1.3,0.4,1); } .clu-caption.show { opacity: 1; transform: translateY(0); } .clu-title { margin: 0; font-family: 'Outfit',sans-serif; font-weight: 900; font-size: 2.4rem; letter-spacing: 1px; text-transform: uppercase; color: #fff; } .clu-sub { margin: 2px 0 0; font-family: 'Outfit',sans-serif; font-weight: 800; font-size: 0.9rem; letter-spacing: 4px; text-transform: uppercase; opacity: 0.85; } .clu-btn { margin-top: 18px; font-family: 'Outfit',sans-serif; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.4px; cursor: pointer; color: #06121a; border: none; border-radius: 24px; padding: 11px 30px; box-shadow: 0 6px 18px rgba(0,0,0,0.4); pointer-events: auto; } /* Missatge de mite desbloquejat (N3) + parell de botons (llegir / després) */ .clu-unlock { margin: 12px auto 0; max-width: 350px; font-family: 'Outfit',sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.4; color: #ffe9b0; letter-spacing: 0.2px; text-shadow: 0 0 16px rgba(241,196,15,0.55); } .clu-actions { margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .clu-actions .clu-btn { margin-top: 0; } .clu-overlay.t2 .clu-title { color: #eaf1f7; text-shadow: 0 0 26px rgba(200,210,225,0.55); } .clu-overlay.t2 .clu-sub { color: #b6c3cf; } .clu-overlay.t2 .clu-btn { background: linear-gradient(135deg,#f2f5f8,#a7b1bd); } .clu-overlay.t3 .clu-title { color: #ffe08a; animation: cluGlow 1.3s ease-in-out infinite alternate; } .clu-overlay.t3 .clu-sub { color: #f2c94c; } .clu-overlay.t3 .clu-btn { background: linear-gradient(135deg,#ffe08a,#e0a92e); box-shadow: 0 0 22px rgba(241,196,15,0.5); } @keyframes cluGlow { from { text-shadow: 0 0 20px rgba(241,196,15,0.45); } to { text-shadow: 0 0 46px rgba(241,196,15,0.95), 0 0 14px rgba(255,255,255,0.55); } } .clu-spark { position: fixed; z-index: 100052; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; will-change: transform, opacity; } .perf-lite .clu-rays, .perf-lite .clu-glow { animation: none; } .perf-lite .clu-stage { transition-duration: 0.35s; } /* ============================================================ DESBLOQUEIG DE LA LLEGENDA a la FITXA (inspector) en pujar a Nivell 3 (Mític): el candau es trenca i la llegenda es revela amb una escombrada daurada, per llegir-la directament allà mateix. ============ */ /* TAST de la llegenda (bloquejada): se'n llegeix el principi i el text s'esvaeix, com la previsualització d'un article de diari. El degradat va a un pseudo-element per damunt del text (no es pot fer amb -webkit-mask sense trencar la selecció) i el pare NO pot tenir overflow visible o el fade quedaria tallat. */ .lore-teaser { position: relative; max-height: 8.6em; overflow: hidden; margin-bottom: 14px; } /* 🔴 L'alçada del fos és PROPORCIONAL al text, no fixa. Era `height: 4.6em`, calibrada per a una llegenda llarga (8+ línies). Des que el tast cau a la `desc` —una o dues línies, ~1,5em— aquell degradat de 4,6em ancorat a baix cobria el bloc SENCER: no es llegia com un esvaïment sinó com un RECTANGLE fosc damunt del text. Amb `min()` es queda igual que abans en els textos llargs i només vela la cua en els curts. El final tampoc cal que sigui gairebé opac (0.97): aquí el text ja ve TALLAT de JavaScript (`_tastLlegenda`), o sigui que el fos és estètic i no ha d'amagar res. */ .lore-teaser::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; height: min(4.6em, 62%); background: linear-gradient(to bottom, rgba(12,17,26,0) 0%, rgba(12,17,26,0.5) 58%, rgba(12,17,26,0.9) 100%); } .lore-teaser-txt { margin: 0; } /* La `desc` quan el mite encara no té llegenda escrita: text sencer, sense fos (veure el comentari d'abrirInspector3D). Una mica apagada perquè es llegeixi com un avanç i no com el contingut de debò. */ .lore-desc-plana { margin: 0 0 14px; color: rgba(255,255,255,0.62); font-style: italic; } .lore-candau { padding: 18px 16px; border-radius: 12px; background: rgba(241,196,15,0.06); border: 1px solid rgba(241,196,15,0.28); text-align: center; color: #e5c59e; } .lore-candau-icon { font-size: 1.7rem; margin-bottom: 8px; } .lore-candau-text { font-weight: 700; font-size: 0.95rem; line-height: 1.5; } .lore-candau-text strong { color: #f1c40f; } .lore-candau.breaking { animation: candauBreak 0.72s cubic-bezier(0.3,0.7,0.3,1) forwards; transform-origin: center; } @keyframes candauBreak { 0% { transform: translate(0,0) scale(1); opacity: 1; filter: brightness(1); } 14% { transform: translate(-3px,0) rotate(-1.2deg); } 28% { transform: translate(3px,0) rotate(1.2deg); } 42% { transform: translate(-2px,0) rotate(-0.8deg); } 54% { transform: translate(2px,0) rotate(0.7deg); box-shadow: 0 0 30px rgba(241,196,15,0.8); filter: brightness(1.9); border-color: rgba(255,240,180,0.95); } 66% { transform: scale(1.07); filter: brightness(2.6); opacity: 0.92; } 100% { transform: scale(0.68) translateY(-12px); opacity: 0; filter: brightness(1); } } .lore-unlocked-badge { display: block; font-family: 'Outfit',sans-serif; font-weight: 800; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: #ffe08a; margin-bottom: 12px; text-shadow: 0 0 14px rgba(241,196,15,0.6); } .lore-reveal { position: relative; overflow: hidden; animation: loreRise 0.72s cubic-bezier(0.2,0.9,0.3,1) both; } @keyframes loreRise { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } } .lore-reveal::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255,240,190,0.4) 48%, transparent 66%); transform: translateX(-120%); animation: loreSweep 1s ease-out 0.12s 1 forwards; } @keyframes loreSweep { to { transform: translateX(120%); } } /* Glow celebratori sobre l'escena de la carta */ #inspector-3d-scene.celebra { animation: sceneCelebra 1.35s ease-out; } @keyframes sceneCelebra { 0% { filter: drop-shadow(0 0 0 rgba(241,196,15,0)); } 28% { filter: drop-shadow(0 0 42px rgba(241,196,15,0.85)) brightness(1.22); } 100% { filter: drop-shadow(0 0 0 rgba(241,196,15,0)); } } .perf-lite #inspector-3d-scene.celebra { animation: none; } /* ═══════════════ MÒBIL AAA: HORITZONTAL FORÇAT + BARRA INFERIOR (només telèfons) ═══════════════ Al telèfon en VERTICAL surt el rotate-prompt (CSS pur, sense botó, no es pot tancar); l'experiència real és en HORITZONTAL amb una barra de navegació INFERIOR (títol + icones + avatar + monedes/cristalls). "Telèfon" = la dimensió curta ≤ 540px (exclou tablets/iPad). Bloc al FINAL → guanya la cascada. */ /* ---- Prompt "Gira la pantalla" (port de joc.php, ara CSS pur). ---- */ .rotate-prompt-overlay { position: fixed; inset: 0; background: rgba(10,12,16,0.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); z-index: 2000000; display: none; align-items: center; justify-content: center; touch-action: none; overscroll-behavior: contain; } .rotate-prompt-content { background: rgba(20,24,30,0.96); border: 1px solid rgba(200,155,60,0.3); box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 50px rgba(200,155,60,0.15); border-radius: 28px; width: 90%; max-width: 400px; padding: 32px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; box-sizing: border-box; } .rotate-icon-wrapper { width: 80px; height: 80px; background: rgba(200,155,60,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(200,155,60,0.25); } .rotate-device-icon { color: #d9a441; animation: rotatePromptAnimation 2.8s ease-in-out infinite; } @keyframes rotatePromptAnimation { 0% { transform: rotate(0deg); } 15% { transform: rotate(-90deg); } 60% { transform: rotate(-90deg); } 75% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } .rotate-prompt-content h3 { margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.35rem; color: #fff; font-weight: 700; letter-spacing: 0.5px; } .rotate-prompt-content p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.65); } /* NOMÉS telèfon en VERTICAL: pointer:coarse = tàctil (exclou finestres estretes d'escriptori); max-width 540 = exclou tablets. */ @media (orientation: portrait) and (max-width: 540px) and (pointer: coarse) { .rotate-prompt-overlay { display: flex !important; } /* BLOQUEIG DUR del scroll de darrere: `overflow:hidden` sol l'ignoren algunes Android amb scroll tàctil → `position:fixed` treu el body del flux (impossible scrollejar). Es reverteix sol en girar a horitzontal. */ html { overflow: hidden !important; height: 100% !important; overscroll-behavior: none !important; } body { overflow: hidden !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; overscroll-behavior: none !important; } } /* ---- Barra de navegació SUPERIOR (telèfon en HORITZONTAL: alçada ≤ 540 + tàctil, no finestres baixes d'escriptori). ---- */ @media (orientation: landscape) and (max-height: 540px) and (pointer: coarse) { header { /* barra SUPERIOR FIXA (sticky): es queda a dalt en fer scroll. Manté bg-panel + vora + radius 16 de la base. */ position: sticky !important; top: 0; bottom: auto; left: auto; right: auto; z-index: 300; padding: 4px 12px; gap: 8px; } /* Capçalera SEMPRE enganxada al telèfon: anul·lem l'auto-amagat "headroom" (el JS pot posar .header-hidden, però aquí NO el desplacem) → es queda a dalt a totes les vistes. Durant el DUEL ja s'amaga amb `body.game-active header { display:none }`, així que això és "tota la web menys el joc". */ header.header-hidden { transform: none !important; } .hamburger-btn, .menu-backdrop { display: none !important; } .brand-logo { height: 30px !important; } /* El "drawer" es converteix en fila inline dins la barra */ .header-menu { position: static !important; transform: none !important; visibility: visible !important; width: auto !important; height: auto !important; flex: 1; flex-direction: row !important; align-items: center; justify-content: flex-end; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; overflow: visible !important; padding: 0 !important; margin-left: 10px !important; gap: 10px !important; } /* Nav = píndola fosca com a desktop (manté background/vora/radius), icones AL COSTAT del text (fila) */ .main-nav { flex-direction: row !important; margin-right: auto !important; gap: 3px !important; padding: 4px !important; } .nav-btn { width: auto !important; flex-direction: row !important; align-items: center; gap: 6px; padding: 7px 12px !important; font-size: 0.68rem !important; border-radius: 14px; } .nav-btn .nav-icon-svg { width: 16px !important; height: 16px !important; } /* Perfil: PASTILLA única [avatar + monedes/cristalls + ▾] — tota ella obre el menú d'usuari en tocar-la (app.js _muntarUserCluster). El nom/nivell/XP surten al dropdown. */ #user-cluster { display: flex !important; align-items: center; gap: 6px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.14); border-radius: 22px; padding: 2px 10px 2px 3px; cursor: pointer; } #user-caret-m { display: inline-block !important; color: #e6c06a; font-size: 0.9rem; line-height: 1; transition: transform 0.2s ease; flex-shrink: 0; } .user-profile-widget { padding: 0 !important; background: none !important; border: none !important; gap: 0 !important; } .user-profile-widget .user-info { display: none !important; } /* La bombolla del cantó de l'avatar sobra al mòbil: la fletxa és el ▾ del final de la pastilla */ #user-caret { display: none !important; } .user-avatar { width: 34px !important; height: 34px !important; } /* Monedes/cristalls DINS de la pastilla: fora el seu fons/vora propis (anul·la l'estil inline) */ .economy-widget-mobile { display: none !important; } .economy-widget-desktop { display: flex !important; margin: 0 !important; padding: 0 4px !important; background: none !important; border: none !important; gap: 7px !important; } .economy-widget-desktop .currency-item { font-size: 0.82rem !important; } .header-actions { display: none !important; } /* Compacte + separat del notch als costats (barra a dalt, ja no cal espai a baix). SIMÈTRIC: mateix valor (el major dels dos insets, mín. 12px) a esquerra i dreta → el contingut no es descentra en horitzontal quan el notch queda a un costat. */ .app-container { padding: 8px max(12px, env(safe-area-inset-left), env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left), env(safe-area-inset-right)) !important; gap: 10px !important; } } /* ═══════ SELECTOR DE DIFICULTAT com SLIDESHOW al MÒBIL (1 mode alhora + fletxes als costats) ═══════ Desktop: el wrapper és transparent (display:contents) → la graella de 4 queda IGUAL. */ .prep-diff-carousel { display: contents; } .pdc-arrow { display: none; } /* fletxes només al mòbil */ .pdc-start { display: none; } /* INICIAR per targeta: només al slideshow mòbil (desktop usa el botó únic de sota) */ /* Text d'estat de cartes SOTA les minicartes. Ara es mostra TAMBÉ a desktop/tablet (abans només al stepper mòbil): la mateixa lectura "tens totes / et fan falta X cartes" a totes les mides. El stepper mòbil el reposiciona (grid-area). */ .pdc-status { display: block; text-align: center; margin-top: 6px; font-family: 'Outfit',sans-serif; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2px; line-height: 1.25; color: #eafff2; } .pdc-status.miss { color: #ffd0a8; } /* Embolcall minicartes+frase: transparent a desktop (els fills flueixen a la columna de la targeta com sempre). */ .pdc-right { display: contents; } @media (orientation: landscape) and (max-height: 540px) and (pointer: coarse) { /* Àrea de selecció de mode = 1 BANNER (stepper): es veu 1 mode alhora i les fletxes el canvien EN EL SEU LLOC (títol/subtítol/minicartes queden FIXES, no llisquen). Fons + STROKE + resplendor amb el color del tier. */ .prep-diff-carousel { display: block !important; position: relative; width: 100%; } .prep-difficulty { display: block !important; grid-template-columns: none !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; } .prep-diff-card { display: none !important; } /* stepper: només es veu l'actual */ /* Fletxes CENTRADES a les vores de l'àrea (cercle elegant, superposat) */ .pdc-arrow { display: flex; align-items: center; justify-content: center; position: absolute; z-index: 6; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0; border-radius: 50%; background: rgba(8,11,18,0.72); border: 1px solid rgba(255,255,255,0.2); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 4px 12px rgba(0,0,0,0.45); } .pdc-prev { left: 8px; } .pdc-next { right: 8px; } .pdc-arrow:active { background: rgba(20,26,38,0.95); transform: translateY(-50%) scale(0.9); } /* Targeta-BANNER de l'actual: horitzontal i alta; padding lateral ample perquè el contingut no vagi sota les fletxes */ .prep-diff-card.current { display: grid !important; width: 100%; box-sizing: border-box; min-height: 220px !important; grid-template-columns: 1fr auto; grid-template-areas: "name right" "badge right" "desc right" "start start"; align-content: center; align-items: center; column-gap: 16px; row-gap: 5px; text-align: left !important; padding: 18px 52px !important; border-radius: 18px !important; border: 2px solid rgba(255,255,255,0.14); /* fallback; el tier el sobreescriu. El FONS és el degradat del tier (regla base). */ animation: prepModeIn 0.24s ease; } .pdc-name { grid-area: name; align-self: end; font-size: 1.5rem !important; line-height: 1.1 !important; } /* Badge de recompensa: com a xip SOTA el nom i AJUSTAT al contingut (justify-self:start → no s'estira a tota la columna). */ .pdc-reward { grid-area: badge; justify-self: start; align-self: center; } .pdc-desc { grid-area: desc; align-self: start; min-height: 0 !important; margin-top: 1px !important; font-size: 0.82rem !important; line-height: 1.35 !important; } .pdc-mites { margin-top: 0 !important; gap: 8px !important; } .pdc-mite .pr-need { font-size: 0.92rem; } /* Minicartes + frase d'estat = 1 BLOC (.pdc-right) CENTRAT verticalment respecte al bloc esquerre (nom/badge/desc). */ .pdc-right { grid-area: right; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 5px; } .pdc-mite { width: 40px !important; height: 53px !important; } .pdc-pts { width: 19px !important; height: 19px !important; font-size: 0.7rem !important; } /* STROKE + resplendor + tint del color del TIER (substitueix el rectangle pla). El fons segueix sent el degradat del tier. */ .prep-diff-card[data-tier="facil"].current { border-color: rgba(123,216,143,0.9) !important; box-shadow: 0 0 0 1px rgba(123,216,143,0.22), 0 10px 26px rgba(0,0,0,0.35), inset 0 0 48px rgba(76,175,114,0.18) !important; } .prep-diff-card[data-tier="normal"].current { border-color: rgba(127,179,245,0.9) !important; box-shadow: 0 0 0 1px rgba(127,179,245,0.22), 0 10px 26px rgba(0,0,0,0.35), inset 0 0 48px rgba(63,127,216,0.18) !important; } .prep-diff-card[data-tier="dificil"].current { border-color: rgba(245,197,66,0.95) !important; box-shadow: 0 0 0 1px rgba(245,197,66,0.26), 0 10px 26px rgba(0,0,0,0.35), inset 0 0 48px rgba(224,169,46,0.18) !important; } .prep-diff-card[data-tier="extrem"].current { border-color: rgba(245,127,127,0.95) !important; box-shadow: 0 0 0 1px rgba(245,127,127,0.28), 0 10px 26px rgba(0,0,0,0.35), inset 0 0 48px rgba(216,75,75,0.2) !important; } /* INICIAR a l'ample complet, a baix */ .pdc-start { grid-area: start; display: block; width: 100%; margin-top: 12px; padding: 11px 12px; border: none; border-radius: 12px; font-family: 'Outfit',sans-serif; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.6px; color: #06121a; background: linear-gradient(135deg, #24cda3, #189b78); box-shadow: 0 4px 12px rgba(26,188,156,0.32); cursor: pointer; } .pdc-start:active { filter: brightness(1.08); } .pdc-start.off { display: none; } #btn-start-duel { display: none !important; } /* Text senzill sota les minicartes: "tens totes les cartes" o "et fan falta X cartes per jugar" (blanc) */ .pdc-status { display: block; text-align: center; margin-top: 0 !important; font-family: 'Outfit',sans-serif; font-size: 0.74rem; font-weight: 700; color: #eafff2; letter-spacing: 0.2px; line-height: 1.25; } .pdc-status.miss { color: #ffd0a8; } /* Fletxes: amagades als extrems (no circular): sense prev al primer mode, sense next a l'últim */ .pdc-arrow.hidden-arrow { display: none !important; } /* (REVERTIT 2026-07-05) El panell "Juga ara" manté el seu fons FOSC premium; el color "xulo" del tier viu DINS de la caixa (degradat del tier + stroke + resplendor intern), no al fons del panell. */ } @keyframes prepModeIn { from { opacity: 0.2; transform: scale(0.985); } to { opacity: 1; transform: scale(1); } } /* ═══════ Carta del Dia — banner de només TEXT (Mitolari), CENTRAT i amb el MATEIX format que el sobre. overflow:hidden + max-width:100% → mai desplaça la web. La carta ja no es mostra (#mercado-ofertas va ocult). ═══════ */ .carta-dia-banner { display: flex; flex-direction: row; align-items: center; gap: 26px; text-align: left; position: relative; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; /* Fons il·lustrat de la Carta del Dia + una vela fosca perquè el text (títol daurat, subtítol clar) es llegeixi bé. */ background: linear-gradient(90deg, rgba(10,8,5,0.72) 0%, rgba(10,8,5,0.52) 45%, rgba(10,8,5,0.30) 100%), url("assets/carta_del_dia_background.jpg"); background-size: cover; background-position: center; border: 1px solid rgba(200,155,60,0.25); border-radius: 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); padding: 40px 60px 40px 68px; margin: 0 0 24px; /* marges amplis als 4 costats; la carta respira */ } .carta-dia-banner::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 2px; background: linear-gradient(90deg, transparent, rgba(200,155,60,0.7), transparent); border-radius: 2px; } .cdb-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .cdb-title { font-family: 'Outfit', sans-serif; font-size: 2.2rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; background: linear-gradient(135deg, #c89b3c, #f0e6d2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin: 0 0 10px; text-shadow: 0 0 30px rgba(200,155,60,0.2); width: 100%; text-align: left; } .cdb-subtitle { color: #fff; font-size: 1.08rem; line-height: 1.5; text-align: left; width: 100%; max-width: 540px; margin: 0 0 22px; } /* CTA: botó + "Rota en X" en columna; el text queda CENTRAT respecte l'ample del botó de dalt */ .cdb-cta { display: flex; flex-direction: column; align-items: center; align-self: flex-start; } .carta-dia-banner .daily-buy-row { display: flex; justify-content: center; width: auto; margin: 0; } /* Botó de compra AZUL amb lletres blanques — IGUAL que el de "Comprar sobre extra" (.btn-sobre-comprar-simple). */ .carta-dia-banner .daily-buy-row .daily-offer-btn { width: auto !important; padding: 12px 26px !important; border-radius: 50px !important; white-space: normal; text-align: center; line-height: 1.25; background: linear-gradient(135deg, #3aa8ff, #2563eb) !important; border: 1px solid rgba(255,255,255,0.28) !important; color: #fff !important; font-family: 'Outfit', sans-serif !important; font-size: 0.9rem !important; font-weight: 800 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; box-shadow: 0 6px 18px rgba(37,99,235,0.35) !important; } .carta-dia-banner .daily-buy-row .daily-offer-btn:hover:not(:disabled) { background: linear-gradient(135deg, #4db3ff, #2f6fe0) !important; filter: brightness(1.05); } /* "Rota en Xh Ym" — text SIMPLE sota el botó (sense badge/pill, només text tènue) */ /* Contador de la Carta del Dia amb el MATEIX estil que el badge del Sobre del Dia (.cooldown-timer-badge): píndola fosca amb vora daurada i temps en daurat. */ .cdb-rota { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.45); padding: 8px 16px; border-radius: 30px; border: 1px solid rgba(200,155,60,0.35); box-shadow: 0 4px 10px rgba(0,0,0,0.3); font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 800; color: #ffd875; text-shadow: 0 0 8px rgba(255,216,117,0.3); letter-spacing: 0.5px; opacity: 1; } /* Contador de la Carta del Dia: label a l'ESQUERRA del badge (fila), no a sobre. Centrat sota el botó. */ .cdb-cooldown { margin-top: 14px; width: auto; flex-direction: row; align-items: center; gap: 10px; } /* Carta del dia a la DRETA (renderMercado la pinta a #mercado-ofertas): mida fixa + ràtio 63:88, sense aura ni animació. Alta especificitat (.carta-dia-banner #mercado-ofertas ...) per guanyar `#mercado-ofertas > div { max-width:220px }`. */ .cdb-card { flex: 0 0 auto; } .carta-dia-banner #mercado-ofertas { display: flex; justify-content: center; align-items: center; width: auto; min-height: 0; min-width: 0; } .carta-dia-banner .daily-card-aura { display: none !important; } .carta-dia-banner #mercado-ofertas > .daily-card-pedestal { width: auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; background: none !important; } /* La carta a la seva mida NATURAL (186×260, ràtio 63:88 perfecta) i escalada amb zoom → mai es deforma ni s'estreteix. (Forçar width + height:auto la feia créixer d'alçada per culpa del container-type:inline-size del .card-mito.) */ .carta-dia-banner #mercado-ofertas .card-mito { zoom: 1.2 !important; animation: none !important; } /* Sense el hover que aixeca la carta (translateY/scale): són cartes d'APARADOR, no interactives (banner + lightbox de compra) */ .carta-dia-banner .card-mito:hover, .carta-claim .card-mito:hover { transform: none !important; } /* ═══════ INICI/MITOLARI a MÒBIL HORITZONTAL: banners del SOBRE i la CARTA del dia EN HORITZONTAL ═══════ Text (títol+subtítol+botons) en COLUMNA compacta a l'ESQUERRA; sobre/carta ABSOLUTS a la DRETA (fora del flux → no estiren res) i encongits amb `zoom` (redueix caixa+visual sense deformar, a diferència de scale). */ @media (orientation: landscape) and (max-height: 540px) and (pointer: coarse) { /* --- SOBRE del dia (Inici) --- */ .sobres-container-inline { border-radius: 20px !important; } /* mateixos corners que la Carta del Dia en mòbil */ /* Compte enrere (Sobre i Carta) una mica més petit en mòbil: etiqueta i hores. */ .cooldown-label { font-size: 0.82rem !important; } .cooldown-timer-badge .booster-timer { font-size: 0.92rem !important; } .sobre-selector { position: relative; display: flex !important; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px !important; min-height: 218px; width: 100%; max-width: 600px; margin: 0 auto; padding: 6px 174px 6px 12px !important; /* espai a la dreta per al sobre + més marge entre text i sobre */ } .sobre-header { text-align: left !important; margin: 0 !important; } .sobre-title { font-size: 1.5rem !important; margin: 0 !important; } .sobre-subtitle { font-size: 0.88rem !important; text-align: left !important; margin: 3px 0 0 !important; line-height: 1.4 !important; max-width: 330px !important; } /* mateixa mida que .cdb-subtitle (Carta del Dia); una mica més estret perquè les línies no siguin tan llargues */ #btn-open-booster { width: auto !important; margin: 9px 0 0 !important; padding: 11px 28px !important; font-size: 0.95rem !important; } .sobre-comprar-simple { margin: 6px 0 0 !important; } /* Botó "desbloquejar/comprar per 1000 monedes" (anul·la l'estil inline gran de l'estat cooldown) */ #btn-comprar-sobre { font-size: 0.72rem !important; padding: 13px 16px !important; width: auto !important; } .sobre-divider { display: none !important; } .sobre-selector .booster-pack-wrapper { position: absolute !important; right: -12px; top: 50%; transform: translateY(-60%); padding: 0 !important; margin: 0 !important; min-height: 0 !important; } .sobre-selector .booster-pack { zoom: 0.52; } /* sobre 3D una mica més petit i desplaçat a la dreta */ /* --- CARTA del dia (Mitolari): text a l'esquerra + carta a la dreta, compacte en horitzontal --- */ .carta-dia-banner { padding: 24px 40px 24px 60px !important; gap: 30px !important; margin: 0 0 12px !important; border-radius: 20px !important; } /* marges amplis als 4 costats */ .carta-dia-banner .cdb-title { font-size: 1.5rem !important; letter-spacing: 1px !important; margin-bottom: 6px !important; } .carta-dia-banner .cdb-subtitle { font-size: 0.88rem !important; line-height: 1.4 !important; margin-bottom: 12px !important; max-width: 330px !important; } /* una mica més estret perquè les línies no siguin tan llargues */ .carta-dia-banner .daily-buy-row .daily-offer-btn { font-size: 0.72rem !important; padding: 10px 22px !important; } /* mateixa mida de text que el botó del Sobre del Dia */ .carta-dia-banner .cdb-rota { margin-top: 10px !important; font-size: 0.76rem !important; } .carta-dia-banner #mercado-ofertas .card-mito { zoom: 0.95 !important; } /* mida natural escalada → ràtio 63:88 perfecte */ } /* ═══════════════ El Camí del Bestiari — pantalla de rang/XP tipus "journey" (overlay des de l'avatar) ═══════════════ Es crea des d'app.js (abrirPerfilUsuario). Reutilitza .custom-lightbox-backdrop (fons + centrat + bloqueig d'scroll). El sender és un SVG (trail) + nodes/etiquetes HTML absoluts que comparteixen una graella px fixa de 400 d'ample. */ .journey-panel { position: relative; width: min(96vw, 720px); max-height: 92vh; overflow-y: auto; overflow-x: hidden; background: radial-gradient(125% 55% at 50% 0%, #14233f 0%, #070b13 62%); border: 1px solid rgba(200, 155, 60, 0.22); border-radius: 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05); opacity: 0; transform: scale(0.92); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.28s ease; -webkit-overflow-scrolling: touch; font-family: 'Outfit', sans-serif; } .custom-lightbox-backdrop.active .journey-panel { opacity: 1; transform: scale(1); } .journey-titleband { text-align: center; padding: 20px 20px 6px; } .journey-titleband .jt-main { font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 1.18rem; background: linear-gradient(135deg, #c89b3c, #f0e6d2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .journey-titleband .jt-sub { font-size: 0.78rem; color: #8ba0b6; margin-top: 3px; } .journey-head { position: sticky; top: 0; z-index: 4; padding: 10px 16px; background: #0d1a2e; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* Capçalera COMPACTA en 2 columnes: esquerra avatar+nom+nivell · dreta XP total + barra + "falten" apilats */ .jh-row { display: flex; align-items: center; gap: 12px; } .jh-id { flex: 1 1 auto; min-width: 0; } .jh-name { font-size: 1.1rem; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jh-lvl { font-size: 0.82rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jh-prog { flex: 0 1 250px; min-width: 150px; text-align: right; } .jh-xptot { font-size: 0.62rem; letter-spacing: 0.5px; text-transform: uppercase; color: #8ba0b6; } .jh-xptot b { color: #f1c40f; font-size: 1.05rem; font-weight: 800; letter-spacing: 0; } .jh-remain { font-size: 0.67rem; color: #8ba0b6; margin-top: 2px; line-height: 1.3; } /* Botó de tancar el journey: fill del backdrop full-screen → cantonada SUP. DRETA de la PANTALLA (no del panell centrat) */ .journey-close { position: absolute; top: 14px; right: max(16px, env(safe-area-inset-right)); z-index: 3; width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.16); color: #cdd6df; font-size: 1.05rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; } .journey-close:hover { background: rgba(0, 0, 0, 0.6); color: #fff; } .journey-avatar { width: 50px; height: 50px; border-radius: 50%; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: radial-gradient(circle at 50% 35%, #1b2637, #0c131f); } .journey-avatar img { width: 100%; height: 100%; object-fit: cover; } .journey-xpbar { height: 10px; border-radius: 20px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; margin: 4px 0 3px; } .journey-xpfill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, #1abc9c, #9b59b6); transition: width 0.85s cubic-bezier(0.23, 1, 0.32, 1); } .journey-canvas { position: relative; margin: 0 auto; } /* amplada/alçada INLINE (sender horitzontal); el SVG i els nodes comparteixen graella px */ .journey-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin: 6px 0 4px; padding: 2px 0 8px; } .journey-node { position: absolute; transform: translate(-50%, -50%); z-index: 2; border-radius: 50%; box-sizing: border-box; line-height: 1; display: flex; align-items: center; justify-content: center; background: #0d1524; } .journey-node > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .journey-node img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .journey-node--current { animation: journeyPulse 2.3s ease-in-out infinite; } @keyframes journeyPulse { 0% { box-shadow: 0 0 0 0 var(--pc, rgba(195, 204, 214, 0.5)); } 70% { box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } } .journey-here { position: absolute; top: -27px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.5px; color: #0a0e16; padding: 3px 9px; border-radius: 20px; } .journey-badge { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.66rem; border: 2px solid #0d1524; box-sizing: border-box; } .journey-badge.ok { background: #1fbf8f; color: #062015; font-weight: 800; } .journey-badge.lock { background: #25303f; } /* Etiqueta CENTRADA sobre el node (a dalt o a baix, transform inline). Camí horitzontal. */ .journey-label { position: absolute; width: 98px; text-align: center; } .journey-ltitle { font-size: 0.72rem; font-weight: 800; line-height: 1.12; } .journey-lrew { margin-top: 2px; font-size: 0.62rem; display: flex; flex-wrap: wrap; gap: 1px 5px; align-items: center; justify-content: center; line-height: 1.22; } .journey-foot { margin: 6px 16px 20px; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.76rem; color: #9aa7b4; text-align: center; line-height: 1.5; } /* ═══════ Toast "com evoluciona el teu nivell": XP de compte guanyada + barra del rang (després d'un duel o de pujar carta) ═══════ NO bloquejant, a dalt del tot (z-index sobre les celebracions .clu-overlay/.levelup-overlay, sota el rotate-prompt). Es toca → obre el Camí. */ .rang-toast { position: fixed; top: 14px; left: 50%; transform: translate(-50%, -150%); z-index: 1900000; width: min(92vw, 380px); box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; background: linear-gradient(160deg, #16233a, #0b1220); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); opacity: 0; transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.4s ease; font-family: 'Outfit', sans-serif; } .rang-toast.show { transform: translate(-50%, 0); opacity: 1; } .rang-toast.rankup { border-color: rgba(241, 196, 15, 0.55); box-shadow: 0 16px 46px rgba(241, 196, 15, 0.28), 0 16px 40px rgba(0, 0, 0, 0.5); } .rt-emoji { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: radial-gradient(circle at 50% 35%, #1b2637, #0c131f); border: 2px solid #c3ccd6; } .rt-body { flex: 1; min-width: 0; } .rt-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .rt-xp { font-weight: 800; font-size: 0.95rem; color: #fff; flex: none; } .rt-rank { font-size: 0.74rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-bar { height: 8px; border-radius: 20px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; margin: 5px 0 4px; } .rt-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, #1abc9c, #9b59b6); transition: width 0.9s cubic-bezier(0.23, 1, 0.32, 1); } .rang-toast.rankup .rt-fill { background: linear-gradient(90deg, #f1c40f, #e0a92e); } .rt-sub { font-size: 0.7rem; color: #9aa7b4; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; } .rang-toast.rankup .rt-sub { color: #ffd875; font-weight: 700; } /* Insígnia "Nivell X" que substitueix el botó a la celebració de pujada: gradient metàl·lic de relleny segons el tier. */ .clu-levelbadge { display: inline-block; margin-top: 16px; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.18rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 9px 28px; border-radius: 24px; /* Per defecte = PLATA (N2): gradient plata + lletra NEGRA */ color: #0a0e16; background: linear-gradient(135deg, #f6f9fc 0%, #cdd6df 46%, #a7b3bf 100%); border: 1.5px solid rgba(255, 255, 255, 0.6); box-shadow: 0 5px 18px rgba(0, 0, 0, 0.38), 0 0 22px rgba(200, 210, 225, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.75); } /* N3 = OR: gradient or de base + lletra BLANCA */ .clu-overlay.t3 .clu-levelbadge { color: #fff; background: linear-gradient(135deg, #f7cf57 0%, #e0a92e 52%, #b8791a 100%); border-color: rgba(255, 240, 200, 0.65); /* MATEIXA petjada de glow que la plata (radi 22px) → mateixa mida visual que la insígnia de Nivell 2 */ box-shadow: 0 5px 18px rgba(0, 0, 0, 0.38), 0 0 22px rgba(241, 196, 15, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45); text-shadow: 0 1px 2px rgba(110, 60, 0, 0.5); } /* Fitxa de la carta (inspector) — TOTS els nivells: el BLOC DRET (dossier) més ESTRET i tot el contingut CENTRAT (la graella .inspector-layout-container ja té justify-content:center → en encongir el dossier, la carta + el dossier queden centrats). Abans només s'aplicava a N3 (.is-lvl3) → N1/N2 quedaven amb la maquetació ampla i desalineada (sobretot en mòbil). Ara universal → mateixos marges/amplada de la 2a columna als 3 tiers. */ #inspector-3d-modal .inspector-details-panel { max-width: min(880px, calc(100vw - 420px)); } /* El dossier ja és estret → ACOSTEM la carta al bloc de descripció (abans, amb el gap de 40px, quedava massa aire entremig). */ #inspector-3d-modal .inspector-layout-container { gap: 24px; } /* En MÒBIL (fitxa apilada: carta a dalt + dossier a baix) el dossier encara MÉS ESTRET i centrat, perquè no ocupi tot l'ample del telèfon. max-width no xoca amb el width:100%/auto !important de les regles mòbils (el limita), i el align-items:center (columna) / justify-content:center (fila) de la graella el centren. */ @media (max-width: 768px), (max-height: 600px) { /* NOMÉS estrenyem; el centrat el fan align-items:center (columna) i justify-content:center (fila). NO usar margin:auto: en fila (mòbil horitzontal) un margin-left:auto EMPENY el dossier lluny de la carta (separació). */ #inspector-3d-modal .inspector-details-panel { max-width: 440px !important; } /* i menys gap carta ↔ dossier també en mòbil (guanya el gap:16/20px !important de les regles mòbils per especificitat d'id) */ #inspector-3d-modal .inspector-layout-container { gap: 12px !important; } } /* (El foil ara és la VORA d'or dinàmica del Nivell 3 — vegeu .card-mito.level-3::before amb el conic --gold-a, que el JS mou en girar la carta a la fitxa. S'ha retirat l'antic overlay .mito-foil de làmina de llum.) */ /* ═══════════════ CELEBRACIÓ: MITOLARI (col·lecció) COMPLETAT AL 100% ═══════════════ Overlay daurat AAA (trofeu + confeti + barra plena) quan el jugador descobreix l'últim mite. */ .coleccio-completa-card { text-align: center; max-width: 440px; position: relative; overflow: hidden; background: linear-gradient(165deg, rgba(40,30,8,0.97), rgba(12,9,4,0.98)) !important; border: 1px solid rgba(245,197,66,0.5) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 60px rgba(245,197,66,0.25) !important; } .coleccio-completa-card .cc-trophy { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 4px 14px rgba(245,197,66,0.5)); animation: ccTrophy 2.4s ease-in-out infinite; } @keyframes ccTrophy { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } } .coleccio-completa-card .cc-title { margin: 10px 0 4px; font-family: 'Outfit',sans-serif; font-weight: 900; font-size: 2rem; letter-spacing: 1px; text-transform: uppercase; background: linear-gradient(135deg,#f5c542,#fff3c4,#e0a92e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .coleccio-completa-card .cc-sub { margin: 0 0 8px; font-size: 1rem; color: #f0e6d2; } .coleccio-completa-card .cc-desc { margin: 0 0 16px; font-size: 0.86rem; color: var(--text-secondary); line-height: 1.45; } .coleccio-completa-card .cc-bar { display: block; height: 14px; border-radius: 9px; background: rgba(255,255,255,0.1); overflow: hidden; border: 1px solid rgba(245,197,66,0.3); } .coleccio-completa-card .cc-fill { display: block; height: 100%; width: 0; border-radius: 9px; background: linear-gradient(90deg,#f5c542,#e0a92e); box-shadow: 0 0 14px rgba(245,197,66,0.6); animation: ccFill 1.1s cubic-bezier(0.22,1,0.36,1) 0.2s forwards; } @keyframes ccFill { to { width: 100%; } } .coleccio-completa-card .cc-count { margin: 9px 0 18px; font-family: 'Outfit',sans-serif; font-weight: 800; color: #ffe08a; } .coleccio-completa-card .cc-btn { width: 100%; background: linear-gradient(135deg,#f5c542,#e0a92e) !important; color: #2a1a05 !important; border: none !important; font-weight: 800; } /* Confeti que cau des de dalt de la targeta (overflow:hidden la retalla als límits) */ .coleccio-completa-card .cc-confetti { position: absolute; top: 0; left: 0; right: 0; height: 0; pointer-events: none; z-index: 2; } .coleccio-completa-card .cc-piece { position: absolute; top: -18px; width: 9px; height: 14px; border-radius: 2px; opacity: 0.92; animation: ccFall var(--d,3s) linear var(--delay,0s) infinite; } @keyframes ccFall { 0% { transform: translateY(-20px) translateX(0) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(460px) translateX(var(--x,0)) rotate(720deg); opacity: 0; } } /* perf-lite (mòbils febles): res d'animacions; la barra queda plena i sense confeti */ .perf-lite .coleccio-completa-card .cc-trophy, .perf-lite .coleccio-completa-card .cc-piece { animation: none !important; } .perf-lite .coleccio-completa-card .cc-confetti { display: none !important; } .perf-lite .coleccio-completa-card .cc-fill { animation: none !important; width: 100% !important; } /* ═══════════════ TROFEUS (pantalla del menú d'usuari) ═══════════════ */ .trofeus-overlay { position: fixed; inset: 0; z-index: 100002; overflow-y: auto; -webkit-overflow-scrolling: touch; background: radial-gradient(1000px 560px at 80% -8%, rgba(245,197,66,0.12), transparent 60%), rgba(8,11,18,0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: max(18px, env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom)); } .trofeus-panel { max-width: 860px; margin: 0 auto; } /* La capçalera SCROLLA amb el contingut (abans era sticky per damunt de 900px). Era sticky i TRANSPARENT, així que les targetes passaven per sota del títol daurat i es veia com un error de pintat. Ja estava desactivada al mòbil "perquè donava problemes"; ara ho està a tot arreu i el problema desapareix d'arrel. La X se'n va cap amunt en scrollejar, però el fons segueix tancant al clic i s'hi ha afegit ESC. */ .trofeus-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 12px; margin-bottom: 8px; } .trofeus-title { margin: 0; font-family: 'Outfit',sans-serif; font-weight: 900; letter-spacing: 0.5px; font-size: 1.5rem; background: linear-gradient(135deg,#ffe38a,#e0a92e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .trofeus-close { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.07); color: #e6eef5; font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; } .trofeus-close:hover { background: rgba(255,255,255,0.14); } .trofeus-loading { text-align: center; color: var(--text-secondary); font-family: 'Outfit',sans-serif; padding: 50px 0; } .trofeus-resum { text-align: center; color: var(--text-secondary); font-family: 'Outfit',sans-serif; font-size: 0.9rem; margin: 0 0 18px; } .trofeus-resum b { color: #ffe08a; } .trofeus-cat { font-family: 'Outfit',sans-serif; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem; color: #9aa7b5; margin: 18px 4px 10px; } .trofeus-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .troficard { display: flex; gap: 13px; padding: 14px; border-radius: 15px; background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 8px 22px rgba(0,0,0,0.3); font-family: 'Outfit',sans-serif; } .troficard.maxed { border-color: rgba(245,197,66,0.5); box-shadow: 0 0 0 1px rgba(245,197,66,0.2), 0 8px 22px rgba(0,0,0,0.35); } /* La medalla/copa és una icona SVG (no un quadre amb número): el contenidor només la centra i la mesura. */ .troficard .tc-medal { flex: none; width: 50px; height: 50px; display: grid; place-items: center; } .troficard .tc-medal .tc-ic { width: 100%; height: 100%; display: block; } .troficard .tc-main { flex: 1 1 auto; min-width: 0; } .troficard .tc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .troficard .tc-nm { font-weight: 800; font-size: 0.98rem; color: #eef2f8; text-transform: uppercase; letter-spacing: 0.4px; } .troficard .tc-pips { display: inline-flex; gap: 4px; flex: none; } .troficard .tpip { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.16); } .troficard .tpip.on { background: linear-gradient(135deg,#ffe38a,#e0a92e); box-shadow: 0 0 6px rgba(245,197,66,0.5); } .troficard .tc-ds { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.35; margin: 2px 0 9px; } .troficard .tc-bar { height: 9px; border-radius: 6px; background: rgba(255,255,255,0.1); overflow: hidden; border: 1px solid rgba(255,255,255,0.08); } .troficard .tc-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg,#00d2d3,#3aa8ff); box-shadow: 0 0 8px rgba(0,210,211,0.45); transition: width 0.7s cubic-bezier(0.22,1,0.36,1); } .troficard .tc-fill.g { background: linear-gradient(90deg,#ffe38a,#e0a92e); box-shadow: 0 0 8px rgba(245,197,66,0.5); } .troficard .tc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 0.76rem; } .troficard .tc-prog { color: #cdd6df; font-weight: 700; font-variant-numeric: tabular-nums; } .troficard .tc-rw { color: var(--text-secondary); text-align: right; } .troficard .tc-rw b { color: #7fe9ea; } @media (max-width: 680px) { .trofeus-grid { grid-template-columns: 1fr; } } /* Mòbil (telèfon, sobretot horitzontal): el contingut NO va d'extrem a extrem — columna centrada més estreta (les targetes queden compactes en 2 columnes). I la capçalera NO és sticky aquí (donava problemes al mòbil). */ @media (max-width: 900px) { .trofeus-panel { max-width: 600px; } } /* Celebració de TROFEU desbloquejat: reaprofita l'estructura de .coleccio-completa-card (confeti + targeta daurada) */ /* A la celebració, la medalla/copa també és icona SVG (contenidor gran, centrat). */ .coleccio-completa-card .cc-medal { width: 68px; height: 68px; margin: 0 auto; display: grid; place-items: center; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4)); } .coleccio-completa-card .cc-medal .tc-ic { width: 100%; height: 100%; display: block; } .coleccio-completa-card .cc-title.sm { font-size: 1.5rem; }