/* Dueño de Curramba · racha, misiones, cofres, marcos, campañas, compartir, liga, app instalable */

/* ═════════ MARCOS DEL AVATAR ═════════ */
.marco { position: relative; }
/* Con marco, el personaje queda completo DENTRO del círculo (no se sale por arriba) */
.marco > img { transform: none !important; animation: none !important; width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 20%; clip-path: circle(50% at 50% 50%); border-radius: 50%; }
.marco::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; padding: 5px; pointer-events: none; z-index: 2;
  background: var(--mg, #999); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.marco::after { position: absolute; right: -8px; top: -10px; font-size: .9em; line-height: 1; z-index: 3; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.jug-fila .marco::before, .quien .marco::before { inset: -4px; padding: 3px; }
.jug-fila .marco::after, .quien .marco::after, .fila-rank .marco::after { font-size: .75rem; right: -6px; top: -8px; }
.perfil-av.marco::before { inset: -12px; padding: 9px; }
.perfil-av.marco::after { font-size: 2.4rem; right: -6px; top: -14px; }
.marco-madera { --mg: repeating-linear-gradient(45deg, #92400e 0 6px, #b45309 6px 12px); }
.marco-bronce { --mg: linear-gradient(135deg, #7c2d12, #f59e0b, #7c2d12, #fdba74); }
.marco-plata { --mg: linear-gradient(135deg, #64748b, #f8fafc, #94a3b8, #e2e8f0); }
.marco-oro { --mg: linear-gradient(135deg, #a16207, #fde68a, #ca8a04, #fef3c7, #a16207); }
.marco-oro::after { content: '✨'; }
.marco-rejas { --mg: repeating-linear-gradient(90deg, #1f2937 0 4px, #9ca3af 4px 8px); }
.marco-rejas::after { content: '🚔'; }
.marco-hotelero { --mg: linear-gradient(135deg, #b91c1c, #fde68a, #b91c1c); }
.marco-hotelero::after { content: '🏨'; }
.marco-zona_ja { --mg: conic-gradient(from 0deg, #1d4ed8, #93c5fd, #1e3a8a, #bfdbfe, #1d4ed8); }
.marco-zona_ja::after { content: '💎'; }
.marco-carnaval, .marco-c_carnaval { --mg: linear-gradient(90deg, #e11d48, #f59e0b, #22c55e, #06b6d4, #a855f7, #e11d48); }
.marco-carnaval::before, .marco-c_carnaval::before { background-size: 300% 100%; animation: marcoCorre 3s linear infinite; }
.marco-carnaval::after, .marco-c_carnaval::after { content: '🎭'; }
.marco-verdugo { --mg: linear-gradient(135deg, #111827, #6b7280, #111827, #ef4444); }
.marco-verdugo::after { content: '💀'; }
.marco-campeon { --mg: linear-gradient(135deg, #facc15, #fff7ae, #eab308, #fde047); }
.marco-campeon::after { content: '🥇'; }
.marco-corona { --mg: conic-gradient(#fde68a, #f59e0b, #fef9c3, #d97706, #fde68a); }
.marco-corona::after { content: '👑'; right: auto; left: 50%; top: -18px; transform: translateX(-50%); }
.perfil-av.marco-corona::after { top: -30px; }
.marco-leyenda { --mg: conic-gradient(#a855f7, #ec4899, #fde68a, #22d3ee, #a855f7); }
.marco-leyenda::before { animation: marcoGira 4s linear infinite; }
.marco-leyenda::after { content: '🌟'; }
.marco-fuego7 { --mg: linear-gradient(0deg, #dc2626, #f97316, #fde047, #f97316, #dc2626); }
.marco-fuego7::before { background-size: 100% 300%; animation: marcoSube 1.6s linear infinite; }
.marco-fuego7::after { content: '🔥'; }
.marco-fuego30 { --mg: linear-gradient(0deg, #1e3a8a, #3b82f6, #a5f3fc, #3b82f6, #1e3a8a); }
.marco-fuego30::before { background-size: 100% 300%; animation: marcoSube 1.4s linear infinite; }
.marco-fuego30::after { content: '🔥'; filter: hue-rotate(190deg) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.marco-fuego100 { --mg: conic-gradient(#f97316, #fde047, #ec4899, #8b5cf6, #22d3ee, #f97316); }
.marco-fuego100::before { animation: marcoGira 2.5s linear infinite; box-shadow: 0 0 18px #f97316; }
.marco-fuego100::after { content: '☄️'; }
.marco-c_flores { --mg: repeating-conic-gradient(#f472b6 0 20deg, #fde047 20deg 40deg, #fb7185 40deg 60deg); }
.marco-c_flores::after { content: '🌸'; }
.marco-c_cumple { --mg: repeating-linear-gradient(45deg, #f59e0b 0 6px, #fef3c7 6px 10px, #ef4444 10px 16px); }
.marco-c_cumple::after { content: '🎂'; }
.marco-c_navidad { --mg: repeating-linear-gradient(45deg, #dc2626 0 6px, #fff 6px 10px, #16a34a 10px 16px); }
.marco-c_navidad::after { content: '🎄'; }
.marco-c_seleccion { --mg: linear-gradient(180deg, #facc15 0 50%, #1d4ed8 50% 75%, #dc2626 75%); }
.marco-c_seleccion::after { content: '⚽'; }
.marco-c_especial { --mg: conic-gradient(#22d3ee, #a855f7, #f472b6, #22d3ee); }
.marco-c_especial::after { content: '⭐'; }
@keyframes marcoCorre { to { background-position: 300% 0; } }
@keyframes marcoSube { to { background-position: 0 -300%; } }
@keyframes marcoGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .marco::before { animation: none !important; } }
.apodo { display: block; font-size: .72rem; font-weight: 800; color: #fde68a; opacity: .9; }

/* ═════════ BANNER DE CAMPAÑA ═════════ */
.banner-campana { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; color: #fff; overflow: hidden;
  background: linear-gradient(120deg, color-mix(in srgb, var(--cc) 70%, #000), color-mix(in srgb, var(--cc) 35%, #1b1236)); border: 1px solid color-mix(in srgb, var(--cc) 60%, #fff); box-shadow: 0 5px 0 rgba(0,0,0,.3); }
.banner-campana::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); background-size: 250% 100%; animation: brillo 3.5s ease-in-out infinite; pointer-events: none; }
@keyframes brillo { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.banner-campana .bc-emo { font-size: 2.2rem; animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(1.15) rotate(-6deg); } }
.banner-campana b { display: block; font-size: 1.02rem; } .banner-campana small { display: block; color: rgba(255,255,255,.88); font-size: .82rem; }
.bc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.bc-chips em { font-style: normal; font-weight: 900; font-size: .72rem; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.35); border-radius: 99px; padding: 2px 8px; }
.bc-fin { margin-left: auto; font-weight: 900; font-size: .8rem; white-space: nowrap; background: rgba(0,0,0,.35); border-radius: 10px; padding: 5px 8px; }
.bc-fin:empty { display: none; }

/* ═════════ TU DÍA EN CURRAMBA (resumen corto en jugar.php) ═════════ */
.mi-dia { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; margin: 0 0 12px; border-radius: 16px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, rgba(249,115,22,.28), rgba(168,85,247,.22)); border: 1px solid rgba(249,115,22,.5); box-shadow: 0 5px 0 rgba(0,0,0,.3); }
.mi-dia .llama { font-size: 2rem; line-height: 1; text-align: center; } .mi-dia .llama b { display: block; font-size: 1.1rem; font-family: 'Lilita One', system-ui; }
.mi-dia .llama.apagada { filter: grayscale(1); opacity: .6; }
.mi-dia .md-info b { display: block; } .mi-dia .md-info small { color: #fed7aa; font-size: .8rem; }
.mi-dia .md-mis { display: flex; gap: 4px; margin-top: 5px; } .mi-dia .md-mis i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; } .mi-dia .md-mis i span { display: block; height: 100%; background: #22c55e; }
.mi-dia .md-accion { font-weight: 900; font-size: .85rem; background: #f97316; padding: 8px 12px; border-radius: 12px; box-shadow: 0 3px 0 #9a3412; white-space: nowrap; }
.mi-dia .md-accion.pulsa { animation: pulsa 1.2s ease-in-out infinite; }
@keyframes pulsa { 50% { transform: scale(1.07); box-shadow: 0 3px 0 #9a3412, 0 0 0 6px rgba(249,115,22,.3); } }

/* ═════════ RECOMPENSAS (Mi cuenta) ═════════ */
.recomp { display: grid; gap: 12px; margin-top: 12px; }
.recomp .tarjeta { padding: 16px; }
.recomp h2 { margin: 0 0 10px; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.recomp h2 small { margin-left: auto; font-size: .8rem; color: var(--suave); font-weight: 700; }
.racha-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.racha-num { position: relative; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 70%, #fde047, #f97316 55%, #b91c1c); box-shadow: 0 0 30px rgba(249,115,22,.55), 0 5px 0 rgba(0,0,0,.35); }
.racha-num b { font-family: 'Lilita One', system-ui; font-size: 2.3rem; line-height: 1; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.racha-num small { position: absolute; bottom: 12px; font-size: .62rem; font-weight: 900; color: #fff; }
.racha-num::before { content: '🔥'; position: absolute; top: -22px; font-size: 1.8rem; animation: latido 1.2s ease-in-out infinite; }
.racha-num.apagada { background: radial-gradient(circle, #64748b, #334155); box-shadow: none; } .racha-num.apagada::before { filter: grayscale(1); animation: none; }
.racha-txt { flex: 1; min-width: 200px; } .racha-txt b { font-size: 1.05rem; } .racha-txt p { margin: 3px 0 0; color: var(--suave); font-size: .85rem; }
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0 10px; }
.semana div { text-align: center; padding: 6px 0; border-radius: 10px; background: rgba(255,255,255,.06); font-size: .72rem; font-weight: 800; color: var(--suave); }
.semana div span { display: block; font-size: 1.2rem; }
.semana div.si { background: linear-gradient(180deg, rgba(249,115,22,.45), rgba(249,115,22,.15)); color: #fff; }
.semana div.hoy { outline: 2px solid #fde68a; }
.btn-bono { position: relative; overflow: hidden; }
.btn-bono:not(:disabled) { animation: pulsa 1.3s ease-in-out infinite; background: linear-gradient(135deg, #f97316, #ea580c); border-color: #fdba74; }
.hito { font-size: .82rem; color: #fde68a; margin-top: 8px; }
.recuperar { margin-top: 10px; padding: 12px; border-radius: 14px; background: rgba(239,68,68,.15); border: 1px dashed #f87171; font-size: .88rem; }
.recuperar .fila { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.monedas-chip { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; background: rgba(250,204,21,.15); border: 1px solid rgba(250,204,21,.45); color: #fde68a; border-radius: 99px; padding: 4px 10px; font-size: .9rem; }

.mision { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); margin: 6px 0; }
.mision .dif { font-size: 1.4rem; }
.mision b { font-size: .92rem; } .mision small { display: block; color: var(--suave); font-size: .75rem; }
.mision .mis-barra { height: 8px; border-radius: 5px; background: rgba(255,255,255,.12); margin-top: 5px; overflow: hidden; } .mision .mis-barra i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #86efac); border-radius: 5px; transition: width 1s; }
.mision em { font-style: normal; font-weight: 900; font-size: .78rem; color: #fde68a; text-align: right; white-space: nowrap; }
.mision.hecha { background: rgba(34,197,94,.14); } .mision.hecha b { text-decoration: line-through; opacity: .8; }
.mis-bono { font-size: .82rem; color: var(--suave); margin: 8px 0 0; }

.cofres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cofre { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; text-align: center;
  background: rgba(255,255,255,.06); border: 2px dashed rgba(255,255,255,.15); font-size: .72rem; color: var(--suave); }
.cofre.lleno { border-style: solid; color: #fff; cursor: pointer; transition: transform .15s; }
.cofre.lleno:hover { transform: translateY(-3px); }
.cofre .ce { font-size: 2.2rem; line-height: 1; filter: drop-shadow(0 4px 3px rgba(0,0,0,.4)); }
.cofre.madera { background: linear-gradient(180deg, rgba(180,83,9,.4), rgba(120,53,15,.3)); border-color: #b45309; }
.cofre.plata { background: linear-gradient(180deg, rgba(203,213,225,.35), rgba(100,116,139,.3)); border-color: #cbd5e1; }
.cofre.oro { background: linear-gradient(180deg, rgba(250,204,21,.4), rgba(161,98,7,.3)); border-color: #facc15; }
.cofre.carnaval { background: linear-gradient(180deg, rgba(236,72,153,.4), rgba(124,58,237,.35)); border-color: #f472b6; }
.cofre.abriendo .ce { animation: tiembla 1.8s ease-in-out infinite; }
.cofre.listo { box-shadow: 0 0 0 3px #22c55e, 0 0 24px rgba(34,197,94,.6); } .cofre.listo .ce { animation: salta .8s ease-in-out infinite; }
@keyframes tiembla { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
@keyframes salta { 50% { transform: translateY(-6px) scale(1.08); } }
.cofre b { font-size: .72rem; } .cofre .t { font-weight: 900; color: #fde68a; font-variant-numeric: tabular-nums; }
.cofre-ayuda { font-size: .78rem; color: var(--suave); margin: 8px 0 0; }
.cofre-abierto { text-align: center; }
.cofre-abierto .gran { font-size: 5rem; animation: abreCofre .9s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes abreCofre { 0% { transform: scale(.2) rotate(-30deg); } 60% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1); } }
.cofre-abierto .premio { display: flex; justify-content: center; gap: 12px; margin: 10px 0; }
.cofre-abierto .premio div { background: rgba(255,255,255,.08); border-radius: 14px; padding: 10px 16px; font-weight: 900; font-size: 1.2rem; animation: aparece .5s both; animation-delay: calc(var(--i) * .25s + .5s); }
@keyframes aparece { from { opacity: 0; transform: translateY(12px) scale(.8); } }

.marcos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.marco-op { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 8px; border-radius: 14px; background: rgba(255,255,255,.05); border: 2px solid transparent; font: inherit; color: inherit; cursor: pointer; text-align: center; }
.marco-op .muestra { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #fff5, #7c3aed 75%); font-size: 1.5rem; }
.marco-op .muestra img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.2) translateY(-5%); }
.marco-op b { font-size: .72rem; } .marco-op small { font-size: .64rem; color: var(--suave); line-height: 1.2; }
.marco-op.activo { border-color: #f97316; background: rgba(249,115,22,.15); }
.marco-op.bloq { opacity: .45; cursor: help; } .marco-op.bloq .muestra { filter: grayscale(1); }
.fila-sel { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }

/* ═════════ LIGA DE BARRIOS ═════════ */
.liga-cab { text-align: center; margin: 4px 0 12px; } .liga-cab small { color: var(--suave); }
.liga-fila { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.liga-fila .pos { font-family: 'Lilita One', system-ui; font-size: 1.2rem; text-align: center; }
.liga-fila .bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); margin-top: 5px; overflow: hidden; } .liga-fila .bar i { display: block; height: 100%; background: linear-gradient(90deg, #f97316, #fde047); }
.liga-fila small { color: var(--suave); font-size: .78rem; }
.liga-fila.mio { background: rgba(249,115,22,.12); }
.liga-fila em { font-style: normal; font-weight: 900; color: #fde68a; }

/* ═════════ COMPARTIR RESULTADO ═════════ */
.compartir { margin: 14px 0; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(14,165,233,.15)); border: 1px solid rgba(34,197,94,.4); }
.compartir pre { white-space: pre-wrap; font-family: inherit; font-size: .9rem; background: rgba(0,0,0,.3); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.compartir .fila { display: flex; gap: 8px; flex-wrap: wrap; }
.compartir .fila .btn { flex: 1; min-width: 130px; }
.btn-wa { background: #25d366 !important; border-color: #25d366 !important; color: #06381a !important; }
.extras-fin { display: grid; gap: 6px; margin: 10px 0; }
.extras-fin div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: .88rem; animation: aparece .5s both; animation-delay: calc(var(--i) * .2s + 1.8s); }
.extras-fin div span { font-size: 1.5rem; } .extras-fin a { color: #fde68a; font-weight: 800; }

/* ═════════ APP INSTALABLE ═════════ */
html:not(.puede-instalar) .btn-instalar { display: none !important; }
.banner-app { position: fixed; left: 12px; right: 84px; bottom: 14px; z-index: 900; display: none; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #1b1236, #3b1d6e); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 12px 30px rgba(0,0,0,.5); animation: aparece .5s both; max-width: 460px; }
.puede-instalar .banner-app.mostrar { display: flex; }
.banner-app img { width: 46px; height: 46px; border-radius: 12px; flex: none; }
.banner-app div { flex: 1; min-width: 0; } .banner-app b { display: block; font-size: .92rem; } .banner-app small { font-size: .75rem; color: #d8b4fe; }
.banner-app .x { background: none; border: 0; color: #fff; opacity: .7; font-size: 1.1rem; cursor: pointer; padding: 4px; }
.guia-ios { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.7); display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.guia-ios .caja { width: 100%; max-width: 420px; background: #1b1236; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: 18px; color: #fff; animation: aparece .35s both; }
.guia-ios h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; } .guia-ios h3 img { width: 44px; height: 44px; border-radius: 10px; }
.guia-ios ol { margin: 12px 0; padding-left: 0; list-style: none; counter-reset: p; }
.guia-ios li { counter-increment: p; display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .92rem; }
.guia-ios li::before { content: counter(p); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #f97316; font-weight: 900; font-size: .85rem; }
.guia-ios .ico-ios { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #fff; color: #0a84ff; font-size: 1rem; vertical-align: middle; }
.guia-ios .flecha { text-align: center; font-size: 2rem; animation: salta 1s ease-in-out infinite; margin-top: 4px; }
.rc-modal { align-items: center; } .rc-modal .caja { text-align: center; } .rc-modal h2 { font-family: 'Lilita One', system-ui; }
.perfil-extra { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.perfil-extra span { font-size: .78rem; font-weight: 800; background: rgba(255,255,255,.08); border-radius: 99px; padding: 3px 10px; }
.perfil-extra .ap { color: #fde68a; background: rgba(253,230,138,.12); }