/* ==========================================================================
   Constructores MN — estetica de videojuego movil, muy colorida.
   Cielo violeta intenso, tarjetas de color caramelo por tipo de actividad,
   botones 3D que se hunden, oro para monedas y tipografia de juego.
   ========================================================================== */
:root {
  --cielo-1: #4b7df0; --cielo-2: #06205c; --cielo-3: #183372;
  --hundido: rgba(20, 8, 70, .45); --hundido-2: rgba(20, 8, 70, .3);
  --borde: rgba(255,255,255,.18); --borde-2: rgba(255,255,255,.28);
  --tx: #ffffff; --tx-2: #ecf2fd; --tx-3: #c1d0f1;
  --naranja: #ff7a1a; --naranja-a: #ffa346; --naranja-s: #c24f00;
  --verde: #22d37a; --verde-a: #5cf2a3; --verde-s: #0f8f4c;
  --azul: #2f8bff; --azul-a: #66b3ff; --azul-s: #1653c4;
  --turquesa: #14d2c6; --turquesa-a: #5ef5e8; --turquesa-s: #0a8c86;
  --rosa: #ff4f9a; --rosa-a: #ff8ec0; --rosa-s: #b81d63;
  --morado: #6590f3; --morado-a: #a3bcf7; --morado-s: #2f5bc2;
  --oro: #ffcc2e; --oro-a: #ffe57a; --oro-s: #c98a00;
  --rojo: #ff4d5e; --rojo-s: #b8243a;
  --comun: #9aa7c7; --rara: #2f8bff; --epica: #b45cff; --legendaria: #ffb21e;
  --r: 24px; --r-sm: 16px;
  --t: 200ms; --rebote: cubic-bezier(.34,1.56,.64,1); --suave: cubic-bezier(.4,0,.2,1);
  --titulo: "Lilita One", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --texto: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nav-h: 78px; --hud-h: 66px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  font-family: var(--texto); font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--tx);
  background:
    radial-gradient(700px 420px at 100% 0%, rgba(255,79,154,.45), transparent 60%),
    radial-gradient(640px 520px at 0% 35%, rgba(20,210,198,.30), transparent 60%),
    radial-gradient(800px 500px at 60% 110%, rgba(255,163,70,.35), transparent 60%),
    linear-gradient(180deg, var(--cielo-1) 0%, var(--cielo-2) 45%, var(--cielo-3) 100%);
  background-attachment: fixed; min-height: 100dvh; overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
input, textarea, select { user-select: text; -webkit-user-select: text; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
a { color: var(--oro-a); }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.coin { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.num, .t { font-family: var(--titulo); font-weight: 400; letter-spacing: .3px; }
.muted { color: var(--tx-3); }
.sombra-t { text-shadow: 0 2px 0 rgba(0,0,0,.25); }

/* ------------------------------------------------------------ botones 3D */
.b3 {
  --c1: var(--naranja-a); --c2: var(--naranja); --cs: var(--naranja-s);
  position: relative; height: 54px; padding: 0 22px; border-radius: 18px; color: #fff;
  font-family: var(--titulo); font-size: 19px; letter-spacing: .4px; text-shadow: 0 2px 0 rgba(0,0,0,.25);
  background: linear-gradient(180deg, var(--c1), var(--c2)); text-decoration: none;
  box-shadow: 0 6px 0 var(--cs), 0 10px 18px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.4);
  transition: transform 90ms, box-shadow 90ms;
}
.b3::after { content: ""; position: absolute; left: 10px; right: 10px; top: 5px; height: 36%; border-radius: 12px 12px 30px 30px; background: linear-gradient(rgba(255,255,255,.38), rgba(255,255,255,0)); pointer-events: none; }
.b3:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 var(--cs), 0 3px 8px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.3); }
.b3:disabled { filter: grayscale(.7) brightness(.85); cursor: not-allowed; }
.b3 .ic { width: 22px; height: 22px; stroke-width: 2.7; filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
.b3.verde { --c1: var(--verde-a); --c2: var(--verde); --cs: var(--verde-s); }
.b3.azul { --c1: var(--azul-a); --c2: var(--azul); --cs: var(--azul-s); }
.b3.turquesa { --c1: var(--turquesa-a); --c2: var(--turquesa); --cs: var(--turquesa-s); }
.b3.rosa { --c1: var(--rosa-a); --c2: var(--rosa); --cs: var(--rosa-s); }
.b3.morado { --c1: var(--morado-a); --c2: var(--morado); --cs: var(--morado-s); }
.b3.oro { --c1: var(--oro-a); --c2: var(--oro); --cs: var(--oro-s); color: #5a3b00; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.b3.blanco { --c1: #ffffff; --c2: #e8eefd; --cs: #9fafd3; color: #06205c; text-shadow: none; }
.b3.gris { --c1: #6782bf; --c2: #536eab; --cs: #334b83; }
.b3.chico { height: 44px; font-size: 16px; padding: 0 14px; border-radius: 15px; box-shadow: 0 4px 0 var(--cs), 0 6px 12px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.35); }
.b3.chico:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--cs); }
.b3.ancho { width: 100%; }
.enlace { color: var(--tx-2); font-weight: 900; font-size: 14px; padding: 8px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }

/* ------------------------------------------------------------ tarjetas de color */
.panel { border-radius: var(--r); padding: 16px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border: 2px solid var(--borde);
  box-shadow: 0 8px 0 rgba(20,8,70,.35), 0 14px 30px rgba(20,8,70,.35), inset 0 2px 0 rgba(255,255,255,.18); }
.panel + .panel, .seccion + .seccion { margin-top: 16px; }
.p-naranja { background: linear-gradient(160deg, #ffad4d 0%, #ff6a3d 100%); border-color: rgba(255,255,255,.35); box-shadow: 0 8px 0 #b8421c, 0 14px 30px rgba(184,66,28,.35), inset 0 2px 0 rgba(255,255,255,.35); }
.p-turquesa { background: linear-gradient(160deg, #3ff0dc 0%, #0fa9b8 100%); border-color: rgba(255,255,255,.35); box-shadow: 0 8px 0 #0a6f79, 0 14px 30px rgba(10,111,121,.35), inset 0 2px 0 rgba(255,255,255,.35); }
.p-rosa { background: linear-gradient(160deg, #ff8fc4 0%, #ff3d86 100%); border-color: rgba(255,255,255,.35); box-shadow: 0 8px 0 #a8195a, 0 14px 30px rgba(168,25,90,.35), inset 0 2px 0 rgba(255,255,255,.35); }
.p-azul { background: linear-gradient(160deg, #5fb4ff 0%, #2f6bff 100%); border-color: rgba(255,255,255,.35); box-shadow: 0 8px 0 #1b3fae, 0 14px 30px rgba(27,63,174,.35), inset 0 2px 0 rgba(255,255,255,.35); }
.p-verde { background: linear-gradient(160deg, #6ff0ac 0%, #12b06a 100%); border-color: rgba(255,255,255,.35); box-shadow: 0 8px 0 #0a7444, 0 14px 30px rgba(10,116,68,.35), inset 0 2px 0 rgba(255,255,255,.35); }
.p-amarillo { background: linear-gradient(160deg, #ffe680 0%, #ffb21e 100%); border-color: rgba(255,255,255,.45); color: #4a2a00; box-shadow: 0 8px 0 #b97300, 0 14px 30px rgba(185,115,0,.35), inset 0 2px 0 rgba(255,255,255,.5); }
.p-morado { background: linear-gradient(160deg, #94b2f6 0%, #e1211c 100%); border-color: rgba(255,255,255,.35); box-shadow: 0 8px 0 #2148a4, 0 14px 30px rgba(79,21,176,.35), inset 0 2px 0 rgba(255,255,255,.35); }
.p-noche { background: linear-gradient(160deg, #2a488d 0%, #132858 100%); }
.p-amarillo .muted, .p-amarillo small { color: #7a4f00; }
.panel .brillo { position: absolute; right: -50px; top: -60px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 70%); pointer-events: none; }

.seccion { margin-top: 22px; }
.seccion-cab { display: flex; align-items: center; gap: 8px; margin: 0 4px 10px; }
.seccion-cab h2 { font-family: var(--titulo); font-weight: 400; font-size: 22px; margin: 0; letter-spacing: .4px; text-shadow: 0 3px 0 rgba(20,8,70,.4); }
.seccion-cab .der { margin-left: auto; font-size: 13px; color: var(--tx-2); font-weight: 800; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(20,8,70,.3); border: 1.5px solid rgba(255,255,255,.25); font-size: 13px; font-weight: 900; color: #fff; white-space: nowrap; }
.chip .ic { width: 16px; height: 16px; }
.chip .coin { width: 18px; height: 18px; }
.chip.oro { background: rgba(255,204,46,.25); border-color: rgba(255,229,122,.7); color: #fff3b8; }
.chip.blanco { background: rgba(255,255,255,.9); color: #06205c; border-color: #fff; }

.segmentos { display: flex; gap: 6px; padding: 5px; border-radius: 18px; background: var(--hundido); border: 2px solid var(--borde); }
.segmentos button { flex: 1; height: 40px; border-radius: 13px; font-weight: 900; font-size: 14px; color: var(--tx-3); transition: all var(--t) var(--suave); }
.segmentos button.activo { background: linear-gradient(180deg, #ffffff, #e8eefd); color: #06205c; box-shadow: 0 3px 0 #9fafd3; }

.barra { height: 16px; border-radius: 99px; background: rgba(20,8,70,.45); border: 2px solid rgba(0,0,0,.18); overflow: hidden; position: relative; }
.barra > i { display: block; height: 100%; width: 0; border-radius: inherit; position: relative;
  background: linear-gradient(180deg, var(--oro-a), var(--oro)); box-shadow: inset 0 3px 0 rgba(255,255,255,.4); transition: width 900ms var(--suave); }
.barra.verde > i { background: linear-gradient(180deg, var(--verde-a), var(--verde)); }
.barra.naranja > i { background: linear-gradient(180deg, var(--naranja-a), var(--naranja)); }
.barra.azul > i { background: linear-gradient(180deg, var(--azul-a), var(--azul)); }
.barra.rosa > i { background: linear-gradient(180deg, var(--rosa-a), var(--rosa)); }
.barra.rojo > i { background: linear-gradient(180deg, #ff8a95, var(--rojo)); }
.barra.casi > i { animation: latido 1.2s ease-in-out infinite; }
.barra.casi > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); background-size: 200% 100%; animation: brillo-barra 1.5s linear infinite; }
@keyframes latido { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }
@keyframes brillo-barra { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.barra-txt { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--titulo); font-size: 11px; text-shadow: 0 1px 2px rgba(0,0,0,.6); color: #fff; }

/* ------------------------------------------------------------ estructura */
.juego { min-height: 100dvh; padding: calc(var(--hud-h) + env(safe-area-inset-top) + 10px) 0 calc(var(--nav-h) + env(safe-area-inset-bottom) + 28px); }
.wrap { max-width: 560px; margin: 0 auto; padding: 0 16px; }
.wrap.ancho { max-width: 1160px; }
.vista { animation: entrar 320ms var(--suave); }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hud { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding-top: env(safe-area-inset-top);
  background: linear-gradient(180deg, rgba(74,34,214,.97), rgba(74,34,214,.85)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 3px solid rgba(20,8,70,.35); box-shadow: 0 6px 20px rgba(20,8,70,.3); }
.hud .wrap { height: var(--hud-h); display: flex; align-items: center; gap: 8px; }
.hud-yo { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; text-align: left; }
.hud-yo .info { min-width: 92px; flex: 1; max-width: 180px; }
.hud-yo .nombre { font-family: var(--titulo); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.hud-yo .barra { height: 14px; margin-top: 3px; }
.hud-pill { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 12px 0 5px; border-radius: 999px; background: rgba(20,8,70,.45); border: 2px solid rgba(255,255,255,.2); font-family: var(--titulo); font-size: 17px; }
.hud-pill .coin { width: 28px; height: 28px; }
.hud-pill.fuego { padding-left: 8px; color: #ffd2a8; }
.hud-pill.fuego .ic { width: 20px; height: 20px; color: #ff9a3d; }
.hud-pill.fuego.vivo .ic { animation: flama 1s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255,138,61,.95)); }
.hud-pill.fuego.apagado { color: var(--tx-3); }
.hud-pill.fuego.apagado .ic { color: var(--tx-3); }
.hud-btn { width: 40px; height: 40px; border-radius: 13px; color: #fff; background: rgba(20,8,70,.45); border: 2px solid rgba(255,255,255,.2); }
.hud-btn .ic { width: 20px; height: 20px; }
@keyframes flama { 0%,100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.15) rotate(4deg); } }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding-bottom: env(safe-area-inset-bottom);
  background: linear-gradient(180deg, #ffffff, #ebf0fd); border-top: 3px solid #d3dffb; box-shadow: 0 -8px 26px rgba(20,8,70,.35); }
.tabbar .wrap { height: var(--nav-h); display: flex; align-items: center; padding: 0 6px; }
.tab { flex: 1; height: 64px; flex-direction: column; gap: 2px; border-radius: 18px; color: #8598c4; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; position: relative; transition: color var(--t); }
.tab .ic { width: 28px; height: 28px; stroke-width: 2.4; transition: transform var(--t) var(--rebote); }
.tab.activo { color: #06205c; }
.tab.activo .ic { transform: translateY(-3px) scale(1.15); }
.tab.activo::after { content: ""; position: absolute; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--naranja); }
.tab .globo { position: absolute; top: 4px; right: calc(50% - 24px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--rojo); color: #fff; font-size: 11px; display: grid; place-items: center; box-shadow: 0 2px 0 var(--rojo-s); border: 2px solid #fff; }
.tab-jugar { flex: 1.15; }
.tab-jugar .boton-jugar { width: 72px; height: 72px; margin-top: -34px; border-radius: 26px; color: #fff;
  background: linear-gradient(180deg, var(--naranja-a), var(--naranja)); border: 4px solid #fff;
  box-shadow: 0 6px 0 var(--naranja-s), 0 12px 26px rgba(255,122,26,.5), inset 0 2px 0 rgba(255,255,255,.45);
  display: grid; place-items: center; transition: transform 90ms; animation: respirar 2.2s ease-in-out infinite; }
.tab-jugar .boton-jugar .ic { width: 36px; height: 36px; fill: #fff; stroke: #fff; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.tab-jugar:active .boton-jugar { transform: translateY(5px); box-shadow: 0 1px 0 var(--naranja-s); }
.tab-jugar .lbl { margin-top: 3px; color: var(--naranja); }
@keyframes respirar { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ------------------------------------------------------------ avatar */
.avatar { --av: 46px; width: var(--av); height: var(--av); border-radius: 30%; display: grid; place-items: center; position: relative; flex: none; isolation: isolate;
  font-family: var(--titulo); font-size: calc(var(--av) * .4); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25);
  background: var(--av-bg, linear-gradient(145deg, #ffa346, #ff6a00)); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.18); }
.avatar .nv { position: absolute; right: -7px; bottom: -7px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 8px; font-size: 12px; display: grid; place-items: center; z-index: 2;
  background: linear-gradient(180deg, var(--oro-a), var(--oro)); color: #5a3b00; text-shadow: none; box-shadow: 0 2px 0 var(--oro-s); border: 2px solid #fff; }
.c-naranja { --av-bg: linear-gradient(145deg, #ffa346, #ff6a00); }
.c-azul { --av-bg: linear-gradient(145deg, #66b3ff, #1f63e0); }
.c-verde { --av-bg: linear-gradient(145deg, #5cf2a3, #0fa05a); }
.c-morado { --av-bg: linear-gradient(145deg, #a3bcf7, #2f5bc2); }
.c-rosa { --av-bg: linear-gradient(145deg, #ff8ec0, #e0306b); }
.c-esmeralda { --av-bg: linear-gradient(145deg, #3df5c8, #0b8f74); }
.c-dorado { --av-bg: linear-gradient(145deg, #ffe57a, #d99a00); }
.c-galaxia { --av-bg: radial-gradient(circle at 28% 30%, #ff8fd8 0 7%, transparent 8%), radial-gradient(circle at 72% 62%, #fff 0 4%, transparent 5%), radial-gradient(circle at 40% 75%, #9cf 0 3%, transparent 4%), linear-gradient(145deg, #274487, #0c1528 70%, #3b65c5); }
.c-fuego { --av-bg: linear-gradient(0deg, #ff2e00, #ff7a1a 45%, #ffd23f); }
.c-aurora { --av-bg: linear-gradient(120deg, #3df5c8, #3aa0ff, #6892f3, #ff5d8f, #3df5c8); background-size: 300% 300% !important; animation: aurora 6s linear infinite; }
@keyframes aurora { to { background-position: 300% 0; } }
.avatar[class*=" m-"]::before { content: ""; position: absolute; inset: -5px; border-radius: 34%; z-index: -1; }
.m-bronce::before { background: linear-gradient(145deg, #f0b07a, #9a5a2a); }
.m-plata::before { background: linear-gradient(145deg, #ffffff, #8d97a8); }
.m-oro::before { background: linear-gradient(145deg, #fff0a8, #e0a400); box-shadow: 0 0 14px rgba(255,204,51,.7); }
.m-platino::before { background: linear-gradient(145deg, #e8fbff, #5fc9e8, #c7d5ff); box-shadow: 0 0 14px rgba(95,201,232,.7); }
.m-diamante::before { background: conic-gradient(#7af0ff, #6892f3, #ff8fd8, #7af0ff); animation: girar 4s linear infinite; box-shadow: 0 0 18px rgba(176,92,255,.8); }
.m-temporada::before { background: linear-gradient(145deg, #ff7a1a, #6590f3); }
.m-temporada_plus::before { background: linear-gradient(145deg, #ffcc2e, #ff7a1a, #6590f3, #2f8bff); box-shadow: 0 0 16px rgba(255,122,26,.7); }
.m-corazon::before { background: linear-gradient(145deg, #ff9db8, #ff3d7f); box-shadow: 0 0 14px rgba(255,79,154,.7); }
.m-llamas::before { background: linear-gradient(0deg, #ff2e00, #ffb000); animation: llamas 1s ease-in-out infinite; }
.m-leyenda::before { background: conic-gradient(#ffcc2e, #ff7a1a, #ff4f9a, #6590f3, #2f8bff, #14d2c6, #ffcc2e); animation: girar 3s linear infinite; box-shadow: 0 0 22px rgba(255,204,46,.9); }
@keyframes llamas { 0%,100% { box-shadow: 0 0 10px rgba(255,120,0,.6); } 50% { box-shadow: 0 0 24px rgba(255,80,0,.95); } }
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ ciudad (escena principal) */
.ciudad { padding: 0; overflow: hidden; border-width: 3px; }
.ciudad svg.escena-ciudad { display: block; width: 100%; height: auto; }
.ciudad .rotulo { position: absolute; left: 14px; top: 12px; right: 14px; display: flex; align-items: flex-start; gap: 10px; }
.ciudad .rotulo .txt b { font-family: var(--titulo); font-weight: 400; font-size: 22px; display: block; text-shadow: 0 3px 0 rgba(20,8,70,.45); }
.ciudad .rotulo .txt small { font-size: 12px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.ciudad .rotulo .der { margin-left: auto; text-align: right; }
.ciudad .pie-ciudad { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 10px; }
.ciudad .pie-ciudad .barra { flex: 1; }
.edificio-nuevo { animation: construir 900ms var(--rebote) both; transform-box: fill-box; transform-origin: bottom; }
@keyframes construir { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.grua { animation: grua 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 10% 100%; }
@keyframes grua { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.ventana-on { animation: ventana 3s ease-in-out infinite; }
@keyframes ventana { 0%,100% { opacity: 1; } 50% { opacity: .75; } }
.nube { animation: nube 40s linear infinite; }
@keyframes nube { from { transform: translateX(-120px); } to { transform: translateX(520px); } }

/* ------------------------------------------------------------ encargo (proxima jugada) */
.encargo { padding: 0; border-width: 3px; }
.encargo .franja { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-family: var(--titulo); font-size: 15px; letter-spacing: .6px; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.encargo .cuerpo { padding: 6px 16px 16px; display: flex; gap: 14px; align-items: flex-start; }
.encargo .personaje { width: 74px; height: 74px; flex: none; border-radius: 24px; display: grid; place-items: center; background: rgba(255,255,255,.22); border: 3px solid rgba(255,255,255,.5); position: relative; }
.encargo .personaje .avatar { --av: 60px; }
.encargo .personaje .zz { position: absolute; top: -10px; right: -8px; font-family: var(--titulo); font-size: 20px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); animation: zz 2s ease-in-out infinite; }
@keyframes zz { 0%,100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(-6px); opacity: 1; } }
.encargo .txt { flex: 1; min-width: 0; }
.encargo h3 { font-family: var(--titulo); font-weight: 400; font-size: 23px; margin: 2px 0 2px; line-height: 1.1; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.encargo .motivo { font-size: 14px; color: #fff; opacity: .95; }
.encargo .real { font-size: 12px; opacity: .8; margin-top: 4px; }
.encargo .premios { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.encargo .acciones { display: flex; gap: 10px; padding: 0 16px 16px; }
.encargo .acciones .b3 { flex: 1; }
.encargo .pie { display: flex; justify-content: space-between; align-items: center; padding: 0 12px 10px; }
.r-comun { background: linear-gradient(160deg, #8aa0d6, #5b6fb3); box-shadow: 0 8px 0 #3b4a85, 0 14px 30px rgba(20,8,70,.35), inset 0 2px 0 rgba(255,255,255,.35); }
.r-comun .franja { background: rgba(20,8,70,.25); }
.r-rara { background: linear-gradient(160deg, #5fb4ff, #2f6bff); box-shadow: 0 8px 0 #1b3fae, 0 14px 30px rgba(27,63,174,.4), inset 0 2px 0 rgba(255,255,255,.35); }
.r-rara .franja { background: rgba(20,8,70,.22); }
.r-epica { background: linear-gradient(160deg, #d08bff, #8a2cff); box-shadow: 0 8px 0 #5512b0, 0 0 30px rgba(180,92,255,.55), inset 0 2px 0 rgba(255,255,255,.35); }
.r-epica .franja { background: rgba(20,8,70,.22); }
.r-legendaria { background: linear-gradient(160deg, #ffd25a, #ff7a1a 70%, #ff4f9a); box-shadow: 0 8px 0 #b8421c, 0 0 36px rgba(255,178,30,.7), inset 0 2px 0 rgba(255,255,255,.45); }
.r-legendaria .franja { background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.08), rgba(255,255,255,.35)); background-size: 200% 100%; animation: brillo-barra 2.5s linear infinite; }

/* cofre diario */
.mision-dia { display: flex; align-items: center; gap: 14px; }
.cofre-dia { width: 84px; height: 76px; flex: none; position: relative; }
.cofre-dia svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.mision-dia.lista .cofre-dia { animation: agitar 1.4s ease-in-out infinite; }
.mision-dia .txt { flex: 1; min-width: 0; }
.mision-dia .txt b { font-family: var(--titulo); font-weight: 400; font-size: 21px; display: block; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.mision-dia .txt span { font-size: 13px; }
.ranuras { display: flex; gap: 6px; margin-top: 8px; }
.ranuras i { flex: 1; height: 16px; border-radius: 7px; background: rgba(20,8,70,.35); border: 2px solid rgba(0,0,0,.15); }
.ranuras i.llena { background: linear-gradient(180deg, var(--oro-a), var(--oro)); box-shadow: 0 0 10px rgba(255,204,46,.7); }
@keyframes agitar { 0%,55%,100% { transform: rotate(0); } 62% { transform: rotate(-8deg); } 70% { transform: rotate(8deg); } 78% { transform: rotate(-4deg); } 86% { transform: rotate(3deg); } }

/* bono de llegada (premio diario) */
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dia { border-radius: 14px; padding: 8px 2px 6px; text-align: center; background: rgba(20,8,70,.28); border: 2px solid rgba(255,255,255,.25); display: grid; justify-items: center; gap: 2px; }
.dia small { font-size: 10px; font-weight: 900; text-transform: uppercase; opacity: .85; }
.dia .coin { width: 24px; height: 24px; }
.dia b { font-family: var(--titulo); font-weight: 400; font-size: 14px; }
.dia.hecho { background: rgba(255,255,255,.35); border-color: #fff; }
.dia.hecho .coin { opacity: .45; }
.dia.hoy { border-color: #fff; background: rgba(255,255,255,.95); color: #b84a00; box-shadow: 0 0 18px rgba(255,255,255,.7); animation: latido 1.2s ease-in-out infinite; }
.dia.gordo .coin { width: 30px; height: 30px; }

/* contratos (retos) */
.retos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.reto { text-align: center; padding: 12px 8px; border-radius: 18px; display: grid; justify-items: center; gap: 6px; position: relative; color: #fff; }
.reto:nth-child(1) { background: linear-gradient(160deg, #6ff0ac, #12b06a); box-shadow: 0 5px 0 #0a7444; }
.reto:nth-child(2) { background: linear-gradient(160deg, #ffad4d, #ff6a3d); box-shadow: 0 5px 0 #b8421c; }
.reto:nth-child(3) { background: linear-gradient(160deg, #94b2f6, #e1211c); box-shadow: 0 5px 0 #2148a4; }
.reto .aro { width: 70px; height: 70px; position: relative; }
.reto .aro svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.reto .aro .fondo { stroke: rgba(20,8,70,.3); }
.reto .aro .av { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 900ms var(--suave); }
.reto .aro .centro { position: absolute; inset: 0; display: grid; place-items: center; }
.reto .aro .centro .ic { width: 28px; height: 28px; color: #fff; }
.reto b { font-size: 12px; line-height: 1.15; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.reto .cuenta { font-family: var(--titulo); font-size: 17px; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.reto.logrado::after { content: ""; position: absolute; top: -8px; right: -6px; width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; background: var(--oro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a3b00' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat; box-shadow: 0 3px 0 var(--oro-s); }

/* arena (liga) y estadisticas */
.liga { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.escudo-liga { width: 64px; height: 70px; flex: none; display: grid; place-items: center; font-family: var(--titulo); font-size: 13px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3);
  clip-path: path("M32 0 L64 11 L64 36 C64 55 49 66 32 70 C15 66 0 55 0 36 L0 11 Z"); }
.liga-Bronce { background: linear-gradient(180deg, #f0b07a, #9a5a2a); } .liga-Plata { background: linear-gradient(180deg, #ffffff, #8d97a8); color: #2d3340; text-shadow: none; }
.liga-Oro { background: linear-gradient(180deg, #fff0a8, #d99a00); color: #5a3b00; text-shadow: none; }
.liga-Platino { background: linear-gradient(180deg, #e8fbff, #5fc9e8); color: #0d4a5c; text-shadow: none; }
.liga-Diamante { background: linear-gradient(180deg, #ccdafb, #2f5bc2); }
.liga .txt { flex: 1; min-width: 0; }
.liga .txt b { font-family: var(--titulo); font-weight: 400; font-size: 21px; display: block; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.liga .txt span { font-size: 13px; }
.mini-avatares { display: flex; }
.mini-avatares .avatar { --av: 34px; margin-left: -8px; border: 2px solid #fff; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { text-align: center; padding: 12px 6px; border-radius: 18px; background: rgba(20,8,70,.3); border: 2px solid rgba(255,255,255,.2); }
.stat b { font-family: var(--titulo); font-weight: 400; font-size: 24px; display: block; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.stat small { font-size: 11px; text-transform: uppercase; font-weight: 900; opacity: .85; }
.sube { color: var(--verde-a); } .baja { color: #ffb3bb; }

/* ------------------------------------------------------------ encargos (lista) */
.quest { display: flex; padding: 0; border-width: 3px; }
.quest + .quest { margin-top: 14px; }
.quest .q-cuerpo { flex: 1; padding: 12px 14px; min-width: 0; }
.quest .q-cab { display: flex; align-items: flex-start; gap: 12px; }
.quest .q-cab .txt { flex: 1; min-width: 0; }
.quest h4 { font-family: var(--titulo); font-weight: 400; font-size: 19px; margin: 2px 0 2px; line-height: 1.15; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.quest .q-cab span { font-size: 13px; }
.quest .q-cab .real { font-size: 11px; opacity: .8; display: block; margin-top: 2px; }
.rareza { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; padding: 3px 8px; border-radius: 7px; background: rgba(20,8,70,.3); color: #fff; }
.quest .q-acc { display: flex; gap: 8px; margin-top: 12px; }
.quest .q-acc .b3 { flex: 1; }
.quest.hecha { filter: saturate(.3); opacity: .7; }
.premio-q { display: inline-flex; align-items: center; gap: 4px; font-family: var(--titulo); font-size: 17px; color: #fff; white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.premio-q .coin { width: 22px; height: 22px; }
.icono-q { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.25); border: 2px solid rgba(255,255,255,.45); flex: none; }
.icono-q .ic { width: 28px; height: 28px; color: #fff; }

/* ------------------------------------------------------------ jefe del mes */
.jefe { text-align: center; background: radial-gradient(120% 90% at 50% 0%, #ff6b8a 0%, #c2185b 45%, #6a1048 100%); border-color: rgba(255,255,255,.35); box-shadow: 0 8px 0 #4a0b33, 0 14px 30px rgba(74,11,51,.4), inset 0 2px 0 rgba(255,255,255,.3); }
.jefe .monstruo { width: 190px; height: 160px; margin: 0 auto; display: block; animation: flotar 3s ease-in-out infinite; filter: drop-shadow(0 14px 14px rgba(0,0,0,.4)); }
.jefe.golpe .monstruo { animation: golpe 420ms; }
.jefe.derrotado .monstruo { filter: grayscale(1) brightness(.7); animation: none; transform: rotate(-14deg) translateY(12px); }
@keyframes flotar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes golpe { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-12px); filter: brightness(2.2) saturate(0); } 50% { transform: translateX(9px); } 75% { transform: translateX(-4px); } }
.jefe h3 { font-family: var(--titulo); font-weight: 400; font-size: 26px; margin: 2px 0 0; text-shadow: 0 3px 0 rgba(0,0,0,.3); }
.jefe .vida { margin: 10px 0 6px; height: 26px; border-color: rgba(0,0,0,.3); }
.jefe .vida > i { background: linear-gradient(180deg, #ff8a95, var(--rojo)); }
.jefe p { margin: 0; font-size: 13px; }

.muro-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 2px solid rgba(255,255,255,.15); }
.muro-item:last-child { border-bottom: 0; }
.muro-item .txt { flex: 1; min-width: 0; }
.muro-item .txt b { display: block; font-size: 14px; font-weight: 900; }
.muro-item .txt span { font-size: 12px; color: var(--tx-2); }
.btn-aplauso { min-width: 64px; height: 42px; border-radius: 15px; padding: 0 12px; gap: 6px; font-family: var(--titulo); font-size: 16px; color: #fff;
  background: rgba(20,8,70,.35); border: 2px solid rgba(255,255,255,.3); box-shadow: 0 4px 0 rgba(20,8,70,.4); transition: transform 90ms; }
.btn-aplauso:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.btn-aplauso .ic { width: 20px; height: 20px; }
.btn-aplauso.hecho { background: linear-gradient(180deg, var(--rosa-a), var(--rosa)); border-color: #fff; box-shadow: 0 4px 0 var(--rosa-s); }
.btn-aplauso.hecho .ic { fill: #fff; }
.btn-aplauso:disabled { opacity: .45; }

.podio { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; align-items: end; margin: 18px 0; }
.podio .lugar { text-align: center; display: grid; justify-items: center; gap: 6px; min-width: 0; }
.podio .lugar .avatar { --av: 58px; border: 3px solid #fff; }
.podio .p1 .avatar { --av: 76px; }
.podio .p1 .corona { width: 36px; height: 36px; color: var(--oro); fill: var(--oro); margin-bottom: -10px; filter: drop-shadow(0 0 8px rgba(255,204,46,.9)); animation: flotar 2s ease-in-out infinite; }
.podio .nombre { font-size: 13px; font-weight: 900; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podio .peana { width: 100%; border-radius: 16px 16px 6px 6px; display: grid; place-items: center; font-family: var(--titulo); font-size: 18px; padding: 8px 4px; box-shadow: inset 0 3px 0 rgba(255,255,255,.4); }
.podio .p1 .peana { height: 108px; background: linear-gradient(180deg, var(--oro-a), var(--oro)); color: #5a3b00; }
.podio .p2 .peana { height: 80px; background: linear-gradient(180deg, #ffffff, #b6c0d4); color: #2d3340; }
.podio .p3 .peana { height: 62px; background: linear-gradient(180deg, #f6be8b, #b06a33); }
.rk { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.1); }
.rk + .rk { margin-top: 8px; }
.rk .pos { width: 30px; text-align: center; font-family: var(--titulo); font-size: 19px; }
.rk .avatar { --av: 42px; }
.rk .txt { flex: 1; min-width: 0; }
.rk .txt b { display: block; font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk .txt span { font-size: 12px; color: var(--tx-3); }
.rk .p { font-family: var(--titulo); font-size: 19px; }
.rk.yo { background: linear-gradient(90deg, #ffad4d, #ff6a3d); box-shadow: 0 4px 0 #b8421c; }
.rk.yo .txt span { color: #fff; }

/* ------------------------------------------------------------ mercado */
.saldo-grande { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; }
.saldo-grande .coin { width: 58px; height: 58px; animation: girar-moneda 3s ease-in-out infinite; }
.saldo-grande b { font-family: var(--titulo); font-weight: 400; font-size: 50px; color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.25); }
@keyframes girar-moneda { 0%,70%,100% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } }
.premios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.premio { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 16px 10px 14px; }
.premio .icono-premio { width: 70px; height: 70px; border-radius: 24px; display: grid; place-items: center; background: rgba(255,255,255,.3); border: 3px solid rgba(255,255,255,.6); }
.premio .icono-premio .ic { width: 38px; height: 38px; color: #fff; filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
.premio b { font-size: 15px; font-weight: 900; line-height: 1.15; }
.premio small { font-size: 12px; opacity: .9; min-height: 28px; }
.premio .falta { font-size: 11px; font-weight: 900; }
.premio .b3 { width: 100%; }
.estado-canje { font-size: 11px; font-weight: 900; text-transform: uppercase; padding: 3px 8px; border-radius: 7px; }
.ec-pendiente { background: var(--oro); color: #5a3b00; } .ec-entregado { background: var(--verde); color: #fff; } .ec-rechazado { background: var(--rojo); color: #fff; }

/* ------------------------------------------------------------ perfil */
.perfil-cab { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 26px 16px 20px; }
.perfil-cab .avatar { --av: 116px; border-radius: 32%; }
.perfil-cab .avatar::before { inset: -8px !important; }
.perfil-cab h2 { font-family: var(--titulo); font-weight: 400; font-size: 28px; margin: 8px 0 0; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.titulo-chip { padding: 6px 16px; border-radius: 999px; background: #fff; color: #06205c; font-weight: 900; font-size: 13px; box-shadow: 0 3px 0 #9fafd3; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.opcion { padding: 12px 6px; border-radius: 18px; background: rgba(20,8,70,.3); border: 2px solid rgba(255,255,255,.2); display: grid; justify-items: center; gap: 6px; font-size: 11px; font-weight: 900; text-align: center; position: relative; }
.opcion .avatar { --av: 50px; }
.opcion.elegida { border-color: #fff; background: rgba(255,255,255,.25); box-shadow: 0 0 16px rgba(255,255,255,.5); }
.opcion.bloqueada { opacity: .55; }
.opcion.bloqueada::after { content: ""; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 7px; background: rgba(20,8,70,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/13px no-repeat; }
.opcion .req { font-weight: 700; font-size: 10px; opacity: .85; }
.titulo-op { padding: 12px 14px; border-radius: 16px; background: rgba(20,8,70,.3); border: 2px solid rgba(255,255,255,.2); font-weight: 900; font-size: 14px; text-align: left; justify-content: flex-start; width: 100%; }
.titulo-op + .titulo-op { margin-top: 8px; }
.titulo-op.elegida { border-color: #fff; background: rgba(255,255,255,.25); }
.titulo-op.bloqueada { opacity: .5; }
.titulo-op small { margin-left: auto; font-weight: 700; font-size: 11px; opacity: .85; }
.vitrina { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.medalla { text-align: center; padding: 12px 6px; border-radius: 18px; background: rgba(20,8,70,.3); border: 2px solid rgba(255,255,255,.18); display: grid; justify-items: center; gap: 6px; }
.medalla .disco { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: rgba(255,255,255,.4); box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); }
.medalla .disco .ic { width: 28px; height: 28px; }
.medalla.lograda .disco { background: linear-gradient(145deg, #fff0a8, var(--oro) 50%, var(--oro-s)); color: #5a3b00; box-shadow: 0 0 18px rgba(255,204,46,.6), inset 0 -4px 0 rgba(0,0,0,.15); }
.medalla b { font-size: 12px; line-height: 1.15; }
.medalla small { font-size: 11px; font-family: var(--titulo); opacity: .85; }

/* ------------------------------------------------------------ temporada (camino) */
.camino { position: relative; padding: 10px 0 30px; }
.nodo { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; position: relative; }
.nodo:nth-child(4n+2) { padding-left: 56px; } .nodo:nth-child(4n+3) { padding-left: 104px; } .nodo:nth-child(4n+4) { padding-left: 56px; }
.nodo .bola { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--titulo); font-size: 23px; border: 4px solid rgba(255,255,255,.5);
  background: linear-gradient(180deg, #839dd8, #5e7dc3); box-shadow: 0 6px 0 #36508c, inset 0 3px 0 rgba(255,255,255,.25); color: rgba(255,255,255,.8); }
.nodo.hecho .bola { background: linear-gradient(180deg, var(--oro-a), var(--oro)); box-shadow: 0 6px 0 var(--oro-s), inset 0 3px 0 rgba(255,255,255,.5); color: #5a3b00; border-color: #fff; }
.nodo.actual .bola { background: linear-gradient(180deg, var(--naranja-a), var(--naranja)); box-shadow: 0 6px 0 var(--naranja-s), 0 0 0 7px rgba(255,255,255,.3), 0 0 34px rgba(255,122,26,.8); color: #fff; border-color: #fff; animation: respirar 1.6s ease-in-out infinite; }
.nodo .premio-nodo { font-size: 13px; font-weight: 800; }
.nodo .premio-nodo b { display: block; font-family: var(--titulo); font-weight: 400; font-size: 17px; text-shadow: 0 2px 0 rgba(0,0,0,.2); }

/* ------------------------------------------------------------ hojas, toast, login, varios */
.velo { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(20,8,70,.65); backdrop-filter: blur(5px); animation: fade var(--t); }
.hoja { width: 100%; max-width: 560px; max-height: 92dvh; overflow: auto; border-radius: 30px 30px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #4b7df0, #06205c); border: 3px solid rgba(255,255,255,.3); border-bottom: 0; animation: subir 320ms var(--rebote); }
.hoja .asa { width: 48px; height: 6px; border-radius: 9px; background: rgba(255,255,255,.4); margin: 4px auto 14px; }
.hoja-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hoja-cab h2 { font-family: var(--titulo); font-weight: 400; font-size: 26px; margin: 0; flex: 1; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
@keyframes subir { from { transform: translateY(70px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.campo { display: grid; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; }
.input { width: 100%; height: 54px; padding: 0 16px; border-radius: 16px; border: 3px solid rgba(255,255,255,.35); background: #fff; font-weight: 800; color: #0a1a4a; }
textarea.input { height: auto; min-height: 96px; padding: 12px 16px; resize: vertical; }
.input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 4px rgba(255,204,46,.35); }
.input::placeholder { color: #94a5cb; }
.medios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.medios button { height: 74px; flex-direction: column; gap: 4px; border-radius: 18px; background: rgba(20,8,70,.35); border: 3px solid rgba(255,255,255,.25); font-size: 12px; font-weight: 900; box-shadow: 0 4px 0 rgba(20,8,70,.45); }
.medios button .ic { width: 26px; height: 26px; }
.medios button.activo { border-color: #fff; background: linear-gradient(180deg, var(--naranja-a), var(--naranja)); box-shadow: 0 4px 0 var(--naranja-s); }
.resultados { border-radius: 16px; margin-top: 8px; max-height: 260px; overflow: auto; background: #fff; color: #0a1a4a; }
.resultados button { width: 100%; display: block; text-align: left; padding: 12px 14px; border-bottom: 2px solid #eaf0fd; }
.resultados button:last-child { border-bottom: 0; }
.resultados b { display: block; font-weight: 900; }
.resultados span { font-size: 12px; color: #7487b3; }
.elegido { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.95); color: #0a1a4a; }
.elegido .txt { flex: 1; min-width: 0; }
.elegido b { display: block; font-weight: 900; }
.elegido span { font-size: 12px; color: #7487b3; }
.error-msg { color: #ffe1e5; background: rgba(255,77,94,.35); border-radius: 10px; font-size: 13px; font-weight: 900; padding: 0 10px; margin: -4px 0 10px; }
.error-msg:empty { display: none; }
#toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); z-index: 130;
  padding: 12px 18px; border-radius: 18px; font-weight: 900; font-size: 15px; background: #fff; color: #06205c; box-shadow: 0 6px 0 #9fafd3, 0 12px 30px rgba(20,8,70,.45);
  opacity: 0; pointer-events: none; transition: all 260ms var(--rebote); max-width: calc(100% - 32px); text-align: center; }
#toast.ver { opacity: 1; transform: translateX(-50%); }
#toast.err { background: var(--rojo); color: #fff; box-shadow: 0 6px 0 var(--rojo-s); }
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.14); border: 2px dashed rgba(255,255,255,.4); font-size: 13px; margin-top: 14px; }
.aviso .ic { width: 20px; height: 20px; flex: none; color: var(--oro-a); }
.aviso.fuego { background: linear-gradient(160deg, #ffad4d, #ff6a3d); border: 2px solid #fff; box-shadow: 0 5px 0 #b8421c; }
.aviso.fuego .ic { color: #fff; animation: flama 1s ease-in-out infinite; }
.vacio { text-align: center; padding: 30px 16px; }
.vacio .ic { width: 48px; height: 48px; margin-bottom: 8px; opacity: .8; }
.vacio b { display: block; font-family: var(--titulo); font-weight: 400; font-size: 20px; margin-bottom: 4px; }
.sk { background: linear-gradient(90deg, rgba(255,255,255,.08) 25%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.08) 75%); background-size: 200% 100%; animation: sk 1.2s infinite linear; border-radius: var(--r); }
@keyframes sk { to { background-position: -200% 0; } }
.cab-vista { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.cab-vista h1 { font-family: var(--titulo); font-weight: 400; font-size: 32px; margin: 0; letter-spacing: .4px; text-shadow: 0 4px 0 rgba(20,8,70,.45); line-height: 1.05; }
.cab-vista p { margin: 2px 0 0; color: var(--tx-2); font-size: 14px; }
.cab-vista .atras { width: 44px; height: 44px; border-radius: 15px; background: rgba(20,8,70,.35); border: 2px solid rgba(255,255,255,.25); flex: none; }

.login { min-height: 100dvh; display: grid; place-items: center; padding: 70px 16px 24px; }
.login .panel { width: 100%; max-width: 400px; padding: 30px 22px 26px; text-align: center; overflow: visible; }
.logo-juego { width: 104px; height: 104px; margin: -86px auto 10px; border-radius: 34px; display: grid; place-items: center; border: 5px solid #fff;
  background: linear-gradient(180deg, var(--naranja-a), var(--naranja)); box-shadow: 0 8px 0 var(--naranja-s), 0 18px 40px rgba(255,122,26,.5), inset 0 3px 0 rgba(255,255,255,.4); animation: flotar 3s ease-in-out infinite; }
.logo-juego .ic { width: 56px; height: 56px; stroke-width: 2.4; color: #fff; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.login h1 { font-family: var(--titulo); font-weight: 400; font-size: 40px; margin: 6px 0 2px; text-shadow: 0 4px 0 rgba(20,8,70,.4); line-height: 1; }
.login h1 span { color: var(--oro); display: block; font-size: 30px; }
.login p { margin: 8px 0 22px; color: var(--tx-2); }
.login .campo { text-align: left; }

.tour { position: fixed; inset: 0; z-index: 105; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 30px 24px calc(30px + env(safe-area-inset-bottom)); text-align: center;
  background: radial-gradient(120% 80% at 50% 30%, #5a88f2 0%, #06205c 55%, #183372 100%); }
.tour .ilustra { width: 160px; height: 160px; border-radius: 48px; display: grid; place-items: center; border: 5px solid #fff; animation: flotar 3s ease-in-out infinite; }
.tour .ilustra .ic { width: 88px; height: 88px; stroke-width: 2; color: #fff; filter: drop-shadow(0 4px 0 rgba(0,0,0,.25)); }
.tour h2 { font-family: var(--titulo); font-weight: 400; font-size: 34px; margin: 0; text-shadow: 0 4px 0 rgba(20,8,70,.4); line-height: 1.05; }
.tour p { margin: 0; color: var(--tx-2); font-size: 17px; max-width: 360px; }
.puntitos { display: flex; gap: 8px; }
.puntitos i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); transition: all var(--t); }
.puntitos i.activo { width: 30px; border-radius: 6px; background: #fff; }

/* ------------------------------------------------------------ capa de recompensa */
.confeti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 120; pointer-events: none; }
.moneda { position: fixed; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; z-index: 121; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff6c9 0 18%, #ffcc2e 19% 55%, #d99a00 56% 100%); box-shadow: inset 0 0 0 2px #b8860b, 0 2px 6px rgba(0,0,0,.35); }
.rebote { animation: rebote 420ms var(--rebote); }
@keyframes rebote { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }
.corazon { position: fixed; z-index: 122; width: 26px; height: 26px; margin-left: -13px; pointer-events: none; animation: corazon 1300ms var(--suave) forwards; }
.corazon svg { width: 100%; height: 100%; fill: var(--rosa); filter: drop-shadow(0 2px 4px rgba(255,79,154,.6)); }
@keyframes corazon { 0% { transform: translate(0,0) scale(.4); opacity: 0; } 15% { opacity: 1; transform: translate(0,-10px) scale(1.15); } 100% { transform: translate(var(--dx), -170px) scale(.8); opacity: 0; } }
.flotante { position: fixed; z-index: 123; pointer-events: none; font-family: var(--titulo); font-size: 32px; color: #fff; text-shadow: 0 3px 0 var(--oro-s), 0 0 18px rgba(255,204,46,.9); animation: subir-pts 1200ms var(--suave) forwards; }
@keyframes subir-pts { 0% { transform: translate(-50%, 0) scale(.5); opacity: 0; } 20% { transform: translate(-50%, -10px) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, -100px) scale(1); opacity: 0; } }

.cofre-velo { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto;
  background: radial-gradient(120% 80% at 50% 30%, #2a4fa8 0%, #06205c 50%, #132858 100%); animation: fade 240ms; }
.cofre-velo.saliendo { opacity: 0; transition: opacity 240ms; }
.cofre-velo.dorado { background: radial-gradient(110% 80% at 50% 35%, #ffcf4d 0%, #ff7a1a 45%, #8a2c00 100%); }
.cofre-velo.rosa { background: radial-gradient(110% 80% at 50% 35%, #ff8ec0 0%, #e0306b 50%, #5a0d33 100%); }
.cofre-velo.verde { background: radial-gradient(110% 80% at 50% 35%, #7ff5b8 0%, #12b06a 50%, #063d24 100%); }
.cofre-velo .saltar { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; color: rgba(255,255,255,.8); font-size: 14px; font-weight: 900; padding: 8px 10px; }
.escena { width: 100%; max-width: 420px; text-align: center; position: relative; }
.paso { animation: aparecer 420ms var(--rebote); display: grid; justify-items: center; gap: 12px; }
@keyframes aparecer { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }
.escena h2 { font-family: var(--titulo); font-weight: 400; font-size: 36px; margin: 4px 0 0; text-shadow: 0 4px 0 rgba(20,8,70,.45); line-height: 1.05; }
.escena p { margin: 0; font-size: 16px; }
.b3.grande { height: 64px; min-width: 250px; font-size: 23px; border-radius: 22px; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.95); color: #06205c; font-size: 13px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; box-shadow: 0 4px 0 rgba(20,8,70,.35); }
.etiqueta .ic { width: 16px; height: 16px; }
.cofre-svg { width: 210px; height: 180px; overflow: visible; position: relative; z-index: 1; filter: drop-shadow(0 20px 30px rgba(0,0,0,.45)); }
.cofre-svg .tapa { transform-origin: 20px 56px; transition: transform 600ms cubic-bezier(.2,1.6,.4,1); }
.cofre-svg.agitar { animation: agitar 1.4s ease-in-out infinite; }
.cofre-svg.abierto .tapa { transform: translate(-6px,-40px) rotate(-30deg); }
.rayos { position: absolute; left: 50%; top: 84px; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.45) 0 10deg, transparent 10deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); transition: opacity 500ms; }
.rayos.ver { opacity: 1; animation: girar 9s linear infinite; }
.tragamonedas { min-width: 230px; padding: 22px 30px; border-radius: 30px; background: #fff; border: 6px solid var(--oro); box-shadow: inset 0 -8px 0 #e8eefd, 0 8px 0 var(--oro-s); }
.tragamonedas span { font-family: var(--titulo); font-size: 76px; color: var(--naranja); text-shadow: 0 4px 0 #ffd2a8; }
.tragamonedas.premio-listo { box-shadow: 0 0 0 10px rgba(255,255,255,.3), 0 0 60px rgba(255,204,46,.9), 0 8px 0 var(--oro-s); animation: rebote 500ms var(--rebote); }
.flama { width: 140px; height: 140px; display: grid; place-items: center; }
.flama .ic { width: 130px; height: 130px; color: #fff; fill: rgba(255,214,120,.5); stroke-width: 1.6; animation: flama .9s ease-in-out infinite; filter: drop-shadow(0 0 28px rgba(255,214,120,.95)); }
.corazon-grande .ic { width: 120px; height: 120px; color: #fff; fill: rgba(255,255,255,.35); stroke-width: 1.6; animation: latir 1.2s ease-in-out infinite; filter: drop-shadow(0 0 26px rgba(255,255,255,.7)); }
@keyframes latir { 0%,100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
.lista-aplausos { display: grid; gap: 8px; width: 100%; }
.lista-aplausos div { padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.95); color: #6a1048; text-align: left; box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.lista-aplausos b { display: block; font-weight: 900; }
.lista-aplausos span { font-size: 12px; opacity: .8; }
.filas-premio { display: grid; gap: 8px; width: 100%; }
.fila-premio { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; background: rgba(255,255,255,.95); color: #0a1a4a; box-shadow: 0 4px 0 rgba(20,8,70,.3); opacity: 0; transform: translateX(-24px) scale(.94); transition: all 380ms var(--rebote); text-align: left; }
.fila-premio.ver { opacity: 1; transform: none; }
.fila-premio .ic-box { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; color: #fff; }
.fila-premio .ic-box .ic { width: 22px; height: 22px; }
.fila-premio .txt { flex: 1; font-size: 14px; font-weight: 900; }
.fila-premio .txt small { color: #7487b3; margin-left: 4px; }
.fila-premio b { font-family: var(--titulo); font-weight: 400; color: var(--verde-s); font-size: 20px; }
.destacados { width: 100%; display: grid; gap: 4px; font-size: 12px; text-align: left; }
.destacados div { display: flex; align-items: center; gap: 8px; }
.destacados .ic { width: 14px; height: 14px; color: var(--verde-a); }
.total-premio { display: flex; align-items: center; gap: 10px; }
.total-premio .coin { width: 50px; height: 50px; }
.total-premio b { font-family: var(--titulo); font-weight: 400; font-size: 62px; color: #fff; text-shadow: 0 5px 0 var(--oro-s), 0 0 30px rgba(255,204,46,.8); }
.medalla-grande { width: 156px; height: 156px; border-radius: 50%; display: grid; place-items: center; color: #5a3b00; border: 6px solid #fff;
  background: linear-gradient(145deg, #fff0a8, var(--oro) 40%, var(--oro-s)); box-shadow: 0 0 0 10px rgba(255,255,255,.2), 0 0 70px rgba(255,204,46,.8); animation: medalla 900ms cubic-bezier(.2,1.4,.4,1); }
.medalla-grande .ic { width: 76px; height: 76px; stroke-width: 1.9; }
@keyframes medalla { from { transform: rotateY(540deg) scale(.2); opacity: 0; } to { transform: rotateY(0) scale(1); opacity: 1; } }
.nivel-cambio { display: flex; align-items: center; gap: 14px; font-family: var(--titulo); font-size: 24px; margin: 6px 0; }
.nivel-cambio span { opacity: .7; text-decoration: line-through; }
.nivel-cambio b { font-weight: 400; font-size: 58px; color: #fff; text-shadow: 0 5px 0 var(--oro-s), 0 0 40px rgba(255,255,255,.8); animation: medalla 900ms cubic-bezier(.2,1.4,.4,1); }
.nivel-cambio .ic { width: 30px; height: 30px; }
.sube-grande { width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.25); border: 5px solid #fff; animation: flotar 1s ease-in-out infinite; }
.sube-grande .ic { width: 68px; height: 68px; stroke-width: 2.8; }
.desbloqueo .avatar { --av: 124px; margin: 10px 0; }
.edificio-premio svg { width: 160px; height: 170px; }

/* ------------------------------------------------------------ admin (mismo universo, mas sobrio) */
.tabla-wrap { overflow-x: auto; border-radius: var(--r-sm); border: 2px solid rgba(255,255,255,.2); background: rgba(20,8,70,.35); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th, .tabla td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.12); white-space: nowrap; }
.tabla th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--tx-3); background: rgba(20,8,70,.4); position: sticky; top: 0; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td.r, .tabla th.r { text-align: right; }
.interruptor { width: 48px; height: 30px; border-radius: 99px; background: rgba(20,8,70,.5); border: 2px solid rgba(255,255,255,.25); position: relative; transition: background var(--t); flex: none; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--t) var(--rebote); }
.interruptor.on { background: var(--verde); }
.interruptor.on::after { transform: translateX(18px); }
.form-reglas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.form-reglas h3 { margin: 0 0 10px; font-family: var(--titulo); font-weight: 400; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.form-reglas h3 .interruptor { margin-left: auto; }
.form-reglas .campo { margin-bottom: 10px; }
.form-reglas .input { height: 44px; border-radius: 12px; }
.fila-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.kpi { padding: 14px; border-radius: 18px; }
.kpi small { display: block; font-size: 11px; text-transform: uppercase; font-weight: 900; opacity: .9; }
.kpi b { font-family: var(--titulo); font-weight: 400; font-size: 32px; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.grafica { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 10px; }
.grafica .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.grafica .col .barra-col { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.grafica .col i { width: 100%; max-width: 30px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, var(--oro-a), var(--naranja)); min-height: 2px; }
.grafica .col.azul i { background: linear-gradient(180deg, var(--turquesa-a), var(--azul)); }
.grafica .col small { font-size: 9px; white-space: nowrap; opacity: .8; }
.grafica .col span { font-size: 10px; font-family: var(--titulo); }
@media print { .tabbar, .hud, .no-print { display: none !important; } body { background: #fff; color: #000; } .tabla th, .tabla td { color: #000; } }

@media (min-width: 720px) {
  .velo { align-items: center; }
  .hoja { border-radius: 30px; border-bottom: 3px solid rgba(255,255,255,.3); }
  .premios { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) {
  .hud-yo .info { max-width: 100px; }
  .retos { gap: 6px; } .reto .aro { width: 58px; height: 58px; }
  .dias { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

.logo-mini { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, var(--naranja-a), var(--naranja)); box-shadow: 0 3px 0 var(--naranja-s); border: 2px solid #fff; }
.logo-mini .ic { width: 24px; height: 24px; color: #fff; }

/* ==========================================================================
   Ciudad interactiva, divisiones y pulido de animaciones
   ========================================================================== */
/* entrada escalonada de cada pantalla: las piezas "caen" una tras otra */
.vista > * { animation: caer 520ms var(--rebote) both; }
.vista > *:nth-child(2) { animation-delay: 60ms; } .vista > *:nth-child(3) { animation-delay: 110ms; }
.vista > *:nth-child(4) { animation-delay: 160ms; } .vista > *:nth-child(5) { animation-delay: 210ms; }
.vista > *:nth-child(6) { animation-delay: 260ms; } .vista > *:nth-child(7) { animation-delay: 310ms; }
.vista > *:nth-child(8) { animation-delay: 360ms; } .vista > *:nth-child(n+9) { animation-delay: 400ms; }
@keyframes caer { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
.panel:not(.ciudad):not(.jefe) { transition: transform 160ms var(--rebote); }
.panel[role="button"]:active, button.panel:active { transform: scale(.97); }

/* burbujas de fondo que flotan despacio */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .5;
  background-image: radial-gradient(circle, rgba(255,255,255,.18) 0 3px, transparent 4px), radial-gradient(circle, rgba(255,255,255,.12) 0 2px, transparent 3px);
  background-size: 120px 140px, 80px 90px; background-position: 0 0, 40px 60px; animation: burbujas 40s linear infinite; }
@keyframes burbujas { to { background-position: 0 -1400px, 40px -840px; } }

/* ------------------------------------------------------------ ciudad */
.ciudad { padding: 0; border-width: 4px; }
.ciudad #lienzo-ciudad { line-height: 0; }
.ciudad .rotulo { position: absolute; left: 14px; top: 12px; right: 12px; display: flex; align-items: flex-start; gap: 10px; z-index: 2; pointer-events: none; }
.ciudad .rotulo .txt { flex: 1; }
.ciudad .rotulo button { pointer-events: auto; }
.lote { cursor: pointer; transition: transform 200ms var(--rebote); transform-box: fill-box; }
.lote .edif { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 200ms var(--rebote); }
.lote:hover .edif, .lote:focus .edif { transform: scale(1.05); }
.lote:active .edif { transform: scale(.94); }
.lote.vacio .pulso { animation: pulso 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lote.en-obra .edif, .lote.en-obra > g { animation: temblar 140ms linear infinite; }
@keyframes pulso { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes temblar { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
.edificio-nuevo { animation: construir 900ms var(--rebote) both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes construir { 0% { transform: scaleY(0) scaleX(.6); } 70% { transform: scaleY(1.12) scaleX(1.04); } 100% { transform: none; } }
.humo circle { animation: humo 3s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.humo circle:nth-child(2) { animation-delay: 1s; } .humo circle:nth-child(3) { animation-delay: 2s; }
@keyframes humo { 0% { transform: translateY(8px) scale(.4); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-14px) scale(1.3); opacity: 0; } }
.engrane { animation: girar 5s linear infinite; }
.agua path { animation: agua 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes agua { 0%,100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(1.2); opacity: .7; } }
.parpadeo { animation: parpadeo 1.4s steps(2, jump-none) infinite; }
@keyframes parpadeo { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
.ondas path { animation: ondas 2s ease-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.ondas path:nth-child(2) { animation-delay: .5s; }
@keyframes ondas { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
.sol { animation: respirar 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.peaton { animation: caminar linear infinite; }
.peaton.izq { animation-name: caminar-izq; }
.peaton .paso { animation: paso .5s ease-in-out infinite; }
@keyframes caminar { from { transform: translateX(-20px); } to { transform: translateX(420px); } }
@keyframes caminar-izq { from { transform: translateX(420px) scaleX(-1); } to { transform: translateX(-20px) scaleX(-1); } }
@keyframes paso { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
.nube { animation: nube 50s linear infinite; }

/* Maestro Tito */
.tito { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px; cursor: pointer; background: linear-gradient(180deg, rgba(20,8,70,.15), rgba(20,8,70,.35)); }
.tito-cara { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); animation: flotar 3s ease-in-out infinite; }
.tito-cara svg { width: 100%; height: 100%; }
.tito.salta .tito-cara { animation: saltito 500ms var(--rebote); }
@keyframes saltito { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-14px) rotate(-6deg); } }
.globo-tito { background: #fff; color: #0a1a4a; font-weight: 900; font-size: 12.5px; line-height: 1.25; padding: 9px 12px; border-radius: 16px 16px 16px 4px; box-shadow: 0 4px 0 rgba(20,8,70,.25);
  flex: 1; animation: globo 420ms var(--rebote); }
@keyframes globo { from { transform: scale(.6); opacity: 0; transform-origin: 0 100%; } to { transform: none; opacity: 1; } }

/* barra de recursos */
.recursos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 12px; }
.recurso { display: grid; justify-items: center; gap: 1px; padding: 8px 2px 6px; border-radius: 16px; background: rgba(255,255,255,.95); color: #0a1a4a; box-shadow: 0 4px 0 rgba(20,8,70,.3); cursor: pointer; transition: transform 120ms; }
.recurso:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(20,8,70,.3); }
.recurso .mat { width: 26px; height: 26px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.15)); }
.recurso b { font-family: var(--titulo); font-weight: 400; font-size: 15px; line-height: 1; }
.recurso small { font-size: 9px; font-weight: 900; color: #7487b3; text-transform: uppercase; letter-spacing: .2px; }
.mat { width: 20px; height: 20px; flex: none; }

/* hoja de construccion */
.edif-detalle { display: grid; place-items: center; padding: 6px 0 2px; border-radius: 22px; margin-bottom: 10px; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%); }
.preview-edif { width: 150px; height: 190px; overflow: visible; animation: flotar 3s ease-in-out infinite; margin-bottom: 8px; }
.ventaja-txt { text-align: center; margin: 0 0 12px; font-weight: 900; }
.efectos { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; }
.efecto { flex: 1; padding: 10px; border-radius: 16px; background: rgba(20,8,70,.3); text-align: center; }
.efecto small { display: block; font-size: 11px; text-transform: uppercase; font-weight: 900; opacity: .8; }
.efecto b { font-size: 13px; }
.efecto.sig { background: linear-gradient(160deg, #6ff0ac, #12b06a); box-shadow: 0 4px 0 #0a7444; }
.costos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 14px; }
.costo { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 12px; background: #fff; color: #0a1a4a; }
.costo b { font-family: var(--titulo); font-weight: 400; font-size: 15px; }
.costo small { font-size: 10px; color: #7487b3; }
.costo small::before { content: "/ "; }
.costo.falta { background: #ffe1e5; color: #b8243a; }
.costo.ok { box-shadow: inset 0 0 0 2px #22c55e; }
.catalogo-edif { display: grid; gap: 12px; }
.tarjeta-edif { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 20px; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.2); }
.tarjeta-edif.alcanza { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #fff 0%), color-mix(in srgb, var(--c) 80%, #000 10%)); border-color: #fff; box-shadow: 0 0 18px color-mix(in srgb, var(--c) 60%, transparent); }
.tarjeta-edif .preview-edif { width: 64px; height: 84px; flex: none; animation: none; }
.tarjeta-edif .txt { flex: 1; min-width: 0; }
.tarjeta-edif .txt b { font-family: var(--titulo); font-weight: 400; font-size: 18px; display: block; }
.tarjeta-edif .txt small { font-size: 12px; }
.tarjeta-edif .costos { justify-content: flex-start; margin: 6px 0 0; }
.tarjeta-edif .costo { padding: 3px 7px; }
.tarjeta-edif .costo .mat { width: 16px; height: 16px; }
.polvo { position: fixed; z-index: 124; width: 14px; height: 14px; border-radius: 50%; background: #e7d3b3; pointer-events: none; animation: polvo 1s ease-out forwards; }
@keyframes polvo { from { transform: translate(-50%, -50%) scale(.6); opacity: .95; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(2.2); opacity: 0; } }

/* ------------------------------------------------------------ divisiones */
.divisiones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.division { display: grid; justify-items: start; gap: 2px; padding: 14px; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.division .div-ic { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.28); border: 2px solid rgba(255,255,255,.5); margin-bottom: 6px; }
.division .div-ic .ic { width: 22px; height: 22px; color: #fff; }
.division .div-pos { font-size: 34px; line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.division .div-tit { font-weight: 900; font-size: 13px; line-height: 1.15; }
.division small { font-size: 11px; opacity: .85; }
.segmentos.div4 button { font-size: 12.5px; }
.cab-division { margin-top: 12px; padding: 14px 16px; }
.cab-division b { font-size: 22px; display: block; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.cab-division small { font-size: 13px; }

@media (max-width: 380px) {
  .recursos { grid-template-columns: repeat(3, 1fr); }
  .globo-tito { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { body::before, .peaton, .nube { animation: none !important; } }

/* en cuadriculas las tarjetas no llevan el margen de las tarjetas apiladas */
.divisiones > .panel, .premios > .panel, .kpis > .panel, .retos > .panel { margin-top: 0; }

/* ------------------------------------------------------------ monstruitos 3D */
.tito-cara { width: 78px; height: 78px; margin: -26px 0 -6px; animation: none; }
.tito-cara canvas { filter: drop-shadow(0 6px 6px rgba(20,8,70,.35)); }
.escenario { padding: 10px 14px 16px; text-align: center; overflow: hidden;
  background: radial-gradient(circle at 50% 62%, rgba(255,255,255,.35), transparent 55%), linear-gradient(160deg, #94b2f6 0%, #e1211c 100%); }
.lienzo-monstruo { height: 300px; position: relative; cursor: pointer; }
.lienzo-monstruo .sin-3d { width: 180px; height: 180px; margin: 50px auto 0; }
.escenario .placa { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 12px; position: relative; }
.escenario .placa b { font-size: 28px; text-shadow: 0 3px 0 rgba(20,8,70,.35); }
.escenario .placa small { width: 100%; font-size: 12px; }
.galeria-monstruos { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.galeria-monstruos img { width: 84px; height: 84px; display: block; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); transition: transform 200ms var(--rebote); }
.galeria-monstruos .opcion:active img { transform: scale(.92); }
.galeria-monstruos .opcion.elegida img { transform: scale(1.08); }
.foto-desbloqueo { width: 170px; height: 170px; filter: drop-shadow(0 0 30px rgba(255,255,255,.6)); animation: medalla 900ms cubic-bezier(.2,1.4,.4,1); }

/* ------------------------------------------------------------ misiones del dia (estilo Duolingo) */
.misiones-dia { display: grid; gap: 10px; }
.mision-fila { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.18); position: relative; }
.mision-fila .txt { flex: 1; min-width: 0; }
.mision-fila .txt b { display: block; font-size: 14px; margin-bottom: 6px; }
.mision-fila .txt small { display: block; font-size: 11px; opacity: .85; margin-top: 4px; }
.mis-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; background: #fff; color: #0f8f86; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.mis-ic .ic { width: 24px; height: 24px; }
.mision-fila.hecha { background: rgba(255,255,255,.32); }
.mision-fila.hecha .mis-ic { background: var(--verde); color: #fff; animation: rebote 500ms var(--rebote); }
.cofre-misiones { display: flex; align-items: center; gap: 12px; padding-top: 4px; font-weight: 900; font-size: 14px; }
.cofre-misiones .cofre-dia { width: 64px; height: 58px; }
.misiones-dia.completas { box-shadow: 0 8px 0 #0a6f79, 0 0 34px rgba(255,255,255,.55); }
.pista { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.95); color: #2f5bc2; font-size: 12.5px; }
.pista .ic { width: 18px; height: 18px; flex: none; }
.pista.qr { color: #0a7d76; }

/* ------------------------------------------------------------ mi mascota */
.nivel-mascota { display: flex; align-items: center; gap: 10px; text-align: left; position: relative; z-index: 1; }
.nivel-mascota small { font-size: 12px; font-weight: 900; }
.nv-bola { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #5a3b00;
  background: linear-gradient(180deg, var(--oro-a), var(--oro)); border: 3px solid #fff; box-shadow: 0 4px 0 var(--oro-s); }
.lienzo-monstruo { height: 270px; }
.globo-mascota { position: absolute; top: 6px; right: 4px; z-index: 2; background: #fff; color: #06205c; font-weight: 900; font-size: 13px; padding: 7px 12px; border-radius: 16px 16px 4px 16px; box-shadow: 0 4px 0 rgba(20,8,70,.25); animation: globo 420ms var(--rebote); }
.medidores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; margin-bottom: 12px; position: relative; }
.medidores small { font-size: 12px; font-weight: 900; display: block; margin-bottom: 4px; }
.acciones-mascota { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; }
.acciones-mascota .b3 { padding: 0 8px; font-size: 15px; }
.b3.naranja { --c1: var(--naranja-a); --c2: var(--naranja); --cs: var(--naranja-s); }
.bandeja { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; position: relative; animation: aparecer 320ms var(--rebote); }
.plato { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 18px; background: #fff; color: #0a1a4a; box-shadow: 0 4px 0 rgba(20,8,70,.3); }
.plato .emoji { font-size: 30px; line-height: 1.1; }
.plato b { font-size: 13px; } .plato small { font-size: 11px; color: #7487b3; }
.plato.vacio { opacity: .55; }
.tabs-mascota { overflow-x: auto; }
.tabs-mascota button { flex: none; padding: 0 12px; font-size: 13px; }
.opcion.en-venta { background: rgba(255,204,46,.18); border-color: rgba(255,229,122,.6); }
.opcion .precio { display: inline-flex; align-items: center; gap: 4px; font-family: var(--titulo); font-size: 14px; color: #fff3b8; }
.opcion .precio .coin { width: 16px; height: 16px; }
.muestra-color { width: 60px; height: 60px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 0 rgba(20,8,70,.35), inset 0 -6px 0 rgba(0,0,0,.15); }
.galeria-colores { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.comidas-tienda { display: grid; gap: 10px; }
.comida-item { display: flex; align-items: center; gap: 12px; }
.comida-item .txt { flex: 1; display: grid; gap: 2px; }
.comida-item .txt b { font-family: var(--titulo); font-weight: 400; font-size: 18px; }
.comida-item small { font-size: 12px; opacity: .9; }
.emoji.grande { font-size: 44px; }

.zona-mascota { position: relative; }

/* ==========================================================================
   TEMA LIMPIO (inspirado en Duolingo)
   Fondo blanco, colores planos y saturados, bordes grises de 2px, botones con
   "escalon" inferior, una sola tipografia redonda (Nunito). Sin degradados.
   Este bloque va al final y reemplaza la estetica anterior.
   ========================================================================== */
:root {
  --fondo: #ffffff; --fondo-2: #f7f7f7; --linea: #e5e5e5; --linea-2: #d7d7d7;
  --tx: #3c3c3c; --tx-2: #4b4b4b; --tx-3: #777777; --tx-4: #afafaf;
  --verde: #58cc02; --verde-s: #58a700; --verde-c: #d7ffb8; --verde-t: #58a700;
  --azul: #1cb0f6; --azul-s: #1899d6; --azul-c: #ddf4ff; --azul-b: #84d8ff;
  --rojo: #ff4b4b; --rojo-s: #ea2b2b; --rojo-c: #ffdfe0;
  --naranja: #ff9600; --naranja-s: #e58600; --naranja-c: #fff0d6;
  --oro: #ffc800; --oro-s: #e5b400; --oro-c: #fff5cc; --oro-t: #cd7900;
  --morado: #8babf6; --morado-s: #7089c5; --morado-c: #e8eefd;
  --rosa: #ff86d0; --rosa-s: #e86ab8; --rosa-c: #ffe6f5;
  --turquesa: #00cd9c; --turquesa-s: #00a87f; --turquesa-c: #d6fff2;
  --titulo: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --texto: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 16px; --r-sm: 12px;
  color-scheme: light;
}
html, body { background: var(--fondo) !important; }
body { color: var(--tx); font-weight: 700; background-image: none !important; }
body::before { display: none !important; }
* { text-shadow: none !important; }
.num, .t { font-family: var(--titulo); font-weight: 900; letter-spacing: 0; }
h1, h2, h3, h4, .cab-vista h1, .seccion-cab h2, .hoja-cab h2, .escena h2 { font-family: var(--titulo) !important; font-weight: 900 !important; color: var(--tx); }
.muted { color: var(--tx-3) !important; }
a { color: var(--azul); }

/* ------------------------------------------------------------ botones (plano + escalon) */
.b3 { --c: var(--verde); --cs: var(--verde-s); --ct: #fff;
  background: var(--c) !important; color: var(--ct) !important; border: 0; border-radius: 16px;
  box-shadow: 0 4px 0 var(--cs) !important; font-family: var(--texto); font-weight: 800; font-size: 15px;
  text-transform: uppercase; letter-spacing: .8px; height: 50px; }
.b3::after { display: none; }
.b3:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--cs) !important; }
.b3 .ic { filter: none; }
.b3.verde { --c: var(--verde); --cs: var(--verde-s); }
.b3.azul, .b3.turquesa { --c: var(--azul); --cs: var(--azul-s); }
.b3.rosa { --c: var(--rosa); --cs: var(--rosa-s); }
.b3.morado { --c: var(--morado); --cs: var(--morado-s); }
.b3.naranja { --c: var(--naranja); --cs: var(--naranja-s); }
.b3.oro { --c: var(--oro); --cs: var(--oro-s); --ct: #fff; }
.b3.blanco, .b3.gris { --c: #fff; --cs: var(--linea); --ct: var(--azul); border: 2px solid var(--linea); }
.b3.gris { --ct: var(--tx-3); }
.b3.chico { height: 42px; font-size: 13px; border-radius: 14px; box-shadow: 0 3px 0 var(--cs) !important; }
.b3.grande { height: 54px; font-size: 16px; }
.b3:disabled { background: var(--linea) !important; box-shadow: 0 4px 0 var(--linea-2) !important; color: var(--tx-4) !important; filter: none; }
.enlace { color: var(--azul); text-decoration: none; text-transform: uppercase; font-size: 13px; letter-spacing: .6px; }

/* ------------------------------------------------------------ tarjetas */
.panel, .p-naranja, .p-turquesa, .p-rosa, .p-azul, .p-verde, .p-amarillo, .p-morado, .p-noche {
  background: #fff !important; color: var(--tx) !important; border: 2px solid var(--linea) !important;
  border-radius: var(--r) !important; box-shadow: none !important; }
.panel .brillo { display: none; }
.p-amarillo { background: var(--oro-c) !important; border-color: #ffe58a !important; }
.p-amarillo .muted, .p-amarillo small { color: var(--oro-t) !important; }
.seccion-cab h2 { font-size: 20px; }
.seccion-cab .ic { color: var(--tx-4); }
.seccion-cab .der { color: var(--tx-3); }
.chip { background: var(--fondo-2); border: 2px solid var(--linea); color: var(--tx-2); height: 30px; }
.chip.oro { background: var(--oro-c); border-color: #ffe58a; color: var(--oro-t); }
.chip.blanco { background: #fff; border-color: var(--linea); color: var(--azul); }
.segmentos { background: var(--fondo-2); border: 2px solid var(--linea); border-radius: 16px; padding: 4px; }
.segmentos button { color: var(--tx-3); border-radius: 12px; font-weight: 800; }
.segmentos button.activo { background: #fff; color: var(--azul); box-shadow: 0 0 0 2px var(--azul-b) inset; }

/* barras de progreso (estilo Duolingo: pista gris y brillo superior) */
.barra { background: var(--linea); border: 0; height: 16px; }
.barra > i { background: var(--oro); box-shadow: inset 0 4px 0 rgba(255,255,255,.3); }
.barra.verde > i { background: var(--verde); }
.barra.azul > i { background: var(--azul); }
.barra.naranja > i { background: var(--naranja); }
.barra.rosa > i { background: var(--rosa); }
.barra.rojo > i { background: var(--rojo); }
.barra-txt { color: var(--tx-2); font-weight: 900; font-size: 11px; }
.barra.azul .barra-txt, .barra.verde .barra-txt { color: var(--tx-2); }
.barra.casi > i::after { background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); background-size: 200% 100%; }

/* ------------------------------------------------------------ barra superior y navegacion */
.hud { background: #fff !important; border-bottom: 2px solid var(--linea); box-shadow: none; backdrop-filter: none; }
.hud-yo .nombre { color: var(--tx); font-family: var(--texto); font-weight: 900; }
.hud-pill { background: transparent; border: 0; color: var(--tx-2); font-family: var(--texto); font-weight: 900; padding: 0 6px; }
.hud-pill.fuego { color: var(--naranja); }
.hud-pill.fuego .ic { color: var(--naranja); fill: var(--naranja); }
.hud-pill.fuego.apagado, .hud-pill.fuego.apagado .ic { color: var(--tx-4); fill: none; }
.hud-pill #hud-saldo, #hud-saldo { color: var(--oro-t); }
.hud-btn { background: #fff; border: 2px solid var(--linea); color: var(--tx-4); }
.tabbar { background: #fff; border-top: 2px solid var(--linea); box-shadow: none; }
.tab { color: var(--tx-4); text-transform: none; font-size: 11px; font-weight: 800; letter-spacing: 0; border: 2px solid transparent; }
.tab.activo { color: var(--azul); background: var(--azul-c); border-color: var(--azul-b); }
.tab.activo::after { display: none; }
.tab.activo .ic { transform: none; }
.tab-jugar .boton-jugar { background: var(--verde); border: 0; box-shadow: 0 4px 0 var(--verde-s); animation: none; border-radius: 50%; width: 64px; height: 64px; margin-top: -26px; }
.tab-jugar .lbl { color: var(--verde-t); }
.tab .globo { border-color: #fff; background: var(--rojo); }

/* ------------------------------------------------------------ cabeceras y avisos */
.cab-vista h1 { font-size: 28px; color: var(--tx); }
.cab-vista p { color: var(--tx-3); }
.cab-vista .atras { background: #fff; border: 2px solid var(--linea); color: var(--tx-4); }
.aviso { background: var(--oro-c); border: 2px solid #ffe58a; color: #8a6500; }
.aviso .ic { color: var(--oro-t); }
.aviso.fuego { background: var(--naranja-c); border: 2px solid #ffd59e; box-shadow: none; color: #a35f00; }
.aviso.fuego .ic { color: var(--naranja); }
.vacio, .vacio b { color: var(--tx-3); }
#toast { background: var(--tx-2); color: #fff; box-shadow: none; border-radius: 14px; }
#toast.err { background: var(--rojo); box-shadow: none; }
.error-msg { background: var(--rojo-c); color: var(--rojo-s); }
.sk { background: linear-gradient(90deg, var(--fondo-2) 25%, var(--linea) 50%, var(--fondo-2) 75%); background-size: 200% 100%; }

/* ------------------------------------------------------------ hojas, formularios */
.velo { background: rgba(0,0,0,.45); backdrop-filter: none; }
.hoja { background: #fff; border: 2px solid var(--linea); border-bottom: 0; color: var(--tx); }
.hoja .asa { background: var(--linea); }
.input { background: var(--fondo-2); border: 2px solid var(--linea); color: var(--tx); }
.input:focus { border-color: var(--azul-b); box-shadow: none; }
.input::placeholder { color: var(--tx-4); }
.campo label { color: var(--tx-3); }
.medios button { background: #fff; border: 2px solid var(--linea); color: var(--tx-3); box-shadow: 0 3px 0 var(--linea); }
.medios button.activo { background: var(--azul-c); border-color: var(--azul-b); color: var(--azul); box-shadow: 0 3px 0 var(--azul-b); }
.resultados { background: #fff; border: 2px solid var(--linea); color: var(--tx); }
.resultados button { border-bottom: 2px solid var(--linea); }
.resultados span { color: var(--tx-3); }
.elegido { background: var(--azul-c); border: 2px solid var(--azul-b); color: var(--tx); }

/* ------------------------------------------------------------ login y tour */
.login { background: #fff; }
.login .panel { border: 0 !important; }
.logo-juego { background: var(--verde); border: 0; box-shadow: 0 5px 0 var(--verde-s); animation: none; }
.login h1 { color: var(--verde); }
.login h1 span { color: var(--tx-3); }
.login p { color: var(--tx-3); }
.tour { background: #fff; color: var(--tx); }
.tour p { color: var(--tx-3); }
.tour .ilustra { border: 0; border-radius: 50%; animation: none; }
.tour .ilustra.p-azul { background: var(--azul) !important; } .tour .ilustra.p-verde { background: var(--verde) !important; }
.tour .ilustra.p-amarillo { background: var(--oro) !important; } .tour .ilustra.p-rosa { background: var(--rosa) !important; }
.tour .ilustra.p-naranja { background: var(--naranja) !important; }
.puntitos i { background: var(--linea); } .puntitos i.activo { background: var(--verde); }

/* ------------------------------------------------------------ inicio: misiones, encargo, bono */
.misiones-dia { gap: 0; padding: 4px 14px !important; }
.mision-fila { background: transparent; border-bottom: 2px solid var(--linea); border-radius: 0; padding: 14px 0; }
.mision-fila:last-of-type { border-bottom: 0; }
.mision-fila .txt b { color: var(--tx); font-size: 15px; }
.mision-fila .txt small { color: var(--tx-3); }
.mis-ic { background: var(--azul-c); color: var(--azul); box-shadow: none; border-radius: 12px; }
.mision-fila.hecha { background: transparent; }
.mision-fila.hecha .mis-ic { background: var(--verde); color: #fff; }
.misiones-dia.completas { box-shadow: none !important; border-color: var(--verde) !important; }
.cofre-misiones { border-top: 2px solid var(--linea); padding: 12px 0 10px; color: var(--tx-3); }
.encargo { border-width: 2px !important; overflow: hidden; }
.encargo .franja { color: var(--tx-3); font-family: var(--texto); font-weight: 900; font-size: 12px; letter-spacing: 1px; background: var(--fondo-2) !important; border-bottom: 2px solid var(--linea); animation: none !important; }
.encargo h3 { color: var(--tx); font-family: var(--texto); font-weight: 900; }
.encargo .motivo { color: var(--tx-2); }
.encargo .real { color: var(--tx-3); opacity: 1; }
.encargo .personaje { background: var(--fondo-2); border: 2px solid var(--linea); }
.encargo .personaje .zz { color: var(--azul); }
.r-comun, .r-rara, .r-epica, .r-legendaria { background: #fff !important; }
.r-rara { border-color: var(--azul-b) !important; } .r-rara .franja { color: var(--azul) !important; background: var(--azul-c) !important; border-color: var(--azul-b); }
.r-epica { border-color: #e4b8ff !important; } .r-epica .franja { color: var(--morado-s) !important; background: var(--morado-c) !important; border-color: #e4b8ff; }
.r-legendaria { border-color: var(--oro) !important; } .r-legendaria .franja { color: var(--oro-t) !important; background: var(--oro-c) !important; border-color: var(--oro); }
.rareza-tag { opacity: 1; }
.pista { background: var(--morado-c); color: var(--morado-s); }
.pista.qr { background: var(--turquesa-c); color: var(--turquesa-s); }
.dia { background: var(--fondo-2); border: 2px solid var(--linea); color: var(--tx-3); }
.dia.hecho { background: var(--oro-c); border-color: #ffe58a; }
.dia.hoy { background: #fff; border-color: var(--oro); color: var(--oro-t); box-shadow: none; }
.reto { background: #fff !important; border: 2px solid var(--linea); color: var(--tx) !important; box-shadow: none !important; }
.reto .aro .fondo { stroke: var(--linea); }
.reto:nth-child(1) .aro .av { stroke: var(--verde); } .reto:nth-child(2) .aro .av { stroke: var(--naranja); } .reto:nth-child(3) .aro .av { stroke: var(--morado); }
.reto:nth-child(1) .centro .ic { color: var(--verde); } .reto:nth-child(2) .centro .ic { color: var(--naranja); } .reto:nth-child(3) .centro .ic { color: var(--morado); }
.reto b, .reto .cuenta { color: var(--tx); }
.reto.logrado::after { border-color: #fff; background-color: var(--verde); box-shadow: none; }
.stats .stat, .stat { background: var(--fondo-2); border: 2px solid var(--linea); color: var(--tx); }
.stat small { color: var(--tx-3); }
.sube { color: var(--verde-t); } .baja { color: var(--rojo); }
.division { border-width: 2px !important; }
.division .div-ic { border: 0; }
.division.p-naranja .div-ic { background: var(--naranja); } .division.p-turquesa .div-ic { background: var(--turquesa); }
.division.p-morado .div-ic { background: var(--morado); } .division.p-rosa .div-ic { background: var(--rosa); }
.division .div-pos { color: var(--tx); }
.division small, .division .div-tit { color: var(--tx-3); }

/* ------------------------------------------------------------ ciudad y recursos */
.ciudad { border-width: 2px !important; }
.ciudad .rotulo .txt b { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.35) !important; }
.ciudad .rotulo .txt small { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45) !important; }
.tito { background: #fff; border-top: 2px solid var(--linea); }
.globo-tito { background: var(--fondo-2); border: 2px solid var(--linea); box-shadow: none; color: var(--tx-2); }
.recurso { background: #fff; border: 2px solid var(--linea); box-shadow: none; }
.recurso small { color: var(--tx-3); }
.costo { background: var(--fondo-2); color: var(--tx); border: 2px solid var(--linea); }
.costo.ok { border-color: var(--verde); box-shadow: none; }
.costo.falta { background: var(--rojo-c); border-color: #ffb3b3; color: var(--rojo-s); }
.tarjeta-edif { background: #fff; border: 2px solid var(--linea); color: var(--tx); }
.tarjeta-edif.alcanza { background: #fff; border-color: var(--verde); box-shadow: none; }
.efecto { background: var(--fondo-2); border: 2px solid var(--linea); }
.efecto.sig { background: var(--verde-c); border-color: var(--verde); box-shadow: none; color: var(--verde-t); }
.edif-detalle { background: var(--azul-c); }
.ventaja-txt { color: var(--tx-2); }

/* ------------------------------------------------------------ mascota */
.escenario { background: var(--azul-c) !important; border-color: var(--azul-b) !important; }
.escenario .placa b, .nivel-mascota small, .medidores small { color: var(--tx-2); }
.nv-bola { background: var(--oro); border-color: #fff; box-shadow: 0 3px 0 var(--oro-s); color: #fff; }
.globo-mascota { border: 2px solid var(--linea); box-shadow: none; color: var(--tx-2); }
.plato { background: #fff; border: 2px solid var(--linea); box-shadow: 0 3px 0 var(--linea); color: var(--tx); }
.plato small { color: var(--tx-3); }
.opcion { background: #fff; border: 2px solid var(--linea); color: var(--tx-2); }
.opcion.elegida { background: var(--azul-c); border-color: var(--azul-b); box-shadow: none; }
.opcion.en-venta { background: #fff; border-color: var(--linea); }
.opcion .precio { color: var(--oro-t); }
.opcion .req { color: var(--tx-3); }
.opcion.bloqueada { opacity: .6; }
.titulo-op { background: #fff; border: 2px solid var(--linea); color: var(--tx-2); }
.titulo-op.elegida { background: var(--azul-c); border-color: var(--azul-b); }
.titulo-chip { background: var(--azul-c); color: var(--azul); box-shadow: none; border: 2px solid var(--azul-b); }
.muestra-color { border-color: #fff; box-shadow: 0 0 0 2px var(--linea); }
.comida-item .txt b { font-family: var(--texto); font-weight: 900; }

/* ------------------------------------------------------------ equipo, ranking, mercado, perfil */
.jefe { background: var(--rojo-c) !important; border-color: #ffb3b3 !important; }
.jefe h3, .jefe p { color: var(--tx); }
.muro-item { border-bottom: 2px solid var(--linea); }
.muro-item .txt b { color: var(--tx); } .muro-item .txt span { color: var(--tx-3); }
.btn-aplauso { background: #fff; border: 2px solid var(--linea); color: var(--tx-3); box-shadow: 0 3px 0 var(--linea); }
.btn-aplauso.hecho { background: var(--rosa); border-color: var(--rosa); color: #fff; box-shadow: 0 3px 0 var(--rosa-s); }
.rk { background: #fff; border: 2px solid transparent; }
.rk + .rk { border-top: 2px solid var(--linea); border-radius: 0; margin-top: 0; }
.rk .txt b { color: var(--tx); } .rk .txt span { color: var(--tx-3); } .rk .pos { color: var(--tx-3); } .rk .p { color: var(--tx-2); }
.rk.yo { background: var(--verde-c); border: 2px solid var(--verde) !important; border-radius: 12px; box-shadow: none; }
.rk.yo .pos, .rk.yo .txt span { color: var(--verde-t); }
.podio .peana { box-shadow: none; }
.podio .p1 .peana { background: var(--oro); color: #fff; } .podio .p2 .peana { background: #cfd8dc; color: #fff; } .podio .p3 .peana { background: #e8a66b; color: #fff; }
.podio .nombre { color: var(--tx-2); }
.cab-division b { color: var(--tx); } .cab-division small { color: var(--tx-3); }
.saldo-grande b { color: var(--oro-t); }
.premio .icono-premio { background: var(--fondo-2); border: 2px solid var(--linea); }
.premio .icono-premio .ic { color: var(--azul); filter: none; }
.premio small, .premio .falta { color: var(--tx-3); opacity: 1; }
.medalla { background: #fff; border: 2px solid var(--linea); }
.medalla .disco { background: var(--fondo-2); color: var(--tx-4); box-shadow: none; }
.medalla.lograda .disco { background: var(--oro); color: #fff; box-shadow: none; }
.medalla b { color: var(--tx); } .medalla small { color: var(--tx-3); }
.nodo .bola { background: #fff; border: 2px solid var(--linea); box-shadow: 0 4px 0 var(--linea); color: var(--tx-4); }
.nodo.hecho .bola { background: var(--oro); border-color: var(--oro); box-shadow: 0 4px 0 var(--oro-s); color: #fff; }
.nodo.actual .bola { background: var(--verde); border-color: var(--verde); box-shadow: 0 4px 0 var(--verde-s), 0 0 0 6px var(--verde-c); color: #fff; }
.nodo .premio-nodo { color: var(--tx-3); } .nodo .premio-nodo b { color: var(--tx); }
.icono-q { background: var(--azul-c); border: 0; }
.icono-q .ic { color: var(--azul); }
.premio-q { color: var(--oro-t); }

/* ------------------------------------------------------------ cofre de recompensas y overlays */
.cofre-velo, .cofre-velo.dorado, .cofre-velo.rosa, .cofre-velo.verde { background: #fff; color: var(--tx); }
.cofre-velo .saltar { color: var(--tx-4); }
.escena p { color: var(--tx-3); } .escena p b { color: var(--tx); }
.etiqueta { background: var(--azul-c); color: var(--azul); box-shadow: none; }
.rayos.ver { opacity: .5; }
.rayos { background: repeating-conic-gradient(from 0deg, rgba(255,200,0,.35) 0 10deg, transparent 10deg 24deg); }
.tragamonedas { background: #fff; border: 3px solid var(--linea); box-shadow: 0 5px 0 var(--linea); }
.tragamonedas span { color: var(--oro-t); }
.tragamonedas.premio-listo { border-color: var(--oro); box-shadow: 0 5px 0 var(--oro-s); }
.fila-premio { background: #fff; border: 2px solid var(--linea); box-shadow: none; }
.fila-premio .txt small { color: var(--tx-3); }
.fila-premio b { color: var(--verde-t); }
.total-premio b { color: var(--oro-t); }
.medalla-grande { border-color: #fff; box-shadow: 0 0 0 8px var(--oro-c); }
.nivel-cambio b { color: var(--oro-t); }
.sube-grande { background: var(--verde-c); border: 0; color: var(--verde); }
.flama .ic { color: var(--naranja); fill: var(--naranja-c); filter: none; }
.corazon-grande .ic { color: var(--rosa); filter: none; }
.lista-aplausos div { background: var(--rosa-c); color: var(--tx); box-shadow: none; }
.destacados { color: var(--tx-3); }

/* ------------------------------------------------------------ administracion */
.tabla-wrap { background: #fff; border: 2px solid var(--linea); }
.tabla th { background: var(--fondo-2); color: var(--tx-3); }
.tabla td { color: var(--tx-2); border-bottom: 1px solid var(--linea); }
.interruptor { background: var(--linea); border: 0; }
.interruptor.on { background: var(--verde); }
.kpi { border-width: 2px !important; }
.kpi small { color: var(--tx-3); } .kpi b { color: var(--tx); }
.grafica .col i { background: var(--verde); } .grafica .col.azul i { background: var(--azul); }
.grafica .col small, .grafica .col span { color: var(--tx-3); }
.form-reglas h3 { color: var(--tx); }
.logo-mini { background: var(--verde); border: 0; box-shadow: 0 3px 0 var(--verde-s); }

/* ==========================================================================
   MUNDO 3D (minimalista): cuarto, tienda, cartas, album, visitas y jefe.
   Fondo crema suave, tarjetas blancas, un solo color de accion (verde) y el 3D como protagonista.
   ========================================================================== */
:root { --crema: #fff8f1; --crema-2: #fdeee0; --sombra-suave: 0 6px 18px rgba(120, 70, 30, .08); }
html, body { background: var(--crema) !important; }
.hud { background: rgba(255, 248, 241, .92) !important; backdrop-filter: blur(8px); border-bottom: 0 !important; }
.tabbar { background: #fff !important; border-top: 1px solid var(--linea) !important; }

/* ------------------------------------------------------------ cuarto (inicio y visitas) */
.cuarto-hero { position: relative; margin: 4px -4px 0; height: min(64vh, 440px); min-height: 320px; border-radius: 28px; overflow: hidden;
  background: linear-gradient(180deg, #fff3e6 0%, #ffe9d6 100%); box-shadow: var(--sombra-suave); }
.cuarto-3d, .cuarto-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cuarto-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.cuarto-top > * { pointer-events: auto; }
.chip-nombre, .chip-likes { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 0;
  background: rgba(255, 255, 255, .92); color: var(--tx); font: 800 14px var(--texto); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.chip-nombre b { color: var(--verde-s); }
.chip-likes .ic { width: 18px; height: 18px; color: #ff4f7b; fill: #ff4f7b; }
.chip-likes.boton { cursor: pointer; }
.chip-likes.dado { background: #ffe3ec; }
.chip-likes:disabled { opacity: 1; }
.globo-animo { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 14px; background: #fff;
  font-size: 13px; font-weight: 800; color: var(--tx-2); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); pointer-events: none; white-space: nowrap; }
.globo-animo:empty { display: none; }
.globo-animo { transition: opacity .35s, translate .35s; }
.globo-animo.oculto { opacity: 0; translate: 0 6px; }
.lupa { position: absolute; right: 12px; top: 58px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92);
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); color: var(--tx-2); cursor: pointer; transition: transform .2s; }
.lupa.activo { background: var(--verde); color: #fff; transform: scale(1.06); }
.lupa .ic { width: 22px; height: 22px; }
.pista-gesto { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: rgba(90, 60, 40, .7);
  background: rgba(255, 255, 255, .7); padding: 4px 10px; border-radius: 10px; pointer-events: none; transition: opacity .6s; white-space: nowrap; }
.pista-gesto.ocultar { opacity: 0; }
.cuarto-acciones, .barra-decorar .botones { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; justify-content: center; }
.barra-decorar .botones { position: static; }
.accion { flex: 1; max-width: 120px; height: 64px; border: 0; border-radius: 20px; background: #fff; color: var(--tx-2); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; font: 800 12px var(--texto); box-shadow: 0 3px 0 #ead9c8; cursor: pointer; transition: transform .15s; }
.accion .ic { width: 24px; height: 24px; }
.accion:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #ead9c8; }
.accion.destacada { background: var(--verde); color: #fff; box-shadow: 0 3px 0 var(--verde-s); }
.accion:disabled { opacity: .45; }
.barra-decorar { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px 12px; background: linear-gradient(transparent, rgba(255, 255, 255, .85) 30%);
  display: flex; flex-direction: column; gap: 8px; }
.barra-decorar .pista { align-self: center; font-size: 13px; font-weight: 800; color: var(--tx-2); background: #fff; padding: 6px 12px; border-radius: 12px; }
.cuarto-hero.decorando { box-shadow: 0 0 0 4px var(--verde), var(--sombra-suave); }
.bandeja { position: absolute; left: 12px; right: 12px; bottom: 86px; display: flex; gap: 8px; justify-content: center; }
.bandeja[hidden] { display: none; }
.plato { width: 92px; padding: 8px 6px; border: 0; border-radius: 18px; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12); font: 800 12px var(--texto); color: var(--tx); cursor: pointer; animation: subir .25s ease-out; }
.plato small { color: var(--tx-3); font-weight: 700; }
.plato.vacio { opacity: .55; }
@keyframes subir { from { transform: translateY(12px); opacity: 0; } }

.crecer { margin-top: 14px; padding: 14px 16px; background: #fff; border-radius: 20px; box-shadow: var(--sombra-suave); }
.crecer-txt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.crecer-txt b { font-size: 17px; font-weight: 900; }
.crecer-txt span { font-size: 13px; color: var(--tx-3); }
.barra-fina { height: 10px; border-radius: 99px; background: #f1e7dc; overflow: hidden; margin-top: 8px; }
.barra-fina i { display: block; height: 100%; border-radius: 99px; background: var(--verde); transition: width .8s; }
.medidores-mini { display: flex; gap: 14px; margin-top: 10px; }
.medidores-mini span { flex: 1; display: flex; align-items: center; gap: 6px; color: var(--tx-3); }
.medidores-mini .ic { width: 18px; height: 18px; }
.medidores-mini i { flex: 1; height: 6px; border-radius: 9px; background: linear-gradient(90deg, var(--naranja) var(--v), #f1e7dc var(--v)); }
.medidores-mini span:nth-child(2) i { background: linear-gradient(90deg, #ff6b9a var(--v), #f1e7dc var(--v)); }
.medidores-mini span.limpieza i { background: linear-gradient(90deg, #4dabf7 var(--v), #f1e7dc var(--v)); }
.accion.urge { animation: urge 1.6s ease-in-out infinite; color: #1c7ed6; }
@keyframes urge { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) scale(1.04); } }

.mi-carta-fila { display: flex; gap: 16px; align-items: center; background: #fff; border-radius: 22px; padding: 14px; box-shadow: var(--sombra-suave); }
.mi-carta-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.mi-carta-info > b { font-size: 34px; line-height: 1; }
.mi-carta-info small { color: var(--tx-3); }
.album-mini { font-size: 13px; color: var(--tx-2); margin: 6px 0; }
.bono-llegada { margin-top: 16px; width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; border-radius: 18px;
  background: #fff4cc; color: var(--tx); text-align: left; cursor: pointer; font-family: var(--texto); }
.bono-llegada .coin { width: 32px; height: 32px; }
.bono-llegada span { flex: 1; display: flex; flex-direction: column; }
.bono-llegada small { color: var(--oro-t); font-weight: 700; }

/* ------------------------------------------------------------ cartas de jugador (estilo FIFA) */
.carta { --c1: #e8c39e; --c2: #b98256; --tx-c: #3b2414; --acento: #ff8a3d; position: relative; width: 210px; aspect-ratio: 5 / 7; cursor: pointer; flex: none;
  filter: drop-shadow(0 8px 14px rgba(60, 30, 10, .18)); transition: transform .2s; }
.carta:active { transform: scale(.97); }
.carta-in { position: absolute; inset: 0; border-radius: 22px 22px 46% 46% / 22px 22px 14% 14%; overflow: hidden; color: var(--tx-c);
  background: radial-gradient(120% 70% at 50% 25%, rgba(255, 255, 255, .55), transparent 60%), linear-gradient(160deg, var(--c1), var(--c2));
  border: 3px solid rgba(255, 255, 255, .7); display: flex; flex-direction: column; align-items: center; }
.carta-in::after { content: ""; position: absolute; inset: 6px; border-radius: inherit; border: 1.5px solid rgba(255, 255, 255, .45); pointer-events: none; }
.carta.plata { --c1: #eef1f6; --c2: #aab3c2; --tx-c: #2b3240; }
.carta.oro { --c1: #fff0b3; --c2: #e0a82e; --tx-c: #4a3100; }
.carta.leyenda { --c1: #dae4fc; --c2: #6484cf; --tx-c: #fff; }
.carta.leyenda .carta-in { background: conic-gradient(from 200deg at 50% 40%, #ff9ccf, #ffd75e, #8fd8ff, #aac2f8, #ff9ccf); }
.carta.leyenda .carta-in::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%);
  background-size: 250% 100%; animation: brillo-carta 3.5s linear infinite; }
@keyframes brillo-carta { from { background-position: 150% 0; } to { background-position: -100% 0; } }
/* cada trimestre la carta cambia de edicion: franja y acento distintos */
.carta.ed-1 { --acento: #5cc8ff; } .carta.ed-2 { --acento: #7cd36a; } .carta.ed-3 { --acento: #ff6a3d; } .carta.ed-4 { --acento: #6892f3; }
.carta-in > .carta-foto { position: relative; z-index: 1; width: 70%; height: auto; margin-top: 14%; }
.carta-media { position: absolute; top: 10%; right: 10%; z-index: 2; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.carta-media b { font-size: 46px; font-weight: 900; }
.carta-media span { font-size: 13px; font-weight: 900; letter-spacing: 1px; margin-top: 2px; padding: 2px 6px; border-radius: 6px; background: var(--acento); color: #fff; }
.carta-ed { position: absolute; top: 11%; left: 10%; z-index: 2; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; opacity: .8; line-height: 1.25; }
.carta-nombre { position: relative; z-index: 2; margin-top: -4px; font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: .3px;
  max-width: 88%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 4px; border-bottom: 2px solid var(--acento); }
.carta-stats { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin-top: 8px; }
.carta-stats .st { display: flex; align-items: baseline; gap: 6px; }
.carta-stats .st b { font-size: 19px; font-weight: 900; min-width: 24px; text-align: right; }
.carta-stats .st span { font-size: 12px; font-weight: 800; opacity: .85; }
.carta-pie { position: relative; z-index: 2; margin-top: auto; margin-bottom: 9%; font-size: 9px; font-weight: 800; text-transform: uppercase; opacity: .75;
  max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carta.chica { width: 128px; }
.carta.chica .carta-media b { font-size: 28px; } .carta.chica .carta-media span { font-size: 9px; }
.carta.chica .carta-ed { font-size: 7px; }
.carta.chica .carta-nombre { font-size: 11px; }
.carta.chica .carta-stats { gap: 0 10px; margin-top: 4px; }
.carta.chica .carta-stats .st b { font-size: 12px; min-width: 16px; } .carta.chica .carta-stats .st span { font-size: 8px; }
.carta.chica .carta-pie { font-size: 7px; }
.carta.oculta { cursor: default; filter: none; }
.carta.oculta .carta-in { background: repeating-linear-gradient(135deg, #f3e9df 0 10px, #efe2d5 10px 20px); border: 2px dashed #dcc8b4; color: #b9a189;
  justify-content: center; gap: 6px; }
.carta.oculta .silueta { font-size: 44px; font-weight: 900; }
.carta.oculta b { font-size: 11px; text-align: center; padding: 0 8px; }
.hoja-carta { text-align: center; }
.carta-grande { display: flex; justify-content: center; margin: 6px 0 14px; }
.carta-grande .carta { width: 230px; }
.desglose { text-align: left; display: flex; flex-direction: column; gap: 8px; }
.fila-st { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--fondo-2); }
.fila-st > div { flex: 1; display: flex; flex-direction: column; }
.fila-st small { color: var(--tx-3); font-weight: 700; font-size: 12px; }
.fila-st .cuenta { font-weight: 800; color: var(--tx-3); }
.fila-st .nota { width: 44px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; color: #fff; }
.n-alta { background: var(--verde); } .n-media { background: var(--oro); } .n-baja { background: #ff8a5c; }
.nota-escala { font-size: 12px; margin: 12px 0; }
.carta-centro { display: flex; justify-content: center; }

/* ------------------------------------------------------------ album y sobres */
.album-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.album-cab b { font-size: 30px; display: block; line-height: 1; }
.album-cab small { color: var(--tx-3); }
.sobres-acc { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.enlace { background: none; border: 0; cursor: pointer; font-weight: 800; }
.niveles-album { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.nv { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: #fff; color: var(--tx-2); }
.nv-leyenda { background: #e6edfd; color: #567acd; } .nv-oro { background: #fff1c2; color: #a26b00; } .nv-plata { background: #eef1f6; color: #4a5468; } .nv-bronce { background: #f6e3d3; color: #8a5530; }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 14px 10px; margin-top: 12px; justify-items: center; }
.album .carta.chica { width: 100%; max-width: 132px; }
.velo-sobre { align-items: center; background: rgba(30, 16, 60, .78) !important; }
.sobre-escena { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px; }
.sobre { width: 180px; height: 250px; border: 0; border-radius: 20px; cursor: pointer; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(160deg, #ff9a5c, #ff5c8a 60%, #6892f3); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); font-family: var(--texto);
  animation: flotar 1.6s ease-in-out infinite; }
.sobre span { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; opacity: .85; }
.sobre b { font-size: 30px; font-weight: 900; }
.sobre small { font-weight: 800; opacity: .85; }
.sobre.rasgar { animation: rasgar .45s ease-in forwards; }
@keyframes flotar { 50% { transform: translateY(-8px) rotate(-1.5deg); } }
@keyframes rasgar { 40% { transform: scale(1.08) rotate(3deg); } to { transform: scale(.2) rotate(-20deg); opacity: 0; } }
.sobre-cartas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.voltear { position: relative; width: 128px; aspect-ratio: 5 / 7; perspective: 800px; animation: entrar-carta .4s calc(var(--i) * 120ms) both ease-out; }
.voltear .cara { position: absolute; inset: 0; backface-visibility: hidden; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.voltear .atras { border-radius: 18px; background: linear-gradient(160deg, #ff9a5c, #6892f3); border: 3px solid rgba(255, 255, 255, .6); }
.voltear .frente { transform: rotateY(180deg); }
.voltear.vuelta .atras { transform: rotateY(-180deg); }
.voltear.vuelta .frente { transform: rotateY(0); }
.voltear .nueva, .voltear .repetida { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); font-size: 11px; font-weight: 900; padding: 3px 10px; border-radius: 99px; z-index: 3; }
.voltear .nueva { background: var(--verde); color: #fff; } .voltear .repetida { background: #fff; color: var(--tx-3); }
@keyframes entrar-carta { from { transform: translateY(40px) scale(.8); opacity: 0; } }

/* ------------------------------------------------------------ tienda */
.cab-tienda { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.cab-tienda h1 { font-size: 26px; margin: 0; }
.cab-tienda p { margin: 0; color: var(--tx-3); font-size: 13px; }
.cab-tienda > div { flex: 1; min-width: 0; }
.saldo-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 99px; background: #fff; box-shadow: var(--sombra-suave); }
.saldo-pill b { font-size: 17px; }
.saldo-pill .coin { width: 22px; height: 22px; }
.vitrina { height: 230px; border-radius: 26px; overflow: hidden; background: radial-gradient(circle at 50% 70%, #fff, #ffeedd 70%); box-shadow: var(--sombra-suave); position: relative; display: block; }
.vitrina-cuarto { height: 280px; }
.vitrina canvas { width: 100%; height: 100%; }
.chips-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 4px; scrollbar-width: none; }
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll button { flex: none; height: 38px; padding: 0 16px; border-radius: 99px; border: 0; background: #fff; color: var(--tx-2); font: 800 14px var(--texto);
  box-shadow: 0 1px 0 #ead9c8; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.chips-scroll button.activo { background: var(--tx); color: #fff; }
.chips-scroll.lugares button { height: 32px; font-size: 13px; padding: 0 12px; }
.chips-scroll.lugares button.activo { background: var(--verde); }
.chips-scroll button.cerrado { color: var(--tx-4); }
.chips-scroll button .ic { width: 14px; height: 14px; }
.segmentos.chips-scroll { background: none; border: 0; padding: 12px 2px 4px; }
.segmentos.chips-scroll button { flex: none; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 10px; }
.item { --r: #c9c2ba; position: relative; padding: 22px 8px 10px; border-radius: 20px; border: 0; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: 800 13px var(--texto); color: var(--tx); cursor: pointer; box-shadow: var(--sombra-suave), inset 0 0 0 2px transparent; transition: transform .15s; text-align: center; }
.item:active { transform: scale(.96); }
.item.usando { box-shadow: var(--sombra-suave), inset 0 0 0 3px var(--verde); }
.item .item-img { width: 84px; height: 84px; object-fit: contain; }
.item small { color: var(--tx-3); font-weight: 700; font-size: 11px; }
.item .estado { color: var(--verde-s); }
.item .req { display: inline-flex; gap: 3px; align-items: center; }
.item .req .ic { width: 12px; height: 12px; }
.item.no-mio .item-img { filter: saturate(.9); }
.item .rareza { position: absolute; top: 8px; left: 8px; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 99px;
  background: var(--r); color: #fff; }
.r-comun { --r: #b5aca3; } .r-rara { --r: #3fa7ff; } .r-epica { --r: #a35cff; } .r-legendaria { --r: #ffb300; }
.item.r-legendaria { background: linear-gradient(180deg, #fff9e6, #fff); }
.item.r-epica { background: linear-gradient(180deg, #f7f0ff, #fff); }
.item .tag-lim { position: absolute; top: 8px; right: 8px; font-size: 9px; font-weight: 900; padding: 2px 7px; border-radius: 99px; background: #ff4f7b; color: #fff; }
.item-vacio { width: 84px; height: 84px; display: grid; place-items: center; color: var(--tx-4); }
.precio-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; height: 30px; padding: 0 12px; border-radius: 99px; border: 0; background: var(--verde);
  color: #fff; font: 900 13px var(--texto); box-shadow: 0 2px 0 var(--verde-s); cursor: pointer; }
.precio-btn .coin { width: 16px; height: 16px; }
.precio-btn.gris, .precio-btn:disabled { background: var(--linea); color: var(--tx-3); box-shadow: none; }
.aviso-lugar { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: #fff; margin-top: 10px; font-size: 13px; color: var(--tx-2); }
.aviso-lugar .ic { flex: none; width: 20px; height: 20px; color: var(--tx-4); }
.sub { font-size: 15px; margin: 18px 0 6px; }
.colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 10px; }
.color { position: relative; aspect-ratio: 1; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .1); display: grid; place-items: center; }
.color.activo { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--verde); }
.color.bloq { opacity: .55; }
.color .ic { width: 16px; height: 16px; color: #fff; }
.mini-precio { position: absolute; bottom: -6px; font-size: 9px; font-weight: 900; background: #fff; border-radius: 6px; padding: 1px 4px; color: var(--tx-2); }
.fila-nombre { display: flex; gap: 8px; } .fila-nombre .input { flex: 1; }
.nota-tienda { font-size: 12px; text-align: center; margin: 10px 0; }
.hoja-compra { text-align: center; }
.hoja-compra h2 { margin: 10px 0 4px; }
.rareza.grande { display: inline-block; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px; border-radius: 99px; background: var(--r); color: #fff; }
.lista-premios { display: flex; flex-direction: column; gap: 8px; }
.premio-fila { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: var(--sombra-suave); }
.premio-fila .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.premio-fila small { color: var(--tx-3); font-weight: 700; }
.premio-ic { width: 44px; height: 44px; border-radius: 14px; background: #fff1de; display: grid; place-items: center; color: var(--naranja); flex: none; }

/* ------------------------------------------------------------ cuartos de companeros */
.lista-cuartos { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.fila-cuarto { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 18px; border: 0; background: #fff; box-shadow: var(--sombra-suave);
  text-align: left; font-family: var(--texto); color: var(--tx); cursor: pointer; width: 100%; }
.fila-cuarto.yo { box-shadow: var(--sombra-suave), inset 0 0 0 2px var(--verde); }
.fila-cuarto .pos { width: 24px; text-align: center; color: var(--tx-3); }
.fila-cuarto .mini-mascota { width: 52px; height: 52px; }
.fila-cuarto .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fila-cuarto .txt small { color: var(--tx-3); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-cuarto .likes { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; color: var(--tx-2); }
.fila-cuarto .likes .ic { width: 18px; height: 18px; color: #ffb3c6; }
.fila-cuarto .likes.dado .ic { color: #ff4f7b; fill: #ff4f7b; }
.joyas { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.joya { flex: none; width: 104px; padding: 10px 6px; border-radius: 18px; background: #fff; display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: var(--sombra-suave), inset 0 0 0 2px var(--r); }
.joya b { font-size: 12px; } .joya small { font-size: 10px; color: var(--tx-3); }

/* ------------------------------------------------------------ jefe 3D */
.jefe-hero { margin-top: 14px; padding: 6px 16px 18px; border-radius: 26px; background: linear-gradient(180deg, #eaf0fd, #fff); text-align: center; box-shadow: var(--sombra-suave); }
.jefe-hero.derrotado { background: linear-gradient(180deg, #e9f9dd, #fff); }
.jefe-3d { height: 230px; margin: 0 auto; max-width: 320px; }
.jefe-3d.chico { height: 170px; width: 220px; }
.jefe-hero h3 { margin: 0; font-size: 22px; }
.jefe-hero p { margin: 4px 0 10px; color: var(--tx-3); }
.vida { position: relative; height: 22px; border-radius: 99px; background: #e8ecf4; overflow: hidden; margin: 6px 0; }
.vida i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff5c6b, #ff8a5c); border-radius: 99px; transition: width 1s; }
.vida span { position: relative; font-size: 12px; font-weight: 900; line-height: 22px; color: #5a1f2a; }
.jefe-hero .b3 { margin-top: 12px; }
.b3.rojo { --c: var(--rojo); --cs: var(--rojo-s); }

@media (prefers-reduced-motion: reduce) {
  .sobre, .carta.leyenda .carta-in::before { animation: none; }
}

/* ==========================================================================
   PALETA "LAVANDA Y CORAL" (va al final: manda sobre todo lo anterior)
   Violeta para acciones, coral para lo social (corazones, sobres), menta para lo logrado,
   oro solo para monedas. Fondo lavanda muy claro, texto tinta indigo, sombras suaves sin bordes grises.
   ========================================================================== */
:root {
  --fondo: #f4f6fb; --fondo-2: #eef2fa; --linea: #e3e8f5; --linea-2: #d1daee;
  --tx: #26324d; --tx-2: #46526d; --tx-3: #7c7699; --tx-4: #b0b8c9;
  --verde: #6892f3; --verde-s: #4a74d4; --verde-c: #e8eefd; --verde-t: #4a74d4;   /* accion principal (violeta) */
  --menta: #20c997; --menta-s: #12a57b; --menta-c: #dcf8ee;                       /* logrado */
  --coral: #ff6f61; --coral-s: #e4503f; --coral-c: #ffe6e3;                       /* social */
  --azul: #4c8dff; --azul-s: #3070e6; --azul-c: #e3edff; --azul-b: #a9c8ff;
  --rojo: #ff5a6e; --rojo-s: #e23b51; --rojo-c: #ffe1e5;
  --naranja: #ff9f43; --naranja-s: #ea8423; --naranja-c: #fff0dd;
  --oro: #ffc43d; --oro-s: #e5a400; --oro-c: #fff6d6; --oro-t: #a26b00;
  --morado: #85a7f5; --morado-s: #6288df; --morado-c: #ebf0fd;
  --rosa: #ff8fc7; --rosa-s: #ea6aab; --rosa-c: #ffe9f4;
  --turquesa: #20c997; --turquesa-s: #12a57b; --turquesa-c: #dcf8ee;
  --crema: #f4f6fb; --crema-2: #e8edf7;
  --sombra-suave: 0 1px 2px rgba(43, 35, 80, .04), 0 8px 24px rgba(43, 35, 80, .07);
  --r: 20px;
}
html, body { background: var(--fondo) !important; }
[hidden] { display: none !important; }
body { color: var(--tx); }
h1, h2, h3 { letter-spacing: -.2px; }

/* encabezado y barra inferior: blancos, flotantes */
.hud { background: rgba(246, 244, 255, .9) !important; }
.hud-pill { background: #fff !important; border: 0 !important; box-shadow: var(--sombra-suave) !important; color: var(--tx) !important; }
.tabbar { background: rgba(255, 255, 255, .96) !important; border-top: 0 !important; box-shadow: 0 -6px 24px rgba(43, 35, 80, .07); }
.tabbar .tab { color: var(--tx-4) !important; }
.tabbar .tab.activo { color: var(--verde) !important; background: var(--verde-c) !important; border: 0 !important; }
.boton-jugar { background: var(--verde) !important; box-shadow: 0 4px 0 var(--verde-s), 0 8px 20px rgba(124, 92, 255, .35) !important; }
.tab-jugar .lbl { color: var(--verde) !important; }

/* tarjetas: sin borde gris, con sombra suave */
.panel, .p-naranja, .p-turquesa, .p-rosa, .p-azul, .p-verde, .p-amarillo, .p-morado, .p-noche {
  border: 0 !important; box-shadow: var(--sombra-suave) !important; border-radius: var(--r) !important; }
.p-amarillo { background: var(--oro-c) !important; }
.seccion-cab h2 { font-size: 19px; }
.seccion-cab .ic { color: var(--verde) !important; }

/* botones */
.b3.oro { --c: var(--coral); --cs: var(--coral-s); }
.b3.verde { --c: var(--verde); --cs: var(--verde-s); }
.b3.blanco { --ct: var(--verde); }
.precio-btn { background: var(--verde); box-shadow: 0 2px 0 var(--verde-s); }

/* misiones: lo cumplido en menta */
.mision-fila.hecha .mis-ic { background: var(--menta) !important; color: #fff !important; }
.barra.verde i, .mision-fila.hecha .barra i { background: var(--menta) !important; }
.barra i { background: var(--verde) !important; }
.mis-ic { background: var(--verde-c) !important; color: var(--verde) !important; border: 0 !important; }
.chip.oro { background: var(--oro-c) !important; color: var(--oro-t) !important; border: 0 !important; }

/* cuarto */
.cuarto-hero { background: linear-gradient(180deg, #ecf1fd 0%, #fde9f2 100%); box-shadow: var(--sombra-suave); }
.chip-nombre b { color: var(--verde); }
.chip-likes .ic { color: var(--coral); fill: var(--coral); }
.chip-likes.dado { background: var(--coral-c); }
.accion { box-shadow: 0 3px 0 var(--linea-2); color: var(--tx-2); }
.accion:active:not(:disabled) { box-shadow: 0 0 0 var(--linea-2); }
.accion.destacada { background: var(--verde); box-shadow: 0 3px 0 var(--verde-s); }
.lupa.activo { background: var(--verde); }
.cuarto-hero.decorando { box-shadow: 0 0 0 4px var(--verde), var(--sombra-suave); }
.barra-decorar { background: linear-gradient(transparent, rgba(255, 255, 255, .9) 30%); }
.barra-fina { background: var(--fondo-2); }
.barra-fina i { background: linear-gradient(90deg, var(--verde), #94b2f6); }
.medidores-mini i { background: linear-gradient(90deg, var(--naranja) var(--v), var(--fondo-2) var(--v)); }
.medidores-mini span:nth-child(2) i { background: linear-gradient(90deg, var(--coral) var(--v), var(--fondo-2) var(--v)); }
.medidores-mini span.limpieza i { background: linear-gradient(90deg, #4dabf7 var(--v), var(--fondo-2) var(--v)); }
.bono-llegada { background: var(--oro-c); box-shadow: var(--sombra-suave); }

/* tienda */
.vitrina { background: radial-gradient(circle at 50% 75%, #fff, #e8eefd 75%); }
.chips-scroll button { box-shadow: var(--sombra-suave); color: var(--tx-2); }
.chips-scroll button.activo { background: var(--tx); color: #fff; }
.chips-scroll.lugares button.activo { background: var(--verde); }
.item.usando { box-shadow: var(--sombra-suave), inset 0 0 0 3px var(--verde); }
.item .estado { color: var(--verde); }
.r-comun { --r: #a9a3c2; } .r-rara { --r: #4c8dff; } .r-epica { --r: #a35cff; } .r-legendaria { --r: #ffb020; }
.item .tag-lim { background: var(--coral); }
.color.activo { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--verde); }
.premio-ic { background: var(--verde-c); color: var(--verde); }

/* cartas y album */
.nv { box-shadow: var(--sombra-suave); }
.velo-sobre { background: rgba(43, 35, 80, .82) !important; }
.sobre { background: linear-gradient(160deg, #ff8f6b, #ff6f91 55%, #6892f3); }
.voltear .atras { background: linear-gradient(160deg, #ff8f6b, #6892f3); }
.voltear .nueva { background: var(--menta); }
.n-alta { background: var(--menta); } .n-media { background: var(--oro); } .n-baja { background: var(--coral); }
.fila-st { background: var(--fondo-2); }

/* cuartos de companeros y jefe */
.fila-cuarto.yo { box-shadow: var(--sombra-suave), inset 0 0 0 2px var(--verde); }
.fila-cuarto .likes .ic { color: #ffc2bc; }
.fila-cuarto .likes.dado .ic { color: var(--coral); fill: var(--coral); }
.jefe-hero { background: linear-gradient(180deg, #e4ecfd, #fff); }
.vida { background: var(--fondo-2); }
.vida i { background: linear-gradient(90deg, var(--rojo), var(--coral)); }

/* foco visible para teclado */
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.b3.wa { --c: #25d366; --cs: #1aa34f; }
.avatar.con-mascota { background: #fff !important; overflow: hidden; box-shadow: var(--sombra-suave); }
.avatar .avatar-3d { width: 150%; height: 150%; margin: -12% 0 0 -30%; object-fit: cover; }

/* ------------------------------------------------------------ perfil */
.perfil-hero { margin-top: 4px; padding: 0 16px 18px; border-radius: 28px; background: linear-gradient(180deg, #e8eefd, #fff 70%); text-align: center; box-shadow: var(--sombra-suave); }
.perfil-3d { height: 230px; margin: 0 auto; max-width: 300px; }
.perfil-hero h1 { margin: 0; font-size: 26px; }
.perfil-hero > p { margin: 4px 0 12px; font-size: 13px; }
.titulo-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 4px 12px; border-radius: 99px; border: 0; background: var(--verde-c);
  color: var(--verde); font: 800 13px var(--texto); cursor: pointer; }
.titulo-chip .ic { width: 14px; height: 14px; }
.perfil-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.perfil-stats > div { background: #fff; border-radius: 16px; padding: 10px 4px; box-shadow: var(--sombra-suave); display: flex; flex-direction: column; }
.perfil-stats b { font-size: 20px; } .perfil-stats small { font-size: 11px; color: var(--tx-3); font-weight: 700; }
.coleccion-res { background: #fff; border-radius: 20px; padding: 14px; box-shadow: var(--sombra-suave); }
.coleccion-res .niveles-album { margin: 10px 0; }
.coleccion-res .nv { background: var(--fondo-2); box-shadow: none; }
.medallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.medallas .medalla { background: #fff; border-radius: 18px; padding: 12px 8px; text-align: center; box-shadow: var(--sombra-suave); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.medallas .disco { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--fondo-2); color: var(--tx-4); }
.medallas .lograda .disco { background: var(--oro); color: #fff; }
.medallas b { font-size: 12px; } .medallas small { font-size: 11px; color: var(--tx-3); }
.medallas .barra-fina { width: 100%; height: 6px; margin-top: 4px; }
.menu-perfil { display: flex; flex-direction: column; gap: 8px; }
.fila-menu { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-radius: 18px; background: #fff; box-shadow: var(--sombra-suave);
  font: 800 15px var(--texto); color: var(--tx); cursor: pointer; text-align: left; }
.fila-menu span { flex: 1; } .fila-menu .ic { color: var(--verde); } .fila-menu .ic:last-child { color: var(--tx-4); }
.fila-menu.salir, .fila-menu.salir .ic { color: var(--rojo); }
.lista-titulos { display: flex; flex-direction: column; gap: 6px; }
.lista-titulos .titulo-op { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--fondo-2); font: 800 14px var(--texto); color: var(--tx); text-align: left; }
.lista-titulos .titulo-op span { flex: 1; } .lista-titulos .titulo-op small { color: var(--tx-3); font-weight: 700; }
.lista-titulos .elegida { background: var(--verde-c); box-shadow: inset 0 0 0 2px var(--verde); }
.lista-titulos .bloqueada { opacity: .6; }

/* ranking y listas: mascotas en vez de iniciales */
.mini-mascota { transform: scale(1.25); }
.segmentos { background: var(--fondo-2) !important; border: 0 !important; border-radius: 16px; }
.segmentos button { border: 0 !important; color: var(--tx-3) !important; background: transparent !important; box-shadow: none !important; }
.segmentos button.activo { background: #fff !important; color: var(--tx) !important; box-shadow: var(--sombra-suave) !important; }
.segmentos.chips-scroll { background: none !important; }
.segmentos.chips-scroll button { background: #fff !important; box-shadow: var(--sombra-suave) !important; color: var(--tx-2) !important; }
.segmentos.chips-scroll button.activo { background: var(--tx) !important; color: #fff !important; }
.avatar.con-mascota { border-radius: 50% !important; }
.podio .peana { background: var(--fondo-2) !important; color: var(--tx) !important; box-shadow: none !important; }
.podio .p1 .peana { background: var(--oro) !important; color: #fff !important; }

/* foto real del asesor en su carta: recorte sin fondo que se funde con la carta */
.carta-in > .carta-foto.foto-real { width: 82%; aspect-ratio: 4 / 5; height: auto; margin-top: 9%; object-fit: cover; object-position: top;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
  opacity: 0; transition: opacity .4s; filter: drop-shadow(0 4px 6px rgba(40, 20, 10, .25)); margin-bottom: -16%; }
.carta-in > .carta-foto.foto-real.lista { opacity: 1; }
.carta.chica .carta-in > .carta-foto.foto-real { margin-bottom: -18%; }
.carta-in > .carta-foto.foto-real { width: 70%; margin-top: 12%; margin-bottom: -6%;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 92%); mask-image: linear-gradient(to bottom, #000 62%, transparent 92%); }
.carta.chica .carta-in > .carta-foto.foto-real { margin-bottom: -8%; }
.carta-nombre, .carta-stats { text-shadow: 0 1px 2px rgba(255, 255, 255, .55); }
.carta.leyenda .carta-nombre, .carta.leyenda .carta-stats, .carta.leyenda .carta-media { text-shadow: 0 1px 3px rgba(60, 20, 90, .55); }
.cofre-3d { width: 230px; height: 200px; margin: 0 auto; position: relative; }
.cofre-3d canvas { width: 100%; height: 100%; }
.cofre-3d canvas ~ .cofre-svg, .cofre-3d:has(canvas) .cofre-svg { display: none; }
.rareza-adm { display: inline-block; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 99px; background: var(--r); color: #fff; }
.avatar .avatar-foto { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .3s; }
.avatar .avatar-foto.lista, .foto-real-mini.lista { opacity: 1; }
.foto-real-mini { object-fit: cover; object-position: top; border-radius: 50%; background: var(--fondo-2); transform: none !important; opacity: 0; transition: opacity .3s; }

/* modo prueba del director */
.ver-como { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; margin-bottom: 14px; border-radius: 20px; background: var(--verde-c); }
.ver-como small { flex-basis: 100%; }
.franja-prueba { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px; border-radius: 99px; background: var(--tx); color: #fff; font-size: 12px; box-shadow: 0 6px 20px rgba(43, 35, 80, .3); white-space: nowrap; }
.franja-prueba button { border: 0; border-radius: 99px; padding: 6px 12px; background: var(--coral); color: #fff; font: 800 12px var(--texto); cursor: pointer; }
.franja-prueba { max-width: calc(100vw - 24px); white-space: normal; font-size: 11px; line-height: 1.3; }
.franja-prueba span { min-width: 0; }
.franja-prueba button { flex: none; }
.franja-prueba { width: max-content; max-width: calc(100vw - 24px); white-space: nowrap; font-size: 12px; }

/* ==========================================================================
   CARTAS: EFECTOS Y ANIMACIONES (lamina por nivel, brillo, inclinacion 3D, revelado)
   Tomado de las cartas de MNGameCenter (EfectoRareza.cs, CartaMovible.cs, PantallaCartas.cs y
   docs/AUDIO-Y-FEEDBACK.md §4.5). cartas-fx.js pone --fx/--fy (-1..1) y --fk (0..1) solo
   mientras la carta se mueve. Todo anima transform/opacity; fuera de pantalla queda en pausa.
   ========================================================================== */
:root { --fx-estrella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.4 16.6 11.1 24 12C16.6 12.9 12.9 16.6 12 24C11.1 16.6 7.4 12.9 0 12C7.4 11.1 11.1 7.4 12 0Z'/%3E%3C/svg%3E"); }
/* tinte de la edicion: Hielo, Primavera, Blaze, Galaxy */
.ed-1 { --fx-tinte: #8fe3ff; --fx-tinte-a: rgba(110, 210, 255, .42); }
.ed-2 { --fx-tinte: #b4f59a; --fx-tinte-a: rgba(140, 235, 120, .38); }
.ed-3 { --fx-tinte: #ffc06b; --fx-tinte-a: rgba(255, 150, 80, .42); }
.ed-4 { --fx-tinte: #afc5f8; --fx-tinte-a: rgba(180, 130, 255, .45); }

/* la sombra pasa del filtro (que se repinta con cada animacion interna) a la propia carta */
.carta { filter: none; }
.carta-in { isolation: isolate; box-shadow: 0 8px 16px rgba(60, 30, 10, .16); }
.carta.oculta .carta-in { box-shadow: 0 6px 14px rgba(28, 23, 69, .22); }

/* ---- inclinacion 3D y paralaje: solo mientras se mueve (will-change solo entonces) */
.carta.fx-mueve { transition: none; will-change: transform;
  transform: perspective(900px) rotateX(calc(var(--fy, 0) * 8deg)) rotateY(calc(var(--fx, 0) * -10deg)) scale(calc(1 + var(--fk, 0) * .015)); }
/* en el álbum (cartas chicas, muchas juntas) la inclinación es todavía más suave */
.album .carta.fx-mueve { transform: perspective(900px) rotateX(calc(var(--fy, 0) * 5deg)) rotateY(calc(var(--fx, 0) * -6deg)); }
.carta.fx-mueve .carta-in > .carta-foto { transform: translate(calc(var(--fx, 0) * -7px), calc(var(--fy, 0) * -5px)) scale(1.03); }
.carta.fx-mueve .carta-media, .carta.fx-mueve .carta-ed { transform: translate(calc(var(--fx, 0) * 3px), calc(var(--fy, 0) * 2px)); }
.carta-grande .carta, .foco .carta { touch-action: none; }
.carta-viva .carta { touch-action: pan-y; }

/* ---- capas de efecto (dentro de .carta-in, que recorta con su forma) */
.carta-in > i[class^="fx-"] { position: absolute; pointer-events: none; }
.fx-holo, .fx-brillo { inset: 0; overflow: hidden; border-radius: inherit; }
.fx-holo { z-index: 3; }
.fx-lamina { position: absolute; inset: -40%; opacity: 0; transform: translate(calc(var(--fx, 0) * -22%), calc(var(--fy, 0) * -14%)); }
.fx-brillo { z-index: 4; }
.fx-brillo::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%; opacity: 0;
  background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, .7) 50%, transparent 90%); transform: translateX(-130%) skewX(-16deg); }
/* reflejo: mancha de luz que va donde esta el dedo; plana = apagada (como el especular de EfectoRareza) */
.fx-reflejo { inset: -60%; z-index: 4; mix-blend-mode: overlay; opacity: calc(var(--fk, 0) * var(--fx-glare, .4) * .7);
  background: radial-gradient(circle at 50% 50%, #fff 0, rgba(255, 255, 255, .55) 12%, transparent 30%);
  transform: translate(calc(var(--fx, 0) * 22%), calc(var(--fy, 0) * 22%)); }
.carta:not(.fx-mueve) .fx-reflejo { display: none; }
@keyframes fx-barrido { 0%, 80% { transform: translateX(-130%) skewX(-16deg); opacity: 0; } 82%, 97% { opacity: 1; } 100% { transform: translateX(330%) skewX(-16deg); opacity: 0; } }
@keyframes fx-barrido-1 { 0% { transform: translateX(-130%) skewX(-16deg); opacity: 1; } 100% { transform: translateX(330%) skewX(-16deg); opacity: 1; } }
.carta.fx-destello .fx-brillo::before { animation: fx-barrido-1 .7s cubic-bezier(.4, 0, .3, 1) both !important; }

/* ---- bronce: satinado calido, apenas se nota hasta que la inclinas */
.carta.bronce { --fx-glare: .3; }
.carta.bronce .fx-lamina { mix-blend-mode: soft-light; opacity: calc(var(--fk, 0) * .5);
  background: linear-gradient(115deg, transparent 36%, rgba(255, 220, 180, .9) 47%, #fff 50%, rgba(255, 220, 180, .9) 53%, transparent 64%); }

/* ---- plata: metal cepillado (lineas finas) + un destello fino que corre con el angulo */
.carta.plata { --fx-glare: .45; }
.carta.plata .carta-in { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .2) 0 1px, rgba(80, 95, 120, .045) 1px 2px, transparent 2px 4px),
  radial-gradient(120% 70% at 50% 25%, rgba(255, 255, 255, .6), transparent 60%), linear-gradient(160deg, var(--c1), var(--c2)); }
.carta.plata .fx-lamina { mix-blend-mode: overlay; opacity: calc(.12 + var(--fk, 0) * .45);
  background: linear-gradient(105deg, transparent 43%, #fff 49.4%, #fff 50.6%, transparent 57%), linear-gradient(105deg, transparent 55%, rgba(205, 225, 255, .9) 58.5%, transparent 62%); }
.carta.plata .fx-brillo::before { width: 22%; animation: fx-barrido 8s cubic-bezier(.45, .05, .35, 1) infinite; animation-delay: calc(var(--n, 0) * -1.1s - 3s); }
.carta.chica.bronce:not(.fx-mueve) .fx-holo, .carta.chica.plata:not(.fx-mueve) .fx-holo { display: none; }

/* ---- oro: lamina dorada con rayos de sol, barrido cada ~5 s y chispas de cuatro puntas (como el marco Legendaria) */
.carta.oro { --fx-glare: .5; }
.carta.oro .carta-in { background: repeating-conic-gradient(from 0deg at 50% 30%, rgba(255, 255, 255, .13) 0 5deg, transparent 5deg 15deg),
  radial-gradient(120% 70% at 50% 25%, rgba(255, 255, 255, .6), transparent 60%), linear-gradient(160deg, var(--c1), var(--c2) 72%, #c48a14);
  border-color: #fff4c4; }
.carta.oro .fx-lamina { mix-blend-mode: overlay; opacity: calc(.14 + var(--fk, 0) * .42);
  background: linear-gradient(115deg, transparent 32%, rgba(255, 236, 160, .9) 45%, #fff 50%, rgba(255, 196, 60, .9) 55%, transparent 68%); }
.carta.oro .fx-brillo::before { animation: fx-barrido 5.5s cubic-bezier(.45, .05, .35, 1) infinite; animation-delay: calc(var(--n, 0) * -.9s - 1s); }
.fx-chispas { inset: 0; z-index: 5; }
.fx-chispas i { position: absolute; width: 15%; aspect-ratio: 1; background: #fffbe2; opacity: 0; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9));
  -webkit-mask: var(--fx-estrella) center / contain no-repeat; mask: var(--fx-estrella) center / contain no-repeat; animation: fx-centella 3.4s ease-in-out infinite; }
.fx-chispas i:nth-child(1) { top: 3%; left: 28%; animation-delay: calc(var(--n, 0) * -.37s - .3s); }
.fx-chispas i:nth-child(2) { top: 41%; right: 3%; width: 11%; animation-delay: calc(var(--n, 0) * -.37s - 1.5s); }
.fx-chispas i:nth-child(3) { bottom: 17%; left: 5%; width: 9%; animation-delay: calc(var(--n, 0) * -.37s - 2.5s); }
@keyframes fx-centella { 0%, 72%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 82% { opacity: 1; transform: scale(1) rotate(45deg); } 92% { opacity: 0; transform: scale(.3) rotate(90deg); } }

/* ---- leyenda: lamina holografica arcoiris (se corre con el angulo y deriva despacio), purpurina,
   borde que gira y aura. La lamina no tapa la cara: mascara con hueco donde va la foto. */
.carta.leyenda { --fx-glare: .45; }
.carta.leyenda .fx-holo { -webkit-mask-image: radial-gradient(ellipse 46% 48% at 50% 54%, rgba(0, 0, 0, .12) 66%, #000 100%);
  mask-image: radial-gradient(ellipse 46% 48% at 50% 54%, rgba(0, 0, 0, .12) 66%, #000 100%); }
/* la leyenda tiene texto blanco: contorno mas firme para que la lamina no se lo coma */
.carta.leyenda .carta-nombre, .carta.leyenda .carta-stats, .carta.leyenda .carta-media b, .carta.leyenda .carta-ed {
  text-shadow: 0 1px 0 rgba(70, 30, 130, .75), 0 0 2px rgba(70, 30, 130, .8), 0 0 8px rgba(70, 30, 130, .45); }
.carta.leyenda .carta-in::before { display: none; }
.carta.leyenda .fx-lamina { mix-blend-mode: overlay; opacity: calc(.38 + var(--fk, 0) * .37);
  background: repeating-linear-gradient(125deg, #ff6fbf 0%, #ffcf5c 4%, #7dffb0 8%, #63cfff 12%, #8babf6 16%, #ff6fbf 20%);
  animation: fx-deriva 7s ease-in-out infinite alternate; }
.carta.leyenda .fx-holo::after { content: ""; position: absolute; inset: 0; mix-blend-mode: overlay; opacity: calc(.55 + var(--fk, 0) * .45);
  background-image: radial-gradient(circle, #fff 0 .8px, transparent 1.4px), radial-gradient(circle, var(--fx-tinte) 0 .7px, transparent 1.3px), radial-gradient(circle, #fff 0 .5px, transparent 1px);
  background-size: 23px 19px, 17px 29px, 11px 13px; background-position: 3px 7px, 11px 2px, 6px 9px; animation: fx-purpurina 1.8s steps(3) infinite; }
.carta.leyenda .fx-brillo::before { animation: fx-barrido 4.6s cubic-bezier(.45, .05, .35, 1) infinite; animation-delay: calc(var(--n, 0) * -1.3s - 2s); }
.carta.leyenda .fx-chispas i { background: #fff; }
.carta.leyenda .fx-chispas i:nth-child(2) { background: var(--fx-tinte); }
@keyframes fx-deriva { from { translate: -7% -4%; } to { translate: 7% 4%; } }
@keyframes fx-purpurina { 0% { opacity: .35; } 50% { opacity: .9; } 100% { opacity: .55; } }
.fx-aura { position: absolute; inset: -3px; z-index: 0; overflow: hidden; pointer-events: none;
  border-radius: 25px 25px 46% 46% / 25px 25px 14% 14%; box-shadow: 0 0 14px 1px rgba(196, 150, 255, .6), 0 0 26px 3px rgba(255, 200, 120, .3); }
.fx-aura::before { content: ""; position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; margin: -100% 0 0 -100%;
  background: conic-gradient(#ff6fbf, #ffcf5c, #7dffb0, #63cfff, #8babf6, #ff6fbf); animation: fx-girar 5s linear infinite; }
@keyframes fx-girar { to { transform: rotate(1turn); } }
@keyframes fx-aparece { from { opacity: 0; } to { opacity: 1; } }

/* solo se anima lo que se ve */
.carta:not(.fx-vista) .fx-brillo::before, .carta:not(.fx-vista) .fx-chispas i, .carta:not(.fx-vista) .fx-lamina,
.carta:not(.fx-vista) .fx-holo::after, .carta:not(.fx-vista) .fx-aura::before, .carta.oculta:not(.fx-vista) .carta-in::before { animation-play-state: paused; }

/* ---- carta que aun no te sale: reverso misterioso, sin foto, sin nivel, sin numeros */
.carta.oculta .carta-in { color: rgba(255, 255, 255, .8); border: 2px solid rgba(255, 255, 255, .22);
  background: radial-gradient(60% 40% at 50% 42%, var(--fx-tinte-a, rgba(160, 130, 255, .4)), transparent 72%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 1.5px, transparent 1.5px 11px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .06) 0 1.5px, transparent 1.5px 11px),
    linear-gradient(165deg, #394e7e, #0a1a4a 78%); }
.carta.oculta .carta-in::after { border-color: rgba(255, 255, 255, .18); }
.carta.oculta .silueta { display: grid; place-items: center; width: 46%; aspect-ratio: 1; border-radius: 50%; line-height: 1; font-size: 34px; color: #fff;
  border: 3px solid rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 4px rgba(255, 255, 255, .07), 0 0 20px var(--fx-tinte-a, rgba(160, 130, 255, .4)); }
.carta.oculta b { color: rgba(255, 255, 255, .72); }
.carta.oculta .carta-in::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, .13) 50%, transparent 90%); transform: translateX(-130%) skewX(-16deg);
  animation: fx-barrido 9s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -.61s); }

/* ---- apariciones */
.album { perspective: 1100px; }
.album > .carta { animation: fx-entra .5s cubic-bezier(.2, .9, .3, 1.15) backwards; animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes fx-entra { from { opacity: 0; translate: 0 14px; scale: .92; } }   /* sin giro: tus cartas salen de frente desde el primer cuadro */
/* ficha: la carta llega girando y aterriza con un rebote; luego pasa un destello (mundo.js) */
.carta-grande { position: relative; perspective: 900px; }
.carta-grande > .carta { z-index: 1; animation: fx-llega .85s cubic-bezier(.2, .85, .25, 1.06) backwards; }
@keyframes fx-llega { 0% { opacity: 0; translate: 0 70px; scale: .45; } 45% { opacity: 1; } 78% { scale: 1.05; } 100% { translate: 0 0; scale: 1; } }
.carta-grande.n-oro::before, .carta-grande.n-leyenda::before { content: ""; position: absolute; left: 50%; top: 50%; width: 440px; aspect-ratio: 1; margin: -220px 0 0 -220px;
  z-index: 0; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(255, 205, 80, .45) 0 7deg, transparent 7deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 66%); mask-image: radial-gradient(circle, #000 20%, transparent 66%);
  animation: fx-aparece .6s .5s backwards, fx-girar 40s linear infinite; }
.carta-grande.n-leyenda::before { background: repeating-conic-gradient(from 0deg, rgba(255, 110, 190, .42) 0 6deg, transparent 6deg 15deg, rgba(90, 190, 255, .42) 15deg 21deg, transparent 21deg 30deg); }
/* tu carta en inicio y perfil: respira despacio y le pasa un brillo de vez en cuando */
.carta-viva { animation: fx-flota 4.6s ease-in-out infinite; }
.carta-viva:not(:has(.fx-vista)) { animation-play-state: paused; }
@keyframes fx-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.carta-viva .carta.bronce .fx-brillo::before { animation: fx-barrido 6.5s cubic-bezier(.45, .05, .35, 1) infinite; }

/* ---- el sobre: entra, se carga (tiembla mas cuanto mejor es lo que trae, con luz blanca por la costura), se rasga */
.sobre { position: relative; overflow: visible; animation: fx-sobre-entra .6s cubic-bezier(.2, 1.3, .4, 1) backwards, flotar 1.6s .6s ease-in-out infinite; }
.sobre.ed-1 { background: linear-gradient(160deg, #8fe3ff, #4f8bff 55%, #5987f2); }
.sobre.ed-2 { background: linear-gradient(160deg, #b4f59a, #2fc39a 55%, #2a8bd8); }
.sobre.ed-3 { background: linear-gradient(160deg, #ffc06b, #ff6f6f 55%, #c63e8e); }
.sobre.ed-4 { background: linear-gradient(160deg, #afc5f8, #6892f3 55%, #293d6a); }
.sobre::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: overlay;
  background: repeating-linear-gradient(125deg, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, .28) 14px 18px), radial-gradient(90% 60% at 30% 20%, rgba(255, 255, 255, .45), transparent 60%); }
.sobre > span, .sobre > b, .sobre > small { position: relative; }
.sobre-tira { position: absolute; left: 0; right: 0; top: 0; height: 15%; border-radius: 20px 20px 0 0; background: rgba(255, 255, 255, .16);
  border-bottom: 2px dashed rgba(255, 255, 255, .75); pointer-events: none; }
.sobre-luz { position: absolute; left: -10%; right: -10%; top: calc(15% - 14px); height: 28px; pointer-events: none; opacity: 0; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, .7) 40%, transparent); }
@keyframes fx-sobre-entra { from { opacity: 0; transform: translateY(-60px) scale(.7) rotate(-6deg); } }
.carga-bronce { --a: 2px; --carga: .55s; --luz: .45; } .carga-plata { --a: 3px; --carga: .7s; --luz: .6; }
.carga-oro { --a: 4px; --carga: .95s; --luz: .85; } .carga-leyenda { --a: 6px; --carga: 1.35s; --luz: 1; }
.sobre.cargando { animation: fx-temblor .066s linear infinite, fx-carga var(--carga) ease-in forwards; }
.sobre.cargando .sobre-luz { animation: fx-fuga var(--carga) ease-in forwards; }
@keyframes fx-temblor { 0% { translate: var(--a) 0; } 50% { translate: calc(var(--a) * -1) 1px; } 100% { translate: var(--a) 0; } }
@keyframes fx-carga { to { scale: 1.08; } }
@keyframes fx-fuga { to { opacity: var(--luz); } }
.sobre.rasgar { animation: fx-sobre-sale .42s .1s ease-in forwards; }
.sobre.rasgar .sobre-tira { animation: fx-tira .38s ease-out forwards; }
.sobre.rasgar .sobre-luz { opacity: 1; scale: 1.6 3; transition: scale .3s; }
@keyframes fx-tira { to { transform: translate(70px, -110px) rotate(28deg); opacity: 0; } }
@keyframes fx-sobre-sale { to { transform: translateY(130px) scale(.9); opacity: 0; } }

/* ---- las cartas salen boca abajo y se voltean una a una */
.sobre-escena::before { content: ""; position: fixed; inset: 0; background: rgba(10, 6, 30, .6); opacity: 0; transition: opacity .35s; pointer-events: none; }
.sobre-escena.tension::before { opacity: 1; }
.sobre-escena.luz::before { opacity: 0; }
/* la rafaga va dentro del velo: encima de su fondo, detras de las cartas */
.velo-sobre > .fx-rafaga { z-index: 0; }
.velo-sobre > .sobre-escena { position: relative; z-index: 1; }
.sobre-escena.tension .voltear:not(.foco) { opacity: .35; }
.sobre-cartas { gap: 8px; flex-wrap: nowrap; }
.sobre-cartas .voltear { width: min(128px, calc((100vw - 72px) / 3)); animation: fx-sube .55s calc(var(--i) * 110ms) cubic-bezier(.2, 1.1, .35, 1) backwards;
  transition: translate .45s cubic-bezier(.3, .9, .3, 1), scale .45s cubic-bezier(.3, .9, .3, 1), opacity .3s; }
.sobre-cartas .voltear .carta.chica { width: 100%; }
@keyframes fx-sube { from { opacity: 0; translate: 0 150px; scale: .7; rotate: calc((var(--i) - 1) * 9deg); } }
.voltear .atras { display: grid; place-items: center; border-radius: 16px; border: 3px solid rgba(255, 255, 255, .55); box-shadow: 0 10px 22px rgba(0, 0, 0, .35);
  background: radial-gradient(60% 40% at 50% 46%, var(--fx-tinte-a, rgba(160, 130, 255, .4)), transparent 72%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 1.5px, transparent 1.5px 11px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 1.5px, transparent 1.5px 11px), linear-gradient(165deg, #394e7e, #0a1a4a 78%); }
.voltear .atras b { width: 54%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 3px solid #fff; font-size: 24px; font-weight: 900; letter-spacing: -1px;
  color: #fff; background: rgba(255, 255, 255, .08); box-shadow: 0 0 18px var(--fx-tinte-a, rgba(160, 130, 255, .4)); }
.voltear.n-bronce .cara { transition-duration: .42s; }
.voltear.n-oro .cara, .voltear.n-leyenda .cara { transition-duration: .7s; }
/* el resplandor del nivel nace con el volteo, nunca antes */
.voltear.vuelta::before { content: ""; position: absolute; inset: -32%; z-index: -1; pointer-events: none; border-radius: 50%; animation: fx-aparece .4s .22s backwards; }
.voltear.n-bronce.vuelta::before { display: none; }
.voltear.n-plata.vuelta::before { background: radial-gradient(closest-side, rgba(225, 235, 255, .45), transparent); }
.voltear.n-oro.vuelta::before { background: radial-gradient(closest-side, rgba(255, 214, 90, .75), rgba(255, 170, 40, .2) 60%, transparent); }
.voltear.n-leyenda.vuelta::before { inset: -75%; border-radius: 0; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .5) 0 5deg, transparent 5deg 15deg, var(--fx-tinte, #ffd36b) 15deg 19deg, transparent 19deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 60%); mask-image: radial-gradient(circle, #000 12%, transparent 60%);
  animation: fx-aparece .4s .22s backwards, fx-girar 14s linear infinite; }
.voltear.fx-flash .frente::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: 22px 22px 46% 46% / 22px 22px 14% 14%; background: #fff; pointer-events: none;
  animation: fx-flash .55s ease-out forwards; }
@keyframes fx-flash { from { opacity: .95; } to { opacity: 0; } }
/* leyenda: sube al centro y se agranda mientras dura su momento */
.voltear.foco { z-index: 10; translate: var(--dx, 0) var(--dy, 0); scale: 1.85; transition: translate .5s cubic-bezier(.2, 1.25, .3, 1), scale .5s cubic-bezier(.2, 1.25, .3, 1); }
/* sello de "¡Nueva!" y aviso discreto de repetida (la repetida no se celebra) */
.voltear:not(.vuelta) .nueva, .voltear:not(.vuelta) .repetida { opacity: 0; }
.voltear.vuelta .nueva { animation: fx-sello .5s .5s cubic-bezier(.2, 1.6, .4, 1) both; box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(0, 0, 0, .25); letter-spacing: .3px; }
.voltear.vuelta .repetida { animation: fx-aparece .3s .45s both; }
@keyframes fx-sello { 0% { opacity: 0; transform: translateX(-50%) scale(2.6) rotate(-16deg); } 60% { opacity: 1; transform: translateX(-50%) scale(.92) rotate(-6deg); } 100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(-6deg); } }
.sobre-pista { margin: 0; color: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 800; animation: fx-aparece .4s 1.2s backwards; }
#b-listo:not([hidden]) { animation: fx-sobre-entra .45s cubic-bezier(.2, 1.3, .4, 1) backwards; }

/* ---- destellos a pantalla completa (cartas-fx.js) */
.fx-rafaga { position: fixed; inset: 0; z-index: 115; pointer-events: none; overflow: hidden; --tinte: #fff3b0; opacity: 0;
  background: radial-gradient(circle at 50% 42%, #fff 0, var(--tinte) 20%, transparent 62%); animation: fx-rafaga 1.4s ease-out forwards; }
.fx-rafaga i { position: absolute; left: 50%; top: 42%; width: 170vmax; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .6) 0 4deg, transparent 4deg 14deg);
  -webkit-mask-image: radial-gradient(circle, #000 4%, transparent 50%); mask-image: radial-gradient(circle, #000 4%, transparent 50%); animation: fx-girar 7s linear infinite; }
@keyframes fx-rafaga { 0% { opacity: 0; } 7% { opacity: 1; } 28% { opacity: .3; } 40% { opacity: .85; } 100% { opacity: 0; } }
.fx-chispero { position: fixed; z-index: 116; width: 0; height: 0; pointer-events: none; --c: #fff6c8; }
.fx-chispero i { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; background: var(--c);
  -webkit-mask: var(--fx-estrella) center / contain no-repeat; mask: var(--fx-estrella) center / contain no-repeat; animation: fx-chispa var(--t) var(--d) cubic-bezier(.15, .7, .3, 1) both; }
.fx-chispero i:nth-child(3n) { background: #fff; }
@keyframes fx-chispa { 0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 1; } 35% { opacity: 1; transform: translate(calc(var(--x) * .7), calc(var(--y) * .7)) scale(var(--s)) rotate(90deg); }
  100% { transform: translate(var(--x), var(--y)) scale(0) rotate(200deg); opacity: 0; } }
.fx-sacude { animation: fx-sacude .28s linear; }
@keyframes fx-sacude { 0% { translate: 6px 0; } 20% { translate: -5px 2px; } 40% { translate: 4px -2px; } 60% { translate: -3px 1px; } 80% { translate: 1px 0; } 100% { translate: 0 0; } }

/* ---- menos movimiento: todo quieto, sin inclinacion; la lamina se queda como acabado fijo */
@media (prefers-reduced-motion: reduce) {
  .carta, .carta *, .carta *::before, .carta *::after, .carta-in::before, .carta-viva, .carta-grande::before, .sobre, .sobre *, .sobre-cartas .voltear,
  .voltear::before, .voltear *, .fx-rafaga, .fx-rafaga i, .fx-chispero i, .fx-sacude { animation: none !important; }
  .carta.fx-mueve { transform: none; }
  .voltear.foco { translate: none; scale: none; }
}


/* ==========================================================================
   CARTA DIAMANTE (antes "leyenda" arcoiris): cristal tallado blanco hielo y azul,
   facetas que reflejan al inclinar, fuego prismatico sutil en las aristas y destellos blancos.
   La clase interna sigue siendo .leyenda; solo cambia el aspecto y el nombre.
   ========================================================================== */
.carta.leyenda { --c1: #f6fbff; --c2: #a9c9ec; --tx-c: #13294b; --fx-tinte: #bfe6ff; --fx-glare: .55; }
.carta.leyenda .carta-in { background: linear-gradient(160deg, #ffffff 0%, #e6f3ff 35%, #bcd8f4 70%, #eef7ff 100%); border-color: rgba(255, 255, 255, .95); }
.carta.leyenda .carta-in::after { border-color: rgba(150, 200, 245, .7); }
/* facetas talladas: se mueven un poco con el angulo y brillan mas al inclinar */
.carta.leyenda .fx-lamina { mix-blend-mode: soft-light; opacity: calc(.55 + var(--fk, 0) * .35); animation: fx-deriva 9s ease-in-out infinite alternate;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><path d='M0 0L30 0L15 15Z' fill='%23cfe6fb'/><path d='M30 0L30 30L15 15Z' fill='%23eaf6ff'/><path d='M30 30L0 30L15 15Z' fill='%23b7d6f5'/><path d='M0 30L0 0L15 15Z' fill='%23dcecff'/><path d='M30 0L60 0L45 15Z' fill='%23ffffff'/><path d='M60 0L60 30L45 15Z' fill='%23ffffff'/><path d='M60 30L30 30L45 15Z' fill='%23a9cbef'/><path d='M30 30L30 0L45 15Z' fill='%23f7fbff'/><path d='M60 0L90 0L75 15Z' fill='%23ffffff'/><path d='M90 0L90 30L75 15Z' fill='%23cfe6fb'/><path d='M90 30L60 30L75 15Z' fill='%23f7fbff'/><path d='M60 30L60 0L75 15Z' fill='%23ffffff'/><path d='M90 0L120 0L105 15Z' fill='%23f7fbff'/><path d='M120 0L120 30L105 15Z' fill='%23eaf6ff'/><path d='M120 30L90 30L105 15Z' fill='%23ffffff'/><path d='M90 30L90 0L105 15Z' fill='%23ffffff'/><path d='M0 30L30 30L15 45Z' fill='%23b7d6f5'/><path d='M30 30L30 60L15 45Z' fill='%23b7d6f5'/><path d='M30 60L0 60L15 45Z' fill='%23ffffff'/><path d='M0 60L0 30L15 45Z' fill='%23eaf6ff'/><path d='M30 30L60 30L45 45Z' fill='%23ffffff'/><path d='M60 30L60 60L45 45Z' fill='%23f7fbff'/><path d='M60 60L30 60L45 45Z' fill='%23b7d6f5'/><path d='M30 60L30 30L45 45Z' fill='%23ffffff'/><path d='M60 30L90 30L75 45Z' fill='%23a9cbef'/><path d='M90 30L90 60L75 45Z' fill='%23f7fbff'/><path d='M90 60L60 60L75 45Z' fill='%23ffffff'/><path d='M60 60L60 30L75 45Z' fill='%23eaf6ff'/><path d='M90 30L120 30L105 45Z' fill='%23dcecff'/><path d='M120 30L120 60L105 45Z' fill='%23dcecff'/><path d='M120 60L90 60L105 45Z' fill='%23f7fbff'/><path d='M90 60L90 30L105 45Z' fill='%23ffffff'/><path d='M0 60L30 60L15 75Z' fill='%23f7fbff'/><path d='M30 60L30 90L15 75Z' fill='%23f7fbff'/><path d='M30 90L0 90L15 75Z' fill='%23b7d6f5'/><path d='M0 90L0 60L15 75Z' fill='%23ffffff'/><path d='M30 60L60 60L45 75Z' fill='%23eaf6ff'/><path d='M60 60L60 90L45 75Z' fill='%23ffffff'/><path d='M60 90L30 90L45 75Z' fill='%23f7fbff'/><path d='M30 90L30 60L45 75Z' fill='%23a9cbef'/><path d='M60 60L90 60L75 75Z' fill='%23eaf6ff'/><path d='M90 60L90 90L75 75Z' fill='%23cfe6fb'/><path d='M90 90L60 90L75 75Z' fill='%23b7d6f5'/><path d='M60 90L60 60L75 75Z' fill='%23eaf6ff'/><path d='M90 60L120 60L105 75Z' fill='%23f7fbff'/><path d='M120 60L120 90L105 75Z' fill='%23ffffff'/><path d='M120 90L90 90L105 75Z' fill='%23f7fbff'/><path d='M90 90L90 60L105 75Z' fill='%23cfe6fb'/><path d='M0 90L30 90L15 105Z' fill='%23f7fbff'/><path d='M30 90L30 120L15 105Z' fill='%23a9cbef'/><path d='M30 120L0 120L15 105Z' fill='%23dcecff'/><path d='M0 120L0 90L15 105Z' fill='%23eaf6ff'/><path d='M30 90L60 90L45 105Z' fill='%23ffffff'/><path d='M60 90L60 120L45 105Z' fill='%23f7fbff'/><path d='M60 120L30 120L45 105Z' fill='%23f7fbff'/><path d='M30 120L30 90L45 105Z' fill='%23dcecff'/><path d='M60 90L90 90L75 105Z' fill='%23eaf6ff'/><path d='M90 90L90 120L75 105Z' fill='%23cfe6fb'/><path d='M90 120L60 120L75 105Z' fill='%23ffffff'/><path d='M60 120L60 90L75 105Z' fill='%23f7fbff'/><path d='M90 90L120 90L105 105Z' fill='%23dcecff'/><path d='M120 90L120 120L105 105Z' fill='%23ffffff'/><path d='M120 120L90 120L105 105Z' fill='%23f7fbff'/><path d='M90 120L90 90L105 105Z' fill='%23ffffff'/></svg>") 0 0 / 46px 46px; }
/* fuego del diamante: un toque prismatico muy tenue que solo aparece al inclinar */
.carta.leyenda .fx-holo { -webkit-mask-image: radial-gradient(ellipse 44% 46% at 50% 52%, rgba(0, 0, 0, .05) 64%, #000 100%);
  mask-image: radial-gradient(ellipse 44% 46% at 50% 52%, rgba(0, 0, 0, .05) 64%, #000 100%);
  background: linear-gradient(115deg, transparent 30%, rgba(255, 140, 200, calc(var(--fk, 0) * .22)) 42%, rgba(120, 220, 255, calc(var(--fk, 0) * .28)) 50%, rgba(255, 240, 150, calc(var(--fk, 0) * .2)) 58%, transparent 70%); }
.carta.leyenda .fx-holo::after { mix-blend-mode: screen; opacity: calc(.45 + var(--fk, 0) * .5);
  background-image: radial-gradient(circle, #fff 0 .9px, transparent 1.5px), radial-gradient(circle, #d6f0ff 0 .7px, transparent 1.3px), radial-gradient(circle, #fff 0 .5px, transparent 1px); }
.carta.leyenda .carta-nombre, .carta.leyenda .carta-stats, .carta.leyenda .carta-media b, .carta.leyenda .carta-ed {
  color: #13294b; text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 0 6px rgba(255, 255, 255, .8); }
.carta.leyenda .carta-media span { background: linear-gradient(135deg, #5aa9ff, #2f6fd6); }
.carta.leyenda .carta-nombre { border-bottom-color: #5aa9ff; }
.carta.leyenda .fx-chispas i { background: #ffffff; filter: drop-shadow(0 0 3px rgba(160, 215, 255, .95)); }
.carta.leyenda .fx-chispas i:nth-child(2) { background: #cfeaff; }
/* aura y borde de cristal */
.carta.leyenda .fx-aura { box-shadow: 0 0 14px 2px rgba(160, 210, 255, .75), 0 0 30px 4px rgba(255, 255, 255, .55); }
.carta.leyenda .fx-aura::before { background: conic-gradient(#ffffff, #cfe8ff, #8fc4ff, #ffffff, #e0f1ff, #a9d3ff, #ffffff); }
/* rayos detras en la ficha y destello al revelar en el sobre: blanco hielo */
.carta-grande.n-leyenda::before { background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .6) 0 6deg, transparent 6deg 15deg, rgba(140, 200, 255, .45) 15deg 21deg, transparent 21deg 30deg); }
.voltear.n-leyenda.vuelta::before { background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .65) 0 5deg, transparent 5deg 15deg, rgba(150, 210, 255, .55) 15deg 19deg, transparent 19deg 30deg); }
.nv-leyenda { background: #e3f1ff; color: #2f6fd6; }
/* diamante: la cara queda limpia (las facetas solo en el marco) y mas contraste de cristal */
.carta.leyenda .fx-lamina { opacity: calc(.75 + var(--fk, 0) * .25);
  -webkit-mask-image: radial-gradient(ellipse 40% 36% at 50% 40%, transparent 70%, #000 100%); mask-image: radial-gradient(ellipse 40% 36% at 50% 40%, transparent 70%, #000 100%); }
.carta.leyenda .carta-in { background: linear-gradient(165deg, #ffffff 0%, #e9f5ff 28%, #b3d4f5 62%, #6fa5df 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), inset 0 0 18px rgba(80, 150, 230, .35); }
.carta.leyenda .carta-in::after { border: 1.5px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(110, 170, 235, .55); }
.carta.leyenda .carta-pie { color: #1d3d6e; opacity: .85; }

/* ==========================================================================
   VARIANTE "GRABADA EN LA MEDALLA" (clase .grabada en bronce/plata/oro):
   el retrato va en un medallon redondo de metal, en un solo tono del metal y con relieve.
   ========================================================================== */
.carta.grabada .carta-in > .carta-foto.foto-real { width: 64%; aspect-ratio: 1; margin-top: 15%; margin-bottom: 2%; border-radius: 50%; object-fit: cover; object-position: center 18%;
  -webkit-mask-image: none; mask-image: none; background: radial-gradient(circle at 35% 30%, #fff8e0, var(--c1) 45%, var(--c2) 100%);
  box-shadow: 0 0 0 3px var(--c2), 0 0 0 5px rgba(255, 255, 255, .7), 0 0 0 7px var(--c2), 0 3px 8px rgba(0, 0, 0, .35);
  filter: grayscale(1) contrast(1.45) brightness(1.05) sepia(1) saturate(var(--g-sat, 1.6)) hue-rotate(var(--g-hue, 0deg)) brightness(var(--g-luz, 1)); }
.carta.grabada.oro { --g-sat: 2.4; --g-hue: 5deg; --g-luz: 1.05; }
.carta.grabada.plata { --g-sat: 0; --g-luz: 1.08; }
.carta.grabada.bronce { --g-sat: 1.9; --g-hue: -12deg; --g-luz: .92; }
.carta.chica.grabada .carta-in > .carta-foto.foto-real { box-shadow: 0 0 0 2px var(--c2), 0 0 0 3px rgba(255, 255, 255, .7), 0 0 0 5px var(--c2), 0 2px 5px rgba(0, 0, 0, .35); }
/* grabado v2: medallon en gris neutro que se "multiplica" con el metal de la carta, retrato en relieve */
.carta.grabada .carta-in > .carta-foto.foto-real {
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #e6e6e6 38%, #b9b9b9 78%, #8d8d8d 100%);
  filter: grayscale(1) contrast(1.12) brightness(1.04) drop-shadow(-1px -1px 0 rgba(255, 255, 255, .55)) drop-shadow(1px 2px 1px rgba(0, 0, 0, .35));
  mix-blend-mode: multiply; }
.carta.grabada.plata .carta-in > .carta-foto.foto-real { filter: grayscale(1) contrast(1.05) brightness(1.08) drop-shadow(-1px -1px 0 rgba(255, 255, 255, .6)) drop-shadow(1px 2px 1px rgba(0, 0, 0, .3)); }

/* ==========================================================================
   DIAMANTE v2 (a pedido): sin facetas ni reflejo prismatico; el retrato va GRABADO
   en un medallon de cristal hielo (mismo grabado que las medallas, en tono azul hielo).
   ========================================================================== */
.carta.leyenda .fx-lamina, .carta.leyenda .fx-holo { display: none; }
.carta.leyenda .carta-in > .carta-foto.foto-real { width: 64%; aspect-ratio: 1; margin-top: 15%; margin-bottom: 2%; border-radius: 50%; object-fit: cover; object-position: center 18%;
  -webkit-mask-image: none; mask-image: none;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #eef6ff 40%, #c9def3 80%, #a9c4e2 100%);
  box-shadow: 0 0 0 3px #8fbbe8, 0 0 0 5px rgba(255, 255, 255, .85), 0 0 0 7px #8fbbe8, 0 3px 10px rgba(40, 90, 160, .35);
  filter: grayscale(1) contrast(1.1) brightness(1.06) drop-shadow(-1px -1px 0 rgba(255, 255, 255, .7)) drop-shadow(1px 2px 1px rgba(20, 60, 120, .35));
  mix-blend-mode: multiply; }
.carta.chica.leyenda .carta-in > .carta-foto.foto-real { box-shadow: 0 0 0 2px #8fbbe8, 0 0 0 3px rgba(255, 255, 255, .85), 0 0 0 5px #8fbbe8, 0 2px 6px rgba(40, 90, 160, .35); }
/* foto grabada (diamante y variante .grabada): va fija en el medallon, se mueve con la carta, sin paralaje */
.carta.leyenda.fx-mueve .carta-in > .carta-foto.foto-real, .carta.grabada.fx-mueve .carta-in > .carta-foto.foto-real { transform: none; }
/* diamante v3: el retrato llega YA en relieve (servidor); aqui solo se tiñe de hielo con multiply y se bisela el medallon */
.carta.leyenda .carta-in > .carta-foto.foto-real { filter: contrast(1.05); mix-blend-mode: multiply; background: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #8fbbe8, 0 0 0 6px rgba(255, 255, 255, .9), 0 0 0 7px #6fa0d8, 0 4px 12px rgba(40, 90, 160, .35), inset 0 0 12px rgba(20, 60, 120, .45); }
/* diamante v4 (sin relleno): sin medallon ni aros; la persona sola, grabada en relieve sobre la carta */
.carta.leyenda .carta-in > .carta-foto.foto-real { width: 70%; aspect-ratio: 4 / 5; margin-top: 12%; margin-bottom: -6%; border-radius: 0; object-fit: cover; object-position: top;
  box-shadow: none; background: none; mix-blend-mode: multiply; filter: contrast(1.08) drop-shadow(0 1px 0 rgba(255, 255, 255, .5));
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 92%); mask-image: linear-gradient(to bottom, #000 62%, transparent 92%); }
.carta.chica.leyenda .carta-in > .carta-foto.foto-real { box-shadow: none; margin-bottom: -8%; }
/* diamante v5 (elegida): medallon como la primera prueba, retrato en tonos azul hielo */
.carta.leyenda .carta-in > .carta-foto.foto-real { width: 64%; aspect-ratio: 1; margin-top: 15%; margin-bottom: 2%; border-radius: 50%; object-fit: cover; object-position: center 18%;
  -webkit-mask-image: none; mask-image: none; mix-blend-mode: normal;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #e8f3ff 40%, #c2dcf6 78%, #9cc2ea 100%);
  box-shadow: 0 0 0 3px #7fb2e8, 0 0 0 5px rgba(255, 255, 255, .9), 0 0 0 7px #6aa2e0, 0 3px 10px rgba(40, 90, 160, .35);
  filter: grayscale(1) contrast(1.1) brightness(1.04) sepia(.55) hue-rotate(178deg) saturate(1.9) drop-shadow(-1px -1px 0 rgba(255, 255, 255, .7)) drop-shadow(1px 2px 1px rgba(20, 60, 120, .3)); }
.carta.chica.leyenda .carta-in > .carta-foto.foto-real { box-shadow: 0 0 0 2px #7fb2e8, 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 5px #6aa2e0, 0 2px 6px rgba(40, 90, 160, .35); }
/* diamante v6: foto a color normal dentro del medallon (sin tono azul ni gris) */
.carta.leyenda .carta-in > .carta-foto.foto-real { filter: drop-shadow(0 2px 3px rgba(20, 60, 120, .25)); }
/* diamante chica = mismo medallon que la grande, a escala */
.carta.chica.leyenda .carta-in > .carta-foto.foto-real { width: 62%; aspect-ratio: 1; height: auto; margin-top: 15%; margin-bottom: 3%; border-radius: 50%; object-fit: cover; object-position: center 18%;
  -webkit-mask-image: none; mask-image: none; transform: none;
  box-shadow: 0 0 0 2px #7fb2e8, 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 4.5px #6aa2e0, 0 2px 6px rgba(40, 90, 160, .35); }
.carta.chica.leyenda .carta-nombre { margin-top: 0; }

/* ============================================================ festejos vistosos (juego.js: celebrar, rafaga, estrellas, ondas, letrero) */
.fx-rafaga { position: fixed; inset: 0; z-index: 119; pointer-events: none; overflow: hidden; }
.fx-rafaga .fx-rayos { position: absolute; left: 50%; top: 42%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 55%, transparent) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 18%, transparent 46%); mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 18%, transparent 46%);
  animation: fx-rayos-in 2.4s ease-out forwards; }
.fx-rafaga .fx-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, #fff 0, color-mix(in srgb, var(--c) 70%, #fff) 18%, transparent 60%);
  animation: fx-flash-in .9s ease-out forwards; }
@keyframes fx-rayos-in { 0% { opacity: 0; transform: rotate(0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(50deg) scale(1.15); } }
@keyframes fx-flash-in { 0% { opacity: 0; } 15% { opacity: .85; } 100% { opacity: 0; } }

.fx-estrella { position: fixed; z-index: 124; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; background: var(--c);
  -webkit-mask: var(--fx-estrella) center / contain no-repeat; mask: var(--fx-estrella) center / contain no-repeat;
  filter: drop-shadow(0 0 6px var(--c)); animation: fx-estrella-sale 1.1s cubic-bezier(.15, .7, .3, 1) both; }
@keyframes fx-estrella-sale { 0% { transform: translate(0, 0) scale(.2) rotate(0); opacity: 1; }
  70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); opacity: 0; } }

.fx-onda { position: fixed; z-index: 123; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none;
  border: 4px solid var(--c); box-shadow: 0 0 18px var(--c); animation: fx-onda-sale 1s ease-out both; }
@keyframes fx-onda-sale { from { transform: scale(.3); opacity: .95; } to { transform: scale(6); opacity: 0; } }

.fx-letrero { position: fixed; left: 50%; top: 22%; z-index: 125; pointer-events: none; text-align: center; transform: translateX(-50%);
  animation: fx-letrero-entra 2.3s cubic-bezier(.2, 1.4, .4, 1) both; width: max-content; max-width: 94vw; display: flex; flex-direction: column; align-items: center; }
.fx-letrero b { position: relative; display: inline-block; overflow: hidden; padding: 6px 22px 10px; border-radius: 22px; font-family: var(--titulo, inherit);
  font-size: clamp(22px, 7.2vw, 48px); line-height: 1.1; color: #fff; letter-spacing: .3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); border: 4px solid #fff;
  box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 60%, #000), 0 0 40px color-mix(in srgb, var(--c) 70%, transparent);
  text-shadow: 0 3px 0 color-mix(in srgb, var(--c) 55%, #000); }
.fx-letrero b::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: fx-letrero-brillo 1.1s .45s ease-in-out both; }
.fx-letrero small { display: inline-block; margin-top: 12px; padding: 4px 14px; border-radius: 999px; font-weight: 800; font-size: 15px; color: #fff;
  background: color-mix(in srgb, var(--c) 55%, #252d3e); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
@keyframes fx-letrero-entra { 0% { transform: translateX(-50%) scale(.2) rotate(-8deg); opacity: 0; } 18% { transform: translateX(-50%) scale(1.12) rotate(2deg); opacity: 1; }
  28% { transform: translateX(-50%) scale(1) rotate(0); } 82% { transform: translateX(-50%) scale(1); opacity: 1; } 100% { transform: translateX(-50%) scale(.9) translateY(-30px); opacity: 0; } }
@keyframes fx-letrero-brillo { to { left: 120%; } }
@media (prefers-reduced-motion: reduce) { .fx-letrero { animation: none; opacity: 1; } .fx-letrero { transition: opacity .3s; } }
@media (prefers-reduced-motion: reduce) { .accion.urge { animation: none; } }

/* aviso de versión nueva (sin recargar sola) */
.aviso-version { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 130;
  border: 0; border-radius: 999px; padding: 10px 16px; background: #252d3e; color: #fff; font-weight: 800; font-size: 13px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer; }

/* cotización por vencer (próximos días): franja y borde en tono de urgencia, para escribirle antes de que se pierda */
.encargo.por-vencer { border-color: var(--rojo) !important; }
.encargo.por-vencer .franja { background: color-mix(in srgb, var(--rojo) 14%, var(--fondo-2)) !important; color: var(--rojo-s) !important; }
.encargo.por-vencer .motivo { color: var(--rojo-s); font-weight: 800; }

/* panel del director › comportamiento: barras de una serie (la barra marca magnitud; el texto va en tinta normal) */
.tiles-comp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tiles-comp .tile { background: var(--fondo-2); border: 2px solid var(--linea); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.tiles-comp .tile b { font-size: 26px; color: var(--tx); }
.tiles-comp .tile b small { font-size: 14px; color: var(--tx-3); }
.tiles-comp .tile span { font-size: 12px; color: var(--tx-2); }
.barras-h { display: flex; flex-direction: column; gap: 6px; }
.bh-fila { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; align-items: center; gap: 8px; font-size: 13px; color: var(--tx); }
.bh-et { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-pista { height: 12px; background: var(--fondo-2); border-radius: 6px; overflow: hidden; }
.bh-pista i { display: block; height: 100%; background: var(--morado, #6892f3); border-radius: 0 4px 4px 0; }
.bh-v { color: var(--tx-2); font-size: 12px; min-width: 48px; text-align: right; }
.columnas { display: flex; align-items: flex-end; gap: 2px; height: 90px; border-bottom: 1px solid var(--linea); }
.columnas .col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.columnas .col i { display: block; width: 100%; background: var(--morado, #6892f3); border-radius: 4px 4px 0 0; }
.eje-horas { display: flex; justify-content: space-between; font-size: 11px; color: var(--tx-3); margin-top: 4px; }
.tabla-comp { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--tx); }
.tabla-comp th { text-align: left; font-size: 11px; color: var(--tx-3); font-weight: 800; padding: 6px 8px; border-bottom: 2px solid var(--linea); }
.tabla-comp td { padding: 7px 8px; border-bottom: 1px solid var(--linea); }
.tabla-comp td.num, .tabla-comp th:not(:first-child) { text-align: right; }
.fila-click { cursor: pointer; }
.fila-click:hover td { background: var(--fondo-2); }
.chip-filtro { border: 2px solid var(--linea); background: var(--fondo); color: var(--tx-2); border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 12px; cursor: pointer; }
.chip-filtro.activo { background: var(--tx); color: var(--fondo); border-color: var(--tx); }
@media (max-width: 480px) { .tiles-comp .tile b { font-size: 20px; } }

/* cofre de recompensas: el total sale del cofre al abrirlo */
.sale-del-cofre { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px auto 4px; animation: fx-entra .35s ease-out both; }
.sale-del-cofre .coin { width: 44px; height: 44px; }
.sale-del-cofre b { font-size: 46px; font-weight: 900; color: var(--tx); line-height: 1; }
.sale-del-cofre small { font-size: 15px; font-weight: 800; color: var(--tx-3); align-self: flex-end; margin-bottom: 6px; }

/* tu carta bloqueada: candado y pista de como ganarla */
.carta.oculta .silueta svg { width: 46%; height: 46%; }
.pista-carta { display: flex; gap: 6px; align-items: center; justify-content: center; text-align: center; margin: 10px auto 0; max-width: 300px; font-size: 13px; }
.pista-carta svg { width: 16px; height: 16px; flex: none; }
.mi-carta-info b.carta-bloq-tit { font-size: 18px; line-height: 1.15; }

/* intercambio de cartas repetidas */
.carta .rep-badge { position: absolute; top: 6px; left: 6px; z-index: 5; background: #0d2f80; color: #fff; font-weight: 900; font-size: 12px;
  padding: 2px 7px; border-radius: 999px; box-shadow: 0 2px 6px rgba(28, 23, 69, .3); }
#b-intercambio { margin: 10px 0 4px; }
.hoja-inter h3.sub { margin: 16px 0 6px; }
.fila-inter { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(28, 23, 69, .08); }
.fila-inter .txt { flex: 1; min-width: 0; line-height: 1.6; font-size: 14px; }
.fila-inter .txt small { display: block; color: var(--muted, #7a7596); font-size: 12px; line-height: 1.3; }
.fila-inter .acc { display: flex; gap: 6px; flex: none; }
.fila-inter select { margin-top: 4px; max-width: 100%; }
.chip-carta { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; border-radius: 999px; font-weight: 800; font-size: 13px;
  background: #edf2fe; white-space: nowrap; }
.chip-carta i { font-style: normal; font-size: 10px; font-weight: 900; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; color: #fff; background: #b07a4a; }
.chip-carta.n-plata i { background: #8d98a8; }
.chip-carta.n-oro i { background: #d9a400; }
.chip-carta.n-leyenda i { background: linear-gradient(90deg, #0d2f80, #19b6d2); }

/* mis mensajes de WhatsApp */
.hoja-mensajes .msj { padding: 6px 0 12px; border-bottom: 1px solid rgba(28, 23, 69, .08); }
.hoja-mensajes h3.sub { display: flex; gap: 8px; align-items: center; margin: 12px 0 6px; }
.hoja-mensajes textarea { width: 100%; resize: vertical; font-size: 15px; }
.hoja-mensajes .vars { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip-var { border: 1.5px dashed #25d366; background: #eafbf1; color: #128c4a; font-weight: 800; font-size: 13px; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.hoja-mensajes .previa { background: #dcf8c6; border-radius: 12px 12px 12px 3px; padding: 8px 12px; margin: 6px 0 8px; }
.hoja-mensajes .previa small { color: #4a6b3a; font-weight: 800; }
.hoja-mensajes .previa p { margin: 2px 0 0; white-space: pre-wrap; font-size: 14px; color: #1d2b14; }
.cab-vista #b-mensajes { flex: none; align-self: center; }

/* la pelea contra el jefe */
.hoja-ataque .hoja-cab h2 { display: flex; gap: 8px; align-items: center; }
.ataque-jefe { background: linear-gradient(135deg, #223359, #7a1f3d); color: #fff; border-radius: 18px; padding: 14px 16px; margin: 6px 0 12px; }
.ataque-jefe > b { font-size: 18px; }
.ataque-jefe .vida { margin: 8px 0 6px; }
.ataque-jefe small { color: rgba(255, 255, 255, .8); font-size: 12px; }
.punto-debil { display: flex; gap: 10px; align-items: flex-start; background: #fff4d6; border: 2px solid #ffc53d; border-radius: 16px; padding: 10px 12px; }
.punto-debil svg { width: 26px; height: 26px; flex: none; color: #d98a00; }
.punto-debil small { display: block; font-weight: 900; text-transform: uppercase; font-size: 11px; color: #b06d00; letter-spacing: .04em; }
.punto-debil b { display: block; font-size: 15px; }
.punto-debil span { font-size: 13px; color: #5d4a1f; }
.fila-inter .salto { display: block; color: #c0392b; font-weight: 800; font-size: 12px; }

/* ===== intercambio estilo Pocket ===== */
.hoja-inter .hoja-cab h2 { display: flex; gap: 8px; align-items: center; }
.hoja-inter .segmentos { margin: 4px 0 10px; }
.nota-inter, .vacio-inter { font-size: 13px; margin: 10px 0; }
.lista-comp { display: grid; gap: 8px; margin-top: 8px; }
.comp { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: #fff; border: 1.5px solid rgba(28, 23, 69, .1);
  border-radius: 16px; padding: 8px 10px; cursor: pointer; }
.comp .txt { flex: 1; min-width: 0; }
.comp .txt b { display: block; font-size: 14px; }
.comp .txt small { color: var(--muted, #7a7596); font-size: 12px; }
.comp .marcas { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.comp .marcas i { font-style: normal; font-size: 11px; font-weight: 900; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.m-deseo { background: #ffe1ec; color: #d6336c; } .m-sirve { background: #e5f7ec; color: #12844a; } .m-quiere { background: #e9effd; color: #4a71cb; }
.comp > svg { width: 18px; height: 18px; opacity: .5; flex: none; }
.elige { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.op-carta { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 120px; max-width: 48%; flex: 1 1 120px;
  border: 2px solid #e6dcc9; background: #fffaf2; border-radius: 14px; padding: 8px 10px; font-weight: 800; font-size: 13px; text-align: left; cursor: pointer;
  transition: transform .15s, box-shadow .15s; }
.op-carta i { font-style: normal; font-size: 10px; font-weight: 900; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; color: #fff; background: #b07a4a; }
.op-carta.n-plata { border-color: #cfd6df; background: #f6f8fb; } .op-carta.n-plata i { background: #8d98a8; }
.op-carta.n-oro { border-color: #f1d46b; background: #fffbe8; } .op-carta.n-oro i { background: #d9a400; }
.op-carta.n-leyenda { border-color: #acc3f8; background: linear-gradient(135deg, #f0f4fe, #e6fbff); } .op-carta.n-leyenda i { background: linear-gradient(90deg, #0d2f80, #19b6d2); }
.op-carta small, .op-carta span { font-size: 11px; font-weight: 800; }
.op-carta .corazon { color: #d6336c; } .op-carta .falta { color: #12844a; } .op-carta .ya { color: #9a94b3; }
.op-carta.elegida { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 0 3px #0d2f80, 0 8px 18px rgba(108, 76, 245, .3); }
.op-carta[disabled] { opacity: .45; cursor: not-allowed; }
.op-carta.escoge { justify-content: center; align-items: center; flex-direction: row; gap: 6px; border-style: dashed; border-color: #acc3f8; background: #f3f6fe; color: #4a71cb; }
.op-carta.escoge svg { width: 18px; height: 18px; }
.resumen-cambio { background: #f2f6fe; border-radius: 14px; padding: 10px 12px; margin: 12px 0 4px; font-size: 14px; line-height: 1.5; }
.resumen-cambio .salto, .fila-inter .salto { color: #c0392b; font-weight: 800; font-size: 12px; }
.carta.oculta .deseo-badge { position: absolute; top: 6px; right: 6px; z-index: 5; color: #fff; background: #d6336c; font-size: 12px; font-weight: 900;
  padding: 1px 7px; border-radius: 999px; }
.hoja-deseo { text-align: center; } .hoja-deseo .carta-centro { margin: 6px 0 10px; }

/* ===== animacion del cambio ===== */
.velo-cambio { background: radial-gradient(circle at 50% 45%, #1f3159 0%, #0d162a 70%); display: grid; place-items: center; }
.escena-cambio { position: relative; width: min(100vw, 460px); height: min(100vh, 720px); overflow: hidden; --brillo: #ffd75e; }
.escena-cambio.n-leyenda { --brillo: #9fe8ff; } .escena-cambio.n-plata { --brillo: #e8eef7; } .escena-cambio.n-bronce { --brillo: #ffc59a; }
.cambio-titulo { position: absolute; top: 9%; width: 100%; text-align: center; color: #fff; font-weight: 900; font-size: 20px; letter-spacing: .02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5); opacity: 0; animation: cambio-aparece .5s .1s forwards; }
.cambio-carta { position: absolute; top: 50%; left: 50%; width: 150px; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.5, 0, .2, 1), opacity .4s; }
.cambio-carta .carta { width: 150px; }
.cambio-carta > span { position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; color: #fff; font-weight: 900; font-size: 14px; opacity: .85; }
.cambio-carta.sale { transform: translate(-125%, -40%) rotate(-8deg); animation: cambio-entra-izq .6s cubic-bezier(.2, .9, .3, 1.2) both; }
.cambio-carta.entra { transform: translate(25%, -40%) rotate(8deg); animation: cambio-entra-der .6s cubic-bezier(.2, .9, .3, 1.2) both; }
.cambio-carta.entra .carta { backface-visibility: hidden; transform: rotateY(180deg); }
.cambio-carta.entra .dorso { position: absolute; inset: 0; border-radius: 16px; display: grid; place-items: center; backface-visibility: hidden;
  background: repeating-linear-gradient(135deg, #31497f 0 12px, #293c69 12px 24px); border: 3px solid rgba(255, 255, 255, .35); color: #fff; font-size: 30px; font-weight: 900; }
.cambio-carta.entra > span { opacity: 0; }
@keyframes cambio-entra-izq { from { transform: translate(-260%, 40%) rotate(-25deg); opacity: 0; } }
@keyframes cambio-entra-der { from { transform: translate(160%, 40%) rotate(25deg); opacity: 0; } }
@keyframes cambio-aparece { to { opacity: 1; } }
.cambio-luz { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: var(--brillo);
  box-shadow: 0 0 40px 20px var(--brillo); opacity: 0; transform: scale(.2); transition: transform .8s ease-out, opacity .5s; }
.cambio-remolino { position: absolute; top: 50%; left: 50%; width: 340px; height: 340px; margin: -170px; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 10%, var(--brillo) 14%, transparent 22% 45%, #95b2f6 50%, transparent 58% 80%, var(--brillo) 86%, transparent 94%);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 62%, transparent 66%); mask: radial-gradient(circle, transparent 38%, #000 40%, #000 62%, transparent 66%);
  filter: blur(1px); transition: opacity .4s; }
/* fase 2: suben y empiezan a girar alrededor del centro, con el remolino de luz */
.fase-gira .cambio-remolino { opacity: .9; animation: cambio-gira 1.1s linear infinite; }
.fase-gira .cambio-luz { opacity: .9; transform: scale(2.2); }
.fase-gira .cambio-carta.sale { transform: translate(-95%, -75%) rotate(-14deg) scale(.92); filter: drop-shadow(0 0 16px var(--brillo)); }
.fase-gira .cambio-carta.entra { transform: translate(-5%, -75%) rotate(14deg) scale(.92); }
@keyframes cambio-gira { to { transform: rotate(360deg); } }
/* fase 3: se cruzan por el centro y se voltean */
.fase-cruza .cambio-carta.sale { transform: translate(40%, -60%) rotate(200deg) rotateY(180deg) scale(.7); opacity: .2; transition-duration: .7s; }
.fase-cruza .cambio-carta.entra { transform: translate(-140%, -60%) rotate(-200deg) scale(.85); transition-duration: .7s; }
.fase-cruza .cambio-luz { transform: scale(4); opacity: 1; }
/* fase 4: la nueva aterriza al centro, se voltea y brilla; la tuya ya se fue */
.fase-final .cambio-remolino { opacity: 0; }
.fase-final .cambio-luz { transform: scale(14); opacity: 0; transition: transform .7s ease-out, opacity .9s .1s; }
.fase-final .cambio-carta.sale { opacity: 0; transform: translate(150%, -200%) scale(.4) rotate(40deg); }
.fase-final .cambio-carta.entra { transform: translate(-50%, -62%) scale(1.45); transition: transform .8s cubic-bezier(.2, 1.4, .4, 1); }
.fase-final .cambio-carta.entra .carta { transform: rotateY(0deg); transition: transform .8s .1s cubic-bezier(.3, 1.3, .5, 1); filter: drop-shadow(0 0 26px var(--brillo)); }
.fase-final .cambio-carta.entra .dorso { transform: rotateY(180deg); transition: transform .8s .1s; }
.fase-final .cambio-carta.entra > span { opacity: 1; bottom: -54px; font-size: 18px; color: var(--brillo); transition: opacity .4s .7s; }
#b-cambio-ok { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); min-width: 200px; }
@media (prefers-reduced-motion: reduce) { .escena-cambio * { animation: none !important; transition: none !important; } }

/* ===== tienda de sobres por edicion (estilo Pokemon TCG Pocket) ===== */
.velo-sobres { background: radial-gradient(circle at 50% 30%, #304574 0%, #121c32 75%); display: flex; align-items: stretch; justify-content: center; }
.tienda-sobres { width: min(100vw, 520px); display: flex; flex-direction: column; padding: 16px 0 24px; color: #fff; }
.ts-cab { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; }
.ts-cab h2 { margin: 0; font-size: 24px; color: #fff; }
.ts-gratis { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 8px 16px 0; font-size: 14px; color: #ffe08a; text-align: center; }
.ts-gratis svg { width: 18px; height: 18px; flex: none; }
.ts-carrusel { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px calc(50% - 100px) 56px; margin-bottom: -26px; scrollbar-width: none; }
.ts-carrusel::-webkit-scrollbar { display: none; }
.ts-paquete { scroll-snap-align: center; flex: none; transition: transform .35s cubic-bezier(.2, 1.2, .4, 1), filter .35s, opacity .35s;
  transform: scale(.82) rotate(-3deg); filter: saturate(.6) brightness(.75); opacity: .7; cursor: pointer; }
.ts-paquete.al-centro { transform: scale(1) rotate(0); filter: none; opacity: 1; }
.pack-logo { position: relative; font-style: normal; font-weight: 900; font-size: 12px; line-height: 1.1; letter-spacing: 3px; text-align: center; margin-top: 18px;
  padding: 6px 10px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 10px; }
.pack-n { position: absolute !important; bottom: 14px; }
.pack-brillo { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%) no-repeat; background-size: 250% 100%;
  animation: pack-brillo 3.2s ease-in-out infinite; }
@keyframes pack-brillo { 0% { background-position: 130% 0; } 60%, 100% { background-position: -130% 0; } }
.ts-puntos { display: flex; gap: 8px; justify-content: center; }
.ts-puntos i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .3); transition: width .25s, background .25s; }
.ts-puntos i.on { width: 22px; border-radius: 99px; background: #fff; }
.ts-info { margin: 18px 16px 0; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; padding: 14px 16px; }
.ts-avance { display: flex; justify-content: space-between; font-weight: 800; }
.ts-info .barra-fina { margin: 8px 0; background: rgba(255, 255, 255, .15); }
.ts-info .muted { color: rgba(255, 255, 255, .7); font-size: 12px; }
.ts-botones { display: flex; gap: 10px; margin-top: 12px; }
.ts-botones .b3 { flex: 1; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.ediciones-album { margin: 10px 0 4px; }
.ed-chip { display: flex; flex-direction: column; align-items: flex-start; border: 0; border-radius: 14px; padding: 6px 12px; color: #fff; opacity: .65; cursor: pointer; }
.ed-chip.activo { opacity: 1; box-shadow: 0 0 0 3px rgba(108, 76, 245, .35); }
.ed-chip b { font-size: 14px; } .ed-chip small { font-size: 11px; font-weight: 800; opacity: .9; }
.ed-chip.ed-1 { background: linear-gradient(135deg, #4f8bff, #5987f2); } .ed-chip.ed-2 { background: linear-gradient(135deg, #2fc39a, #2a8bd8); }
.ed-chip.ed-3 { background: linear-gradient(135deg, #ff6f6f, #c63e8e); } .ed-chip.ed-4 { background: linear-gradient(135deg, #6892f3, #293d6a); }

/* intercambio v3: se ven las cartas completas */
.oferta-vista { display: flex; justify-content: center; margin: 8px 0; }
.oferta-vista .carta, .mis-repetidas .carta { width: 130px; pointer-events: none; }
.mis-repetidas { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x proximity; }
.rep-op { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 4px;
  border-radius: 18px; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.rep-op > span { font-size: 12px; font-weight: 800; color: #12844a; display: flex; flex-direction: column; align-items: center; }
.rep-op .corazon { color: #d6336c; }
.rep-op.elegida { transform: translateY(-4px); box-shadow: 0 0 0 3px #0d2f80, 0 10px 22px rgba(108, 76, 245, .35); }
.rep-op[disabled] { opacity: .45; cursor: not-allowed; }
.rep-op[disabled] > span { color: #9a94b3; }
.fila-inter .txt .oferta-vista + small, .fila-inter .txt > small { display: block; }
.hoja-inter .fila-inter { flex-wrap: wrap; }

/* ===== sobre v5: de lamina e inflado, con sellos prensados en zigzag (v4 plano y v3 de mascotas en docs/diseno/sobres) ===== */
.sobre.pack { width: 210px; height: 310px; padding: 0; background: none !important; box-shadow: none !important; border-radius: 0; overflow: visible;
  perspective: 900px; animation: fx-sobre-entra .6s cubic-bezier(.2, 1.3, .4, 1) backwards; -webkit-tap-highlight-color: transparent; }
.sobre.pack::before { display: none; }
.sobre.pack.ed-1 { --pk-tinte: linear-gradient(165deg, #9fe6ff, #3f79e6 55%, #1c2a7a); --pk-oro1: #fff; --pk-oro2: #bdf0ff; --pk-tinta: #1b3d9e; }
.sobre.pack.ed-2 { --pk-tinte: linear-gradient(165deg, #c9f7b0, #2fb38f 55%, #0f5e66); --pk-oro1: #fffbd6; --pk-oro2: #ffd36e; --pk-tinta: #0d5a52; }
.sobre.pack.ed-3 { --pk-tinte: linear-gradient(165deg, #ffd27a, #ff6a3d 50%, #8e1840); --pk-oro1: #fff6c9; --pk-oro2: #ffb02e; --pk-tinta: #7a1430; }
.sobre.pack.ed-4 { --pk-tinte: linear-gradient(165deg, #cad9fb, #5987f2 50%, #17274b); --pk-oro1: #fff; --pk-oro2: #9fe8ff; --pk-tinta: #1e3467; }
/* el objeto: se mece solo; con el dedo / el telefono sigue el angulo */
.pk { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  animation: pk-vaiven 6s ease-in-out infinite; }
.pk.tocando, .pk.giro { animation: none; transition: transform .09s linear; }
.pk.giro { transition-duration: .25s; }
@keyframes pk-vaiven { 0%, 100% { transform: rotateY(-15deg) rotateX(5deg) translateY(0); } 50% { transform: rotateY(15deg) rotateX(-4deg) translateY(-8px); } }
.ts-paquete:not(.al-centro) .pk { animation-play-state: paused; }
/* sombra en el piso (fuera del 3D: no se aplana) */
.pk-suelo { position: absolute; left: 12%; right: 12%; bottom: -26px; height: 26px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent); animation: pk-suelo 6s ease-in-out infinite; }
@keyframes pk-suelo { 50% { transform: scale(.86); opacity: .7; } }
/* forma: dientes del sello arriba (la tira) y abajo (la cara); el cuerpo empieza donde se corta la tira */
.pk-cara, .pk-capa, .pk-dorso { position: absolute; inset: 0; border-radius: 4px;
  -webkit-mask: linear-gradient(#000 0 0) 0 5px / 100% calc(100% - 10px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 8px 5px repeat-x,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 8px 5px repeat-x;
  mask: linear-gradient(#000 0 0) 0 5px / 100% calc(100% - 10px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 8px 5px repeat-x,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 8px 5px repeat-x; }
.pk-cara { transform: translateZ(6px); overflow: hidden; clip-path: polygon(0% 9.4%, 3.33% 8.8%, 6.67% 9.7%, 10% 9.1%, 13.33% 10.2%, 16.67% 9.5%, 20% 8.7%, 23.33% 9.9%, 26.67% 9.3%, 30% 10.4%, 33.33% 9%, 36.67% 9.6%, 40% 8.8%, 43.33% 10.1%, 46.67% 9.4%, 50% 9.9%, 53.33% 8.9%, 56.67% 10.3%, 60% 9.2%, 63.33% 9.7%, 66.67% 9%, 70% 10%, 73.33% 9.5%, 76.67% 8.8%, 80% 9.8%, 83.33% 9.3%, 86.67% 10.2%, 90% 9.1%, 93.33% 9.6%, 96.67% 8.9%, 100% 9.5%, 100% 10.6%, 98.8% 12%, 98.1% 20%, 97.7% 50%, 98.1% 80%, 98.8% 88%, 100% 91.4%, 100% 100%, 0 100%, 0 91.4%, 1.2% 88%, 1.9% 80%, 2.3% 50%, 1.9% 20%, 1.2% 12%, 0 10.6%); }
.pk-capa { background: var(--pk-tinte); clip-path: polygon(0% 9.4%, 3.33% 8.8%, 6.67% 9.7%, 10% 9.1%, 13.33% 10.2%, 16.67% 9.5%, 20% 8.7%, 23.33% 9.9%, 26.67% 9.3%, 30% 10.4%, 33.33% 9%, 36.67% 9.6%, 40% 8.8%, 43.33% 10.1%, 46.67% 9.4%, 50% 9.9%, 53.33% 8.9%, 56.67% 10.3%, 60% 9.2%, 63.33% 9.7%, 66.67% 9%, 70% 10%, 73.33% 9.5%, 76.67% 8.8%, 80% 9.8%, 83.33% 9.3%, 86.67% 10.2%, 90% 9.1%, 93.33% 9.6%, 96.67% 8.9%, 100% 9.5%, 100% 10.6%, 98.8% 12%, 98.1% 20%, 97.7% 50%, 98.1% 80%, 98.8% 88%, 100% 91.4%, 100% 100%, 0 100%, 0 91.4%, 1.2% 88%, 1.9% 80%, 2.3% 50%, 1.9% 20%, 1.2% 12%, 0 10.6%); }
.pk-capa.c1 { transform: translateZ(3px) scale(.995); filter: brightness(.6) saturate(.8); }
.pk-capa.c2 { transform: translateZ(0) scale(.99); filter: brightness(.35) saturate(.6); }
.pk-dorso { transform: rotateY(180deg) translateZ(1px); backface-visibility: hidden; }
.pk-cara { backface-visibility: hidden; }
/* fondo de la cara: el tinte de la edicion con rombos */
.pk-fondo { position: absolute; inset: 0; background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 16px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 16px),
    radial-gradient(90% 55% at 50% 46%, rgba(255, 255, 255, .34), transparent 70%), var(--pk-tinte); }
.pk-marco { position: absolute; left: 9px; right: 9px; top: calc(9% + 5px); bottom: calc(8.5% + 4px); border: 2px solid rgba(255, 255, 255, .55); border-radius: 8px;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .1), inset 0 0 0 5px rgba(255, 255, 255, .3); }
/* el logo del juego arriba, como el de los sobres de verdad */
.pk-logo { position: absolute; left: 50%; top: calc(9% + 4px); width: 92px; height: auto; translate: -50% 0; pointer-events: none; user-select: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }
.pk-cab { position: absolute; top: 108px; left: 0; right: 0; display: flex; justify-content: center; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.sobre.pack .pk-cab small { font-size: 8.5px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; opacity: .95; }
/* el abanico de cartas */
.pk-abanico { position: absolute; left: 50%; top: 124px; width: 0; height: 104px; scale: .76; transform-origin: 50% 0; }
.pk-mini { position: absolute; left: -46px; top: 0; width: 92px; height: 129px; border-radius: 9px; box-shadow: 0 8px 16px rgba(0, 0, 0, .35); }
.pk-mini.dorso { border: 2px solid rgba(255, 255, 255, .8); }
.pk-mini.dorso.izq { transform: translateX(-42px) translateY(12px) rotate(-16deg); }
.pk-mini.dorso.der { transform: translateX(42px) translateY(12px) rotate(16deg); }
.pk-mini.frente { overflow: hidden; border: 2px solid var(--pk-oro2); color: var(--pk-tinta);
  background: radial-gradient(80% 60% at 50% 30%, #fff, var(--pk-oro1) 40%, var(--pk-oro2)); box-shadow: 0 10px 20px rgba(0, 0, 0, .4), 0 0 22px rgba(255, 255, 255, .5); }
.pk-mini.frente svg { position: absolute; left: 14px; right: 14px; top: 20px; width: 64px; height: 64px; margin: 0 auto; fill: var(--pk-tinta); opacity: .55; }
.pk-media { position: absolute; top: 6px; right: 8px; font-style: normal; font-weight: 900; font-size: 18px; }
.pk-nombre { position: absolute; left: 0; right: 0; top: 82px; text-align: center; font-style: normal; font-weight: 900; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
.pk-stats { position: absolute; left: 8px; right: 8px; top: 96px; display: grid; grid-template-columns: 1fr 1fr; font-style: normal; font-size: 7.5px; font-weight: 900; gap: 1px 4px; }
.pk-stats i { font-style: normal; }
/* gemas de los niveles */
.pk-gemas { position: absolute; left: 0; right: 0; top: 232px; display: none; justify-content: center; gap: 8px; }
.pk-gemas i { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 2px 4px rgba(0, 0, 0, .3); }
.g-bronce { background: linear-gradient(135deg, #f3c39b, #a8643a); } .g-plata { background: linear-gradient(135deg, #fff, #9aa6b8); }
.g-oro { background: linear-gradient(135deg, #fff3b0, #d9a400); } .g-leyenda { background: linear-gradient(135deg, #acc3f8, #19b6d2); }
/* titulo con relieve */
.pk-titulo { position: absolute; left: 0; right: 0; bottom: 31px; display: flex; flex-direction: column; align-items: center; }
.sobre.pack .pk b, .sobre.pack .pk small { opacity: 1; position: static; }
.sobre.pack .pk-titulo b { font-size: 34px; line-height: 1; font-weight: 900; font-style: italic; letter-spacing: -.02em;
  background: linear-gradient(180deg, var(--pk-oro1) 10%, var(--pk-oro2) 55%, #fff 56%, var(--pk-oro2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, .9); filter: drop-shadow(0 3px 0 var(--pk-tinta)) drop-shadow(0 5px 8px rgba(0, 0, 0, .45)); }
.sobre.pack .pk-titulo small { color: #fff; font-size: 8px; font-weight: 900; letter-spacing: 2.4px; text-transform: uppercase; margin-top: 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
/* lamina holografica: se corre con el angulo */
.pack-holo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(125deg, #ff7ad9 0%, #ffe27a 22%, #7affc4 44%, #7ad3ff 66%, #84a6f5 88%) 0 0 / 300% 300%; }
@keyframes pack-holo { to { background-position: 100% 100%; } }
.pk-cara .pack-holo { opacity: .6; animation: pack-holo 6s ease-in-out infinite alternate; }
.pk.tocando .pack-holo, .pk.giro .pack-holo { animation: none; background-position: calc(50% + var(--px, 0) * 50%) calc(50% + var(--py, 0) * 50%); transition: background-position .1s linear; }
/* bandas de brillo verticales del plastico inflado (se mueven al reves que el angulo) */
.pk-bandas { position: absolute; top: 0; bottom: 0; left: -40%; width: 180%; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: linear-gradient(90deg, transparent 16%, rgba(255, 255, 255, .5) 24%, rgba(255, 255, 255, .12) 28%, transparent 33%,
    transparent 52%, rgba(255, 255, 255, .22) 57%, transparent 62%);
  transform: translateX(calc(var(--px, 0) * -12%)); animation: pk-bandas 6s ease-in-out infinite; }
.pk.tocando .pk-bandas, .pk.giro .pk-bandas { animation: none; transition: transform .1s linear; }
@keyframes pk-bandas { 0%, 100% { transform: translateX(9%); } 50% { transform: translateX(-9%); } }
/* volumen: orillas que se van hacia atras, el pliegue donde termina cada sello y la panza con luz arriba */
.pk-almohada { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 8, 35, .7) 1%, rgba(0, 8, 35, .3) 5%, transparent 14%, rgba(255, 255, 255, .1) 22%, transparent 32%, transparent 80%, rgba(0, 8, 35, .12) 88%, rgba(0, 8, 35, .32) 95%, rgba(0, 8, 35, .72) 99%),
    linear-gradient(180deg, transparent 9%, rgba(0, 8, 35, .5) 9.4%, rgba(255, 255, 255, .25) 10.8%, transparent 16%, transparent 82%,
      rgba(255, 255, 255, .14) 88.6%, rgba(0, 8, 35, .55) 91.3%, transparent 91.6%),
    radial-gradient(60% 34% at 50% 30%, rgba(255, 255, 255, .12), transparent 70%),
    radial-gradient(100% 30% at 50% 92%, rgba(0, 8, 35, .32), transparent 70%); }
/* reflejo diagonal que cruza al mecerse */
.pk-reflejo { position: absolute; inset: -50%; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .55) 48%, transparent 54%);
  transform: translate(calc(var(--px, 0) * -30%), calc(var(--py, 0) * -20%)); animation: pk-reflejo 6s ease-in-out infinite; }
.pk.tocando .pk-reflejo, .pk.giro .pk-reflejo { animation: none; }
@keyframes pk-reflejo { 0%, 100% { transform: translateX(-22%); } 50% { transform: translateX(22%); } }
/* sellos prensados: rayitas finas y mas planos que el cuerpo */
.pk-prensa { position: absolute; left: 0; right: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .32) 0 1px, rgba(0, 0, 0, .2) 1px 2.4px, transparent 2.4px 4px),
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .15)); }
.pk-prensa.abajo { bottom: 0; height: 8.5%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.pk-prensa.arriba { top: 0; bottom: 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .35); }
/* la tira de arriba: la misma lamina; su orilla de abajo es la linea rasgada (igual a la de la cara) y se levanta
   siguiendo al dedo, con bisagra en el lado que aun no se rompe */
.pk-tira { position: absolute; inset: 0; pointer-events: none; transform: translateZ(6.5px); }
.pk-tira.pegada { clip-path: var(--clip-p, inset(0)); }
/* la parte ya rasgada: gira sobre el punto donde sigue pegada (--piv); levantada mientras jalas, colgando al soltar */
.pk-tira.suelta { clip-path: var(--clip-s, inset(0 100% 0 0)); transform: translateZ(6.6px) rotate(var(--ang, 0deg)); transform-origin: var(--piv, 0 10%);
  transition: transform .1s ease-out; }
.pk.colgando .pk-tira.suelta { animation: pk-cuelga 1.5s cubic-bezier(.3, .6, .4, 1) forwards, pk-mece 2.6s 1.5s ease-in-out infinite alternate; }
@keyframes pk-cuelga { 0% { transform: translateZ(6.6px) rotate(var(--ang)); } 32% { transform: translateZ(6.6px) rotate(calc(var(--caer) * 1.3)); }
  55% { transform: translateZ(6.6px) rotate(calc(var(--caer) * .82)); } 76% { transform: translateZ(6.6px) rotate(calc(var(--caer) * 1.07)); } 100% { transform: translateZ(6.6px) rotate(var(--caer)); } }
@keyframes pk-mece { from { transform: translateZ(6.6px) rotate(var(--caer)); } to { transform: translateZ(6.6px) rotate(calc(var(--caer) * 1.12)); } }
.pk-tira-in { position: absolute; inset: 0; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 9.5%, 96.67% 8.9%, 93.33% 9.6%, 90% 9.1%, 86.67% 10.2%, 83.33% 9.3%, 80% 9.8%, 76.67% 8.8%, 73.33% 9.5%, 70% 10%, 66.67% 9%, 63.33% 9.7%, 60% 9.2%, 56.67% 10.3%, 53.33% 8.9%, 50% 9.9%, 46.67% 9.4%, 43.33% 10.1%, 40% 8.8%, 36.67% 9.6%, 33.33% 9%, 30% 10.4%, 26.67% 9.3%, 23.33% 9.9%, 20% 8.7%, 16.67% 9.5%, 13.33% 10.2%, 10% 9.1%, 6.67% 9.7%, 3.33% 8.8%, 0% 9.4%);
  -webkit-mask: linear-gradient(#000 0 0) 0 5px / 100% calc(100% - 5px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 8px 5px repeat-x;
  mask: linear-gradient(#000 0 0) 0 5px / 100% calc(100% - 5px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 8px 5px repeat-x; }
.pk-tira-fondo { position: absolute; inset: 0; background: var(--pk-tinte); }
.pk-tira-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 8, 35, .45), transparent 8%, transparent 92%, rgba(0, 8, 35, .45)); }
.pk-tira .pk-prensa.arriba { height: 8.4%; }
.pk-tira.pegada .pk-rasgon { display: none; }
/* papel rasgado: la capa blanca de adentro de la lamina asoma en las dos orillas, con fibras y pedacitos de brillo */
.pk-rasgon { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 2px, rgba(255, 255, 255, .95) 2px 2.6px, transparent 2.6px 5px, rgba(200, 215, 240, .9) 5px 5.4px, transparent 5.4px 9px),
    linear-gradient(180deg, #ffffff, #dfe7f5 60%, #b9c6de); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.pk-cara .pk-rasgon { -webkit-mask: var(--mask-r, linear-gradient(#0000 0 0)); mask: var(--mask-r, linear-gradient(#0000 0 0)); clip-path: polygon(0% 9.4%, 3.33% 8.8%, 6.67% 9.7%, 10% 9.1%, 13.33% 10.2%, 16.67% 9.5%, 20% 8.7%, 23.33% 9.9%, 26.67% 9.3%, 30% 10.4%, 33.33% 9%, 36.67% 9.6%, 40% 8.8%, 43.33% 10.1%, 46.67% 9.4%, 50% 9.9%, 53.33% 8.9%, 56.67% 10.3%, 60% 9.2%, 63.33% 9.7%, 66.67% 9%, 70% 10%, 73.33% 9.5%, 76.67% 8.8%, 80% 9.8%, 83.33% 9.3%, 86.67% 10.2%, 90% 9.1%, 93.33% 9.6%, 96.67% 8.9%, 100% 9.5%, 100% 11%, 96.67% 10.4%, 93.33% 11.1%, 90% 10.6%, 86.67% 11.7%, 83.33% 10.8%, 80% 11.3%, 76.67% 10.3%, 73.33% 11%, 70% 11.5%, 66.67% 10.5%, 63.33% 11.2%, 60% 10.7%, 56.67% 11.8%, 53.33% 10.4%, 50% 11.4%, 46.67% 10.9%, 43.33% 11.6%, 40% 10.3%, 36.67% 11.1%, 33.33% 10.5%, 30% 11.9%, 26.67% 10.8%, 23.33% 11.4%, 20% 10.2%, 16.67% 11%, 13.33% 11.7%, 10% 10.6%, 6.67% 11.2%, 3.33% 10.3%, 0% 10.9%); }
.pk-tira .pk-rasgon { clip-path: polygon(0% 8.2%, 3.33% 7.6%, 6.67% 8.5%, 10% 7.9%, 13.33% 9%, 16.67% 8.3%, 20% 7.5%, 23.33% 8.7%, 26.67% 8.1%, 30% 9.2%, 33.33% 7.8%, 36.67% 8.4%, 40% 7.6%, 43.33% 8.9%, 46.67% 8.2%, 50% 8.7%, 53.33% 7.7%, 56.67% 9.1%, 60% 8%, 63.33% 8.5%, 66.67% 7.8%, 70% 8.8%, 73.33% 8.3%, 76.67% 7.6%, 80% 8.6%, 83.33% 8.1%, 86.67% 9%, 90% 7.9%, 93.33% 8.4%, 96.67% 7.7%, 100% 8.3%, 100% 9.5%, 96.67% 8.9%, 93.33% 9.6%, 90% 9.1%, 86.67% 10.2%, 83.33% 9.3%, 80% 9.8%, 76.67% 8.8%, 73.33% 9.5%, 70% 10%, 66.67% 9%, 63.33% 9.7%, 60% 9.2%, 56.67% 10.3%, 53.33% 8.9%, 50% 9.9%, 46.67% 9.4%, 43.33% 10.1%, 40% 8.8%, 36.67% 9.6%, 33.33% 9%, 30% 10.4%, 26.67% 9.3%, 23.33% 9.9%, 20% 8.7%, 16.67% 9.5%, 13.33% 10.2%, 10% 9.1%, 6.67% 9.7%, 3.33% 8.8%, 0% 9.4%); }
/* la boca del sobre: oscura por dentro cuando ya no esta la tira */
.pk-boca { position: absolute; left: 0; right: 0; top: 10%; height: 7%; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 8, 35, .55), transparent); }
/* la linea por donde se corta: punteada; al pasar el dedo se llena de luz */
.pk-corte { position: absolute; left: 3px; right: 3px; top: 9%; height: 0; transform: translateZ(7px); pointer-events: none; display: none; }
#sobre .pk-corte { display: block; }
.pk-corte::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; border-top: 2px dashed rgba(255, 255, 255, .85); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5)); }
.pk-corte-guia { position: absolute; left: 0; top: -9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, .6) 45%, transparent); animation: pk-guia 2.2s 1s ease-in-out infinite; }
@keyframes pk-guia { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 70% { opacity: 1; transform: translateX(200px); } 85%, 100% { opacity: 0; transform: translateX(200px); } }
.pk.rasgando .pk-corte-guia, #sobre.rasgado .pk-corte-guia { display: none; }
.pk-corte-luz { position: absolute; left: 0; right: 0; top: -2.5px; height: 5px; border-radius: 5px; background: #fff;
  box-shadow: 0 0 6px 2px #fff, 0 0 16px 5px var(--pk-oro2); transform: scaleX(var(--corte, 0)); transform-origin: var(--corte-o, left); transition: transform .12s ease-out; }
.pk-corte-chispa { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; opacity: 0; transition: opacity .15s;
  background: radial-gradient(closest-side, #fff 20%, rgba(255, 250, 220, .7) 45%, transparent); transform: translateX(var(--cx, 0px)); }
.pk.rasgando .pk-corte-chispa { opacity: 1; }
.pk.rasgando { animation: none; transform: rotateX(4deg) scale(1.02); transition: transform .25s; }
.pk.avisa .pk-corte::before { animation: pk-avisa .5s ease-in-out 2; }
@keyframes pk-avisa { 50% { border-top-color: #ffe27a; transform: scaleY(2.5); } }
/* luz que sale del sobre abierto */
.pk-haz { position: absolute; left: 50%; top: 9%; width: 260px; height: 220px; margin-left: -130px; transform: translateY(-100%) translateZ(8px); opacity: 0; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 255, 255, .95), rgba(255, 240, 180, .45) 35%, transparent 70%); filter: blur(4px); transform-origin: 50% 100%; }
/* ---- abrir: la tira sale volando del lado al que deslizaste y cae; sale luz por la boca */
#sobre.rasgado .pk { animation: none; transform: none; transition: transform .3s; }
#sobre.rasgado .pk-tira { visibility: hidden; }
#sobre.rasgado .pk-cara .pk-rasgon { -webkit-mask: none; mask: none; }
/* la tira arrancada: se suelta del sobre (copia fija en la pantalla) y cae con gravedad, girando, hasta salir */
.sobre.pack.sp-tira-cae { position: fixed; z-index: 6; margin: 0; pointer-events: none; animation: none !important; perspective: none; }
.sp-tira-cae .pk { animation: none !important; transform: none; }
.sp-tira-cae .pk-tira { transition: none; transform-origin: 50% 6%; clip-path: none; animation: sp-tira-cae 1.15s forwards; }
@keyframes sp-tira-cae {
  0% { transform: translateY(-6px) rotate(calc(var(--dir, 1) * 9deg)); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  16% { transform: translate(calc(var(--dir, 1) * 26px), -46px) rotate(calc(var(--dir, 1) * 16deg)); animation-timing-function: cubic-bezier(.55, 0, .9, .55); }
  100% { transform: translate(calc(var(--dir, 1) * 150px), 118vh) rotate(calc(var(--dir, 1) * 100deg)); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .sp-tira-cae { display: none; } }
#sobre.rasgado .pk-corte::before { opacity: 0; }
#sobre.rasgado .pk-corte-luz { animation: pk5-destella .5s ease-out forwards; }
@keyframes pk5-destella { 0% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1) scaleY(3); } }
#sobre.rasgado .pk-boca { opacity: 1; transition: opacity .2s; }
#sobre.rasgado .pk-haz { animation: pk-haz .9s .05s ease-out forwards; }
@keyframes pk-haz { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-100%) translateZ(8px) scaleY(1.4); } }
@media (prefers-reduced-motion: reduce) { .pk, .pk-reflejo, .pk-bandas, .pk-suelo, .pk-corte-guia, .pack-holo { animation: none !important; } }

/* portada "con asesores": cartas reales en el abanico */
.pk-abanico.con-asesores .pk-real { position: absolute; left: -52px; top: -4px; width: 104px; height: 146px; }
.pk-real .carta.chica { width: 128px; transform: scale(.8125); transform-origin: 0 0; pointer-events: none; box-shadow: 0 10px 18px rgba(0, 0, 0, .4); }
.pk-real.izq { transform: translateX(-46px) translateY(16px) rotate(-16deg); }
.pk-real.der { transform: translateX(46px) translateY(16px) rotate(16deg); }
.pk-real.centro { transform: translateY(-6px); z-index: 2; filter: drop-shadow(0 0 14px rgba(255, 255, 255, .55)); }

/* ===== cajas estilo Counter-Strike ===== */
.cajas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 6px; }
.caja-card { position: relative; border-radius: 22px; padding: 12px 12px 14px; color: #fff; overflow: hidden; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c1) 70%, #fff 0%), var(--c2) 75%); box-shadow: 0 12px 26px rgba(0, 0, 0, .25), inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.caja-card h3 { margin: 4px 0 0; font-size: 16px; } .caja-card p { margin: 2px 0 8px; font-size: 12px; opacity: .9; }
.t-oro { color: #ffd76a; }
.caja-escena { position: relative; height: 150px; perspective: 600px; }
.caja-premio { position: absolute; left: 50%; top: -6px; width: 110px; height: 110px; margin-left: -55px; z-index: 2; animation: caja-flota 3s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, .7)) drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.caja-premio img { width: 100%; height: 100%; object-fit: contain; }
@keyframes caja-flota { 50% { transform: translateY(-7px) rotate(-3deg); } }
/* la caja de obra: solida, con tapa, herrajes y etiqueta */
.crate { position: absolute; left: 50%; bottom: 6px; width: 118px; height: 74px; margin-left: -59px; border-radius: 10px; transform: perspective(500px) rotateX(10deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(0, 0, 0, .25)), repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 24px), var(--c2);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), inset 0 -10px 18px rgba(0, 0, 0, .35), 0 12px 18px rgba(0, 0, 0, .45); }
.crate i { position: absolute; display: block; }
.cr-top { left: -6px; right: -6px; top: -14px; height: 18px; border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 70%, #fff), var(--c1));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 4px 8px rgba(0, 0, 0, .35); }
.cr-side { inset: 0; pointer-events: none; background:
  radial-gradient(circle at 8px 8px, #ffd76a 0 4px, transparent 5px), radial-gradient(circle at calc(100% - 8px) 8px, #ffd76a 0 4px, transparent 5px),
  radial-gradient(circle at 8px calc(100% - 8px), #ffd76a 0 4px, transparent 5px), radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #ffd76a 0 4px, transparent 5px); }
.cr-front { inset: 0; display: grid; place-items: center; }
.cr-front b { font-size: 11px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  background: rgba(0, 0, 0, .3); border: 1.5px solid rgba(255, 255, 255, .7); padding: 3px 8px; border-radius: 6px; }
.caja-card h3 { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.caja-acc { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.caja-acc .enlace { color: #fff; opacity: .85; font-size: 12px; }
.caja-acc .b3 { width: 100%; white-space: nowrap; }
.inv-grid, .cont-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.inv-item, .cont-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 10px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, #262d3e, #181f2e); color: #fff; border: 0; border-bottom: 4px solid var(--tc); cursor: pointer; }
.inv-item img, .cont-item img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tc) 60%, transparent)); }
.inv-item b, .cont-item b { font-size: 11px; line-height: 1.2; } .inv-item small, .cont-item small { font-size: 10px; opacity: .75; }
.inv-item.puesto { box-shadow: 0 0 0 2px #3ddc84; } .puesto-tag { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 9px; font-weight: 900; background: #3ddc84; color: #063; padding: 1px 6px; border-radius: 99px; }
.hoja-contenido .cont-item { cursor: default; }
/* la ruleta */
.velo-ruleta { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c1, #4a71cb) 35%, #0f1728), #06080e 75%) !important; display: grid; place-items: center; }
.ruleta { width: 100vw; max-width: 760px; display: flex; flex-direction: column; align-items: center; color: #fff; }
.ru-titulo { font-weight: 900; letter-spacing: 3px; text-transform: uppercase; font-size: 14px; opacity: .8; margin: 0 0 14px; }
.ru-ventana { position: relative; width: 100%; height: 170px; overflow: hidden; background: rgba(0, 0, 0, .35); border-top: 2px solid rgba(255, 255, 255, .1); border-bottom: 2px solid rgba(255, 255, 255, .1);
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); transition: opacity .4s; }
.ru-ventana.atenuada { opacity: .35; }
.ru-tira { display: flex; gap: 6px; padding: 12px 0; will-change: transform; }
.ru-casilla { position: relative; flex: none; width: 120px; height: 146px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(90% 70% at 50% 35%, color-mix(in srgb, var(--tc) 35%, #262d3e), #151b28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); overflow: hidden; }
.ru-casilla .ru-img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }
.ru-casilla b { font-size: 10.5px; line-height: 1.15; padding: 0 6px; text-align: center; max-height: 2.4em; overflow: hidden; }
.ru-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--tc); box-shadow: 0 0 12px var(--tc); }
.ru-casilla.misterio { background: radial-gradient(circle, #ffe59a, #b97a10 70%, #3a2405); }
.ru-estrella { font-size: 54px; color: #fff4c2; text-shadow: 0 0 18px #ffd34a; }
.ru-casilla.ganadora { animation: ru-gana .9s ease-out forwards; z-index: 2; }
@keyframes ru-gana { 30% { transform: scale(1.12); box-shadow: 0 0 0 3px var(--tc), 0 0 40px var(--tc); } 100% { transform: scale(1.06); box-shadow: 0 0 0 3px var(--tc), 0 0 30px var(--tc); } }
.ru-marca { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #ffd34a; box-shadow: 0 0 12px #ffd34a; z-index: 3; }
.ru-marca::before, .ru-marca::after { content: ""; position: absolute; left: 50%; margin-left: -9px; border: 9px solid transparent; }
.ru-marca::before { top: 0; border-top-color: #ffd34a; } .ru-marca::after { bottom: 0; border-bottom-color: #ffd34a; }
.velo-ruleta.destello::after { content: ""; position: fixed; inset: 0; background: #fff; pointer-events: none; animation: ru-flash .7s ease-out forwards; }
@keyframes ru-flash { from { opacity: .85; } to { opacity: 0; } }
/* la ficha del premio */
.ru-premio { position: relative; margin-top: -120px; z-index: 4; width: min(92vw, 380px); text-align: center; padding: 18px 18px 16px; border-radius: 24px;
  background: linear-gradient(180deg, #1e2639, #101522); box-shadow: 0 0 0 2px var(--tc), 0 0 60px color-mix(in srgb, var(--tc) 55%, transparent), 0 30px 60px rgba(0, 0, 0, .6);
  animation: rp-entra .55s cubic-bezier(.2, 1.3, .4, 1) both; overflow: hidden; }
@keyframes rp-entra { from { opacity: 0; transform: translateY(40px) scale(.85); } }
.rp-luz { position: absolute; left: 50%; top: 110px; width: 460px; height: 460px; margin: -230px; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 70%, #fff) 0 5deg, transparent 5deg 16deg); -webkit-mask: radial-gradient(circle, #000 0 15%, transparent 60%);
  mask: radial-gradient(circle, #000 0 15%, transparent 60%); animation: pack-rayos 18s linear infinite; }
.rp-foto { position: relative; display: flex; justify-content: center; }
.rp-foto img { width: 200px; height: 200px; object-fit: contain; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--tc) 70%, transparent)); animation: caja-flota 3s ease-in-out infinite; }
.rp-rareza { position: relative; display: inline-block; color: var(--tc); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; }
.ru-premio h2, .hoja-objeto h2 { position: relative; margin: 4px 0 6px; font-size: 20px; color: #fff; }
.rp-datos { position: relative; font-size: 12px; color: rgba(255, 255, 255, .75); margin: 0 0 6px; }
.rp-cv { position: relative; display: inline-block; font-size: 12px; font-weight: 900; color: #ff9b3d; border: 1.5px solid #ff9b3d; border-radius: 8px; padding: 3px 8px; margin: 0 0 8px; }
.rp-nuevo { position: relative; color: #3ddc84; font-weight: 900; margin: 0 0 8px; } .rp-copia { position: relative; color: #ffd34a; font-weight: 900; margin: 0 0 4px; }
.rp-barra { position: relative; margin: 6px 20px; }
.ru-premio .muted { position: relative; color: rgba(255, 255, 255, .7); }
.ru-premio .fila-acciones { position: relative; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.hoja-objeto { text-align: center; background: linear-gradient(180deg, #1e2639, #101522); color: #fff; }
.cr-front { align-items: end; padding-bottom: 12px; }

.cont-item.ya { opacity: .45; }
.caja-acc .b3[disabled] { filter: grayscale(.6); opacity: .8; }
/* tienda: Cajas (comprar) / Decorar (lo que ya tienes) */
.modo-tienda { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin: 6px 0 10px; border-radius: 18px; background: rgba(28, 23, 69, .07); }
.modo-tienda button { display: flex; gap: 6px; align-items: center; justify-content: center; border: 0; border-radius: 14px; padding: 10px; font-weight: 900; font-size: 15px;
  background: transparent; color: #5a6582; cursor: pointer; }
.modo-tienda button svg { width: 18px; height: 18px; }
.modo-tienda button.activo { background: #fff; color: #0a1a4a; box-shadow: 0 3px 10px rgba(28, 23, 69, .12); }
.aviso-cajas { display: flex; width: 100%; gap: 8px; align-items: center; border: 0; margin: 8px 0 4px; padding: 10px 12px; border-radius: 14px; cursor: pointer; text-align: left;
  background: linear-gradient(90deg, #769cf4, #5987f2); color: #fff; font-size: 13px; }
.aviso-cajas span { flex: 1; } .aviso-cajas svg { width: 18px; height: 18px; flex: none; }

/* botes de pintura */
.caja-escena { height: 150px; display: grid; place-items: center; }
.bote-img { width: 150px; height: 150px; object-fit: contain; animation: bote-mece 3.2s ease-in-out infinite; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .35)); }
@keyframes bote-mece { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-6px); } }
.caja-card:hover .bote-img, .caja-card:active .bote-img { animation-duration: .5s; }
.ru-bote { width: 100%; height: 360px; margin-top: -10px; }
.ru-ventana.escondida { opacity: 0; transform: scaleY(.2); }
.ru-ventana { transition: opacity .35s, transform .35s, height .45s, margin .45s; }
.ru-ventana.recogida { height: 0; opacity: 0; margin: 0; border: 0; }
.ruleta.con-bote .ru-premio { margin-top: 0; }
.ruleta.con-bote .ru-premio h2 { margin-top: 0; }
/* bloqueado: candado grande en la esquina y la foto en gris */
.item .candado-esq { position: absolute; top: 6px; right: 6px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: #0a1a4a; color: #fff; box-shadow: 0 3px 8px rgba(28, 23, 69, .35), 0 0 0 2px #fff; }
.item .candado-esq svg { width: 17px; height: 17px; }
.item.no-mio .item-img { filter: grayscale(.85) brightness(.9); opacity: .6; }
.item.no-mio .tag-lim { top: 30px; left: 8px; right: auto; }
.item.no-mio .req { color: #5a6582; font-weight: 800; }

/* presumir la mascota: boton en el cuarto y hoja con el enlace publico */
.cuarto-top-der { display: inline-flex; gap: 6px; }
.chip-presumir { padding: 0 11px; pointer-events: auto; } .chip-presumir .ic { color: #0d2f80; fill: none; }
.hoja-presumir .enlace-presumir input { width: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid #e0e7f7; font: inherit; font-weight: 800; font-size: 13px; color: #0a1a4a; background: #f6f8fe; }
.hoja-presumir .fila-acciones .ic { width: 18px; height: 18px; vertical-align: -3px; }
.hoja-presumir .b-texto { display: block; margin: 12px auto 4px; border: 0; background: none; color: #d6336c; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }

/* ranking: que se entienda contra quien compites y cuanto te falta */
.cab-division-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rk-info { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #e8edf7; color: #0d2f80; cursor: pointer; }
.rk-info .ic { width: 20px; height: 20px; }
.cab-division strong { font-weight: 900; color: #0a1a4a; }
.rk-mio { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: #eef2fa; color: #0a1a4a; font-size: 13px; font-weight: 700; line-height: 1.3; }
.rk-mio-pos { flex: none; display: grid; justify-items: center; color: #0d2f80; font-family: var(--titulo); font-size: 26px; line-height: 1; }
.rk-mio-pos small { font-family: inherit; font-size: 11px; font-weight: 800; opacity: .85; }
.lista-rk .rk .p small { margin-left: 3px; font-size: 10px; opacity: .7; }
.rk-ayuda { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #eaeffa; }
.rk-ayuda > .ic { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 12px; background: #e8edf7; color: #0d2f80; }
.rk-ayuda b { display: block; } .rk-ayuda span { font-size: 13px; color: #5a6582; }

/* ===== festejos de desbloqueo y de nivel ===== */
.cofre-velo.revela { background: radial-gradient(110% 80% at 50% 32%, #33549f 0%, #132858 55%, #07132d 100%); }
.cofre-velo.nivel-velo { background: radial-gradient(110% 80% at 50% 32%, #ffb84d 0%, #c2410c 50%, #3b0f00 100%); }
.rv, .nvl { position: relative; width: 260px; height: 290px; display: grid; place-items: center; margin: 4px auto 0; }
.rv-rayos { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc, #fff) 70%, transparent) 0 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%);
  transition: opacity .5s; animation: girar 14s linear infinite; }
.rv-halo { position: absolute; inset: 20px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 80%, #fff) 0%, transparent 65%); opacity: 0; transform: scale(.3); transition: all .6s cubic-bezier(.2, 1.4, .4, 1); }
.rv-carta { position: relative; z-index: 1; width: 210px; height: 260px; border-radius: 26px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 35%, #fff) 0%, #fff 45%, color-mix(in srgb, var(--rc) 25%, #fff) 100%);
  box-shadow: 0 0 0 5px var(--rc), 0 0 0 9px rgba(255, 255, 255, .85), 0 20px 50px rgba(0, 0, 0, .45), 0 0 70px var(--rc);
  transform: scale(0) rotate(-14deg); opacity: 0; }
.rv.ver .rv-carta { animation: rv-sale .8s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.rv.ver .rv-rayos, .nvl.rompe .rv-rayos { opacity: 1; }
.rv.ver .rv-halo { opacity: 1; transform: scale(1.25); }
@keyframes rv-sale { 0% { transform: scale(0) rotate(-14deg); opacity: 0; filter: brightness(4); } 60% { opacity: 1; filter: brightness(1.6); } 100% { transform: none; opacity: 1; filter: none; } }
.rv-rareza { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 99px; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--rc); box-shadow: 0 3px 0 rgba(0, 0, 0, .18); white-space: nowrap; }
.rv-foto { display: grid; place-items: center; margin-top: 18px; animation: flotar 2.4s ease-in-out infinite; }
.rv-foto img { width: 190px; height: 190px; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .25)); }
.rv-foto .avatar { --av: 150px; }
.rv-titulo { font-size: 22px !important; padding: 12px 22px !important; }
.rv-brillo { position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%); transform: translateX(-80%); pointer-events: none; }
.rv.ver .rv-brillo { animation: rv-brillo 1.1s .55s ease-out; }
.nvl.rompe .nv-medalla.nueva .rv-brillo { animation: rv-brillo 1.1s .5s ease-out; }
@keyframes rv-brillo { to { transform: translateX(80%); } }
.cofre-velo.revela .r-legendaria { animation: rv-sale .8s cubic-bezier(.2, 1.5, .4, 1) forwards, rv-late 1.6s 1s ease-in-out infinite; }
@keyframes rv-late { 50% { box-shadow: 0 0 0 5px var(--rc), 0 0 0 9px rgba(255, 255, 255, .85), 0 20px 50px rgba(0, 0, 0, .45), 0 0 120px var(--rc); } }
/* nivel: medallas hexagonales con el color de cada nivel */
.nvl { --rc: var(--a); height: 250px; }
.nv-medalla { position: absolute; width: 190px; height: 210px; display: grid; place-items: center; align-content: center; gap: 2px; overflow: hidden;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.nv-medalla span { font-family: var(--titulo); font-size: 34px; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.nv-medalla.vieja { background: linear-gradient(160deg, var(--va), var(--vb)); }
.nv-medalla.nueva { background: linear-gradient(160deg, #fff 0%, var(--a) 30%, var(--b) 100%); transform: scale(0); opacity: 0;
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .5); }
.nv-medalla.nueva span { font-size: 40px; color: #fff; text-shadow: 0 4px 0 color-mix(in srgb, var(--b) 70%, #000), 0 0 20px rgba(255, 255, 255, .6); }
.nv-corona { width: 46px; height: 46px; color: #fff; fill: rgba(255, 255, 255, .5); }
.nvl.rompe .nv-medalla.vieja { animation: nv-rompe .5s ease-in forwards; }
.nvl.rompe .nv-medalla.nueva { animation: rv-sale .9s .35s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes nv-rompe { 30% { transform: scale(1.08) rotate(4deg); } 100% { transform: scale(.4) rotate(-20deg); opacity: 0; filter: blur(6px) brightness(2); } }
.nv-barra { width: min(280px, 80%); height: 14px; border-radius: 99px; background: rgba(0, 0, 0, .25); overflow: hidden; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); }
.nv-barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #fff6c8, #ffd23f); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.nv-sig { font-size: 14px !important; opacity: .9; }
/* ---------- casas de los compañeros (Equipo > Ciudad) */
.ciudades { margin: 6px 0 4px; }
.ciudades button small { margin-left: 5px; font-size: 10px; opacity: .7; }
.ciudad-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.ciudad-cab h2 { margin: 0; font-size: 17px; flex: 1; min-width: 60%; }
.ciudad-cab .atras { border: 0; border-radius: 12px; width: 36px; height: 36px; display: grid; place-items: center; background: #e8edf7; color: #0a1a4a; }
.corazones-dia { display: inline-flex; align-items: center; gap: 3px; }
.corazones-dia i { width: 20px; height: 20px; color: #d5dbe8; } .corazones-dia i.lleno { color: #ff4f7b; }
.corazones-dia i svg { width: 100%; height: 100%; } .corazones-dia small { margin-left: 4px; font-size: 11px; font-weight: 800; color: #5a6582; }
.cs-corazon { display: inline-flex; gap: 4px; align-items: center; border: 0; border-radius: 99px; padding: 4px 11px; font-weight: 900; font-size: 12px; cursor: pointer;
  background: #ffe1ec; color: #d6336c; box-shadow: 0 3px 8px rgba(28, 23, 69, .18); transition: transform .15s; }
.cs-corazon svg { width: 15px; height: 15px; } .cs-corazon.dado { background: #ff4f7b; color: #fff; } .cs-corazon[disabled] { opacity: .65; cursor: default; }
.cs-corazon.rebote { animation: cs-late .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes cs-late { 40% { transform: scale(1.3); } }
/* ---------- listado de casas 3D (Equipo > Ciudad): el cuarto de cada compañero con su mascota */
.entrada-ciudad.corta { height: 118px; border-radius: 20px; }
.entrada-ciudad.corta img { object-position: 50% 46%; }
.entrada-ciudad.corta span { bottom: 50%; transform: translate(-50%, 50%); padding: 10px 18px; font-size: 14.5px; }
#lc-cuerpo .chips-scroll { padding-top: 14px; }
.lc-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 14px 2px 4px; }
.lc-cab h2 { margin: 0; font: 900 19px/1.15 Nunito, var(--texto, sans-serif); color: #0a1a4a; }
.lc-cab > div > small { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: #5a6582; }
.lc-grupo { margin-top: 16px; }
.lc-gremio { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font: 900 13px Nunito, var(--texto, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: #0d2f80; }
.lc-gremio::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(108, 76, 245, .28), rgba(108, 76, 245, 0)); }
.lc-gremio small { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: #e9effd; color: #0d2f80; font-size: 11px; letter-spacing: 0; }
.lc-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
@media (max-width: 520px) { .lc-rejilla { grid-template-columns: 1fr 1fr; gap: 10px; } }
.lc-sk { aspect-ratio: 16 / 13; border-radius: 20px; }
.lc-casa { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; cursor: pointer; outline: none;
  box-shadow: 0 8px 22px rgba(28, 23, 69, .10), 0 1px 3px rgba(28, 23, 69, .08); transition: transform .18s, box-shadow .18s; -webkit-tap-highlight-color: transparent; }
.lc-casa:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(28, 23, 69, .16), 0 2px 4px rgba(28, 23, 69, .08); }
.lc-casa:active { transform: scale(.97); }
.lc-casa:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0d2f80; }
.lc-casa.mio { box-shadow: 0 0 0 3px #ffd23f, 0 10px 26px rgba(255, 170, 0, .25); }
.lc-foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, #eff4fe 0%, #dfe8fc 55%, #cfdcfb 100%); }
.lc-cuarto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: lc-aparece .45s ease-out; }
@keyframes lc-aparece { from { opacity: 0; transform: scale(1.04); } }
.lc-espera { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .3s; }
.lc-espera::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%) -100% 0 / 200% 100%; animation: lc-brillo 1.4s infinite; }
@keyframes lc-brillo { to { background-position: 100% 0; } }
.lc-espera .lc-pet { width: 62%; height: auto; max-height: 92%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(28, 23, 69, .18)); }
.lc-foto.lista .lc-espera { opacity: 0; pointer-events: none; }
.lc-tuya { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 4px 10px; border-radius: 99px; background: #ffd23f; color: #3b2a00; font-size: 11.5px; font-weight: 900;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18); }
.lc-pie { display: flex; align-items: center; gap: 8px; padding: 9px 10px 10px 12px; }
.lc-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lc-quien b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 900 14px/1.2 Nunito, var(--texto, sans-serif); color: #0a1a4a; }
.lc-quien small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; font-weight: 700; color: #5a6582; }
.lc-pie .cs-corazon { flex: none; box-shadow: none; }
@media (max-width: 520px) { .lc-pie { padding: 8px 8px 9px 10px; gap: 6px; } .lc-quien b { font-size: 13px; } .lc-pie .cs-corazon { padding: 4px 8px; } }
.cofre-velo.revela .escena h2, .cofre-velo.nivel-velo .escena h2 { color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 0 24px rgba(255, 255, 255, .35); }
.cofre-velo.revela .escena p, .cofre-velo.nivel-velo .escena p { color: rgba(255, 255, 255, .92); }
.cofre-velo.nivel-velo .escena p b { color: #fff; }

/* comida que no tienes: se compra desde la bandeja */
.plato.vacio { opacity: 1; }
.plato.vacio img { opacity: .6; }
.plato-precio { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 99px; background: #fff3c4; color: #8a5a00 !important; font-weight: 900; }
.plato-precio .coin { width: 13px; height: 13px; }

/* ===== tutorial guiado: ilumina una parte de la app y explica con un globo ===== */
.guia { position: fixed; inset: 0; z-index: 140; }
.guia::before { content: ''; position: absolute; inset: 0; }   /* bloquea toques a la app mientras se explica */
.guia-foco { position: fixed; border-radius: 18px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(14, 8, 48, .72), 0 0 0 3px #ffd23f, 0 0 26px 6px rgba(255, 210, 63, .55);
  transition: left .35s cubic-bezier(.3, .9, .3, 1), top .35s cubic-bezier(.3, .9, .3, 1), width .35s, height .35s; animation: guia-late 1.8s ease-in-out infinite; }
@keyframes guia-late { 50% { box-shadow: 0 0 0 9999px rgba(14, 8, 48, .72), 0 0 0 4px #ffd23f, 0 0 40px 10px rgba(255, 210, 63, .7); } }
.guia-globo { position: fixed; width: min(340px, calc(100vw - 20px)); padding: 16px 16px 12px; border-radius: 22px; background: #fff; color: #0a1a4a;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35); font-size: 14.5px; line-height: 1.4; }
.guia-globo.centro { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); box-shadow: 0 0 0 9999px rgba(14, 8, 48, .72), 0 16px 40px rgba(0, 0, 0, .35); text-align: center; }
.guia-globo.entra { animation: guia-entra .35s cubic-bezier(.2, 1.4, .4, 1); }
.guia-globo.centro.entra { animation: guia-entra-c .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes guia-entra { from { opacity: 0; transform: translateY(10px) scale(.95); } }
@keyframes guia-entra-c { from { opacity: 0; transform: translate(-50%, -46%) scale(.95); } }
.guia-globo.abajo::before, .guia-globo.arriba::after { content: ''; position: absolute; left: var(--flecha, 50%); width: 16px; height: 16px; margin-left: -8px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
.guia-globo.abajo::before { top: -7px; } .guia-globo.arriba::after { bottom: -7px; }
.guia-titulo { display: block; font-size: 17px; font-weight: 900; margin-bottom: 4px; color: #06205c; }
.guia-globo p { margin: 0 0 12px; color: #48536d; }
.guia-icono { width: 74px; height: 74px; margin: 0 auto 10px; border-radius: 24px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #2a4fa8, #06205c); box-shadow: 0 6px 0 #031540; }
.guia-icono .ic { width: 40px; height: 40px; }
.guia-pie { display: flex; align-items: center; gap: 8px; }
.guia-paso { flex: 1; text-align: left; font-size: 12px; font-weight: 800; color: #969fb5; }
.guia-btn { border: 0; border-radius: 14px; padding: 10px 16px; font: inherit; font-weight: 900; color: #fff; background: #0d2f80; box-shadow: 0 3px 0 #06205c; cursor: pointer; }
.guia-btn.gris { color: #5a6582; background: #e8edf7; box-shadow: none; }
.guia-cargando { display: grid; place-items: center; padding: 10px; color: #969fb5; } .guia-cargando .ic { width: 28px; height: 28px; animation: girar 1.2s linear infinite; }

/* misiones con el ERP un dia atras: lo marcado a mano va rayado ("por confirmar") y arriba el resultado confirmado de ayer */
.misiones-dia .barra { position: relative; }
.misiones-dia .barra i.tuyo { position: absolute; top: 0; bottom: 0; border-radius: 0 99px 99px 0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .85) 0 6px, rgba(255, 255, 255, .45) 6px 12px); }
.misiones-dia .barra.azul i { background: #74c0fc; }
.mision-fila.por-confirmar { background: rgba(116, 192, 252, .28); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.chip.azul { background: #e7f5ff; color: #1971c2; }
.mis-marcar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.mis-marcar small { flex: 1 1 100%; margin: 0 !important; }
.mis-btn { flex: none; border: 0; border-radius: 12px; height: 30px; min-width: 30px; padding: 0 10px; font: inherit; font-size: 12.5px; font-weight: 900;
  color: #0b5e57; background: rgba(255, 255, 255, .92); box-shadow: 0 3px 0 rgba(0, 0, 0, .15); cursor: pointer; }
.mis-btn.mas { color: #fff; background: #ff8a3d; box-shadow: 0 3px 0 #c2410c; }
.mis-btn[disabled] { opacity: .45; }
.mis-ayer { display: grid; gap: 3px; margin: 0 0 10px; padding: 10px 12px; border-radius: 16px; background: #fff; color: #48536d; font-size: 12.5px;
  box-shadow: 0 3px 10px rgba(28, 23, 69, .08); border-left: 5px solid #ffb84d; }
.mis-ayer.ok { border-left-color: #38d9a9; }
.mis-ayer b { display: flex; align-items: center; gap: 6px; color: #0a1a4a; font-size: 13px; }
.mis-ayer b .ic { width: 16px; height: 16px; }
.mis-ayer .si { color: #0ca678; } .mis-ayer .no { color: #868e96; } .mis-ayer em { font-style: normal; color: #969fb5; }

/* refuerzos con el ERP un dia atras */
.hud-pill .por-llegar { margin-left: 6px; padding: 2px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 900; color: #0b7285; background: #c5f6fa;
  animation: por-llegar 2.4s ease-in-out infinite; white-space: nowrap; }
@keyframes por-llegar { 50% { transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(21, 170, 191, .25); } }
.mis-equipo { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 14px; background: #fff4e6; color: #8a4b00; font-size: 12.5px; }
.mis-equipo .ic { flex: none; width: 18px; height: 18px; }
.sellos { width: 100%; display: grid; gap: 8px; }
.sello-fila { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .95); color: #0a1a4a;
  text-align: left; font-weight: 800; font-size: 14px; opacity: 0; transform: translateX(-20px); transition: all .35s cubic-bezier(.2, 1.4, .4, 1); }
.sello-fila.ver { opacity: 1; transform: none; }
.sello-fila span { flex: 1; }
.sello { flex: none; padding: 4px 9px; border: 3px solid currentColor; border-radius: 8px; font-size: 12px; letter-spacing: .06em; transform: rotate(-8deg) scale(2.2); opacity: 0; }
.sello-fila.si .sello { color: #0ca678; } .sello-fila.no .sello { color: #868e96; }
.sello-fila.ver .sello { animation: sellar .45s .1s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes sellar { to { transform: rotate(-8deg) scale(1); opacity: 1; } }
.sellos-pie { margin-top: 6px !important; font-weight: 800; }

/* ===== Tema MN: azul marino y rojo del logo de MN del Golfo (los colores con significado del juego se quedan:
   oro = monedas, verde = hecho, y los de rareza) ===== */
:root {
  --mn-azul: #06205c; --mn-azul-2: #0d2f80; --mn-azul-s: #031540; --mn-azul-c: #e8edf7;
  --mn-rojo: #e1211c; --mn-rojo-2: #f0443f; --mn-rojo-s: #a8140f; --mn-rojo-c: #fde8e7;
  --azul: var(--mn-azul-2); --azul-s: var(--mn-azul-s); --azul-c: var(--mn-azul-c); --azul-b: #8fa6d8;
  --rojo: var(--mn-rojo); --rojo-s: var(--mn-rojo-s); --rojo-c: var(--mn-rojo-c);
  --morado: var(--mn-azul-2); --morado-s: var(--mn-azul-s); --morado-c: var(--mn-azul-c);
  --tx: #1d2740; --tx-2: #2b3550;
}
/* botones: el principal en azul marino; los de accion fuerte en rojo MN */
.b3, .b3.verde, .b3.azul, .b3.turquesa, .b3.morado { --c: var(--mn-azul-2); --cs: var(--mn-azul-s); }
.b3.naranja, .b3.rosa, .b3.rojo { --c: var(--mn-rojo); --cs: var(--mn-rojo-s); }
.b3.blanco, .b3.gris { --ct: var(--mn-azul); }
h1, h2, .cab-vista h1, .seccion-cab h2 { color: var(--mn-azul); }
/* el boton central Jugar es la accion principal: rojo MN */
.tab-jugar .boton-jugar, .boton-jugar { background: var(--mn-rojo) !important; box-shadow: 0 4px 0 var(--mn-rojo-s), 0 8px 20px rgba(225, 33, 28, .35) !important; }
.tab-jugar .lbl { color: var(--mn-rojo); }
.tab.activo::after { background: var(--mn-rojo); }
/* en telefonos angostos el globito de "por confirmar" va corto para no empujar la foto del perfil fuera de la pantalla */
@media (max-width: 430px) { .hud-pill .por-llegar .pl-txt { display: none; } .hud-pill .por-llegar { margin-left: 4px; padding: 2px 6px; } }

/* logo del juego en la entrada */
.logo-login { display: block; width: min(300px, 82%); height: auto; margin: -6px auto 4px; filter: drop-shadow(0 8px 14px rgba(6, 32, 92, .25)); }
.guia-logo { display: block; width: 200px; height: auto; margin: -4px auto 6px; }

/* entrada: fondo azul MN con rayos y el logo flotando encima del formulario */
.login { background: radial-gradient(120% 70% at 50% 18%, #2a5fc9 0%, #0b2a73 45%, #041a4d 100%) !important; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; padding: 24px 16px; }
.login::before { content: ''; position: absolute; left: 50%; top: 22%; width: 900px; height: 900px; margin: -450px 0 0 -450px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .07) 0 9deg, transparent 9deg 22deg); animation: girar 60s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 65%); mask: radial-gradient(circle, #000 25%, transparent 65%); }
.login .logo-login { position: relative; z-index: 1; width: min(330px, 86%); margin: 0 auto -8px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
.login > form { position: relative; z-index: 1; width: min(400px, 100%); }

/* ==========================================================================
   REVERSO MN DE LAS CARTAS (.dorso-mn): azul marino con el monograma MN en diagonal, marco dorado, franja roja
   y el logo redondo de MN al centro, con brillo de carta. Lo usan el album (cartas que faltan), el sobre y los cambios.
   ========================================================================== */
.dorso-mn { overflow: hidden; isolation: isolate; color: #fff;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .24) 0, rgba(255, 255, 255, .04) 26%, transparent 34%, transparent 62%, rgba(255, 255, 255, .1) 74%, transparent 84%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ctext x='18' y='22' font-family='Arial Black,Arial,sans-serif' font-weight='900' font-style='italic' font-size='11' text-anchor='middle' fill='%23fff' fill-opacity='.09' transform='rotate(-30 18 18)'%3EMN%3C/text%3E%3C/svg%3E") 0 0 / 36px 36px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ctext x='18' y='22' font-family='Arial Black,Arial,sans-serif' font-weight='900' font-style='italic' font-size='11' text-anchor='middle' fill='%23fff' fill-opacity='.05' transform='rotate(-30 18 18)'%3EMN%3C/text%3E%3C/svg%3E") 18px 18px / 36px 36px,
    radial-gradient(70% 50% at 50% 46%, rgba(77, 125, 240, .6), transparent 72%),
    linear-gradient(160deg, #0d2f80, #06205c 55%, #031540) !important; }
.dmn-marco { position: absolute; inset: 6%; border: 2px solid #ffc21a; border-radius: 10px; pointer-events: none; z-index: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 0 12px rgba(255, 194, 26, .18); }
.dmn-logo { position: absolute; left: 50%; top: 47%; width: 52%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: 2; pointer-events: none;
  background: url(/img/mn-circulo.png) center / 100% no-repeat;
  box-shadow: 0 0 0 2.5px #ffc21a, 0 0 0 4.5px #06205c, 0 0 0 5.5px rgba(255, 255, 255, .55), 0 0 22px 6px rgba(255, 194, 26, .3), 0 6px 12px rgba(0, 0, 0, .45); }
/* franja roja MN detras del logo, de orilla a orilla del marco */
.dmn-marco::before { content: ""; position: absolute; left: -12%; right: -12%; top: 46.6%; height: 13%; translate: 0 -50%;
  background: linear-gradient(180deg, #f0443f, #e1211c 45%, #a8140f); border-block: 2px solid #ffc21a; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
/* brillo del logo (cristal) */
.dmn-logo::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(60% 40% at 34% 24%, rgba(255, 255, 255, .7), transparent 70%); mix-blend-mode: screen; }
/* en la carta del album (forma de escudo) y en las chicas */
.carta.oculta .carta-in.dorso-mn { border: 3px solid rgba(255, 255, 255, .85); display: block; }
.carta.oculta .carta-in.dorso-mn::after { display: none; }
.carta-in.dorso-mn .dmn-marco { border-radius: 15px 15px 44% 44% / 15px 15px 13% 13%; }
.carta.oculta .carta-in.dorso-mn .silueta { position: absolute; left: 50%; top: 10.5%; translate: -50% 0; width: 20%; min-width: 20px; aspect-ratio: 1; z-index: 3;
  display: grid; place-items: center; font-size: 15px; font-weight: 900; line-height: 1; color: #06205c; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #ffc21a 60%, #d99a00); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.carta.oculta .carta-in.dorso-mn .silueta svg { width: 58%; height: 58%; color: #06205c; }
.carta.oculta .carta-in.dorso-mn > b { position: absolute; left: 10%; right: 10%; bottom: 13%; z-index: 3; text-align: center; color: #fff; font-size: 10px; font-weight: 900;
  line-height: 1.15; padding: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); text-transform: uppercase; letter-spacing: .3px; }
.carta.oculta:not(.chica) .carta-in.dorso-mn .silueta { font-size: 24px; }
.carta.oculta:not(.chica) .carta-in.dorso-mn > b { font-size: 14px; }
.carta.oculta .deseo-badge { z-index: 5; }
/* mini-cartas del abanico del sobre y la del cambio */
.pk-mini.dorso-mn .dmn-marco { inset: 7%; border-width: 1.5px; border-radius: 6px; }
.pk-mini.dorso-mn .dmn-logo { width: 56%; }
.cambio-carta.entra .dorso.dorso-mn { border: 3px solid rgba(255, 255, 255, .85); }
.pk-dorso.dorso-mn .dmn-marco { inset: 12% 8%; }
.pk-dorso.dorso-mn .dmn-logo { width: 46%; }

/* ==========================================================================
   ABRIR SOBRE v5 (estilo Pokemon TCG Pocket): rasgar con el dedo, salen las cartas, una por una, resumen.
   ========================================================================== */
.velo-sobre.sp5 { background: radial-gradient(120% 80% at 50% 38%, #1a4bb8 0%, #0b2a73 40%, #041a4d 75%, #020d2b 100%) !important; backdrop-filter: none;
  align-items: stretch; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.sp5 [hidden] { display: none !important; }
.sp5 img { -webkit-user-drag: none; user-select: none; }
.velo-sobre.sp5::before { content: ""; position: absolute; left: 50%; top: 44%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .055) 0 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); animation: fx-girar 80s linear infinite; }
.sp-escena { position: relative; z-index: 1; width: min(100vw, 520px); min-height: 100%; display: flex; flex-direction: column; align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)); --cw: min(244px, 62vw); --esc: 1.22; }
@media (max-height: 720px) { .sp-escena { --cw: min(214px, 60vw); --esc: 1.06; } }
@media (max-height: 600px) { .sp-escena { --cw: min(180px, 56vw); --esc: .9; } }
.sp-escena::before { content: ""; position: fixed; inset: 0; background: rgba(2, 8, 30, .62); opacity: 0; transition: opacity .35s; pointer-events: none; z-index: 0; }
.sp-escena.tension::before { opacity: 1; }
.sp-escena.luz::before { opacity: 0; }
.velo-sobre.sp5 > .fx-rafaga { z-index: 0; }
.sp-barra { position: relative; z-index: 3; width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 40px; }
.sp-cuenta { color: rgba(255, 255, 255, .85); font-weight: 900; font-size: 14px; letter-spacing: .5px; background: rgba(255, 255, 255, .1); padding: 5px 12px; border-radius: 99px; }
.sp-cuenta[hidden] + .sp-saltar { margin-left: auto; }
.sp-saltar { margin-left: auto; display: flex; align-items: center; gap: 4px; border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff;
  font: 800 13px var(--texto); padding: 7px 12px 7px 14px; border-radius: 99px; cursor: pointer; }
.sp-saltar svg { width: 15px; height: 15px; }
.sp-centro { position: relative; z-index: 2; flex: 1; width: 100%; display: grid; place-items: center; min-height: 0; }
.sp-centro > * { grid-area: 1 / 1; }
/* el sobre grande, al frente de la pila */
.sp5 #sobre { position: relative; z-index: 2; scale: var(--esc); touch-action: none; cursor: grab; outline-offset: 10px;
  animation: sp-entra .8s cubic-bezier(.2, 1.25, .4, 1) backwards; transition: translate .85s cubic-bezier(.55, 0, .8, .35), opacity .3s .55s, rotate .85s ease-in; }
@keyframes sp-entra { from { opacity: 0; transform: translateY(-70vh) rotate(-14deg); } }
.sp5 #sobre .pk { animation-name: sp-vaiven; }
@keyframes sp-vaiven { 0%, 100% { transform: rotateY(-9deg) rotateX(4deg) translateY(0); } 50% { transform: rotateY(9deg) rotateX(-3deg) translateY(-6px); } }
.sp-escena.salen #sobre { translate: 0 85vh; rotate: 5deg; opacity: 0; }
/* la pila: escondida dentro del sobre; asoma por la boca al abrir y se queda cuando el sobre cae */
.sp-pila { position: relative; z-index: 1; width: calc(195px * var(--esc)); aspect-ratio: 5 / 7; }
.sp-carta { position: absolute; inset: 0; perspective: 1100px; --o: max(0, calc(var(--i) - var(--k))); cursor: grab;
  translate: 0 14px; scale: .9;
  transition: transform .5s cubic-bezier(.3, .75, .3, 1), translate .5s cubic-bezier(.2, 1.2, .4, 1), rotate .5s, scale .5s cubic-bezier(.2, 1.2, .4, 1), opacity .3s; }
/* escondidas dentro del sobre (detras de la cara, sin asomar) hasta que la tira se fue; luego suben por la boca rasgada
   y, cuando el sobre cae, se acomodan en pila */
.sp-escena.abierto .sp-carta { translate: 0 -46%; transition: translate .62s cubic-bezier(.25, .9, .3, 1.05); transition-delay: calc((2 - var(--i)) * 70ms); }
.sp-escena.abierto.salen .sp-carta { translate: calc(var(--o) * 5px) calc(var(--o) * -7px); rotate: calc(var(--o) * 2.5deg); scale: 1;
  transition: transform .5s cubic-bezier(.3, .75, .3, 1), translate .55s cubic-bezier(.2, 1.15, .4, 1), rotate .5s, scale .55s cubic-bezier(.2, 1.15, .4, 1), opacity .3s; }
.sp-carta.arrastra { transition: translate .5s, rotate .5s, scale .5s; cursor: grabbing; }
.sp-carta.ida { transition: transform .5s cubic-bezier(.4, .1, .8, .6), opacity .35s .15s; opacity: 0; pointer-events: none; }
.sp-gira { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .62s cubic-bezier(.3, 1.35, .5, 1); }
.sp-carta.n-bronce .sp-gira { transition-duration: .45s; }
.sp-carta.n-oro .sp-gira, .sp-carta.n-leyenda .sp-gira { transition-duration: .75s; }
.sp-carta.vuelta .sp-gira { transform: rotateY(180deg); }
.sp-cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sp-frente { transform: rotateY(180deg); }
.sp-frente .carta { width: 100%; pointer-events: auto; }
.sp-atras { border-radius: 22px 22px 46% 46% / 22px 22px 14% 14%; border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 14px 26px rgba(0, 0, 0, .45); }
.sp-atras .dmn-marco { border-radius: 15px 15px 44% 44% / 15px 15px 13% 13%; }
.sp-atras .dmn-logo { width: 50%; }
/* las de oro y diamante se hacen esperar: tiemblan y se iluminan por las orillas */
.sp-carta.n-oro { --brillo: #ffd65a; --a: 3px; } .sp-carta.n-leyenda { --brillo: #9fe8ff; --a: 5px; } .sp-carta.n-plata { --brillo: #e8eef7; }
.sp-carta::before { content: ""; position: absolute; inset: -16%; z-index: -1; border-radius: 40%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, var(--brillo, transparent) 40%, transparent); transition: opacity .3s; }
.sp-carta.carga::before { opacity: 1; transition: opacity 1s ease-in; }
.sp-carta.carga .sp-gira { animation: fx-temblor .066s linear infinite; }
.sp-carta.carga .sp-atras { box-shadow: 0 0 0 2px #fff, 0 0 30px 8px var(--brillo), 0 14px 26px rgba(0, 0, 0, .45); transition: box-shadow .9s ease-in; }
.sp-carta.vuelta.n-oro::before, .sp-carta.vuelta.n-leyenda::before { opacity: .85; }
.sp-carta.vuelta.n-plata::before { opacity: .45; }
.sp-carta.vuelta.n-leyenda::after { content: ""; position: absolute; inset: -70%; z-index: -2; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .5) 0 5deg, transparent 5deg 15deg, rgba(150, 210, 255, .55) 15deg 19deg, transparent 19deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 60%); mask-image: radial-gradient(circle, #000 12%, transparent 60%);
  animation: fx-aparece .4s .2s backwards, fx-girar 14s linear infinite; }
.sp-carta.vuelta .sp-gira { animation: sp-salta .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes sp-salta { 40% { scale: 1.07; } }
.sp-carta.fx-flash .sp-frente::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: 22px 22px 46% 46% / 22px 22px 14% 14%; background: #fff; pointer-events: none;
  animation: fx-flash .55s ease-out forwards; }
.sp-frente .nueva, .sp-frente .repetida, .sp-mini .nueva, .sp-mini .repetida { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); z-index: 7; white-space: nowrap;
  font-size: 12px; font-weight: 900; padding: 4px 12px; border-radius: 99px; }
.sp-frente .nueva, .sp-mini .nueva { background: #e1211c; color: #fff; box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(0, 0, 0, .3); }
.sp-frente .repetida, .sp-mini .repetida { background: #fff; color: #06205c; }
.sp-carta:not(.vuelta) .nueva, .sp-carta:not(.vuelta) .repetida { opacity: 0; }
.sp-carta.vuelta .nueva { animation: fx-sello .5s .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.sp-carta.vuelta .repetida { animation: fx-aparece .3s .4s both; }
/* abajo: instruccion y boton de respaldo */
.sp-pie { position: relative; z-index: 3; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding-top: 8px; }
.sp-pista { margin: 0; color: #fff; font-weight: 900; font-size: 15px; text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.sp-pista.entra { animation: fx-aparece .35s backwards; }
.sp-abrir:not([hidden]) { min-width: 170px; animation: fx-sobre-entra .45s cubic-bezier(.2, 1.3, .4, 1) backwards; }
/* resumen: todas las cartas juntas */
.sp-resumen { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 16px; color: #fff; text-align: center; }
.sp-resumen h2 { margin: 0; color: #fff; font-size: 28px; text-shadow: 0 3px 0 #a8140f, 0 6px 14px rgba(0, 0, 0, .4); animation: fx-sobre-entra .5s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.sp-resumen p { margin: 0 0 14px; color: rgba(255, 255, 255, .85); font-weight: 700; font-size: 14px; }
.sp-rejilla { display: flex; justify-content: center; gap: 10px; margin-bottom: 44px; }
/* la carta chica del album a su tamano de diseno (128 px) y reducida entera con scale: nada se reacomoda ni se corta */
.sp-mini { --k: .86; position: relative; width: calc(128px * var(--k)); height: calc(179.2px * var(--k)); animation: sp-mini .5s calc(var(--i) * 110ms + 150ms) cubic-bezier(.2, 1.3, .4, 1) backwards; }
.sp-escala { position: absolute; left: 0; top: 0; width: 128px; transform: scale(var(--k)); transform-origin: 0 0; }
.sp-escala .carta.chica { width: 128px; } .sp-escala .carta-pie { visibility: hidden; }
@media (max-width: 380px) { .sp-mini { --k: .78; } }
.sp-mini .nueva, .sp-mini .repetida { font-size: 10px; padding: 3px 8px; top: calc(100% + 8px); bottom: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sp-mini.n-oro, .sp-mini.n-leyenda { filter: drop-shadow(0 0 12px rgba(255, 214, 90, .55)); } .sp-mini.n-leyenda { filter: drop-shadow(0 0 14px rgba(159, 232, 255, .7)); }
@keyframes sp-mini { from { opacity: 0; translate: 0 60px; scale: .6; rotate: calc((var(--i) - 1) * 10deg); } }
.sp-resumen .b3 { min-width: 210px; }
@media (prefers-reduced-motion: reduce) {
  .velo-sobre.sp5::before, .sp5 #sobre, .sp-carta, .sp-carta *, .sp-carta::after, .sp-mini, .sp-resumen h2 { animation: none !important; }
  .sp-carta, .sp-gira { transition-duration: .01s !important; }
}

/* hojas: sin barra de desplazamiento lateral (lo ancho no debe salirse) ni barras visibles; la asita es zona para jalar */
.hoja { overflow-x: hidden !important; overscroll-behavior: contain; scrollbar-width: none; }
.hoja::-webkit-scrollbar { display: none; }
.hoja .asa { position: relative; cursor: grab; width: 54px; height: 6px; }
.hoja .asa::before { content: ''; position: absolute; inset: -14px -60px; }   /* area de toque mas grande que la rayita */
.velo > .hoja { max-width: 100%; }
/* ===== usabilidad (auditoria oct-2026): siempre hay por donde salir y el boton principal siempre esta a la mano ===== */
/* la X de cada hoja (la que trae su encabezado o la que le pone core.js) se queda arriba al bajar */
.velo > .hoja > .hoja-cab { position: sticky; top: -10px; z-index: 6; margin-left: -18px; margin-right: -18px; padding: 8px 18px 8px; background: inherit; }
.velo .hoja-cab .hud-btn, .x-hoja { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.x-hoja-fila { position: sticky; top: 0; z-index: 7; height: 0; display: flex; justify-content: flex-end; pointer-events: none; }
.x-hoja-fila .x-hoja { pointer-events: auto; margin: 0 -6px 0 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.hoja.con-x > h2:first-of-type, .hoja.con-x > .hoja-cab-x { padding-right: 46px; }
/* la fila de botones del final de la hoja no se va hasta abajo del scroll: se queda pegada al pie */
.velo > .hoja > .fila-acciones:last-child { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); z-index: 5; background: inherit;
  margin: 12px -18px calc(-22px - env(safe-area-inset-bottom)); padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 14px -12px rgba(0, 0, 0, .25); }
.velo > .hoja > .fila-acciones:last-child > .b3 { flex: 1 1 auto; min-height: 48px; }
.velo > .hoja > #h-ok:last-child { position: sticky; bottom: 0; z-index: 5; }   /* "Cobrar monedas" de Reportar visita */
/* carta grande: los rayos de luz de oro/leyenda se recortan a lo ancho de la hoja (ya no la hacen mas ancha que la pantalla) */
.carta-grande { overflow-x: clip; }
.fila-st .abrev { font-weight: 700; font-size: 11px; color: #5a6688; white-space: nowrap; }
/* tutorial: una X para salirse en cualquier paso */
.guia-x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #eef2fb; color: #06205c; display: grid; place-items: center; cursor: pointer; }
.guia-x .ic { width: 18px; height: 18px; }
.guia-globo .guia-titulo { padding-right: 40px; }
/* botones chicos que se tocan con el dedo: minimo comodo */
.precio-btn { height: 40px; padding: 0 16px; font-size: 15px; }
.enlace { min-height: 40px; }
.rk-info { width: 40px; height: 40px; }
.cs-corazon { min-height: 34px; }
.titulo-chip { min-height: 32px; }
.hoja-presumir .b-texto { padding: 12px 16px; }
/* el globo de lo que piensa la mascota y la pista de gestos ya no se meten debajo de la lupa ni se salen del cuarto */
.globo-animo { white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 132px); }
.pista-gesto { white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 24px); }
/* Equipo: las 5 pestañas caben a lo ancho (antes Muro quedaba escondida a la derecha y nadie la encontraba) */
#seg-eq { gap: 5px; overflow-x: visible; }
#seg-eq button { flex: 1 1 0; min-width: 0; padding: 0 4px; height: 42px; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* perfil: boton para regresar (se llega tocando tu nombre arriba y no habia por donde volver) */
.perfil-hero { position: relative; }
.perfil-atras { position: absolute; top: 10px; left: 10px; z-index: 3; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; background: #fff; border: 2px solid var(--linea); color: var(--tx-4); }
.perfil-atras .ic { width: 22px; height: 22px; }
.b-liga { display: block; width: 100%; margin: -4px 0 12px; padding: 10px; border-radius: 14px; background: #e8edf7; color: #06205c; font-weight: 900; font-size: 13.5px; }
.b-liga[hidden] { display: none; }
.otp { display: flex; gap: 8px; margin: -4px 0 12px; } .otp[hidden] { display: none; } .otp .input { flex: 1; letter-spacing: 4px; font-size: 18px; text-align: center; }
.login .b-liga { margin: 12px 0 0; background: transparent; border: 2px solid #c9d4ec; }

/* ==========================================================================
   PANEL DEL ADMINISTRADOR, primero el telefono (oct-2026): barra de secciones pegada arriba, tablas que en lo angosto
   se vuelven tarjetas, KPI de 2 en 2, formularios a todo lo ancho con botones de 44 px y el boton de guardar a la mano.
   Todo va bajo .adm (la vista) o bajo clases propias del panel, para no tocar el juego de los asesores.
   ========================================================================== */
.adm { --adm-sombra: 0 1px 2px rgba(6, 32, 92, .05), 0 8px 24px rgba(6, 32, 92, .08); }
.adm .cab-vista { margin: 0 0 12px; }
.adm .cab-vista h1 { font-size: clamp(24px, 6.6vw, 32px); }
.adm .cab-vista p { font-size: 13.5px; }
.adm .seccion { margin-top: 16px; }
.adm .panel { background: #fff; box-shadow: var(--adm-sombra) !important; border-radius: 20px !important; }
.adm .panel.p-amarillo { background: var(--oro-c) !important; }
.adm h3 { color: var(--mn-azul); }
.adm .input, .hoja-adm .input, #f-premio .input { font-size: 16px; }   /* 16 px: el iPhone no hace zoom al escribir */
.adm .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ayuda { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--tx-3); text-transform: none; letter-spacing: 0; }
.input.mal { border-color: var(--mn-rojo) !important; }

/* ver como asesor */
.adm .ver-como { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px 16px; padding: 12px 14px 12px 16px; margin-bottom: 4px; border-radius: 20px; background: var(--mn-azul-c); }
.adm .ver-como small { flex-basis: auto; }
.adm .vc-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.adm .vc-txt b { color: var(--mn-azul); font-size: 15px; }
.adm .vc-txt small { font-size: 12.5px; line-height: 1.35; }
.adm .vc-acc { flex: none; display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; justify-content: flex-end; }
.adm .vc-acc .enlace { font-size: 13px; color: var(--mn-azul-2); }

/* barra de secciones: fichas que se deslizan de lado y se quedan pegadas debajo del encabezado */
.chips-adm { position: sticky; top: calc(var(--hud-h) + env(safe-area-inset-top)); z-index: 30; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 -16px 6px; padding: 10px 16px 12px; background: rgba(244, 246, 251, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  scrollbar-width: none; scroll-padding: 0 16px; }
.chips-adm::-webkit-scrollbar { display: none; }
.chips-adm button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px 0 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--mn-azul); font: 800 14px var(--texto); box-shadow: var(--adm-sombra); transition: background .15s, color .15s, transform .12s; }
.chips-adm button .ic { width: 18px; height: 18px; color: var(--mn-azul-2); }
.chips-adm button.activo { background: var(--mn-azul); color: #fff; box-shadow: 0 4px 14px rgba(6, 32, 92, .3); }
.chips-adm button.activo .ic { color: var(--oro); }
.chips-adm button:active { transform: scale(.96); }
#adm { min-height: 50vh; }

/* sincronizacion y KPI */
.adm .sync-adm { background: linear-gradient(135deg, var(--mn-azul-2), var(--mn-azul) 60%, var(--mn-azul-s)) !important; color: #fff; }
.sync-adm .sa-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sync-adm .sa-txt { flex: 1 1 220px; min-width: 0; }
.sync-adm .sa-txt b { display: block; font-size: 19px; color: #fff; }
.sync-adm .sa-txt small { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .8); font-weight: 700; }
.sync-adm .error-msg { color: #ffd2d0; }
.sync-adm .sa-acc { display: flex; gap: 8px; }
.sync-adm .aviso { margin: 12px 0 0; }
.punto-vivo { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--oro); vertical-align: 1px; animation: pv-latido 1s ease-in-out infinite; }
@keyframes pv-latido { 50% { opacity: .3; transform: scale(.7); } }
.adm .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.adm .kpis:first-child { margin-top: 0; }
.adm .kpi { padding: 13px 14px; min-width: 0; }
.adm .kpi small { font-size: 10.5px; letter-spacing: .3px; line-height: 1.3; }
.adm .kpi b { display: block; margin: 4px 0 2px; font-family: var(--titulo); font-weight: 900; font-size: 28px; line-height: 1.05; color: var(--mn-azul); text-shadow: none; overflow-wrap: anywhere; }
.adm .kpi b + small { text-transform: none; font-weight: 700; letter-spacing: 0; font-size: 12px; }
.adm .kpi.k-alerta b { color: var(--mn-rojo); }

/* claves por correo (se abre y se cierra) */
.adm .correo-adm { margin: 12px 0 0; padding: 0 !important; }
.correo-adm > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 16px; cursor: pointer; }
.correo-adm > summary::-webkit-details-marker { display: none; }
.correo-adm[open] { padding-bottom: 16px !important; }
.correo-adm[open] > summary { border-bottom: 1px solid var(--linea); margin-bottom: 12px; }
.correo-adm > :not(summary) { margin-left: 16px; margin-right: 16px; }
.ca-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--mn-azul-c); color: var(--mn-azul-2); }
.ca-ic .ic { width: 20px; height: 20px; }
.ca-tit { flex: 1; min-width: 0; }
.ca-tit b { display: block; color: var(--mn-azul); font-size: 15px; }
.ca-tit small { display: block; color: var(--tx-3); font-size: 12.5px; font-weight: 700; }
.ca-fl { flex: none; width: 18px; height: 18px; color: var(--tx-4); transform: rotate(90deg); transition: transform .2s; }
.correo-adm[open] .ca-fl { transform: rotate(-90deg); }
.ca-desde { margin: 0 16px 10px; font-size: 13px; overflow-wrap: anywhere; }
.ca-auto { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: var(--fondo-2); cursor: pointer; }
.ca-auto > span { flex: 1; min-width: 0; }
.ca-auto b { display: block; color: var(--tx); font-size: 14.5px; }
.ca-auto small { display: block; margin-top: 2px; color: var(--tx-3); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.ca-prueba { display: flex; gap: 8px; margin-top: 10px; }
.ca-prueba .input { flex: 1; min-width: 0; height: 46px; }
.ca-prueba .b3 { flex: none; }
.ca-mas { margin-top: 10px; font-size: 13.5px; }
.ca-mas > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--mn-azul-2); font-weight: 800; }
.t-envios td { vertical-align: top; }
.t-envios .te-mail { color: var(--tx-3); overflow-wrap: anywhere; }
/* interruptor de casilla (checkbox con forma de switch) */
.sw-adm { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 52px; height: 32px; margin: 0; border-radius: 99px; background: var(--linea-2); cursor: pointer; transition: background .2s; }
.sw-adm::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .2s var(--rebote); }
.sw-adm:checked { background: var(--mn-azul-2); }
.sw-adm:checked::after { transform: translateX(20px); }
.sw-adm:disabled { opacity: .45; cursor: not-allowed; }
.sw-adm:focus-visible { outline: 3px solid var(--azul-b); outline-offset: 2px; }

/* barra de buscar y filtrar */
.barra-adm { display: grid; gap: 10px; margin: 0 0 12px; }
.ba-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm .barra-adm select.input { width: auto; flex: none; height: 46px; padding: 0 36px 0 14px; background-color: #fff; }
.adm .buscar-adm { flex: 1 1 200px; min-width: 0; height: 46px; padding-left: 42px; background: #fff no-repeat 14px center / 18px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c7699' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.adm .panel .buscar-adm { width: 100%; margin-bottom: 10px; background-color: var(--fondo-2); }
.filtros-adm { display: flex; gap: 6px; flex-wrap: wrap; }
.adm .chip-filtro { min-height: 40px; padding: 0 14px; font-size: 13px; background: #fff; border-color: var(--linea-2); color: var(--mn-azul); }
.adm .chip-filtro.activo { background: var(--mn-azul); border-color: var(--mn-azul); color: #fff; }
.ba-cuenta { margin-left: auto; font-size: 12.5px; font-weight: 700; }
.chip-ok, .chip-no { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.chip-ok { background: var(--menta-c); color: #0b7a5a; }
.chip-no { background: var(--rojo-c); color: var(--mn-rojo-s); }
.sin-res { margin: 8px 0 0; }

/* tablas (en lo ancho) */
.adm .tabla-wrap { border: 0 !important; background: #fff !important; border-radius: 18px; box-shadow: var(--adm-sombra); }
.adm .tabla td { vertical-align: middle; }
.adm .tabla th { position: static; }
.adm .tabla .b3.chico { height: 38px; padding: 0 12px; font-size: 12.5px; border-radius: 12px; gap: 5px; }
.adm .tabla .b3.chico .ic { width: 16px; height: 16px; }
.adm .tabla .fila-acciones { gap: 6px; flex-wrap: nowrap; }
.adm .tabla .ta-act small { display: none; }
.adm .tabla .tp-nom small, .adm .tabla .tk-lim small { display: block; }
.adm .tabla tr.apagado td:not(.tp-acc), .adm .tabla tr.oculto td:not(.tk-acc):not(.tk-ocu) { opacity: .6; }
.adm .tk-pre .input { width: 110px; height: 40px; }
.adm .tk-lim .input { width: 170px; height: 40px; }
.adm .chip-aj { height: 22px; font-size: 11px; }
.lbl-check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 800; cursor: pointer; }
.lbl-check input { width: 22px; height: 22px; accent-color: var(--mn-azul-2); }
.adm .grupo-tit { margin: 0 0 8px; font-size: 17px; }
.adm .grupo-tit small { font-size: 12px; font-weight: 800; }
.tabla-x { overflow-x: auto; }
.adm .fila-click:hover td { background: #f6f8fe; }
.tc-fl { display: none; }
@media (hover: hover) and (min-width: 761px) { .adm .tabla tbody tr:hover td { background: #f8faff; } }

/* tablas que en el telefono se vuelven tarjetas */
@media screen and (max-width: 760px) {
  .t-cartas { overflow: visible !important; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
  .t-cartas > table, .t-cartas > table > tbody { display: block; width: 100%; }
  .t-cartas > table > thead { display: none; }
  .t-cartas > table > tbody > tr { display: grid; gap: 4px 10px; margin-bottom: 10px; padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: var(--adm-sombra, var(--sombra-suave)); }
  .t-cartas > table > tbody > tr > td { display: block; min-width: 0; padding: 0 !important; border: 0 !important; background: none !important; white-space: normal; text-align: left; color: var(--tx-2); }
  .t-cartas td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 1px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--tx-3); }
  .t-cartas .b3.chico { width: 100%; height: 44px !important; padding: 0 8px !important; font-size: 13px !important; }
  .t-cartas .fila-acciones { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px !important; }
  .stat-adm, .t-ases .ta-docs, .t-ases .ta-mon, .t-ases .ta-pin, .t-prem .tp-costo, .t-prem .tp-stock, .t-prem .tp-canj { padding: 7px 10px !important; margin-top: 6px; border-radius: 12px; background: var(--fondo-2) !important; font-weight: 800; color: var(--tx) !important; }

  /* asesores */
  .t-ases > tbody > tr { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; grid-template-areas: "nom nom nom act" "cod tie tie act" "docs mon pin pin" "acc acc acc acc"; }
  .t-ases .ta-nom { grid-area: nom; font-size: 15px; line-height: 1.25; color: var(--mn-azul) !important; }
  .t-ases .ta-cod { grid-area: cod; font-size: 12.5px; color: var(--tx-3) !important; }
  .t-ases .ta-cod::before { content: "Código "; font-family: var(--texto); }
  .t-ases .ta-tie { grid-area: tie; font-size: 12.5px; color: var(--tx-3) !important; }
  .t-ases .ta-act { grid-area: act; display: flex !important; flex-direction: column; align-items: center; gap: 3px; justify-self: end; }
  .t-ases .ta-act small { display: block !important; font-size: 10.5px; font-weight: 800; color: var(--tx-3); text-transform: uppercase; }
  .t-ases .ta-docs { grid-area: docs; } .t-ases .ta-mon { grid-area: mon; } .t-ases .ta-pin { grid-area: pin; }
  .t-ases .ta-acc { grid-area: acc; margin-top: 8px; }
  .t-ases .ta-acc .fila-acciones { grid-template-columns: 1fr 1.35fr 1fr; grid-auto-flow: row; }
  /* premios */
  .t-prem > tbody > tr { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "nom nom est" "costo stock canj" "acc acc acc"; }
  .t-prem .tp-nom { grid-area: nom; font-size: 15px; color: var(--mn-azul) !important; }
  .t-prem .tp-nom small { display: block; margin-top: 2px; font-size: 12.5px; }
  .t-prem .tp-est { grid-area: est; justify-self: end; }
  .t-prem .tp-costo { grid-area: costo; } .t-prem .tp-stock { grid-area: stock; } .t-prem .tp-canj { grid-area: canj; }
  .t-prem .tp-acc { grid-area: acc; margin-top: 8px; }
  .t-prem tr.apagado { background: #fbfcfe; }
  /* tienda */
  .t-cat > tbody > tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; grid-template-areas: "nom rar" "req req" "pre lim" "nota nota" "ocu due" "acc acc"; }
  .t-cat .tk-nom { grid-area: nom; font-size: 15px; color: var(--mn-azul) !important; }
  .t-cat .tk-rar { grid-area: rar; justify-self: end; }
  .t-cat .tk-req { grid-area: req; font-size: 13px; }
  .t-cat .tk-pre { grid-area: pre; } .t-cat .tk-lim { grid-area: lim; }
  .t-cat .tk-pre .input, .t-cat .tk-lim .input { width: 100%; height: 46px; padding: 0 12px; }
  .t-cat .tk-lim small { display: block; margin-top: 2px; font-size: 11.5px; }
  .t-cat .tk-nota { grid-area: nota; }
  .t-cat .tk-ocu { grid-area: ocu; align-self: center; }
  .t-cat .tk-due { grid-area: due; text-align: right !important; font-weight: 800; }
  .t-cat .tk-acc { grid-area: acc; }
  .t-cat .tk-acc:empty, .t-cat .tk-ocu:empty { display: none; }
  .t-cat tr.oculto { background: repeating-linear-gradient(-45deg, #fff 0 12px, #f6f7fb 12px 24px); }
  /* canjes */
  .t-canj > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pr es" "as mo" "ti mo" "fe fe" "acc acc"; }
  .t-canj .tc-pr { grid-area: pr; font-size: 15px; color: var(--mn-azul) !important; }
  .t-canj .tc-es { grid-area: es; justify-self: end; }
  .t-canj .tc-as { grid-area: as; font-weight: 800; }
  .t-canj .tc-ti { grid-area: ti; font-size: 12.5px; color: var(--tx-3) !important; }
  .t-canj .tc-mo { grid-area: mo; text-align: right !important; font-size: 18px; color: var(--oro-t) !important; align-self: center; }
  .t-canj .tc-fe { grid-area: fe; font-size: 12px; color: var(--tx-3) !important; }
  .t-canj .tc-acc { grid-area: acc; margin-top: 6px; }
  .t-canj .tc-acc:empty { display: none; }
  /* PIN nuevos (hoja) */
  .t-pines > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom pin" "cod pin" "tie pin"; padding: 10px 14px; box-shadow: none; border: 2px solid var(--linea); }
  .t-pines .tp-nom { grid-area: nom; color: var(--mn-azul) !important; }
  .t-pines .tp-cod { grid-area: cod; font-size: 12.5px; }
  .t-pines .tp-cod::before { content: "Código "; }
  .t-pines .tp-tie { grid-area: tie; font-size: 12.5px; color: var(--tx-3) !important; }
  .t-pines .tp-pin { grid-area: pin; align-self: center; font-size: 24px; letter-spacing: 3px; color: var(--mn-azul) !important; }

  /* comportamiento: cada asesor */
  .t-cada, .t-cada tbody { display: block; }
  .t-cada thead { display: none; }
  .t-cada tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; margin-bottom: 8px; padding: 12px; border-radius: 16px; background: var(--fondo-2); }
  .t-cada tr[hidden] { display: none; }
  .t-cada td { padding: 0 !important; border: 0 !important; text-align: left !important; min-width: 0; }
  .t-cada td[data-l]::before { content: attr(data-l); display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--tx-3); }
  .t-cada .tc-nom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; color: var(--mn-azul); font-size: 15px; }
  .t-cada .tc-fl { display: block; width: 18px; height: 18px; color: var(--tx-4); }
  .t-cada .tc-ult { grid-column: 1 / -1; font-size: 12.5px; }
  .t-cada .tc-ult::before { display: inline !important; margin-right: 6px; }
  .t-envios, .t-envios tbody { display: block; }
  .t-envios tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom est" "mail mail" "fe fe"; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
  .t-envios td { padding: 0 !important; border: 0 !important; }
  .t-envios .te-nom { grid-area: nom; } .t-envios .te-est { grid-area: est; } .t-envios .te-mail { grid-area: mail; font-size: 12.5px; } .t-envios .te-fe { grid-area: fe; font-size: 12px; color: var(--tx-3); }

  /* lo que en lo ancho va en fila, en el telefono va a todo lo ancho */
  .ancho-movil { width: 100%; }
  .adm .ver-como { flex-direction: column; align-items: stretch; }
  .adm .vc-acc { justify-content: space-between; }
  .adm .vc-acc .b3 { flex: 1; }
  .sync-adm .sa-acc { width: 100%; }
  .sync-adm .sa-acc .b3:first-child { flex: 1; }
  .adm .barra-adm select.input { flex: 1 1 140px; }
  .adm .tiles-comp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm .tiles-comp .tile:first-child { grid-column: 1 / -1; }
}
@media (min-width: 761px) {
  .adm .kpis { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
  .barra-adm { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
  .barra-adm .ba-fila:first-child { flex-wrap: nowrap; }
  .adm .buscar-adm { max-width: 420px; }
}

/* reglas */
.adm .ayuda-reglas { margin: 12px 4px; font-size: 13px; }
.adm .form-reglas { grid-template-columns: 1fr; gap: 12px; }
.adm .form-reglas h3 { align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.25; color: var(--mn-azul); }
.adm .form-reglas .interruptor, .adm #f-reglas .interruptor { width: 52px; height: 32px; margin-top: -3px; cursor: pointer; }
.adm .form-reglas .interruptor::after { width: 24px; height: 24px; top: 4px; left: 4px; }
.adm .form-reglas .interruptor.on::after { transform: translateX(20px); }
.adm #f-reglas .campo label { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 800; color: var(--tx-2); line-height: 1.3; }
.adm #f-reglas .input { height: 46px; border-radius: 12px; }
.adm #f-reglas textarea.input { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.4; }
.adm #f-reglas .p-noche { background: #fff !important; }
.adm #f-reglas .p-noche h3 { font-family: var(--titulo); }
@media (min-width: 761px) { .adm .form-reglas { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; } }
.guardar-adm { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding: 10px 10px 10px 16px; border-radius: 18px; background: rgba(255, 255, 255, .97); box-shadow: 0 8px 30px rgba(6, 32, 92, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.guardar-adm .ga-txt { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--tx-3); line-height: 1.3; }
.guardar-adm .b3 { flex: none; }
.guardar-adm.cambios { box-shadow: 0 0 0 2px var(--mn-rojo), 0 8px 30px rgba(225, 33, 28, .22); }
.guardar-adm.cambios .ga-txt { color: var(--mn-rojo); }
@media (max-width: 560px) {
  .guardar-adm { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .guardar-adm .ga-txt { text-align: center; font-size: 12px; }
  .guardar-adm .b3 { width: 100%; }
}

/* canjes, comportamiento, impacto */
.adm .seg-canjes { max-width: 560px; overflow-x: auto; scrollbar-width: none; }
.adm .seg-canjes button { flex: 1 0 auto; height: 44px; padding: 0 12px; font-size: 13.5px; white-space: nowrap; }
.adm .tiles-comp .tile { background: #fff; border: 0; box-shadow: var(--adm-sombra); border-radius: 18px; }
.adm .tiles-comp .tile b { color: var(--mn-azul); }
.adm #b-volver-comp { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 8px; border-radius: 999px; background: #fff; box-shadow: var(--adm-sombra); color: var(--mn-azul); }
.adm .tabla-comp th { white-space: nowrap; }
.adm .tabla-comp td { color: var(--tx-2); }
.adm .grafica { overflow-x: auto; scrollbar-width: thin; }
.adm .kpi.panel { box-shadow: var(--adm-sombra) !important; }

/* hojas del panel (confirmar, pedir datos, premio) */
.hoja-adm .ha-texto { margin: -4px 0 16px; color: var(--tx-2); font-size: 15px; line-height: 1.45; }
.hoja-adm textarea.input, #f-premio textarea.input { height: auto; min-height: 92px; padding: 12px 16px; line-height: 1.4; }
.hoja-adm .error-msg { margin: 2px 0 0; font-size: 12.5px; }
.hoja-adm .campo label, #f-premio .campo label { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--tx-2); }
.hoja-adm .b3.rojo { --c: var(--mn-rojo); --cs: var(--mn-rojo-s); }
.dos-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#f-premio .ca-auto { margin-top: 2px; }
/* ajustes tras revisar en 360 px */
body:has(.vista.adm) .hud-yo .info { max-width: none; }
body:has(.vista.adm) .hud-yo .nombre, body:has(.vista.adm) .hud-yo small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.adm .interruptor.on { background: var(--mn-azul-2); }
.adm .b3.oro { --c: var(--mn-rojo); --cs: var(--mn-rojo-s); }
.chip-gris { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 900; white-space: nowrap; background: var(--fondo-2); color: var(--tx-3); }
.adm .t-cat tr.cambio [data-guardar] { --c: var(--mn-rojo); --cs: var(--mn-rojo-s); }
@media screen and (max-width: 760px) {
  .t-cartas > table > tbody > tr > td { text-align: left !important; }
  .t-cartas td[data-l]::before { letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t-cartas .b3.chico { letter-spacing: 0; gap: 4px; white-space: nowrap; }
  .t-cartas .b3.chico .ic { width: 15px; height: 15px; }
  .t-ases .ta-docs, .t-ases .ta-mon, .t-ases .ta-pin { padding: 6px 8px !important; }
  .t-ases .ta-cod, .t-ases .ta-tie { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
  .t-ases .ta-cod::before { content: "#"; }
  .t-ases .ta-tie::before { content: "· "; }
  .t-ases > tbody > tr { grid-template-areas: "nom nom nom act" "cod tie tie act" "docs mon pin pin" "acc acc acc acc"; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; }
  .t-ases .ta-docs { min-width: 76px; }
  .t-cat > tbody > tr:not(.cambio) [data-guardar] { display: none; }
  .t-cat > tbody > tr:not(.cambio) .tk-acc .fila-acciones:not(:has([data-restaurar])) { display: none; }
  .t-cat > tbody > tr.cambio { box-shadow: 0 0 0 2px var(--mn-rojo), var(--adm-sombra); }
  .adm .ver-como { gap: 10px; padding: 12px; }
  .adm .vc-txt small { display: none; }
  .adm .vc-acc { flex-wrap: nowrap; }
  .adm .vc-acc .enlace { flex: none; padding: 0 4px; }
  .adm .seg-canjes button { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 13px; }
}
@media screen and (max-width: 760px) {
  .adm .ver-como { padding: 10px; }
  .adm .vc-txt { display: none; }
  .adm .vc-acc .b3 { flex: 1 0 auto; white-space: nowrap; }
  .adm .vc-acc .enlace { flex: 0 1 auto; white-space: normal; text-align: center; line-height: 1.2; font-size: 12px; }
}
@media screen and (max-width: 760px) {
  .ca-prueba { flex-wrap: wrap; }
  .ca-prueba .input { flex: 1 1 100%; }
  .ca-prueba .b3 { flex: 1 1 100%; }
}
body:has(.vista.adm .guardar-adm) #toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
@media screen and (max-width: 760px) { .adm .barra-adm .buscar-adm { flex: 1 1 100%; order: -1; } }
.perfil-3d .perfil-foto { width: 100%; height: 100%; object-fit: contain; cursor: grab; }
.l-esperando { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff4d6; color: #8a5a00; font-size: 13px; font-weight: 800; text-align: center; }
.l-esperando[hidden] { display: none; }

/* jefe: su debilidad y como vencerlo, a la vista */
.jefe-guia { display: grid; gap: 8px; margin: 10px 0 6px; text-align: left; }
.jg-debil { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: #fff4d6; color: #5a3b00; }
.jg-debil > .ic { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 10px; background: #ffc21a; color: #fff; }
.jg-debil small, .jg-como small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.jg-debil b { display: block; font-size: 15px; } .jg-debil span { font-size: 13px; }
.jg-como { padding: 10px 12px; border-radius: 16px; background: #eef2fa; color: #1c2740; }
.jg-como ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.jg-como li { display: flex; gap: 6px; align-items: flex-start; } .jg-como li .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; color: #0ca678; }

/* >>> carta icono */
/* ==========================================================================
   CARTA ICONO ("ÍCONO MN", nivel 'icono'): la mas alta del juego, arriba de Diamante. Negro-azul profundo,
   lamina holografica arcoiris + oro que se mueve sola (y con el angulo), marco de oro con una luz que le da la vuelta,
   corona, marca de agua MN, foto con halo dorado, destellos. Todo medido en cqw: se ve igual en el album, la ficha y el sobre.
   ========================================================================== */
@property --ic-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.carta.icono, .carta.icono-oculta { container-type: inline-size; }
.carta.icono { --tx-c: #fff; --fx-glare: .75; --fx-tinte: #ffd65a; --acento: #ffd65a;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)) drop-shadow(0 0 10px rgba(255, 200, 80, .4)); }
.carta.icono .carta-in { border: none; background: #050b1f; box-shadow: none; color: #fff; }
.carta.icono .carta-in::before, .carta.icono .carta-in::after { display: none; }
.carta.icono .carta-in > i[class^="ic-"] { position: absolute; pointer-events: none; }
/* fondo: azul noche a negro, rayos de oro que giran despacio y el monograma MN dorado en diagonal */
.carta.icono .ic-fondo { inset: 0; z-index: 0; overflow: hidden; border-radius: inherit;
  background:
    radial-gradient(62% 40% at 50% 40%, rgba(60, 96, 210, .62), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ctext x='18' y='22' font-family='Arial Black,Arial,sans-serif' font-weight='900' font-style='italic' font-size='11' text-anchor='middle' fill='%23ffd65a' fill-opacity='.075' transform='rotate(-30 18 18)'%3EMN%3C/text%3E%3C/svg%3E") 0 0 / 15cqw 15cqw,
    linear-gradient(172deg, #0c1d4f 0%, #071232 45%, #02040d 100%); }
.carta.icono .ic-fondo::before { content: ""; position: absolute; left: 50%; top: 40%; width: 180%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 90, .13) 0 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 58%); mask-image: radial-gradient(circle, #000 8%, transparent 58%);
  animation: fx-girar 36s linear infinite; }
/* marca de agua: MN grande en trazo de oro detras de la foto */
.carta.icono .ic-marca { left: 4%; right: 4%; top: 17%; aspect-ratio: 200 / 120; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Ctext x='100' y='100' font-family='Arial Black,Arial,sans-serif' font-weight='900' font-style='italic' font-size='118' text-anchor='middle' fill='%23ffd65a' fill-opacity='.07' stroke='%23ffd65a' stroke-width='2' stroke-opacity='.34'%3EMN%3C/text%3E%3C/svg%3E") center / contain no-repeat; }
.carta.icono .ic-halo { left: 50%; top: 40%; width: 86%; aspect-ratio: 1; translate: -50% -50%; z-index: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 160, .62) 0, rgba(255, 196, 70, .26) 34%, transparent 66%); animation: ic-late 3.2s ease-in-out infinite; }
@keyframes ic-late { 0%, 100% { opacity: .75; scale: .94; } 50% { opacity: 1; scale: 1.04; } }
/* calificacion (oro) a la izquierda, corona al centro, edicion a la derecha */
.carta.icono .carta-media { top: 6.5%; left: 8.5%; right: auto; z-index: 9; }
.carta.icono .carta-media b { font-family: var(--texto); font-weight: 900; font-size: 19cqw; line-height: .9; color: #ffe27a;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe27a 38%, #e0a521 62%, #fff0b0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 .5cqw 0 #5a3a00) drop-shadow(0 0 2.5cqw rgba(255, 200, 80, .55)); }
.carta.icono .carta-media span { font-size: 5cqw; letter-spacing: .5cqw; margin-top: .8cqw; padding: .4cqw 2.4cqw; border-radius: 1.6cqw;
  background: linear-gradient(135deg, #fff4c2, #ffd65a 45%, #c48a14); color: #2a1700; box-shadow: 0 0 0 .4cqw rgba(255, 255, 255, .35); text-shadow: none; }
.carta.icono .ic-corona { left: 50%; top: 5.2%; width: 26cqw; aspect-ratio: 100 / 64; translate: -50% 0; z-index: 9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64'%3E%3Cpath d='M9 51 5 15l23 17L50 6l22 26 23-17-4 36z'/%3E%3Crect x='9' y='54' width='82' height='9' rx='3'/%3E%3Ccircle cx='5' cy='12' r='5'/%3E%3Ccircle cx='50' cy='6' r='6'/%3E%3Ccircle cx='95' cy='12' r='5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64'%3E%3Cpath d='M9 51 5 15l23 17L50 6l22 26 23-17-4 36z'/%3E%3Crect x='9' y='54' width='82' height='9' rx='3'/%3E%3Ccircle cx='5' cy='12' r='5'/%3E%3Ccircle cx='50' cy='6' r='6'/%3E%3Ccircle cx='95' cy='12' r='5'/%3E%3C/svg%3E") center / contain no-repeat;
  background: linear-gradient(110deg, #b07a12 0%, #ffd65a 30%, #fffbe6 45%, #ffd65a 60%, #b07a12 100%) 0 0 / 260% 100%; animation: ic-oro 3.6s linear infinite; }
.carta.icono .ic-corona::after { content: ""; }
@keyframes ic-oro { from { background-position: 100% 0; } to { background-position: -160% 0; } }
.carta.icono .carta-ed { top: 8%; right: 8.5%; left: auto; z-index: 9; font-size: 3.6cqw; text-align: right; color: #ffe9a8; opacity: .9; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
/* la foto: con halo de oro y fundida hacia abajo */
.carta.icono .carta-in > .carta-foto.foto-real { position: relative; z-index: 3; width: 66%; aspect-ratio: 4 / 5; height: auto; margin-top: 19%; margin-bottom: -13%; flex: none;
  object-fit: cover; object-position: top; border-radius: 0; background: none; mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 90%), linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 58%, transparent 90%), linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%); mask-composite: intersect;
  filter: drop-shadow(0 0 1.6cqw rgba(255, 220, 120, .95)) drop-shadow(0 0 5cqw rgba(255, 180, 50, .5)); box-shadow: none; }
.carta.icono.chica .carta-in > .carta-foto.foto-real { width: 66%; aspect-ratio: 4 / 5; margin-top: 19%; margin-bottom: -13%; border-radius: 0; box-shadow: none; }
.carta.icono .ic-sin-foto { position: relative; z-index: 3; width: 46%; aspect-ratio: 1; margin: 26% 0 3%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, #26408f, #071232); box-shadow: 0 0 0 .8cqw #ffd65a, 0 0 6cqw rgba(255, 200, 80, .6); }
.carta.icono .ic-sin-foto .ic-corona { position: static; translate: none; width: 60%; }
/* sello ICONO, nombre grande en oro y su area */
.carta.icono .ic-badge { position: relative; z-index: 9; flex: none; font: 900 4.6cqw/1 var(--texto); letter-spacing: .9cqw; text-transform: uppercase; color: #2a1700;
  padding: 1.1cqw 3.6cqw 1cqw; border-radius: 99px; white-space: nowrap;
  background: linear-gradient(100deg, #a9740f 0%, #ffd65a 25%, #fffbe6 50%, #ffd65a 75%, #a9740f 100%) 0 0 / 220% 100%; animation: ic-oro 4.2s linear infinite;
  box-shadow: 0 0 0 .4cqw rgba(255, 255, 255, .55), 0 0 4cqw rgba(255, 200, 80, .75), 0 1cqw 2cqw rgba(0, 0, 0, .5); }
.carta.icono .carta-nombre { z-index: 9; flex: none; overflow: visible; margin-top: 2cqw; padding: 0; border: none; max-width: 94%; font-family: var(--texto); font-weight: 900;
  font-size: 10cqw; line-height: 1.05; letter-spacing: 0; text-shadow: none;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe27a 45%, #e3a72a 70%, #fff0b0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 .5cqw 0 #3d2700) drop-shadow(0 0 2cqw rgba(255, 200, 80, .45)); }
.carta.icono .ic-puesto { position: relative; z-index: 9; flex: none; display: flex; align-items: center; gap: 2cqw; margin-top: .8cqw; color: #ffeec0;
  font: 900 3.9cqw/1.1 var(--texto); letter-spacing: .75cqw; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.carta.icono .ic-puesto::before, .carta.icono .ic-puesto::after { content: ""; width: 7cqw; height: .45cqw; border-radius: 1cqw; background: linear-gradient(90deg, transparent, #ffd65a); }
.carta.icono .ic-puesto::after { transform: scaleX(-1); }
/* atributos: los cuatro en fila, 99 en oro */
.carta.icono .carta-stats { z-index: 9; flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 2.6cqw; width: 78%; text-shadow: none;
  border-top: .3cqw solid rgba(255, 214, 90, .35); padding-top: 1.6cqw; }
.carta.icono .carta-stats .st { flex-direction: column; align-items: center; gap: .2cqw; }
.carta.icono .carta-stats .st + .st { border-left: .3cqw solid rgba(255, 214, 90, .25); }
.carta.icono .carta-stats .st b { min-width: 0; text-align: center; font-family: var(--texto); font-weight: 900; font-size: 7cqw; line-height: 1; color: #ffe27a;
  text-shadow: 0 .4cqw 0 #3d2700, 0 0 2cqw rgba(255, 200, 80, .5); }
.carta.icono .carta-stats .st span { font-size: 3.1cqw; font-weight: 900; letter-spacing: .3cqw; color: #ffeec0; opacity: .85; }
.carta.icono .carta-pie { z-index: 9; flex: none; margin-bottom: 7.5%; color: #ffd65a; opacity: .85; font-size: 3cqw; letter-spacing: .55cqw; text-shadow: 0 1px 2px #000; }
.carta.icono .rep-badge { z-index: 12; background: linear-gradient(135deg, #ffd65a, #c48a14); color: #2a1700; }
/* lamina holografica: arcoiris + oro que corre sola y se corre con el angulo; mas fuerte en las orillas que en la cara */
.carta.icono .ic-holo { inset: 0; z-index: 7; border-radius: inherit; mix-blend-mode: color-dodge; opacity: calc(.3 + var(--fk, 0) * .45);
  background:
    linear-gradient(115deg, transparent 34%, rgba(255, 90, 180, .45) 39%, rgba(255, 214, 90, .75) 43%, rgba(255, 246, 200, .8) 46%, rgba(90, 220, 255, .5) 50%,
      rgba(255, 214, 90, .7) 54%, rgba(190, 120, 255, .4) 58%, transparent 63%) calc(var(--fx, 0) * 30%) calc(var(--fy, 0) * 20%) / 260% 260%;
  -webkit-mask-image: radial-gradient(ellipse 40% 34% at 50% 40%, rgba(0, 0, 0, .06) 60%, #000 100%); mask-image: radial-gradient(ellipse 40% 34% at 50% 40%, rgba(0, 0, 0, .06) 60%, #000 100%);
  animation: ic-holo 7s linear infinite; }
@keyframes ic-holo { from { background-position: 130% 0; } to { background-position: -130% 0; } }
/* marco de oro (anillo con mascara) y una luz blanca que le da la vuelta */
.carta.icono .ic-marco { inset: 0; z-index: 8; border-radius: inherit; padding: 2.4cqw;
  background: conic-gradient(from var(--ic-ang), #8a5a06, #ffd65a, #fff8d6, #e0a521, #8a5a06, #ffd65a, #fffbe6, #c48a14, #8a5a06);
  -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;
  animation: ic-gira-ang 6s linear infinite; }
.carta.icono .ic-marco::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2.4cqw;
  background: conic-gradient(from calc(var(--ic-ang) * -2), transparent 0 78%, rgba(255, 255, 255, .95) 86%, transparent 94%);
  -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; }
/* filete interior fino */
.carta.icono .ic-marco::after { content: ""; position: absolute; inset: 3.4cqw; border-radius: 13px 13px 45% 45% / 13px 13px 13.5% 13.5%;
  border: .35cqw solid rgba(255, 228, 150, .55); box-shadow: inset 0 0 4cqw rgba(255, 200, 80, .18); }
@keyframes ic-gira-ang { to { --ic-ang: 360deg; } }
/* destellos de cuatro puntas que titilan sobre el marco y el fondo */
.carta.icono .ic-chispas { inset: 0; z-index: 10; }
.carta.icono .ic-chispas i { position: absolute; width: 6cqw; aspect-ratio: 1; background: #fff; opacity: 0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 1.5cqw #ffd65a); animation: ic-titila 2.8s ease-in-out infinite; }
.carta.icono .ic-chispas i:nth-child(1) { left: 6%; top: 30%; animation-delay: 0s; }
.carta.icono .ic-chispas i:nth-child(2) { right: 7%; top: 22%; width: 4.5cqw; animation-delay: .9s; }
.carta.icono .ic-chispas i:nth-child(3) { left: 22%; top: 56%; width: 3.6cqw; animation-delay: 1.6s; background: #ffe9a8; }
.carta.icono .ic-chispas i:nth-child(4) { right: 16%; top: 50%; width: 5cqw; animation-delay: .4s; }
.carta.icono .ic-chispas i:nth-child(5) { left: 47%; top: 2.5%; width: 4cqw; animation-delay: 2.1s; }
.carta.icono .ic-chispas i:nth-child(6) { right: 30%; bottom: 6%; width: 4.5cqw; animation-delay: 1.3s; background: #ffe9a8; }
@keyframes ic-titila { 0%, 100% { opacity: 0; scale: .3; rotate: 0deg; } 45% { opacity: 1; scale: 1; rotate: 45deg; } 70% { opacity: 0; scale: .5; rotate: 90deg; } }
.carta.icono .fx-brillo, .carta.icono .fx-reflejo { z-index: 11; }
.carta.icono .fx-brillo::before { background: linear-gradient(100deg, transparent 10%, rgba(255, 246, 210, .75) 50%, transparent 90%);
  animation: fx-barrido 4.2s cubic-bezier(.45, .05, .35, 1) infinite; animation-delay: calc(var(--n, 0) * -1.3s - 1s); }
/* aura: anillo de oro y arcoiris que gira detras de la carta */
.carta.icono .ic-aura, .carta.icono-oculta .ic-aura { box-shadow: 0 0 3cqw .6cqw rgba(255, 210, 90, .85), 0 0 9cqw 1.5cqw rgba(255, 180, 50, .45); }
.carta.icono .ic-aura::before, .carta.icono-oculta .ic-aura::before {
  background: conic-gradient(#ffd65a, #fff8d6, #ff9ccf, #ffd65a, #8fd8ff, #fff8d6, #c48a14, #ffd65a); animation: fx-girar 4s linear infinite; }
.carta.icono .fx-mueve .carta-in > .carta-foto, .carta.icono.fx-mueve .carta-in > .carta-foto { transform: translate(calc(var(--fx, 0) * -6px), calc(var(--fy, 0) * -4px)) scale(1.03); }
/* solo se anima lo que se ve */
.carta.icono:not(.fx-vista) *, .carta.icono:not(.fx-vista) *::before, .carta.icono:not(.fx-vista) *::after,
.carta.icono-oculta:not(.fx-vista) *, .carta.icono-oculta:not(.fx-vista) *::before, .carta.icono-oculta:not(.fx-vista) *::after { animation-play-state: paused !important; }

/* ---- bloqueada: el reverso MN de siempre con un "?" de oro, corona y la pista */
.carta.icono-oculta { cursor: pointer; filter: drop-shadow(0 0 8px rgba(255, 200, 80, .55)); }
.carta.icono-oculta .carta-in.dorso-mn { border-color: #ffd65a; position: absolute; }
.carta.icono-oculta .dmn-logo { display: none; }
.carta.icono-oculta .ic-incognita { position: absolute; left: 50%; top: 47%; width: 50%; aspect-ratio: 1; translate: -50% -50%; z-index: 4; border-radius: 50%;
  display: grid; place-items: center; background: radial-gradient(circle at 36% 28%, #fffbe6, #ffd65a 42%, #c48a14 78%, #8a5a06);
  box-shadow: 0 0 0 .9cqw #06205c, 0 0 0 1.6cqw #ffd65a, 0 0 6cqw 1cqw rgba(255, 200, 80, .75), inset 0 -1.5cqw 3cqw rgba(120, 70, 0, .5);
  animation: ic-medalla 2.6s ease-in-out infinite; }
@keyframes ic-medalla { 50% { filter: brightness(1.18) drop-shadow(0 0 3cqw rgba(255, 210, 90, .9)); scale: 1.04; } }
.carta.oculta.icono-oculta .ic-incognita b { position: static; padding: 0; font: 900 30cqw/1 var(--texto); color: #3d2700; text-shadow: 0 .6cqw 0 rgba(255, 255, 255, .55); }
.carta.icono-oculta .ic-incognita .ic-corona { position: absolute; left: 50%; top: -30%; width: 46%; aspect-ratio: 100 / 64; translate: -50% 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64'%3E%3Cpath d='M9 51 5 15l23 17L50 6l22 26 23-17-4 36z'/%3E%3Crect x='9' y='54' width='82' height='9' rx='3'/%3E%3Ccircle cx='5' cy='12' r='5'/%3E%3Ccircle cx='50' cy='6' r='6'/%3E%3Ccircle cx='95' cy='12' r='5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64'%3E%3Cpath d='M9 51 5 15l23 17L50 6l22 26 23-17-4 36z'/%3E%3Crect x='9' y='54' width='82' height='9' rx='3'/%3E%3Ccircle cx='5' cy='12' r='5'/%3E%3Ccircle cx='50' cy='6' r='6'/%3E%3Ccircle cx='95' cy='12' r='5'/%3E%3C/svg%3E") center / contain no-repeat;
  background: linear-gradient(110deg, #b07a12 0%, #ffd65a 30%, #fffbe6 45%, #ffd65a 60%, #b07a12 100%) 0 0 / 260% 100%; animation: ic-oro 3.6s linear infinite;
  filter: drop-shadow(0 0 1.5cqw rgba(255, 200, 80, .9)); }
.carta.oculta.icono-oculta .carta-in.dorso-mn > b.ic-pista { bottom: 10.5%; color: #ffd65a; font-size: 6.4cqw; letter-spacing: .4cqw; line-height: 1.1; }
.carta.oculta.icono-oculta .ic-pista small { display: block; margin-top: .8cqw; color: #fff; font-size: 3.7cqw; font-weight: 800; letter-spacing: 0; text-transform: none; opacity: .9; }
.carta.icono-oculta .ic-brillo-dorso { position: absolute; inset: 0; z-index: 5; overflow: hidden; border-radius: inherit; pointer-events: none; }
.carta.icono-oculta .ic-brillo-dorso::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 35%;
  background: linear-gradient(100deg, transparent 10%, rgba(255, 220, 120, .38) 50%, transparent 90%); transform: translateX(-130%) skewX(-16deg);
  animation: fx-barrido 3.8s ease-in-out infinite; }
.carta.oculta.icono-oculta .deseo-badge { z-index: 6; }

/* ---- ficha de la carta Icono */
.carta-grande.n-icono .carta { width: 250px; }
.carta-grande.n-icono::before { content: ""; position: absolute; left: 50%; top: 50%; width: 480px; aspect-ratio: 1; margin: -240px 0 0 -240px; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 90, .5) 0 6deg, transparent 6deg 14deg, rgba(255, 255, 255, .28) 14deg 17deg, transparent 17deg 26deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 64%); mask-image: radial-gradient(circle, #000 18%, transparent 64%);
  animation: fx-aparece .6s .5s backwards, fx-girar 30s linear infinite; }
.icono-ficha { text-align: center; margin: 0 4px 12px; }
.icono-ficha > b { display: block; font: 900 19px/1.2 var(--texto); letter-spacing: .3px; color: #7a4f05; text-transform: uppercase; }
.icono-ficha > small { display: block; margin-top: 2px; font-weight: 900; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #b07a12; }
.icono-ficha p { margin: 10px 0 0; font-size: 13.5px; color: var(--tx2, #555); }
.nv-icono { background: linear-gradient(135deg, #1a2350, #050b1f); color: #ffd65a; box-shadow: 0 0 0 1px #ffd65a inset; }
.chip-carta.n-icono i { background: linear-gradient(90deg, #8a5a06, #ffd65a, #8a5a06); color: #2a1700; }
.op-carta.n-icono { border-color: #ffd65a; background: linear-gradient(135deg, #fff9e3, #fff1c2); }
.escena-cambio.n-icono { --brillo: #ffd65a; }

/* ---- su momento en el sobre: mas largo y mas fuerte que el de Diamante */
.sp-carta.n-icono { --brillo: #ffd65a; --a: 6px; }
.sp-carta.n-icono .sp-gira { transition-duration: .95s; }
.sp-escena.tension-icono::before { background: rgba(0, 0, 0, .9); transition-duration: .8s; }
.sp-carta.carga-icono::before { inset: -40%; background: radial-gradient(closest-side, rgba(255, 220, 120, .95) 25%, rgba(255, 180, 40, .45) 55%, transparent);
  animation: ic-carga-luz 2.6s ease-in forwards; }
@keyframes ic-carga-luz { from { opacity: .2; scale: .6; } to { opacity: 1; scale: 1.25; } }
.sp-carta.carga-icono .sp-gira { animation: fx-temblor .066s linear infinite, ic-crece 2.6s ease-in forwards; }
@keyframes ic-crece { to { scale: 1.1; } }
.sp-carta.carga-icono .sp-atras { box-shadow: 0 0 0 3px #ffd65a, 0 0 40px 12px rgba(255, 214, 90, .95), 0 0 90px 30px rgba(255, 170, 30, .45); animation: ic-latido .5s ease-in-out infinite; }
@keyframes ic-latido { 50% { filter: brightness(1.35); } }
.sp-carta.vuelta.n-icono::before { opacity: 1; inset: -30%; background: radial-gradient(closest-side, rgba(255, 220, 120, .9) 30%, transparent); }
.sp-carta.vuelta.n-icono::after { content: ""; position: absolute; inset: -95%; z-index: -2; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 90, .7) 0 5deg, transparent 5deg 12deg, rgba(255, 255, 255, .5) 12deg 15deg, transparent 15deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 60%); mask-image: radial-gradient(circle, #000 10%, transparent 60%);
  animation: fx-aparece .4s .25s backwards, fx-girar 10s linear infinite; }
.sp-escena.luz-icono .sp-carta.vuelta.n-icono .sp-gira { animation: sp-salta .6s cubic-bezier(.3, 1.4, .5, 1), ic-sube 2.6s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes ic-sube { 0% { scale: 1; } 25% { scale: 1.12; } 100% { scale: 1.04; } }
.velo-sobre.sp5:has(.luz-icono) { background: radial-gradient(120% 80% at 50% 38%, #3a2a07 0%, #1a1405 40%, #07060a 75%, #000 100%) !important; transition: background .6s; }
.sp-frente .nueva.ic-nueva, .sp-mini .nueva.ic-nueva { background: linear-gradient(100deg, #a9740f, #ffd65a 30%, #fffbe6 50%, #ffd65a 70%, #a9740f) 0 0 / 220% 100%; color: #2a1700;
  box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(255, 200, 80, .9); animation: fx-sello .5s .45s cubic-bezier(.2, 1.6, .4, 1) both, ic-oro 3s linear infinite; }
.sp-mini.n-icono { filter: drop-shadow(0 0 16px rgba(255, 214, 90, .85)); }
/* el letrero "¡CARTA ÍCONO!" va arriba de la carta, no encima de su calificacion */
body:has(.sp-escena.luz-icono) > .fx-letrero { top: 6.5%; }
@media (prefers-reduced-motion: reduce) {
  .carta.icono *, .carta.icono *::before, .carta.icono *::after, .carta.icono-oculta *, .carta.icono-oculta *::before, .carta.icono-oculta *::after,
  .carta-grande.n-icono::before, .sp-carta.n-icono::after { animation: none !important; }
}
/* <<< carta icono */
/* >>> compartir carta ("mira la carta que me saqué") */
.velo-compartir { z-index: 70; }
.hoja-compartir { text-align: center; }
.hoja-compartir .hoja-cab h2 { flex: 1; text-align: left; }
.cc-vista { display: grid; place-items: center; margin: 0 auto 10px; width: min(100%, 340px); aspect-ratio: 1080 / 1350; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #0d2f80, #031540); box-shadow: 0 14px 30px rgba(3, 21, 64, .35); }
@media (max-height: 700px) { .cc-vista { width: min(100%, 260px); } }
.cc-vista img { width: 100%; height: 100%; object-fit: cover; display: block; animation: cc-entra .45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes cc-entra { from { opacity: 0; transform: scale(.94); } }
.cc-cargando { color: #fff; font-weight: 800; font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; }
.cc-giro { width: 34px; height: 34px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .25); border-top-color: #ffc21a; animation: cc-gira .8s linear infinite; }
@keyframes cc-gira { to { transform: rotate(360deg); } }
.cc-nota { font-size: 13px; margin: 4px 6px 10px; }
.cc-enlace { margin: 0 0 12px; }
.cc-enlace input { width: 100%; padding: 10px 12px; border-radius: 14px; border: 2px solid #e0e7f7; font: inherit; font-weight: 800; font-size: 12px; color: #0a1a4a; background: #f6f8fe; text-align: center; }
.cc-acciones { justify-content: center; }
.cc-acciones .b3 { flex: 1 1 140px; }
.cc-acciones .ic { width: 18px; height: 18px; vertical-align: -3px; }
.sp-compartir .ic { width: 18px; height: 18px; }
.cc-guardar { display: inline-block; margin: 12px auto 2px; color: var(--azul, #0d2f80); font-weight: 800; font-size: 13px; text-decoration: none; cursor: pointer; }
.sp-mini-compartir { position: absolute; top: -10px; right: -10px; z-index: 8; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 2px solid #fff; background: #ffc21a; color: #06205c; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); cursor: pointer; }
.sp-mini-compartir .ic { width: 17px; height: 17px; }
.sp-resumen .sp-presumir { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .cc-vista img, .cc-giro { animation: none; } }
/* <<< compartir carta */
.hoja-presumir .pr-vista { margin: 0 0 12px; border-radius: 18px; overflow: hidden; aspect-ratio: 1200 / 630; background: #0d2f80; box-shadow: 0 10px 24px rgba(3, 21, 64, .25); }
.hoja-presumir .pr-vista img { display: block; width: 100%; height: 100%; object-fit: cover; animation: cc-entra .4s ease-out both; }
.logo-mini img { width: 100%; height: 100%; border-radius: 12px; display: block; }