/* ========================================================= BlockFusion Numbers — estilos Sistema virtual de diseño: --u = px por unidad de diseño (mobile 1080×1920 · tablet 1536×2048 / 2048×1536 · desktop 1920×1080) El rem se deriva de --u según el layout, y todo usa rem. ========================================================= */ @font-face { font-family: 'Lilita One'; src: url(../assets/fonts/lilita-one-latin-400-normal.woff2) format('woff2'); font-display: swap; } @font-face { font-family: 'Lilita One'; src: url(../assets/fonts/lilita-one-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-024F; font-display: swap; } @font-face { font-family: 'Nunito'; font-weight: 700; src: url(../assets/fonts/nunito-latin-700-normal.woff2) format('woff2'); font-display: swap; } @font-face { font-family: 'Nunito'; font-weight: 800; src: url(../assets/fonts/nunito-latin-800-normal.woff2) format('woff2'); font-display: swap; } @font-face { font-family: 'Nunito'; font-weight: 900; src: url(../assets/fonts/nunito-latin-900-normal.woff2) format('woff2'); font-display: swap; } :root { --u: 1px; --bg: #080d2a; --ink: #eaf4ff; --muted: #9fb3e0; --cyan: #36d0ff; --pink: #ff3ca8; --gold: #ffc83a; --orange: #ff8a1f; --green: #34d46a; --red: #ff4058; --violet: #9a4dff; --panel: linear-gradient(180deg, rgba(24, 38, 100, .94), rgba(10, 17, 54, .94)); --pborder: rgba(90, 205, 255, .6); --display: 'Lilita One', 'Arial Rounded MT Bold', 'Nunito', system-ui, sans-serif; --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); } html { font-size: calc(var(--u) * 21); } html[data-layout="mobilePortrait"] { font-size: calc(var(--u) * 40); } html[data-layout="tabletPortrait"] { font-size: calc(var(--u) * 33); } html[data-layout="tabletLandscape"] { font-size: calc(var(--u) * 31); } html[data-layout="desktopUltraWide"] { font-size: calc(var(--u) * 21); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--body); font-weight: 800; } body { position: fixed; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; } button:disabled { cursor: default; } img { -webkit-user-drag: none; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: .02em; } /* ---------------- Fondo ---------------- */ #bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; } #bg .bg-img { position: absolute; inset: -4%; background: url(../assets/img/bg.jpg) center/cover no-repeat; filter: saturate(1.3); } #bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(40, 60, 160, .15), rgba(5, 8, 30, .75) 75%); } .bg-cubes img { position: absolute; bottom: -80px; animation: floatUp linear infinite; filter: blur(.5px); } @keyframes floatUp { from { transform: translateY(0) rotate(0); } to { transform: translateY(-120vh) rotate(260deg); } } #app { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: var(--sat) var(--sar) var(--sab) var(--sal); } /* ---------------- Paneles / botones ---------------- */ .panel, .card { background: var(--panel); border: .12rem solid var(--pborder); border-radius: .9rem; box-shadow: 0 0 .9rem rgba(40, 160, 255, .35), inset 0 0 1.2rem rgba(60, 140, 255, .14); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.6rem; padding: .5rem 1.2rem; border-radius: .8rem; font-family: var(--display); font-size: 1.1rem; letter-spacing: .02em; color: #fff; background: linear-gradient(180deg, #4c5ea8, #2a3572); border: .12rem solid rgba(255, 255, 255, .25); box-shadow: 0 .25rem 0 rgba(0, 0, 0, .35), inset 0 .15rem 0 rgba(255, 255, 255, .25); text-shadow: 0 .1rem 0 rgba(0, 0, 0, .35); transition: transform .08s; } .btn:active:not(:disabled) { transform: translateY(.15rem); box-shadow: 0 .1rem 0 rgba(0, 0, 0, .35); } .btn:disabled { opacity: .5; } .btn.primary, .btn.play { background: linear-gradient(180deg, #ffe066, #ffb319 55%, #ff9500); color: #3b1d00; text-shadow: 0 .08rem 0 rgba(255, 255, 255, .5); } .btn.blue { background: linear-gradient(180deg, #4fc3ff, #1f7ff0); } .btn.coin { background: linear-gradient(180deg, #ffd966, #e0a31a); color: #3b2300; text-shadow: none; } .btn.gem { background: linear-gradient(180deg, #d27bff, #7a3cf0); } .btn.ghost { background: rgba(255, 255, 255, .08); box-shadow: none; } .btn.danger { background: linear-gradient(180deg, #ff6b7a, #d2203a); } .chip { display: inline-flex; align-items: center; gap: .35rem; height: 2.2rem; padding: 0 .35rem 0 .25rem; border-radius: 1.2rem; background: rgba(8, 14, 44, .85); border: .1rem solid rgba(120, 180, 255, .45); font-family: var(--display); font-size: 1rem; } .chip .ico { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-size: .95rem; } .chip.coin .ico { background: radial-gradient(circle at 35% 30%, #fff3a8, #ffc21a 45%, #c77d00); color: #6a3d00; } .chip.gem .ico { background: radial-gradient(circle at 35% 30%, #e7c2ff, #9b4dff 50%, #4b1ca8); color: #fff; } .chip i { font-style: normal; width: 1.5rem; height: 1.5rem; border-radius: .4rem; display: grid; place-items: center; background: #2b76d6; font-size: 1rem; } .chip.sm { height: 1.8rem; font-size: .9rem; } .chip.sm .ico { width: 1.35rem; height: 1.35rem; font-size: .75rem; } .icbtn { width: 2.3rem; height: 2.3rem; border-radius: .6rem; background: rgba(8, 14, 44, .85); border: .1rem solid rgba(120, 180, 255, .45); font-size: 1.3rem; } .bar { display: block; position: relative; height: .9rem; border-radius: 1rem; background: rgba(0, 0, 0, .45); overflow: hidden; border: .08rem solid rgba(255, 255, 255, .15); } .bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffd23f, #ff9d1a); border-radius: 1rem; transition: width .3s; } .bar s { position: absolute; inset: 0; text-decoration: none; font-size: .65rem; display: grid; place-items: center; text-shadow: 0 1px 2px #000; } /* ---------------- Barra superior ---------------- */ #topbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .8rem; position: relative; z-index: 3; } html[data-screen="game"] #topbar { display: none; } #topbar { grid-row: 1; } .screen { grid-row: 2; } .tb-profile { display: flex; align-items: center; gap: .5rem; padding: .25rem .9rem .25rem .25rem; border-radius: 1rem; background: rgba(8, 14, 44, .8); border: .1rem solid rgba(120, 180, 255, .45); } .tb-profile img { width: 2.6rem; height: 2.6rem; border-radius: .6rem; border: .12rem solid var(--cyan); object-fit: cover; } .tb-pinfo { display: grid; text-align: left; line-height: 1.1; min-width: 5rem; } .tb-pinfo b { font-family: var(--display); font-weight: 400; font-size: 1rem; } .tb-pinfo small { font-size: .75rem; color: var(--gold); } .tb-pinfo i { font-style: normal; } .xpbar { display: block; height: .35rem; border-radius: 1rem; background: rgba(0, 0, 0, .5); margin-top: .15rem; overflow: hidden; } .xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd23f, #ff9d1a); } .wallet { display: flex; align-items: center; gap: .45rem; } /* ---------------- Pantallas ---------------- */ .screen { display: none; position: relative; min-height: 0; min-width: 0; } .screen.on { display: grid; } .subhead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .3rem .8rem .5rem; } .subhead h2 { font-size: 1.6rem; text-shadow: 0 .15rem 0 rgba(0, 0, 0, .4), 0 0 1rem rgba(60, 180, 255, .6); } .back { padding: .45rem .9rem; border-radius: .7rem; background: rgba(8, 14, 44, .85); border: .1rem solid rgba(120, 180, 255, .45); font-family: var(--display); font-size: 1rem; } /* ---------------- Reactor (marco del tablero) ---------------- */ .reactor { position: relative; display: flex; flex-direction: column; align-items: center; padding: .45rem .45rem .5rem; border-radius: 1.1rem; background: linear-gradient(180deg, #1c2656, #0c1333); border: .22rem solid #3b4a80; box-shadow: 0 0 0 .14rem #070b20, 0 0 1.6rem rgba(60, 180, 255, .55), inset 0 0 1rem rgba(0, 0, 0, .7); } .reactor::before, .reactor::after { content: ''; position: absolute; top: 12%; bottom: 12%; width: .22rem; border-radius: 1rem; background: linear-gradient(180deg, var(--cyan), var(--pink), var(--cyan)); box-shadow: 0 0 .7rem var(--pink); animation: neon 3s linear infinite; } .reactor::before { left: -.42rem; } .reactor::after { right: -.42rem; } @keyframes neon { 50% { filter: hue-rotate(60deg) brightness(1.3); } } .reactor.alarm { border-color: #ff3060; box-shadow: 0 0 0 .14rem #070b20, 0 0 2rem rgba(255, 40, 90, .8), inset 0 0 1rem rgba(0, 0, 0, .7); } .rc-label { font-family: var(--display); font-size: .95rem; line-height: 1; text-align: center; padding: .2rem .9rem .3rem; margin: -.1rem 0 .35rem; border-radius: .5rem; background: linear-gradient(180deg, #16204a, #0b1230); border: .1rem solid rgba(90, 205, 255, .6); color: #bfe9ff; text-shadow: 0 0 .5rem var(--cyan); } .rc-label small { display: block; font-size: .5rem; letter-spacing: .12em; color: var(--cyan); } .reactor canvas { display: block; border-radius: .4rem; touch-action: none; } /* ================= HOME ================= */ #scrHome { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "logo show daily" "menu show ." "pass show icons"; gap: .8rem 1.2rem; padding: 0 1.2rem 1rem; } #scrHome .logo { grid-area: logo; width: 100%; max-width: 24rem; filter: drop-shadow(0 .2rem .6rem rgba(0, 0, 0, .5)); align-self: start; } .mainmenu { grid-area: menu; display: flex; flex-direction: column; gap: .7rem; align-self: center; max-width: 21rem; width: 100%; } .mbtn { display: flex; align-items: center; gap: .8rem; height: 3.6rem; padding: 0 1rem 0 .7rem; border-radius: 1rem; font-family: var(--display); font-size: 1.5rem; border: .14rem solid rgba(255, 255, 255, .35); box-shadow: 0 .3rem 0 rgba(0, 0, 0, .35), inset 0 .2rem 0 rgba(255, 255, 255, .3); text-shadow: 0 .12rem 0 rgba(0, 0, 0, .35); transition: transform .1s; } .mbtn:hover { transform: translateX(.3rem); } .mbtn:active { transform: translateY(.15rem); } .mbtn b { font-weight: 400; flex: 1; text-align: left; } .mbtn i { font-style: normal; font-size: 1.8rem; opacity: .8; } .mbtn .mi { width: 2.4rem; text-align: center; font-size: 1.6rem; } .mbtn.adv { background: linear-gradient(180deg, #ffd650, #ff9f1a); color: #3b1d00; text-shadow: 0 .08rem 0 rgba(255, 255, 255, .5); } .mbtn.arc { background: linear-gradient(180deg, #b36bff, #6a2bd8); } .mbtn.are { background: linear-gradient(180deg, #ff5a7a, #d21f4a); } .mbtn.her { background: linear-gradient(180deg, #4fa8ff, #1f5fd0); } .mbtn.shp { background: linear-gradient(180deg, #5fe07a, #1f9e45); } .showcase { grid-area: show; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; } .showcase .demo-frame { max-height: 100%; position: relative; } .showcase .demo-frame > img { position: absolute; z-index: 2; pointer-events: none; filter: drop-shadow(0 .4rem 1rem rgba(0, 0, 0, .5)); border-radius: 1.2rem; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 60%, transparent 72%); mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 60%, transparent 72%); } .h-panda { width: 12rem; left: -10.5rem; bottom: -1rem; animation: bob 3s ease-in-out infinite; } .h-cat { width: 10rem; right: -9rem; top: 4%; animation: bob 3.4s ease-in-out infinite reverse; } .h-dog { width: 10rem; right: -9.5rem; bottom: -1rem; animation: bob 2.8s ease-in-out infinite; } @keyframes bob { 50% { transform: translateY(-.5rem); } } .card.daily { grid-area: daily; justify-self: end; width: 100%; max-width: 17rem; padding: .7rem 1rem; display: grid; justify-items: center; gap: .2rem; text-align: center; } .d-title { font-family: var(--display); font-size: 1rem; } .d-title i { font-style: normal; color: var(--cyan); } .d-chest { font-size: 3rem; line-height: 1; filter: drop-shadow(0 0 .8rem rgba(255, 180, 60, .7)); } .d-time { font-size: .8rem; padding: .15rem .7rem; border-radius: 1rem; background: rgba(0, 0, 0, .4); } .card.daily.ready .d-chest { animation: wiggle 1.2s ease-in-out infinite; } .card.daily.ready .d-time { background: var(--green); color: #032; } @keyframes wiggle { 20% { transform: rotate(-8deg) scale(1.05); } 40% { transform: rotate(8deg) scale(1.05); } 60% { transform: rotate(0); } } .card.pass { grid-area: pass; display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; max-width: 21rem; } .p-ico { font-size: 2.2rem; } .p-body { flex: 1; display: grid; gap: .3rem; } .p-body b { font-family: var(--display); font-weight: 400; } .p-lvl { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; font-family: var(--display); font-size: 1.2rem; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: linear-gradient(#ffd650, #ff9f1a); color: #3b1d00; } .iconrow { grid-area: icons; display: flex; gap: .6rem; justify-content: end; align-self: end; } .iconrow button { position: relative; width: 5.2rem; padding: .5rem 0 .4rem; display: grid; justify-items: center; gap: .15rem; font-size: .75rem; border-radius: .8rem; background: var(--panel); border: .1rem solid var(--pborder); } .iconrow button span { font-size: 1.8rem; line-height: 1.1; } .dot { position: absolute; top: .3rem; right: .6rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 .5rem var(--red); display: none; } /* ================= MAPA ================= */ #scrMap { grid-template-rows: auto minmax(0, 1fr) auto; padding-bottom: .8rem; } .energy { font-family: var(--display); font-size: 1.1rem; padding: .3rem .8rem; border-radius: 1rem; background: rgba(8, 14, 44, .85); border: .1rem solid rgba(255, 210, 60, .6); color: #ffe26a; } .energy small { font-family: var(--body); font-size: .7rem; color: var(--muted); } .mapview { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0 .8rem; min-height: 0; } .mapinner { position: relative; aspect-ratio: 1672 / 375; width: min(100%, calc((var(--vh) - 21rem) * 4.459)); border-radius: 1.2rem; overflow: hidden; box-shadow: 0 0 0 .15rem rgba(90, 205, 255, .5), 0 0 2rem rgba(40, 140, 255, .4); } .mapinner img { width: 100%; height: 100%; display: block; object-fit: cover; } .wnode { position: absolute; transform: translate(-50%, -40%); width: 7%; aspect-ratio: 1 / 1.25; display: grid; justify-items: center; align-content: center; gap: .1rem; transition: transform .15s; } .wnode:hover { transform: translate(-50%, -40%) scale(1.08); } .wlabel { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); white-space: nowrap; font-family: var(--display); font-size: clamp(.55rem, .9vw, 1rem); padding: .1rem .5rem; border-radius: .4rem; background: rgba(120,10,60,.85); border: .1rem solid #ff5ab4; } .wnode .hex { width: 100%; aspect-ratio: 1.1; display: grid; place-items: center; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: linear-gradient(180deg, #ffe066, #ff9d1a); color: #3b1d00; font-family: var(--display); font-size: clamp(.7rem, 1.25vw, 1.4rem); box-shadow: 0 0 1rem #000; } .wnode.locked .hex { background: linear-gradient(180deg, #5b6384, #2b3050); color: #fff; } .wnode.sel .hex { background: linear-gradient(180deg, #ffffff, var(--wc)); animation: pulseHex 1.2s ease-in-out infinite; } @keyframes pulseHex { 50% { filter: brightness(1.3) drop-shadow(0 0 .5rem #fff); } } .nst { font-size: clamp(.5rem, .9vw, 1rem); letter-spacing: -.1em; text-shadow: 0 0 .3rem #000; } .nst i, .shex span i, .sp-stars i, .gl-stars i { font-style: normal; color: rgba(255, 255, 255, .25); } .nst i.on, .shex span i.on, .sp-stars i.on { color: var(--gold); text-shadow: 0 0 .4rem rgba(255, 200, 60, .8); } .mapbottom { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: .8rem; padding: .7rem .8rem 0; } .worldpanel { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; padding: .7rem; } .worldpanel img { width: 7rem; height: 5.5rem; object-fit: cover; border-radius: .6rem; border: .1rem solid var(--pborder); } .winfo small { color: var(--muted); font-size: .75rem; } .winfo h3 { font-size: 1.4rem; color: #fff; } .winfo p { margin: .2rem 0 0; font-size: .75rem; color: var(--muted); font-weight: 700; } .wnav { width: 2rem; height: 3rem; font-size: 1.6rem; color: var(--cyan); border-radius: .5rem; background: rgba(0, 0, 0, .3); } .hexes { display: grid; grid-template-columns: repeat(6, 3.1rem); gap: .3rem; grid-column: 4; } .worldpanel .wnav:last-child { grid-column: 5; } .shex { display: grid; justify-items: center; gap: .1rem; } .shex b { width: 3rem; height: 2.7rem; display: grid; place-items: center; font-family: var(--display); font-weight: 400; font-size: .9rem; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: linear-gradient(180deg, #3aa0ff, #1b56c9); } .shex.done b { background: linear-gradient(180deg, #43e07a, #13994a); } .shex.sel b { background: linear-gradient(180deg, #ffe066, #ff9d1a); color: #3b1d00; transform: scale(1.12); } .shex.locked b { background: linear-gradient(180deg, #5b6384, #2b3050); } .shex span { font-size: .65rem; letter-spacing: -.1em; } .stagepanel { padding: .7rem .9rem; display: grid; gap: .5rem; } .sp-head { display: flex; align-items: center; gap: .6rem; } .sp-id { font-family: var(--display); padding: .1rem .5rem; border-radius: .4rem; background: #3b2bd0; } .sp-head h3 { flex: 1; font-size: 1.3rem; } .sp-stars { font-size: 1.3rem; } .sp-body { display: flex; gap: .8rem; align-items: flex-start; } .sp-mini { display: grid; grid-template-columns: repeat(3, 1.9rem); gap: .15rem; padding: .3rem; border-radius: .5rem; background: rgba(0, 0, 0, .35); } .sp-mini img { width: 1.9rem; height: 1.9rem; } .sp-obj { flex: 1; display: grid; gap: .25rem; } .sp-obj small { color: var(--muted); font-size: .7rem; } .sp-obj p { margin: 0; font-size: .9rem; } .sp-obj em { color: var(--muted); font-size: .75rem; font-style: normal; } .sp-list { margin: 0; padding: 0; list-style: none; font-size: .72rem; color: #cfe0ff; font-weight: 700; display: grid; gap: .1rem; } .sp-rw { display: flex; flex-wrap: wrap; gap: .35rem; } .rw { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: .6rem; background: rgba(0, 0, 0, .4); border: .08rem solid rgba(255, 255, 255, .15); font-family: var(--display); font-size: .9rem; } .rw i { font-style: normal; width: 1.2rem; height: 1.2rem; display: grid; place-items: center; border-radius: 50%; font-size: .7rem; } .rw.coin i { background: #ffc21a; color: #6a3d00; } .rw.gem i { background: #9b4dff; } .rw.tile img { width: 1.6rem; height: 1.6rem; } .sp-foot { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; } .sp-cost { font-family: var(--display); color: #ffe26a; font-size: 1.1rem; } .btn.play { min-width: 10rem; font-size: 1.4rem; } /* ================= PARTIDA: rejilla base (desktop / tablet landscape) ================= */ #scrGame { gap: .55rem .9rem; padding: .55rem .9rem .6rem; grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--vh) * .44)) minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; grid-template-areas: "top top top" "goal board next" "hold board stats" "powers board rival" "helper board rival" "status status status"; } .g-top { grid-area: top; display: flex; align-items: center; gap: .8rem; } .g-stats { grid-area: stats; } .g-rival { grid-area: rival; } .g-hold { grid-area: hold; } .g-next { grid-area: next; } .g-board { grid-area: board; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; touch-action: none; } .g-goal { grid-area: goal; } .g-powers { grid-area: powers; } .g-helper { grid-area: helper; } .g-ctrl { grid-area: ctrl; } .g-status { grid-area: status; } .g-goal, .g-hold, .g-powers, .g-helper { justify-self: end; width: min(100%, 20rem); } .g-next, .g-stats, .g-rival { justify-self: start; width: min(100%, 20rem); } #scrGame .panel { padding: .5rem .7rem; } #scrGame h4 { font-size: 1rem; text-align: center; color: #cfeaff; text-shadow: 0 0 .5rem var(--cyan); margin-bottom: .3rem; } .pausebtn { width: 2.6rem; height: 2.6rem; border-radius: .7rem; background: linear-gradient(180deg, #2a3a80, #141d4a); border: .12rem solid var(--pborder); font-size: .9rem; flex: none; } .gt-player { display: flex; align-items: center; gap: .5rem; } .gt-player img { width: 2.5rem; height: 2.5rem; border-radius: .6rem; border: .12rem solid var(--cyan); object-fit: cover; } .gt-player div { display: grid; line-height: 1.1; } .gt-player b { font-family: var(--display); font-weight: 400; } .gt-player small { color: var(--gold); font-size: .75rem; } .gt-mode { flex: 1; text-align: center; font-family: var(--display); font-size: 1.3rem; text-shadow: 0 0 .6rem rgba(60, 180, 255, .8); } .gt-mode span { font-family: var(--body); font-size: .8rem; color: var(--muted); display: block; } .gt-wallet { display: flex; gap: .4rem; } /* VS (Arena) */ .vs-side { flex: 1; display: flex; align-items: center; gap: .5rem; padding: .3rem .6rem; border-radius: .9rem; min-width: 0; } .vs-side.me { background: linear-gradient(90deg, rgba(30, 110, 255, .55), rgba(30, 110, 255, .1)); border: .1rem solid rgba(80, 180, 255, .7); } .vs-side.rv { background: linear-gradient(270deg, rgba(255, 40, 100, .55), rgba(255, 40, 100, .1)); border: .1rem solid rgba(255, 90, 140, .7); justify-content: flex-end; text-align: right; } .vs-side img { width: 2.4rem; height: 2.4rem; border-radius: .6rem; object-fit: cover; border: .1rem solid #fff; } .vs-side div { display: grid; line-height: 1.1; min-width: 0; } .vs-side b { font-family: var(--display); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vs-side small { font-size: .7rem; } .vs-side strong { font-family: var(--display); font-weight: 400; font-size: 1.7rem; margin: 0 .4rem; } .vs-side.me strong { color: #8fe0ff; margin-left: auto; } .vs-side.rv strong { color: #ff9dbd; margin-right: auto; } .vs-mid { display: grid; justify-items: center; } .vs { font-family: var(--display); font-size: 2rem; background: linear-gradient(180deg, #fff27a, #ff9d1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .1rem 0 #7a3000); } .vs-time { font-family: var(--display); font-size: .95rem; padding: .05rem .5rem; border-radius: .4rem; background: rgba(0, 0, 0, .5); } .vs-time.hurry { color: #ff5a7a; animation: blink .5s steps(2) infinite; } @keyframes blink { 50% { opacity: .4; } } /* stats */ .g-stats { display: grid; gap: .3rem; text-align: center; } .st-stage { font-size: .75rem; color: var(--muted); } .st-score small, .st-combo small { display: block; font-size: .7rem; color: #cfe0ff; letter-spacing: .1em; } .st-score b { font-family: var(--display); font-weight: 400; font-size: 2.1rem; line-height: 1; background: linear-gradient(180deg, #fff6a0, #ffc21a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .12rem 0 rgba(0, 0, 0, .5)); } .st-best { display: block; font-size: .7rem; color: var(--gold); } .st-best i { font-style: normal; } .st-combo { border-radius: .7rem; padding: .3rem; background: linear-gradient(180deg, #6a2bd8, #3a1590); border: .1rem solid #b37bff; } .st-combo b { font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1; } .st-combo b i { font-style: normal; } .st-combo em { display: block; height: .3rem; background: rgba(0, 0, 0, .4); border-radius: 1rem; margin-top: .2rem; overflow: hidden; } .st-combo em i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd23f, #ff5ab4); transition: width .3s; } .st-combo.pulse { animation: pop .4s; } @keyframes pop { 40% { transform: scale(1.15); } } /* hold / next */ .g-hold .slot { display: none; height: 5.8rem; display: grid; place-items: center; border-radius: .6rem; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 .8rem rgba(0, 0, 0, .6); } .g-hold.used .slot { opacity: .45; } .pc { display: grid; justify-items: center; } .nextlist { display: flex; justify-content: space-around; align-items: flex-end; gap: .4rem; padding: .4rem; border-radius: .6rem; background: rgba(0, 0, 0, .35); min-height: 5.8rem; } /* objetivo */ .gl-head { display: flex; align-items: center; gap: .4rem; font-size: .85rem; } .gl-head b { flex: 1; font-weight: 800; } .gl-ico { font-size: 1.1rem; } .gl-tog { display: none; width: 1.6rem; height: 1.6rem; border-radius: .4rem; background: rgba(0, 0, 0, .3); } .gl-bar { position: relative; height: 1.1rem; margin-top: .35rem; border-radius: 1rem; background: rgba(0, 0, 0, .5); overflow: hidden; } .gl-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 1rem; background: linear-gradient(90deg, #36d0ff, #4dffb8); transition: width .35s; } .gl-bar s { position: absolute; inset: 0; text-decoration: none; display: grid; place-items: center; font-size: .72rem; text-shadow: 0 1px 2px #000; } .gl-stars { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .1rem; font-size: .72rem; color: var(--muted); font-weight: 700; } .gl-stars li.on { color: var(--gold); } #scrGame:not([data-mode="adventure"]) .gl-stars { display: none; } .g-goal.collapsed .gl-stars { display: none; } /* poderes */ .g-powers { display: grid; gap: .45rem; } .pw-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; } .pw { position: relative; display: grid; justify-items: center; align-content: center; padding: .35rem .2rem .3rem; border-radius: .8rem; min-height: 4.6rem; background: linear-gradient(180deg, #243a8e, #111b4e); border: .12rem solid var(--pborder); box-shadow: 0 .2rem 0 rgba(0, 0, 0, .35); transition: transform .1s; } .pw:active { transform: translateY(.12rem); } .pw-ic { font-size: 1.7rem; line-height: 1.1; filter: drop-shadow(0 .1rem .2rem rgba(0, 0, 0, .5)); } .pw b { font-family: var(--display); font-weight: 400; font-size: .85rem; } .pw small { font-size: .6rem; color: var(--muted); font-weight: 700; } .pw em { position: absolute; top: -.35rem; right: -.25rem; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: 1rem; background: var(--red); font-style: normal; font-size: .75rem; display: grid; place-items: center; border: .1rem solid #fff; } .pw kbd { position: absolute; top: .2rem; left: .35rem; font-size: .6rem; color: var(--muted); font-family: var(--body); } html[data-input="touch"] .pw kbd, html[data-device="mobile"] .pw kbd, html[data-device="tablet"] .pw kbd { display: none; } .pw.empty { opacity: .55; } .pw.empty em { background: #555; } .pw.armed { border-color: #ffe14d; box-shadow: 0 0 1rem #ffcf33; animation: pop .6s infinite; } .charge { display: flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border-radius: .7rem; background: rgba(8, 14, 44, .85); border: .1rem solid rgba(90, 205, 255, .4); font-size: .65rem; } .charge span { white-space: nowrap; color: #bfe9ff; } .charge em { flex: 1; height: .7rem; border-radius: 1rem; background: rgba(0, 0, 0, .5); overflow: hidden; } .charge em i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #36d0ff 0 .5rem, #1a9fe0 .5rem .6rem); transition: width .3s; } .charge b { font-family: var(--display); font-weight: 400; font-size: .85rem; } /* ayudante */ .g-helper { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 0; pointer-events: none; } .g-helper img { width: 6.5rem; height: 6.5rem; border-radius: 1.2rem; border: .15rem solid var(--cyan); object-fit: cover; box-shadow: 0 0 1rem rgba(60, 180, 255, .6); animation: bob 3s ease-in-out infinite; } .bubble { position: absolute; bottom: 7.2rem; left: 50%; transform: translateX(-50%) scale(.8); width: max-content; max-width: 16rem; padding: .5rem .8rem; border-radius: .9rem; background: #fff; color: #1a2250; font-size: .8rem; font-weight: 800; text-align: center; opacity: 0; transition: .25s; box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .4); } .bubble::after { content: ''; position: absolute; bottom: -.45rem; left: 50%; margin-left: -.5rem; border: .5rem solid transparent; border-top-color: #fff; border-bottom: 0; } .bubble.on { opacity: 1; transform: translateX(-50%) scale(1); } /* rival */ .g-rival { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: stretch; } #scrGame:not([data-mode="arena"]) .g-rival { display: none; } .rv-board { position: relative; display: flex; align-items: center; justify-content: center; width: 7rem; min-height: 12rem; cursor: zoom-in; border-radius: .5rem; background: rgba(0, 0, 0, .35); padding: 2px; } .rv-board canvas { display: block; border-radius: .3rem; } .rv-zoom { position: absolute; right: .1rem; bottom: .1rem; font-size: .8rem; opacity: .7; } .rv-info { display: grid; align-content: start; gap: .4rem; min-width: 0; } .rv-name { display: flex; align-items: center; gap: .4rem; } .rv-name img { width: 1.8rem; height: 1.8rem; border-radius: .4rem; object-fit: cover; } .rv-name b { font-family: var(--display); font-weight: 400; } .rv-state { font-size: .75rem; color: #cfe0ff; } .rv-queue small { font-size: .6rem; letter-spacing: .08em; color: #ff9dbd; } .queue { display: flex; flex-wrap: wrap; gap: .15rem; min-height: 1.7rem; align-items: center; } .queue img { width: 1.6rem; height: 1.6rem; } .queue b { font-size: .75rem; } .queue .none { font-size: .7rem; color: var(--muted); } #inTurns { font-size: .72rem; color: #ffb3c8; } #inTurns b { font-family: var(--display); font-weight: 400; font-size: 1rem; color: #fff; } .g-rival.alert { border-color: #ff3060; box-shadow: 0 0 1rem rgba(255, 40, 90, .6); animation: alertPulse 1s ease-in-out infinite; } @keyframes alertPulse { 50% { box-shadow: 0 0 1.8rem rgba(255, 40, 90, .9); } } .g-rival.zoom .rv-board { position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(80vw, 40vh); height: min(80vh, 90vw); min-height: 0; background: rgba(5, 8, 30, .95); border: .15rem solid #ff5a9a; box-shadow: 0 0 3rem rgba(255, 40, 120, .7); padding: .5rem; cursor: zoom-out; } /* status/teclas */ .g-status { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.2rem; font-size: .72rem; color: var(--muted); font-weight: 700; padding: .3rem; border-radius: .7rem; background: rgba(8, 14, 44, .6); } kbd { font-family: var(--body); font-weight: 900; font-size: .7rem; padding: .05rem .35rem; border-radius: .3rem; background: #25346f; border: .08rem solid #4d6ad0; color: #fff; margin: 0 .1rem; } /* combo / alerta / target */ .combo-pop { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); pointer-events: none; text-align: center; opacity: 0; z-index: 4; } .combo-pop b { display: block; font-family: var(--display); font-weight: 400; font-size: 2.6rem; white-space: nowrap; color: #fff5a0; -webkit-text-stroke: .1rem #7a3000; text-shadow: 0 .2rem 0 #b34a00, 0 0 1.2rem rgba(255, 180, 40, .9); } .combo-pop small { display: block; font-family: var(--display); font-size: 1rem; color: #fff; text-shadow: 0 0 .5rem #ff3ca8; } .combo-pop.show { animation: comboIn 1.1s cubic-bezier(.2, 1.4, .4, 1) forwards; } @keyframes comboIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(-4deg); } 70% { opacity: 1; transform: translate(-50%, -60%) scale(1) rotate(-4deg); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(.9) rotate(-4deg); } } .warnbar { position: absolute; left: .5rem; right: .5rem; top: 2.1rem; z-index: 4; padding: .35rem; border-radius: .5rem; text-align: center; font-family: var(--display); font-size: 1rem; background: rgba(220, 20, 60, .9); color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s; } .warnbar.on { opacity: 1; animation: blink .35s steps(2) infinite; } .tgt-bar { position: absolute; left: .5rem; right: .5rem; bottom: .6rem; z-index: 4; display: none; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .5rem .35rem .8rem; border-radius: .6rem; background: rgba(10, 16, 50, .92); border: .12rem solid #ffe14d; font-size: .85rem; } .tgt-bar.on { display: flex; } .tgt-bar button { width: 1.8rem; height: 1.8rem; border-radius: .4rem; background: #ff4058; } /* controles táctiles semitransparentes */ .g-ctrl { display: none; } #scrGame[data-ctrl="buttons"] .g-ctrl { display: grid; } .g-ctrl { grid-template-columns: 1fr 1fr .25fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .4rem; grid-template-areas: "left right . rot soft" "left right . drop soft"; } .tc { border-radius: 1rem; font-size: 1.5rem; font-family: var(--display); color: #fff; opacity: .34; transition: opacity .25s, transform .08s; background: radial-gradient(circle at 50% 30%, rgba(90, 170, 255, .55), rgba(20, 40, 120, .55)); border: .12rem solid rgba(140, 210, 255, .7); touch-action: none; min-height: 2.6rem; } .g-ctrl.active .tc { opacity: .62; } .tc.on { opacity: .9 !important; transform: scale(.94); } .tc-left { grid-area: left; font-size: 2rem; } .tc-right { grid-area: right; font-size: 2rem; } .tc-rot { grid-area: rot; } .tc-drop { grid-area: drop; } .tc-soft { grid-area: soft; } .tc-drop { background: radial-gradient(circle at 50% 30%, rgba(255, 190, 60, .6), rgba(160, 70, 0, .55)); border-color: rgba(255, 210, 120, .8); } .tc-rot { background: radial-gradient(circle at 50% 30%, rgba(80, 255, 170, .5), rgba(0, 110, 70, .55)); border-color: rgba(120, 255, 190, .8); } #scrGame[data-mode="arena"] .g-goal { display: none; } #scrGame[data-mode="arena"] { grid-template-areas: "top top top" "hold board next" "powers board stats" "helper board rival" "helper board rival" "status status status"; } #scrGame[data-ctrl="buttons"] .g-status { display: none; } #scrGame[data-ctrl="buttons"] .g-ctrl { grid-area: status; grid-template-columns: repeat(2, 5.5rem) 1fr repeat(2, 5.5rem); grid-template-rows: 3.4rem; grid-template-areas: "left right . rot drop"; } #scrGame[data-ctrl="buttons"] .tc-soft { display: none; } #scrGame.targeting .reactor { border-color: #ffe14d; } /* ================= MOBILE PORTRAIT ================= */ html[data-layout="mobilePortrait"] #scrGame { gap: .35rem; padding: .3rem .4rem .4rem; grid-template-columns: 4.7rem minmax(0, 1fr) 4.7rem; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: "top top top" "stats stats stats" "rival rival rival" "hold board next" "goal goal goal" "powers powers powers" "ctrl ctrl ctrl"; } html[data-layout="mobilePortrait"] #scrGame[data-mode="arena"] { grid-template-areas: "top top top" "stats stats stats" "rival rival rival" "hold board next" "goal goal goal" "powers powers powers" "ctrl ctrl ctrl"; } html[data-layout="mobilePortrait"] #scrGame[data-mode="arena"] .g-stats { display: none; } html[data-layout="mobilePortrait"] .g-status { display: none; } html[data-layout="mobilePortrait"] #scrGame[data-ctrl="buttons"] .g-ctrl { grid-area: ctrl; grid-template-columns: 1fr 1fr .15fr 1fr 1fr; grid-template-rows: 2.5rem 2.5rem; grid-template-areas: "left right . rot soft" "left right . drop soft"; } html[data-layout="mobilePortrait"] #scrGame[data-ctrl="buttons"] .tc-soft { display: block; } html[data-layout="mobilePortrait"] .g-goal, html[data-layout="mobilePortrait"] .g-hold, html[data-layout="mobilePortrait"] .g-powers, html[data-layout="mobilePortrait"] .g-next, html[data-layout="mobilePortrait"] .g-stats, html[data-layout="mobilePortrait"] .g-rival { width: auto; justify-self: stretch; } html[data-layout="mobilePortrait"] .g-top { gap: .35rem; } html[data-layout="mobilePortrait"] .pausebtn { width: 2.2rem; height: 2.2rem; } html[data-layout="mobilePortrait"] .gt-player div, html[data-layout="mobilePortrait"] .gt-player small { display: none; } html[data-layout="mobilePortrait"] .gt-player img { width: 2.1rem; height: 2.1rem; } html[data-layout="mobilePortrait"] .gt-mode { font-size: 1rem; text-align: left; } html[data-layout="mobilePortrait"] .gt-mode span { font-size: .7rem; } html[data-layout="mobilePortrait"] .gt-wallet .chip { font-size: .75rem; height: 1.6rem; } html[data-layout="mobilePortrait"] .vs-side img { width: 1.9rem; height: 1.9rem; } html[data-layout="mobilePortrait"] .vs-side small { display: none; } html[data-layout="mobilePortrait"] .vs-side { padding: .2rem .35rem; gap: .3rem; } html[data-layout="mobilePortrait"] .vs-side b { font-size: .75rem; } html[data-layout="mobilePortrait"] .vs-side strong { font-size: 1.2rem; margin: 0; } html[data-layout="mobilePortrait"] .vs { font-size: 1.4rem; } html[data-layout="mobilePortrait"] .g-stats { grid-template-columns: 1fr auto auto; align-items: center; padding: .3rem .6rem; text-align: left; gap: .6rem; } html[data-layout="mobilePortrait"] .st-stage { font-size: .72rem; line-height: 1.2; } html[data-layout="mobilePortrait"] .st-score { text-align: center; } html[data-layout="mobilePortrait"] .st-score b { font-size: 1.6rem; } html[data-layout="mobilePortrait"] .st-score small { display: none; } html[data-layout="mobilePortrait"] .st-combo { padding: .15rem .6rem; text-align: center; } html[data-layout="mobilePortrait"] .st-combo b { font-size: 1.2rem; } html[data-layout="mobilePortrait"] .st-combo small { font-size: .55rem; } html[data-layout="mobilePortrait"] #scrGame .panel { padding: .3rem .35rem; border-radius: .7rem; } html[data-layout="mobilePortrait"] #scrGame h4 { font-size: .75rem; margin-bottom: .2rem; } html[data-layout="mobilePortrait"] .g-hold { align-self: start; } html[data-layout="mobilePortrait"] .g-next { align-self: start; } html[data-layout="mobilePortrait"] .nextlist { flex-direction: column; align-items: center; min-height: 0; padding: .3rem .1rem; gap: .5rem; } html[data-layout="mobilePortrait"] .g-helper { grid-area: hold; align-self: end; justify-self: center; width: auto; } html[data-layout="mobilePortrait"] .g-helper img { width: 3.8rem; height: 3.8rem; border-radius: .8rem; } html[data-layout="mobilePortrait"] .bubble { bottom: 4.3rem; left: 50%; width: 4.7rem; max-width: none; padding: .35rem .3rem; font-size: .58rem; line-height: 1.2; z-index: 6; } html[data-layout="mobilePortrait"] .g-goal { padding: .3rem .6rem; } html[data-layout="mobilePortrait"] .gl-head { font-size: .75rem; } html[data-layout="mobilePortrait"] .gl-tog { display: block; } html[data-layout="mobilePortrait"] .gl-bar { height: .9rem; margin-top: .2rem; } html[data-layout="mobilePortrait"] .g-goal .gl-stars { display: none; } html[data-layout="mobilePortrait"] .g-goal.collapsed .gl-bar { display: none; } html[data-layout="mobilePortrait"] .g-powers { grid-template-columns: 1fr; gap: .3rem; } html[data-layout="mobilePortrait"] .pw-row { grid-template-columns: repeat(6, 1fr); gap: .35rem; } html[data-layout="mobilePortrait"] .pw { min-height: 3.3rem; padding: .2rem; } html[data-layout="mobilePortrait"] .pw small { display: none; } html[data-layout="mobilePortrait"] .pw b { font-size: .7rem; } html[data-layout="mobilePortrait"] .pw-ic { font-size: 1.35rem; } html[data-layout="mobilePortrait"] .charge { padding: .2rem .5rem; font-size: .55rem; } html[data-layout="mobilePortrait"] .rc-label { font-size: .75rem; padding: .1rem .6rem .15rem; margin-bottom: .25rem; } html[data-layout="mobilePortrait"] .reactor { padding: .3rem .3rem .35rem; border-width: .16rem; } html[data-layout="mobilePortrait"] .combo-pop b { font-size: 2rem; } html[data-layout="mobilePortrait"] .g-rival { grid-template-columns: auto minmax(0, 1fr); padding: .25rem .4rem; } html[data-layout="mobilePortrait"] .rv-board { width: 3.2rem; min-height: 0; height: 6.8rem; } html[data-layout="mobilePortrait"] .rv-info { grid-template-columns: auto 1fr; align-items: center; gap: .1rem .6rem; } html[data-layout="mobilePortrait"] .rv-queue { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; } html[data-layout="mobilePortrait"] .queue img { width: 1.3rem; height: 1.3rem; } html[data-layout="mobilePortrait"] .rv-state { font-size: .65rem; } /* ================= TABLET PORTRAIT ================= */ html[data-layout="tabletPortrait"] #scrGame { gap: .5rem; padding: .5rem .7rem .6rem; grid-template-columns: 9rem minmax(0, 1fr) 9rem; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: "top top top" "stats stats stats" "rival rival rival" "hold board next" "helper board next" "goal goal goal" "powers powers powers" "ctrl ctrl ctrl"; } html[data-layout="tabletPortrait"] #scrGame[data-mode="arena"] .g-stats { display: none; } html[data-layout="tabletPortrait"] .g-status { display: none; } html[data-layout="tabletPortrait"] #scrGame[data-ctrl="buttons"] .g-ctrl { grid-area: ctrl; grid-template-columns: repeat(2, 1fr) .4fr repeat(2, 1fr); grid-template-rows: 3.2rem; grid-template-areas: "left right . rot drop"; } html[data-layout="tabletPortrait"] .g-goal, html[data-layout="tabletPortrait"] .g-hold, html[data-layout="tabletPortrait"] .g-powers, html[data-layout="tabletPortrait"] .g-next, html[data-layout="tabletPortrait"] .g-stats, html[data-layout="tabletPortrait"] .g-rival, html[data-layout="tabletPortrait"] .g-helper { width: auto; justify-self: stretch; } html[data-layout="tabletPortrait"] .g-stats { grid-template-columns: 1fr auto auto; align-items: center; text-align: left; gap: 1rem; } html[data-layout="tabletPortrait"] .g-helper img { width: 6rem; height: 6rem; } html[data-layout="tabletPortrait"] .g-helper .bubble { max-width: 8.5rem; font-size: .72rem; } html[data-layout="tabletPortrait"] .nextlist { flex-direction: column; align-items: center; } html[data-layout="tabletPortrait"] .g-hold { align-self: start; } html[data-layout="tabletPortrait"] .g-next { align-self: start; } html[data-layout="tabletPortrait"] .g-powers { grid-template-columns: 1fr; } html[data-layout="tabletPortrait"] .pw-row { grid-template-columns: repeat(6, 1fr); } html[data-layout="tabletPortrait"] .pw-row { grid-template-columns: repeat(6, 1fr); } html[data-layout="tabletPortrait"] .g-goal .gl-stars { grid-template-columns: repeat(3, 1fr); } html[data-layout="tabletPortrait"] .rv-board { width: 4.5rem; min-height: 0; height: 9rem; } html[data-layout="tabletPortrait"] .g-rival { grid-template-columns: auto minmax(0, 1fr); } /* ================= DESKTOP (wide/ultra) ================= */ html[data-layout="desktopUltraWide"] #scrGame { grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--vh) * .44)) minmax(0, 1fr); padding-left: 8vw; padding-right: 8vw; } html[data-layout="desktopWide"] .g-goal, html[data-layout="desktopWide"] .g-hold, html[data-layout="desktopWide"] .g-powers, html[data-layout="desktopWide"] .g-helper, html[data-layout="desktopWide"] .g-next, html[data-layout="desktopWide"] .g-stats, html[data-layout="desktopWide"] .g-rival { width: min(100%, 22rem); } /* ================= HOME en vertical ================= */ html[data-portrait="1"] #scrHome { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "logo logo" "show show" "menu menu" "daily pass" "icons icons"; gap: .5rem .6rem; padding: 0 .7rem .6rem; } html[data-portrait="1"] #scrHome .logo { max-width: 15rem; justify-self: center; } html[data-portrait="1"] .mainmenu { display: grid; grid-template-columns: 1fr 1fr; max-width: none; gap: .45rem; } html[data-portrait="1"] .mbtn { height: 2.9rem; font-size: 1.1rem; gap: .4rem; } html[data-portrait="1"] .mbtn.adv { grid-column: 1 / -1; height: 3.3rem; font-size: 1.45rem; } html[data-portrait="1"] .mbtn .mi { font-size: 1.3rem; width: 1.8rem; } html[data-portrait="1"] .h-panda { width: 7rem; left: -6rem; } html[data-portrait="1"] .h-cat { width: 6rem; right: -5.5rem; top: 2%; } html[data-portrait="1"] .h-dog { width: 6.2rem; right: -5.6rem; } html[data-portrait="1"] .card.daily { justify-self: stretch; max-width: none; grid-template-columns: auto 1fr; justify-items: start; text-align: left; padding: .45rem .7rem; } html[data-portrait="1"] .d-chest { grid-row: 1 / 3; font-size: 2rem; } html[data-portrait="1"] .d-title { font-size: .75rem; } html[data-portrait="1"] .d-time { font-size: .65rem; } html[data-portrait="1"] .card.pass { max-width: none; padding: .4rem .6rem; gap: .4rem; } html[data-portrait="1"] .p-ico { font-size: 1.5rem; } html[data-portrait="1"] .p-body b { font-size: .75rem; } html[data-portrait="1"] .p-lvl { width: 1.9rem; height: 1.9rem; font-size: .9rem; } html[data-portrait="1"] .iconrow { justify-content: space-between; } html[data-portrait="1"] .iconrow button { flex: 1; width: auto; font-size: .65rem; } html[data-portrait="1"] .iconrow button span { font-size: 1.4rem; } html[data-portrait="1"] #topbar { padding: .4rem .6rem; } html[data-layout="mobilePortrait"] .tb-profile img { width: 2.2rem; height: 2.2rem; } html[data-layout="mobilePortrait"] .tb-pinfo { min-width: 0; } html[data-layout="mobilePortrait"] .tb-pinfo b { font-size: .8rem; } html[data-layout="mobilePortrait"] .chip { height: 1.9rem; font-size: .8rem; } html[data-layout="mobilePortrait"] .chip .ico { width: 1.4rem; height: 1.4rem; font-size: .75rem; } html[data-layout="mobilePortrait"] .chip i { width: 1.25rem; height: 1.25rem; } html[data-layout="mobilePortrait"] .icbtn { width: 1.9rem; height: 1.9rem; font-size: 1rem; } html[data-layout="mobilePortrait"] .wallet { gap: .3rem; } /* ================= MAPA en vertical ================= */ html[data-portrait="1"] #scrMap { grid-template-rows: auto auto minmax(0, 1fr); } html[data-portrait="1"] .mapview { overflow-x: auto; justify-content: flex-start; padding: 0 .6rem; scroll-snap-type: x proximity; } html[data-portrait="1"] .mapinner { width: auto; height: calc(var(--vh) * .26); flex: none; } html[data-portrait="1"] .wnode .hex { font-size: .8rem; } html[data-portrait="1"] .nst { font-size: .6rem; } html[data-portrait="1"] .mapbottom { grid-template-columns: 1fr; overflow-y: auto; align-content: start; padding: .5rem .6rem 0; gap: .5rem; } html[data-portrait="1"] .worldpanel { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: .45rem .5rem; } html[data-portrait="1"] .worldpanel img { width: 4.5rem; height: 4rem; } html[data-portrait="1"] .winfo h3 { font-size: 1.05rem; } html[data-portrait="1"] .winfo p { font-size: .65rem; } html[data-portrait="1"] .hexes { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(6, 1fr); } html[data-portrait="1"] .worldpanel .wnav:last-child { grid-column: 4; grid-row: 1; } html[data-portrait="1"] .shex b { width: 100%; max-width: 3rem; } html[data-portrait="1"] .subhead h2 { font-size: 1.25rem; } html[data-portrait="1"] .btn.play { min-width: 8rem; font-size: 1.2rem; } html[data-portrait="1"] .sp-list { font-size: .65rem; } /* ================= Listas (tienda, héroes, misiones, ranking) ================= */ .list-screen { grid-template-rows: auto minmax(0, 1fr); } .scroll { overflow-y: auto; padding: 0 1rem 1rem; touch-action: pan-y; -webkit-overflow-scrolling: touch; } .sec { font-size: 1.2rem; margin: .8rem 0 .5rem; color: #cfeaff; text-shadow: 0 0 .6rem var(--cyan); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .7rem; } .card.item { display: grid; justify-items: center; gap: .3rem; padding: .8rem .6rem; text-align: center; } .it-ic { font-size: 2.4rem; } .card.item small { color: var(--muted); font-size: .72rem; } .own { font-size: .75rem; color: var(--gold); } .card.item .btn { min-height: 2.2rem; font-size: .95rem; width: 100%; } .note { color: var(--muted); font-size: .75rem; font-weight: 700; text-align: center; margin: .8rem 0; } .grid.heroes { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } .card.hero { display: grid; justify-items: center; gap: .4rem; padding: .8rem; text-align: center; border-color: var(--hc); } .card.hero.sel { box-shadow: 0 0 1.4rem var(--hc); } .card.hero img { width: 100%; max-width: 12rem; aspect-ratio: 1; object-fit: cover; border-radius: 1rem; } .card.hero h3 { font-size: 1.4rem; color: var(--hc); } .card.hero p { margin: 0; font-size: .8rem; color: #cfe0ff; font-weight: 700; } .namebox { margin-top: .8rem; padding: .7rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .namebox label { flex: 1; display: flex; gap: .6rem; align-items: center; font-size: .85rem; } .namebox input { flex: 1; min-width: 6rem; font: inherit; padding: .45rem .6rem; border-radius: .5rem; border: .1rem solid var(--pborder); background: rgba(0, 0, 0, .4); color: #fff; user-select: text; -webkit-user-select: text; } .mlist { display: grid; gap: .6rem; max-width: 46rem; margin: 0 auto; } .card.mission { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .7rem; align-items: center; padding: .6rem .8rem; } .ms-body { display: grid; gap: .35rem; } .card.mission .btn { min-height: 2.2rem; font-size: .9rem; } .card.mission.claimed { opacity: .55; } .card.mission.done { border-color: var(--gold); } .grid.stats { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } .card.stat { display: grid; gap: .1rem; padding: .8rem; } .card.stat span { font-size: 1.6rem; } .card.stat small { color: var(--muted); font-size: .72rem; } .card.stat b { font-family: var(--display); font-weight: 400; font-size: 1.5rem; } .card.stat em { font-style: normal; font-size: .72rem; color: #cfe0ff; } .toplist { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; max-width: 34rem; } .toplist li { display: flex; align-items: center; gap: .7rem; padding: .45rem .7rem; border-radius: .6rem; background: rgba(10, 18, 56, .8); border: .08rem solid rgba(90, 205, 255, .3); } .toplist .pos { font-family: var(--display); color: var(--gold); width: 2rem; } .toplist b { flex: 1; font-family: var(--display); font-weight: 400; font-size: 1.1rem; } .toplist img { width: 1.7rem; height: 1.7rem; } .toplist small { color: var(--muted); font-size: .7rem; } .toplist .empty { color: var(--muted); } .ranks { display: flex; flex-wrap: wrap; gap: .4rem; } .ranks span { padding: .35rem .7rem; border-radius: .6rem; border: .1rem solid var(--rc); font-size: .75rem; } .ranks b { color: var(--rc); margin-right: .3rem; } /* ================= Modales ================= */ .modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: calc(var(--sat) + .8rem) .8rem calc(var(--sab) + .8rem); background: rgba(3, 6, 24, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal.on { display: flex; } .mbox { position: relative; width: min(94vw, 36rem); max-height: 100%; overflow-y: auto; padding: 1.2rem; border-radius: 1.2rem; background: var(--panel); border: .15rem solid var(--pborder); box-shadow: 0 0 2.5rem rgba(40, 160, 255, .5); animation: mIn .3s cubic-bezier(.2, 1.3, .4, 1); touch-action: pan-y; } .mbox.narrow { width: min(92vw, 24rem); } @keyframes mIn { from { transform: scale(.85); opacity: 0; } } .mclose { position: absolute; top: .6rem; right: .6rem; width: 2rem; height: 2rem; border-radius: .5rem; background: rgba(255, 255, 255, .1); } .mt { font-size: 1.6rem; text-align: center; margin-bottom: .6rem; text-shadow: 0 0 1rem rgba(60, 180, 255, .7); } .mp { text-align: center; color: #cfe0ff; font-size: .85rem; margin: .3rem 0; font-weight: 700; } .mbtns { display: flex; gap: .6rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; } .mbtns.col { flex-direction: column; } .mbtns.col .btn { width: 100%; } .settings { display: grid; gap: .5rem; } .tg, .selrow { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .7rem; border-radius: .6rem; background: rgba(0, 0, 0, .3); font-size: .9rem; } .tg input { display: none; } .tg i { width: 2.8rem; height: 1.5rem; border-radius: 1rem; background: #444c6a; position: relative; transition: .2s; flex: none; } .tg i::after { content: ''; position: absolute; top: .15rem; left: .15rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; transition: .2s; } .tg input:checked + i { background: var(--green); } .tg input:checked + i::after { left: 1.45rem; } .selrow select { font: inherit; font-size: .8rem; padding: .3rem; border-radius: .4rem; background: #1a2560; color: #fff; border: .08rem solid var(--pborder); } .days { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: .45rem; } .day { position: relative; display: grid; gap: .3rem; justify-items: center; padding: .5rem .3rem; border-radius: .7rem; background: rgba(0, 0, 0, .35); border: .1rem solid rgba(255, 255, 255, .12); text-align: center; } .day small { color: var(--muted); font-size: .7rem; } .day div { display: flex; flex-wrap: wrap; gap: .2rem; justify-content: center; } .day .rw { font-size: .75rem; padding: .1rem .35rem; } .day.got { opacity: .5; } .day.got > b { position: absolute; top: .2rem; right: .4rem; color: var(--green); } .day.now { border-color: var(--gold); box-shadow: 0 0 1rem rgba(255, 200, 60, .6); animation: pop 1s infinite; } .help h4 { font-size: 1.05rem; margin: .8rem 0 .4rem; color: #cfeaff; } .hp-rule { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: center; } .hp-rule img { width: 2.4rem; height: 2.4rem; } .hp-rule > b { font-family: var(--display); font-size: 1.4rem; } .hp-rule p { flex-basis: 100%; margin: .3rem 0 0; font-size: .8rem; color: #cfe0ff; font-weight: 700; text-align: center; } .hp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .6rem; } .hp-cols div { padding: .6rem; border-radius: .7rem; background: rgba(0, 0, 0, .3); } .hp-cols ul { margin: 0; padding-left: 1rem; font-size: .75rem; font-weight: 700; color: #cfe0ff; } .hp-obs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; } .hp-obs div { display: grid; justify-items: center; gap: .15rem; text-align: center; padding: .4rem; border-radius: .6rem; background: rgba(0, 0, 0, .3); } .hp-obs img { width: 2.6rem; height: 2.6rem; } .hp-obs small { font-size: .62rem; color: var(--muted); } .hp-pw { display: flex; flex-wrap: wrap; gap: .35rem; } .hp-pw span { font-size: .72rem; padding: .25rem .5rem; border-radius: .5rem; background: rgba(0, 0, 0, .35); font-weight: 700; } html[data-layout="mobilePortrait"] .hp-cols { grid-template-columns: 1fr; } html[data-layout="mobilePortrait"] .hp-obs { grid-template-columns: repeat(2, 1fr); } /* resultados */ .res { text-align: center; } .res .big { font-size: 2.2rem; line-height: 1.05; background: linear-gradient(180deg, #fff6a0, #ffb319); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .15rem 0 #7a3000); } .res.lose .big { background: linear-gradient(180deg, #ffd0dc, #ff4a78); -webkit-background-clip: text; background-clip: text; } .res-stars { display: flex; justify-content: center; gap: .4rem; font-size: 3.4rem; line-height: 1; margin-bottom: .3rem; } .res-stars i { font-style: normal; color: rgba(255, 255, 255, .15); } .res-stars i.on { color: var(--gold); text-shadow: 0 0 1.2rem rgba(255, 200, 60, .9); animation: starIn .5s var(--d) both cubic-bezier(.2, 1.6, .4, 1); } .res-stars i:nth-child(2) { font-size: 4.2rem; margin-top: -.6rem; } @keyframes starIn { from { transform: scale(0) rotate(-90deg); opacity: 0; } } .res-emoji { font-size: 3.4rem; animation: pop 1s; } .res-rw { margin: .7rem 0; } .res-rw small { display: block; color: var(--muted); font-size: .72rem; letter-spacing: .1em; margin-bottom: .3rem; } .res-rw > div { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; } .res-obj { list-style: none; margin: .5rem auto; padding: 0; max-width: 22rem; display: grid; gap: .25rem; text-align: left; font-size: .8rem; } .res-obj li { display: flex; justify-content: space-between; padding: .35rem .6rem; border-radius: .5rem; background: rgba(0, 0, 0, .3); color: var(--muted); } .res-obj li.ok { color: #fff; } .res-obj li.ok b { color: var(--green); } .res-obj li b { color: #ff5a7a; } .res-score { font-size: .9rem; color: #cfe0ff; margin-top: .4rem; } .res-score b { font-family: var(--display); font-weight: 400; font-size: 1.6rem; color: #fff; margin-left: .3rem; } .res-vs { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: .5rem 0; } .res-vs span { display: grid; font-size: .8rem; color: var(--muted); } .res-vs span b { font-family: var(--display); font-weight: 400; font-size: 1.7rem; color: #fff; } .res-vs em { font-family: var(--display); font-style: normal; color: var(--gold); font-size: 1.4rem; } /* matchmaking */ .mm-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: .6rem 0; } .mm-p { display: grid; justify-items: center; gap: .2rem; min-width: 6rem; } .mm-p img, .mm-spin { width: 4.5rem; height: 4.5rem; border-radius: 1rem; border: .15rem solid var(--cyan); object-fit: cover; } .mm-p.rv img { border-color: var(--pink); } .mm-p b { font-family: var(--display); font-weight: 400; } .mm-p small { font-size: .72rem; } .mm-spin { display: grid; place-items: center; font-family: var(--display); font-size: 2rem; border-color: var(--pink); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .mm-vs { font-family: var(--display); font-size: 2.2rem; color: var(--gold); } /* toasts / cubos voladores */ #toasts { position: fixed; z-index: 60; left: 50%; top: calc(var(--sat) + 16vh); transform: translateX(-50%); display: grid; gap: .4rem; justify-items: center; pointer-events: none; width: max-content; max-width: 92vw; } .toast { --tc: #36d0ff; padding: .45rem 1rem; border-radius: 1rem; background: rgba(8, 14, 44, .92); border: .12rem solid var(--tc); color: #fff; font-size: .85rem; box-shadow: 0 0 1rem var(--tc); animation: tIn .3s cubic-bezier(.2, 1.4, .4, 1); transition: opacity .4s, transform .4s; text-align: center; } .toast.out { opacity: 0; transform: translateY(-.6rem); } @keyframes tIn { from { transform: scale(.6); opacity: 0; } } #fly { position: fixed; inset: 0; z-index: 40; pointer-events: none; } .flycube { position: absolute; width: 2.4rem; height: 2.4rem; filter: drop-shadow(0 0 .6rem #ff3ca8); } /* bloqueos de orientación */ .blocker { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(5, 8, 30, .96); } html[data-block="rotate"] #blockRotate, html[data-block="narrow"] #blockNarrow { display: flex; } .bl-card { max-width: 26rem; text-align: center; display: grid; gap: .6rem; justify-items: center; } .bl-card h3 { font-size: 1.3rem; } .bl-card p { margin: 0; color: var(--muted); font-size: .85rem; } .bl-phone { font-size: 3rem; animation: rot 2s ease-in-out infinite; } @keyframes rot { 50% { transform: rotate(-90deg); } } html[data-block="rotate"] { font-size: 14px; } /* splash: arte de portada vertical / horizontal a pantalla completa */ #splash { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: #0a0630; transition: opacity .5s; } #splash .sp-bg { position: absolute; inset: 0; background: #0a0630 url(../assets/sprites/splash/splashV_s.webp) center 30% / cover no-repeat; animation: spzoom 6s ease-out forwards; } @media (orientation: landscape) { #splash .sp-bg { background-image: url(../assets/sprites/splash/splashH_s.webp); background-position: center 35%; } } /* pantallas grandes o de alta densidad: versión 2× */ @media (orientation: portrait) and (min-height: 1000px), (orientation: portrait) and (min-height: 560px) and (min-resolution: 2dppx) { #splash .sp-bg { background-image: url(../assets/sprites/splash/splashV.webp); } } @media (orientation: landscape) and (min-width: 1000px), (orientation: landscape) and (min-width: 560px) and (min-resolution: 2dppx) { #splash .sp-bg { background-image: url(../assets/sprites/splash/splashH.webp); } } @keyframes spzoom { from { transform: scale(1.06); } to { transform: scale(1); } } #splash .sp-bottom { position: absolute; left: 50%; bottom: max(6vh, calc(env(safe-area-inset-bottom) + 1.2rem)); transform: translateX(-50%); display: grid; justify-items: center; gap: .45rem; width: min(78vw, 380px); } .sp-bar { width: 100%; height: 10px; border-radius: 10px; background: rgba(5, 8, 32, .7); overflow: hidden; box-shadow: 0 0 0 1px rgba(160, 220, 255, .35), 0 0 14px rgba(54, 208, 255, .45); } #splash .sp-load { color: #e6efff; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .7); } #splash .sp-ver { color: rgba(225, 235, 255, .7); font-size: 10px; letter-spacing: .08em; padding: 1px 8px; border-radius: 8px; background: rgba(5, 8, 32, .45); text-shadow: 0 1px 2px rgba(0, 0, 0, .9); } #splash::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; background: linear-gradient(to top, rgba(5, 4, 28, .75), rgba(5, 4, 28, 0)); pointer-events: none; } #splash .sp-bottom { z-index: 1; } @media (orientation: landscape) and (max-height: 500px) { #splash .sp-bottom { bottom: 4vh; gap: .3rem; width: min(50vw, 340px); } } .sp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #36d0ff, #ff3ca8); box-shadow: 0 0 8px #36d0ff; animation: load 2.5s cubic-bezier(.2,.7,.3,1) forwards; } @keyframes load { to { width: 90%; } } #splash.out { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .bg-cubes, .h-panda, .h-cat, .h-dog { animation: none !important; } } /* Panel de nivel de fusión (reemplaza a HOLD) */ .g-fuse { text-align: center; } .fu-box { display: grid; justify-items: center; padding: .35rem .2rem; border-radius: .6rem; background: radial-gradient(circle at 50% 30%, rgba(80, 255, 180, .25), rgba(0, 0, 0, .35)); } .fu-box b { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1; color: #7dffc4; text-shadow: 0 0 .8rem rgba(80, 255, 180, .8); } .fu-box small { font-size: .7rem; color: #cfe0ff; } .fu-bar { display: block; height: .45rem; margin: .35rem 0 .2rem; border-radius: 1rem; background: rgba(0, 0, 0, .45); overflow: hidden; } .fu-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #36d0ff, #4dffb8); transition: width .4s; } #fuNext { display: block; font-size: .62rem; color: var(--muted); line-height: 1.2; } .g-fuse.max .fu-bar { display: none; } .g-fuse.up { animation: pop .6s 2; border-color: #4dffb8; } html[data-layout="mobilePortrait"] .fu-box b { font-size: 1.25rem; } html[data-layout="mobilePortrait"] .fu-box small { font-size: .52rem; } html[data-layout="mobilePortrait"] #fuNext { font-size: .5rem; } .hp-fuse { display: grid; gap: .35rem; } .hp-fuse div { display: grid; gap: .1rem; padding: .45rem .6rem; border-radius: .6rem; background: rgba(0, 0, 0, .3); text-align: left; } .hp-fuse b { font-family: var(--display); font-weight: 400; color: #7dffc4; } .hp-fuse small { font-size: .72rem; color: #cfe0ff; font-weight: 700; } .hp-fuse em { font-style: normal; font-size: .62rem; color: var(--muted); } .sp-fuse { margin: 0; font-size: .72rem !important; color: #7dffc4; } /* ========================================================= ASSETS FINALES (sprites) — Partida ========================================================= */ #bg .bg-img { filter: none; inset: 0; background-size: cover; background-position: center; transition: background-image .3s; } #bg::after { background: radial-gradient(ellipse at 50% 40%, rgba(10, 16, 50, .05), rgba(4, 6, 24, .55) 80%); } html[data-screen="game"] #bg::after { background: linear-gradient(180deg, rgba(4, 8, 30, .35), rgba(4, 8, 30, .5)), radial-gradient(ellipse at 50% 45%, rgba(10, 16, 50, 0), rgba(4, 6, 24, .6) 85%); } .bg-cubes { display: none; } /* marco del Reactor Core */ .reactor { border: 1.05rem solid transparent; border-image: url(../assets/sprites/ui/frame.png) 72 / 1.05rem / .25rem stretch; border-radius: 0; background: rgba(6, 12, 40, .85); box-shadow: none; padding: .15rem; filter: drop-shadow(0 0 .9rem rgba(60, 180, 255, .45)); } .reactor::before, .reactor::after { display: none; } .reactor.alarm { filter: drop-shadow(0 0 1.3rem rgba(255, 40, 90, .9)); animation: blink .35s steps(2) infinite; } .rc-img { display: block; height: 2.2rem; width: auto; margin: -1.55rem auto .25rem; padding: 0; border: 0; background: none; filter: drop-shadow(0 0 .4rem rgba(60, 200, 255, .6)); } html[data-layout="mobilePortrait"] .rc-img { height: 1.7rem; margin: -1.25rem auto .15rem; } html[data-layout="mobilePortrait"] .reactor { border-width: .8rem; border-image-width: .8rem; padding: .1rem; } /* paneles de la partida */ #scrGame .panel { border: .9rem solid transparent; border-image: url(../assets/sprites/ui/panel_wide.png) 42 fill / .9rem stretch; background: none; box-shadow: none; border-radius: 0; filter: drop-shadow(0 0 .45rem rgba(40, 160, 255, .35)); } #scrGame .panel { padding: .1rem .15rem; } html[data-layout="mobilePortrait"] #scrGame .panel { border-width: .65rem; border-image-width: .65rem; padding: 0 .05rem; } .g-rival.alert { filter: drop-shadow(0 0 1rem rgba(255, 40, 90, .9)); box-shadow: none; } /* combo */ .st-combo { background: url(../assets/sprites/ui/combo.png) center / 100% 100% no-repeat; border: 0; padding: 1.15rem .8rem .45rem; min-width: 6.4rem; border-radius: 0; } .st-combo small { visibility: hidden; height: 0; } .st-combo em { display: none; } .st-combo b { color: #fff; text-shadow: 0 .12rem 0 #3a0a70, 0 0 .6rem #d36bff; } html[data-layout="mobilePortrait"] .st-combo { padding: .85rem .6rem .3rem; min-width: 4.4rem; } .ic { height: 1.15em; width: auto; vertical-align: -.22em; margin-right: .2em; } .st-best { display: inline-flex; align-items: center; justify-content: center; gap: .15rem; } .gl-ico { width: 1.3rem; height: 1.3rem; } .charge span { display: inline-flex; align-items: center; } /* poderes con sprites */ .pw { background: none; border: 0; box-shadow: none; min-height: 0; padding: 0; aspect-ratio: 1.05; } .pw-img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .45)); } .pw.armed { box-shadow: none; animation: pop .6s infinite; } .pw em { top: -.15rem; right: -.1rem; background: url(../assets/sprites/icons/badge.png) center / contain no-repeat; border: 0; min-width: 1.5rem; height: 1.5rem; font-family: var(--display); font-weight: 400; text-shadow: 0 .08rem 0 rgba(0,0,0,.5); } .pw.empty { opacity: 1; } .pw.empty em { filter: grayscale(1); } .pw kbd { top: .25rem; left: .3rem; opacity: .8; } .g-powers .pw-row { gap: .5rem; } html[data-layout="mobilePortrait"] .pw-row { gap: .3rem; } html[data-layout="mobilePortrait"] .pw { aspect-ratio: auto; height: 3.9rem; } html[data-layout="mobilePortrait"] .pw em { min-width: 1.2rem; height: 1.2rem; font-size: .65rem; } html[data-layout="tabletPortrait"] .pw { aspect-ratio: auto; height: 5rem; } /* controles táctiles con sprites */ .tc { background: none !important; border: 0; padding: 0; display: grid; place-items: center; } .tc img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 .15rem .3rem rgba(0, 0, 0, .5)); } /* barra superior de partida */ .pausebtn { background: none; border: 0; padding: 0; } .pausebtn img { width: 100%; height: 100%; object-fit: contain; } .gt-player img.framed { border: 0; border-radius: 0; width: 2.8rem; height: 2.8rem; } .chip .ico { background: none !important; object-fit: contain; } /* ayudante: poses de Pando */ .g-helper.posed img { width: auto; height: 9rem; border: 0; border-radius: 0; box-shadow: none; object-fit: contain; filter: drop-shadow(0 .4rem .8rem rgba(0, 0, 0, .5)); animation: bob 3s ease-in-out infinite; } .g-helper.posed img.pop { animation: poseIn .35s cubic-bezier(.2, 1.5, .4, 1), bob 3s ease-in-out .35s infinite; } @keyframes poseIn { from { transform: scale(.7) translateY(.6rem); opacity: .3; } } .g-helper.posed .bubble { bottom: 9.6rem; } html[data-layout="mobilePortrait"] .g-helper.posed img { height: 5.6rem; } html[data-layout="mobilePortrait"] .g-helper.posed .bubble { bottom: 5.9rem; } html[data-layout="tabletPortrait"] .g-helper.posed img { height: 8rem; } html[data-layout="tabletPortrait"] .g-helper.posed .bubble { bottom: 8.4rem; } /* combo pop con estilo del asset */ .combo-pop b { background: linear-gradient(180deg, #fffbd0 10%, #ffd23f 50%, #ff9a1a 90%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; filter: drop-shadow(0 .14rem 0 #8a3a00) drop-shadow(0 0 .7rem rgba(255, 170, 40, .9)); } .combo-pop small { background: linear-gradient(180deg, #ffffff, #8fd0ff 50%, #b36bff); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.15rem; filter: drop-shadow(0 .1rem 0 #1a1060) drop-shadow(0 0 .5rem #36d0ff); } /* héroes: tarjeta con pose transparente */ .card.hero img { object-fit: contain; } /* ajustes de proporción de assets */ .pw-row { grid-template-columns: repeat(3, 1fr); } /* 6 poderes siempre visibles: 2 filas de 3 */ .st-combo { width: 7.6rem; aspect-ratio: 356 / 184; min-width: 0; margin: 0 auto; padding: 1.25rem 0 0; display: grid; place-items: center; } .st-combo b { font-size: 1.8rem; line-height: 1; } html[data-layout="mobilePortrait"] .st-combo { width: 4.9rem; padding: .78rem 0 0; } html[data-layout="mobilePortrait"] .st-combo b { font-size: 1.15rem; } html[data-layout="tabletPortrait"] .st-combo { width: 6.6rem; padding-top: 1.05rem; } /* controles: una fila de botones cuadrados (sprites) */ .g-ctrl { grid-template-columns: repeat(2, minmax(0, 1fr)) .35fr repeat(3, minmax(0, 1fr)) !important; grid-template-rows: auto !important; grid-template-areas: "left right . rot drop soft" !important; gap: .45rem; justify-items: center; } .tc { width: 100%; max-width: 5.2rem; aspect-ratio: 1; min-height: 0; height: auto; } .tc-soft { display: grid !important; } html[data-layout="mobilePortrait"] .tc { max-width: 3.6rem; } .pw-img { position: absolute; inset: 0; width: 100%; height: 100%; } .tc { position: relative; } .tc img { position: absolute; inset: 0; } .pausebtn { position: relative; } .pausebtn img { position: absolute; inset: 0; } /* pantallas muy pequeñas (≤ 360×560): se compacta todo lo secundario para dar espacio al tablero */ html[data-tiny="1"] .st-stage, html[data-tiny="1"] .gl-stars, html[data-tiny="1"] #fuNext, html[data-tiny="1"] .fu-bar, html[data-tiny="1"] .g-fuse h4 { display: none; } html[data-tiny="1"] .g-goal .gl-bar { height: .7rem; } html[data-tiny="1"] #scrGame .pw { height: 3.2rem; } html[data-tiny="1"] .tc { max-width: 3rem; } html[data-tiny="1"] .g-helper.posed img { height: 4.2rem; } html[data-tiny="1"] .g-helper.posed .bubble { bottom: 4.4rem; } /* ayudante adaptable al espacio disponible (landscape / desktop) */ html:not([data-layout="mobilePortrait"]) .g-helper.posed { align-self: stretch; } html:not([data-layout="mobilePortrait"]) .g-helper.posed img { position: absolute; bottom: 0; left: 50%; margin-left: 0; translate: -50% 0; height: min(10rem, calc(100% - 3.6rem)); } html:not([data-layout="mobilePortrait"]) .g-helper.posed .bubble { top: 0; bottom: auto; } /* ===== Piezas del catálogo (mini rejilla) ===== */ .pc { --pcs: 3.2rem; display: grid; gap: 0; justify-content: center; align-content: center; } .pc i { display: block; font-style: normal; } .pc img { width: 100%; height: 100%; display: block; margin: 0; } .pc.locked { filter: grayscale(1) brightness(.6); } .nextlist .pc:first-child { --pcs: 4.6rem; } .nextlist .pc:not(:first-child) { --pcs: 3.2rem; } .nextlist .pc:first-child img, .nextlist .pc:not(:first-child) img { width: 100%; height: 100%; } html[data-layout="mobilePortrait"] .nextlist .pc:first-child { --pcs: 3.6rem; } html[data-layout="mobilePortrait"] .nextlist .pc:not(:first-child) { --pcs: 2.7rem; } html[data-layout="tabletPortrait"] .nextlist .pc:first-child { --pcs: 5.4rem; } html[data-layout="tabletPortrait"] .nextlist .pc:not(:first-child) { --pcs: 3.8rem; } .hp-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: .4rem; } .hp-pieces > div { display: grid; justify-items: center; gap: .15rem; padding: .45rem .2rem; border-radius: .6rem; background: rgba(0, 0, 0, .3); text-align: center; } .hp-pieces .pc { --pcs: 3rem; height: 3rem; } .hp-pieces b { font-size: .72rem; } .hp-pieces small { font-size: .58rem; color: var(--muted); } .hp-pieces .lk b { color: var(--muted); } .sp-new { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .3rem .5rem; border-radius: .5rem; background: rgba(255, 200, 60, .12); border: .08rem solid rgba(255, 200, 60, .5); } .sp-new small { width: 100%; color: #ffd84d !important; } .sp-new span { display: flex; align-items: center; gap: .35rem; font-size: .8rem; } .sp-new .pc { --pcs: 2.2rem; } .nextlist .pc:not(:first-child) { opacity: .75; } /* Arcade: aviso de oleada */ .g-goal.hot { filter: drop-shadow(0 0 .8rem rgba(255, 120, 40, .9)); } .g-goal.hot #glText { color: #ffb36b; } /* Ranking mundial */ .tabs { display: flex; gap: .5rem; margin: .2rem 0 .6rem; } .tabs button { flex: 1; padding: .55rem; border-radius: .7rem; font-family: var(--display); font-size: 1rem; background: rgba(8, 14, 44, .85); border: .1rem solid rgba(120, 180, 255, .4); } .tabs button.on { background: linear-gradient(180deg, #ffd650, #ff9f1a); color: #3b1d00; border-color: #fff3; } .toplist.world { max-width: 42rem; } .toplist .nm { flex: 1; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toplist.world b { flex: none; min-width: 6rem; text-align: right; } .toplist li.me { border-color: var(--gold); background: rgba(255, 200, 60, .15); } .toplist li.sep { margin-top: .6rem; } .world-pos { margin: .5rem auto; padding: .45rem .8rem; border-radius: .7rem; background: rgba(0, 0, 0, .35); font-size: .85rem; color: #cfe0ff; max-width: 24rem; } .world-pos.ok { border: .1rem solid var(--gold); color: #fff; } .world-pos b { color: var(--gold); font-family: var(--display); font-weight: 400; font-size: 1.1rem; } /* ============ LAYOUTS MÓVIL ALTERNATIVOS (data-mlay 1..7) ============ */ .g-charge { display: none; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) { gap: .3rem; padding: .25rem .35rem .35rem; grid-template-columns: minmax(0, 1fr) 3.9rem minmax(0, 1fr) 5.2rem; grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto; grid-template-areas: "top top top top" "goal charge stats stats" "board board board next" "board board board fuse" "board board board powers" "board board board helper" "ctrl ctrl ctrl ctrl"; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .g-fuse { grid-area: fuse; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .g-helper { grid-area: helper; align-self: end; justify-self: center; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .g-next { align-self: start; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .g-board { justify-content: center; } /* HUD: objetivo | círculo | score+combo */ html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .g-charge { grid-area: charge; display: grid; place-items: center; } .gc-ring { --s: 3.7rem; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(#36d0ff calc(var(--p, 0) * 1%), rgba(10, 20, 60, .9) 0); box-shadow: 0 0 .7rem rgba(54, 208, 255, .6), inset 0 0 0 .12rem rgba(160, 230, 255, .6); } .gc-ring::before { content: ''; position: absolute; inset: .3rem; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #1d2c70, #0a1236); box-shadow: inset 0 0 .5rem rgba(0, 0, 0, .7); } .gc-ring img { position: relative; width: 45%; margin-top: -.5rem; filter: drop-shadow(0 0 .3rem #ffd23f); } .gc-ring b { position: absolute; bottom: .55rem; font-family: var(--display); font-weight: 400; font-size: .7rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .g-powers .charge { display: none; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .g-goal { align-self: stretch; padding: .1rem .15rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .gl-head { font-size: .6rem; line-height: 1.15; gap: .25rem; align-items: flex-start; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .gl-ico { width: .95rem; height: .95rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .gl-tog { display: none; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .g-goal .gl-bar { display: block !important; height: .75rem; margin-top: .25rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .gl-bar s { font-size: .55rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .g-stats { grid-template-columns: 1fr auto; gap: .3rem; padding: .1rem .15rem; align-self: stretch; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .st-stage { display: none; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .st-score b { font-size: 1.3rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .st-best { font-size: .55rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .st-combo { width: 4rem; padding-top: .62rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .st-combo b { font-size: 1rem; } /* columna derecha */ html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .g-next h4, html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .g-fuse h4 { font-size: .6rem; margin-bottom: .1rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .nextlist { padding: .2rem; min-height: 0; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .nextlist .pc:first-child { --pcs: 2.9rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .fu-box { padding: .1rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .fu-box b { font-size: 1rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .fu-box small { font-size: .45rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) #fuNext { font-size: .42rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .fu-bar { margin: .15rem 0 .1rem; height: .3rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .g-powers { align-self: start; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .pw-row { grid-template-columns: 1fr; gap: .35rem; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .pw { height: auto; aspect-ratio: 1.05; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .g-helper { display: none; } html[data-layout="mobilePortrait"]:not([data-mlay="0"]) #scrGame:not([data-mode="arena"]) .rc-img { height: 1.5rem; margin: -1.15rem auto .1rem; } /* 2 · Pando mini abajo a la derecha */ html[data-layout="mobilePortrait"][data-mlay="2"] #scrGame:not([data-mode="arena"]) .g-helper, html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame:not([data-mode="arena"]) .g-helper { display: flex; } html[data-layout="mobilePortrait"][data-mlay="2"] #scrGame .g-helper.posed img, html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame .g-helper.posed img { height: 4.3rem; } html[data-layout="mobilePortrait"][data-mlay="2"] #scrGame .g-helper .bubble, html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame .g-helper .bubble { left: auto; right: 0; transform: none; width: 8rem; bottom: 4.5rem; font-size: .6rem; } /* 3, 5, 6, 7 · poderes circulares (columna más angosta) */ html[data-layout="mobilePortrait"][data-mlay="3"] #scrGame:not([data-mode="arena"]), html[data-layout="mobilePortrait"][data-mlay="5"] #scrGame:not([data-mode="arena"]), html[data-layout="mobilePortrait"][data-mlay="6"] #scrGame:not([data-mode="arena"]), html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame:not([data-mode="arena"]) { grid-template-columns: minmax(0, 1fr) 3.9rem minmax(0, 1fr) 4.3rem; } html[data-layout="mobilePortrait"]:is([data-mlay="3"],[data-mlay="5"],[data-mlay="6"],[data-mlay="7"]) #scrGame:not([data-mode="arena"]) .pw { aspect-ratio: 1 !important; border-radius: 50%; } html[data-layout="mobilePortrait"]:is([data-mlay="3"],[data-mlay="5"],[data-mlay="6"],[data-mlay="7"]) #scrGame:not([data-mode="arena"]) .pw-img { border-radius: 50%; filter: drop-shadow(0 0 .35rem rgba(54, 208, 255, .6)); } html[data-layout="mobilePortrait"]:is([data-mlay="3"],[data-mlay="5"],[data-mlay="6"],[data-mlay="7"]) #scrGame .pw.armed .pw-img { filter: drop-shadow(0 0 .6rem #ffcf33) brightness(1.2); } html[data-layout="mobilePortrait"]:is([data-mlay="3"],[data-mlay="5"],[data-mlay="6"],[data-mlay="7"]) #scrGame .pw.empty .pw-img { filter: grayscale(1) brightness(.6); } html[data-layout="mobilePortrait"]:is([data-mlay="3"],[data-mlay="5"],[data-mlay="6"],[data-mlay="7"]) #scrGame .pw em { top: -.2rem; right: -.2rem; } /* 4, 7 · HUD delgado en una línea */ html[data-layout="mobilePortrait"][data-mlay="4"] #scrGame .gc-ring, html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame .gc-ring { --s: 2.9rem; } html[data-layout="mobilePortrait"][data-mlay="4"] #scrGame .gc-ring b, html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame .gc-ring b { font-size: .55rem; bottom: .38rem; } html[data-layout="mobilePortrait"][data-mlay="4"] #scrGame:not([data-mode="arena"]), html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame:not([data-mode="arena"]) { grid-template-columns: minmax(0, 1fr) 3.1rem minmax(0, 1fr) 4.9rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame:not([data-mode="arena"]) { grid-template-columns: minmax(0, 1fr) 3.1rem minmax(0, 1fr) 4.3rem; } html[data-mlay="4"] #scrGame .g-goal .gl-head b, html[data-mlay="7"] #scrGame .g-goal .gl-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-mlay="4"] #scrGame .g-goal .gl-bar, html[data-mlay="7"] #scrGame .g-goal .gl-bar { height: .55rem; margin-top: .15rem; } html[data-mlay="4"] #scrGame .st-best, html[data-mlay="7"] #scrGame .st-best { display: none; } html[data-mlay="4"] #scrGame .st-score b, html[data-mlay="7"] #scrGame .st-score b { font-size: 1.1rem; } html[data-mlay="4"] #scrGame .st-combo, html[data-mlay="7"] #scrGame .st-combo { width: 3.3rem; padding-top: .5rem; } html[data-mlay="4"] #scrGame .st-combo b, html[data-mlay="7"] #scrGame .st-combo b { font-size: .85rem; } /* 5 · sin botones táctiles (sólo gestos): tablero máximo */ html[data-layout="mobilePortrait"][data-mlay="5"] #scrGame .g-ctrl { display: none !important; } /* 6, 7 · controles compactos */ html[data-layout="mobilePortrait"][data-mlay="6"] #scrGame .tc, html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame .tc { max-width: 2.7rem; } html[data-layout="mobilePortrait"][data-mlay="6"] #scrGame .g-ctrl, html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame .g-ctrl { gap: .2rem; } /* ===== Arena en móvil con el diseño de la opción 7 ===== */ html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] { gap: .3rem; padding: .25rem .35rem .35rem; grid-template-columns: minmax(0, 1fr) 3.1rem minmax(0, 1fr) 4.3rem; grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto; grid-template-areas: "top top top top" "rival rival rival charge" "board board board next" "board board board fuse" "board board board powers" "board board board helper" "ctrl ctrl ctrl ctrl"; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-charge { grid-area: charge; display: grid; place-items: center; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .gc-ring { --s: 3.3rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .gc-ring b { font-size: .55rem; bottom: .45rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-powers .charge, html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-goal, html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-stats { display: none; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-fuse { grid-area: fuse; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-next { align-self: start; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-helper { grid-area: helper; display: flex; align-self: end; justify-self: center; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-helper.posed img { height: 4.3rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-helper .bubble { left: auto; right: 0; transform: none; width: 8rem; bottom: 4.5rem; font-size: .6rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-next h4, html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-fuse h4 { font-size: .6rem; margin-bottom: .1rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .nextlist { padding: .2rem; min-height: 0; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .nextlist .pc:first-child { --pcs: 2.9rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .fu-box { padding: .1rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .fu-box b { font-size: 1rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .fu-box small { font-size: .45rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] #fuNext { font-size: .42rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .fu-bar { margin: .15rem 0 .1rem; height: .3rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-powers { align-self: start; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .pw-row { grid-template-columns: 1fr; gap: .35rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .pw { height: auto; aspect-ratio: 1 !important; border-radius: 50%; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .pw-img { border-radius: 50%; filter: drop-shadow(0 0 .35rem rgba(54, 208, 255, .6)); } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rc-img { height: 1.5rem; margin: -1.15rem auto .1rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .tc { max-width: 2.7rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-ctrl { gap: .2rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-rival { padding: .1rem .2rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-board { height: 8.6rem; width: 3.9rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-board { justify-content: center; } /* ===== Pantalla de actualización (assets finales) ===== */ #updScreen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: url(../assets/sprites/bg/bgV_1.webp) center / cover no-repeat, #050820; font-family: var(--body); } @media (orientation: landscape) { #updScreen { background-image: url(../assets/sprites/bg/bgH_1.webp); } } #updScreen::before { content: ''; position: fixed; inset: 0; background: rgba(4, 8, 30, .55); } .up-card { position: relative; width: min(94vw, 460px); padding: 30px 26px 22px; display: grid; justify-items: center; gap: 12px; text-align: center; color: #eaf4ff; border: 44px solid transparent; border-image: url(../assets/sprites/update/panel.png) 120 fill / 44px / 14px stretch; } .up-card > * { position: relative; } .up-card { margin: -44px; padding: 8px 6px 4px; } .up-logo { width: min(78%, 300px); height: auto; filter: drop-shadow(0 0 14px rgba(60, 180, 255, .6)); margin-top: -6px; } .up-title { width: min(90%, 330px); height: auto; } .up-text { width: min(96%, 360px); height: auto; } .up-ver { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; } .up-box { width: 34%; aspect-ratio: 447 / 353; display: grid; align-content: center; justify-items: center; background: url(../assets/sprites/update/ver_box.png) center / 100% 100% no-repeat; } .up-box.new { background-image: url(../assets/sprites/update/ver_box_new.png); } .up-box span { font: 900 clamp(12px, 3.6vw, 17px) var(--body); color: #dbe8ff; margin-top: 6%; } .up-box b { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 7.2vw, 34px); line-height: 1.05; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); } .up-box.new b { color: #3fffb4; text-shadow: 0 2px 0 rgba(0, 60, 40, .7), 0 0 10px rgba(63, 255, 180, .6); } .up-arrow { width: 16%; height: auto; } .up-notes { list-style: none; margin: 0; width: 100%; padding: 22px 24px; display: grid; gap: 6px; text-align: left; background: url(../assets/sprites/update/notes_panel.png) center / 100% 100% no-repeat; } .up-notes li { display: flex; align-items: center; gap: 10px; font: 900 clamp(13px, 3.7vw, 16px) var(--body); color: #eef4ff; } .up-notes li::before { content: ''; flex: none; width: 14px; height: 14px; background: url(../assets/sprites/update/bullet.png) center / contain no-repeat; } .up-btn, .up-link { background: none; border: 0; padding: 0; cursor: pointer; width: 100%; } .up-btn img { width: 100%; height: auto; display: block; animation: pop 1.3s ease-in-out infinite; } .up-btn:active img { transform: translateY(3px) scale(.98); animation: none; } .up-link img { width: min(78%, 300px); height: auto; } .up-later { background: none; border: 0; color: #9fb3e0; font: 800 14px var(--body); text-decoration: underline; cursor: pointer; } .up-build { color: #7f93c8; font: 800 11px var(--body); padding: 4px 10px; border-radius: 8px; background: rgba(10, 18, 60, .7); } .up-spin { width: 50px; height: 50px; border: 5px solid #36d0ff; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; margin: 10px 0; } .up-msg { margin: 0 0 10px; font: 900 16px var(--body); color: #cfe0ff; } .up-card { margin: 0; width: min(100%, 460px); box-sizing: border-box; border-width: 34px; border-image-width: 34px; padding: 4px 2px 2px; } @media (max-width: 360px) { .up-card { border-width: 24px; border-image-width: 24px; gap: 9px; } .up-notes { padding: 16px 16px; } } .up-build { white-space: nowrap; font-size: 10px; } /* ===== Obstáculos: presentación, ayuda, mapa página 2 ===== */ canvas.cubetag { width: 2.6rem; height: 2.6rem; display: inline-block; vertical-align: middle; } .obintro { display: grid; justify-items: center; gap: .5rem; text-align: center; } .ob-tag { font-family: var(--display); font-size: .9rem; letter-spacing: .06em; color: #ffb84d; padding: .2rem .8rem; border-radius: 1rem; background: rgba(255, 140, 40, .15); border: .08rem solid rgba(255, 170, 60, .6); } .ob-hero canvas.cubetag { width: 5.4rem; height: 5.4rem; filter: drop-shadow(0 0 .9rem rgba(80, 200, 255, .6)); animation: bob 2.4s ease-in-out infinite; } .obintro .mt { margin: 0; } .ob-how { margin: 0; font-size: .92rem; color: #eaf4ff; line-height: 1.35; } .ob-ex { width: 100%; padding: .6rem; border-radius: .8rem; background: rgba(0, 0, 0, .35); border: .08rem solid rgba(90, 205, 255, .35); display: grid; gap: .35rem; } .ob-ex > small { font-family: var(--display); color: #7dffc4; letter-spacing: .1em; } .ob-ex p { margin: 0; font-size: .8rem; color: #cfe0ff; } .ob-demo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem; } .ob-demo canvas.cubetag { width: 2.5rem; height: 2.5rem; } .ob-demo b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; color: #ffd23f; padding: 0 .1rem; } .hp-obs { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)) !important; } .hp-obs small { font-size: .6rem !important; line-height: 1.25; } .sp-mini canvas.cubetag { width: 1.9rem; height: 1.9rem; } .sp-obs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; } .sp-obs small { width: 100%; color: var(--muted); font-size: .7rem; } .sp-obs canvas.cubetag { width: 1.8rem; height: 1.8rem; } .mapinner.page2 img { object-fit: cover; object-position: 50% 60%; filter: saturate(1.2) brightness(.85); } .mapinner.page2::after { content: ''; position: absolute; left: 8%; right: 8%; top: 62%; height: .35rem; border-radius: 1rem; background: linear-gradient(90deg, #9fb4c8, #6dff5a, #ff5a8a, #ffd23f, #b36bff); box-shadow: 0 0 1rem rgba(180, 120, 255, .8); opacity: .8; } .mapinner .wnode { z-index: 1; } #wThumb.p2 { filter: saturate(1.2); } .wlabel.p2 { font-size: clamp(.45rem, .75vw, .85rem); background: rgba(40, 20, 90, .85); border-color: var(--wc); } /* 6 poderes en la columna derecha del móvil: el tamaño se calcula (UI.fit) para que quepan siempre */ html[data-layout="mobilePortrait"] #pwRow[style*="--pws"] { justify-items: center; position: relative; z-index: 3; } html[data-layout="mobilePortrait"] #pwRow[style*="--pws"] .pw { width: var(--pws) !important; height: var(--pws) !important; min-height: 0 !important; aspect-ratio: 1 !important; } html[data-layout="mobilePortrait"] #pwRow[style*="--pws"] .pw em { transform: scale(.85); transform-origin: top right; } /* mientras se anima un poder (explosión, fusiones) los botones esperan */ #pwRow.busy .pw { filter: saturate(.55) brightness(.8); transition: filter .15s; } #pwRow .pw { transition: filter .15s; } /* poder ganado volando hacia su botón */ .pw-fly { position: fixed; z-index: 60; pointer-events: none; will-change: transform, opacity; } .pw-fly img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 0 .6rem #ffd84d) drop-shadow(0 0 1.2rem rgba(54, 208, 255, .8)); } .pw-fly-glow { position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 160, .85) 0, rgba(255, 200, 60, .35) 35%, rgba(54, 208, 255, 0) 70%); animation: pwglow .5s ease-in-out infinite alternate; } @keyframes pwglow { from { transform: scale(.85); opacity: .7; } to { transform: scale(1.1); opacity: 1; } } .pw.got { animation: pwgot .55s cubic-bezier(.3, 1.6, .5, 1); } .pw.got .pw-img { filter: drop-shadow(0 0 .8rem #ffd84d) brightness(1.35) !important; } @keyframes pwgot { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } } .pw-plus { position: fixed; z-index: 61; pointer-events: none; transform: translate(-50%, -60%); font-family: var(--display); font-size: 1.3rem; color: #fff4a8; text-shadow: 0 .12rem 0 #8a3a00, 0 0 .6rem #ffb82e; animation: pwplus .9s ease-out forwards; } @keyframes pwplus { from { opacity: 1; transform: translate(-50%, -60%) scale(.7); } 30% { transform: translate(-50%, -110%) scale(1.15); } to { opacity: 0; transform: translate(-50%, -190%) scale(1); } } /* ===== Arena: poderes de ataque y defensa ===== */ .apw { position: relative; display: grid; place-items: center; } .apw::before { content: ''; position: absolute; inset: 5%; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 32%), radial-gradient(circle at 50% 58%, var(--c1), var(--c2) 78%); box-shadow: inset 0 0 0 .16rem rgba(255, 255, 255, .45), inset 0 -.35rem .6rem rgba(0, 0, 0, .35), 0 0 .8rem var(--c1); } .apw .apw-ic { position: relative; z-index: 1; width: 58%; height: 58%; margin-top: -8%; filter: drop-shadow(0 .12rem .15rem rgba(0, 0, 0, .55)); } .apw .apw-name { position: absolute; z-index: 2; left: 0; right: 0; bottom: 9%; text-align: center; font-family: var(--display); font-weight: 400; font-size: .72rem; line-height: 1; color: #fff; text-shadow: 0 .08rem 0 rgba(0, 0, 0, .8), 0 0 .3rem rgba(0, 0, 0, .8); } .apw .apw-tag { position: absolute; z-index: 2; top: 2%; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .5rem; font-weight: 800; letter-spacing: .05em; padding: .05rem .35rem; border-radius: .5rem; color: #fff; background: rgba(160, 20, 40, .85); } .apw.def .apw-tag { background: rgba(10, 120, 80, .9); } .apw.empty::before { filter: grayscale(1) brightness(.55); } .apw.empty .apw-ic { filter: grayscale(1) brightness(.7); } .apw.got { animation: pwgot .55s cubic-bezier(.3, 1.6, .5, 1); } html[data-layout="mobilePortrait"] .apw .apw-name, html[data-layout="mobilePortrait"] .apw .apw-tag { display: none; } html[data-layout="mobilePortrait"] .apw .apw-ic { margin-top: 0; } html[data-layout="mobilePortrait"] .apw.def::before { box-shadow: inset 0 0 0 .16rem rgba(255, 255, 255, .45), 0 0 0 .14rem #4dffb8, 0 0 .8rem var(--c1); } .apw-disc { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 32%), radial-gradient(circle at 50% 58%, var(--c1), var(--c2) 78%); box-shadow: inset 0 0 0 .16rem rgba(255, 255, 255, .5), 0 0 1rem var(--c1); } .apw-disc .apw-ic { width: 62%; height: 62%; filter: drop-shadow(0 .12rem .15rem rgba(0, 0, 0, .55)); } .pw-fly .apw-disc { position: absolute; inset: 0; } /* aviso: el rival lanza un poder (color del poder) */ .ap-warn { position: absolute; z-index: 20; left: 50%; top: 16%; transform: translateX(-50%); display: flex; align-items: center; gap: .6rem; min-width: 70%; padding: .45rem .8rem .45rem .45rem; border-radius: 1rem; background: linear-gradient(135deg, rgba(10, 12, 40, .92), rgba(10, 12, 40, .8)); border: .16rem solid var(--c1); box-shadow: 0 0 1.2rem var(--c1), inset 0 0 1rem color-mix(in srgb, var(--c1) 35%, transparent); animation: apwarn 1.7s ease both; pointer-events: none; } .ap-warn .apw-disc { width: 2.8rem; height: 2.8rem; flex: none; animation: pwglow .35s ease-in-out infinite alternate; } .ap-warn small { display: block; font-size: .62rem; font-weight: 800; color: #ffd0d8; letter-spacing: .03em; } .ap-warn b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--c1); text-shadow: 0 .1rem 0 rgba(0, 0, 0, .7); } @keyframes apwarn { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 20% { transform: translate(-50%, 0) scale(1); } 30%, 50%, 70% { transform: translate(-50%, 0) rotate(-1.5deg); } 40%, 60% { transform: translate(-50%, 0) rotate(1.5deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -20%) scale(.95); } } /* estados: escudo y turbo (jugador y rival) */ .reactor.shielded::after { display: block !important; content: ''; position: absolute; inset: -.35rem; top: -.35rem; bottom: -.35rem; width: auto; left: -.35rem; right: -.35rem; background: none; border-radius: .7rem; border: .2rem solid #4dffb8; box-shadow: 0 0 1.2rem #4dffb8, inset 0 0 1.4rem rgba(77, 255, 184, .45); animation: pwglow .9s ease-in-out infinite alternate; pointer-events: none; z-index: 5; } .reactor.turboed::before { display: block !important; content: '⚡ TURBO'; position: absolute; top: auto; bottom: .5rem; left: 50%; right: auto; width: auto; transform: translateX(-50%); z-index: 6; padding: .15rem .6rem; border-radius: .6rem; background: rgba(40, 20, 0, .8); border: .12rem solid #ffd23f; color: #ffd23f; font-family: var(--display); font-size: .8rem; box-shadow: 0 0 .8rem #ffd23f; animation: pwglow .4s ease-in-out infinite alternate; pointer-events: none; } .rv-board.shielded { box-shadow: 0 0 0 .14rem #4dffb8, 0 0 .9rem #4dffb8; } .rv-board.turboed { box-shadow: 0 0 0 .14rem #ffd23f, 0 0 .9rem #ffd23f; } .rv-board.rv-pw { animation: rvpw .9s ease; } @keyframes rvpw { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 .2rem var(--pc), 0 0 1.4rem var(--pc); } } /* Arena en PC / tablet horizontal: el tablero del rival más grande para ver su pieza moverse */ html:not([data-layout="mobilePortrait"]):not([data-layout="tabletPortrait"]) #scrGame[data-mode="arena"] { grid-template-areas: "top top top" "hold board next" "powers board rival" "helper board rival" "helper board rival" "status status status"; } html:not([data-layout="mobilePortrait"]):not([data-layout="tabletPortrait"]) #scrGame[data-mode="arena"] .g-stats { display: none; } html:not([data-layout="mobilePortrait"]):not([data-layout="tabletPortrait"]) #scrGame[data-mode="arena"] .g-rival { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 0; } html:not([data-layout="mobilePortrait"]):not([data-layout="tabletPortrait"]) #scrGame[data-mode="arena"] .rv-board { width: auto; min-height: 0; height: 100%; } /* iconos de Arena en los círculos del celular */ .apw .apw-ic { position: absolute; left: 21%; top: 17%; width: 58%; height: 58%; margin: 0; } html[data-layout="mobilePortrait"] .apw .apw-ic { top: 21%; } /* ===== Arena estilo pelea: barra de vida, rounds y cronómetro 99 ===== */ #scrGame[data-mode="arena"] .g-top { gap: .4rem; align-items: center; } .sf-side { flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; } .sf-side.rv { flex-direction: row; justify-content: flex-end; } .sf-side img { width: 2.6rem; height: 2.6rem; border-radius: .6rem; object-fit: cover; border: .12rem solid #fff; flex: none; box-shadow: 0 0 .6rem rgba(0, 0, 0, .6); } .sf-side.me img { border-color: #6fd0ff; } .sf-side.rv img { border-color: #ff7aa8; } .sf-info { flex: 1; min-width: 0; display: grid; gap: .15rem; } .sf-name { display: flex; align-items: center; gap: .35rem; min-width: 0; } .sf-side.rv .sf-name { justify-content: flex-end; } .sf-name b { font-family: var(--display), system-ui, sans-serif; font-weight: 400; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .08rem 0 rgba(0, 0, 0, .7); } .intl { font-family: var(--display), "Noto Sans", "Noto Sans CJK JP", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans Thai", "Hiragino Sans", "Yu Gothic", "Malgun Gothic", "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, sans-serif !important; unicode-bidi: plaintext; } .sf-wins { display: flex; gap: .2rem; flex: none; } .sf-wins s { width: .7rem; height: .7rem; border-radius: 50%; background: rgba(0, 0, 0, .55); border: .1rem solid rgba(255, 255, 255, .5); } .sf-wins s.on { background: radial-gradient(circle at 35% 30%, #fff8c0, #ffd23f 45%, #d87a0a); border-color: #fff3a0; box-shadow: 0 0 .5rem #ffd23f; } .sf-hp { --hp: 100%; position: relative; height: .95rem; border-radius: .25rem; background: #3a0a14; border: .12rem solid #fff; box-shadow: 0 0 0 .1rem rgba(0, 0, 0, .6), 0 .15rem .4rem rgba(0, 0, 0, .5); overflow: hidden; transform: skewX(-14deg); } .sf-side.rv .sf-hp { transform: skewX(14deg); } .sf-hp i { position: absolute; top: 0; bottom: 0; left: 0; width: var(--hp); } .sf-side.rv .sf-hp i { left: auto; right: 0; } .sf-hp .lag { background: #ff3a3a; transition: width .9s ease .35s; } .sf-hp .fill { background: linear-gradient(180deg, #fff9b0, #ffd23f 45%, #e8a008); transition: width .18s ease-out; box-shadow: inset 0 -.15rem 0 rgba(0, 0, 0, .15); } .sf-hp.low .fill { background: linear-gradient(180deg, #ffb0a0, #ff5a3a 45%, #c8200a); animation: pwglow .4s ease-in-out infinite alternate; } .sf-hp.hit { animation: hpHit .35s ease; } @keyframes hpHit { 0%, 100% { filter: none; } 30% { filter: brightness(2.2); } } .sf-pts { font-size: .6rem; color: #cfe0ff; font-weight: 700; } .sf-side.rv .sf-pts { text-align: right; } .sf-pts span { font-family: var(--display); font-weight: 400; font-size: .75rem; color: #fff; } .sf-mid { flex: none; display: grid; justify-items: center; line-height: 1; padding: .15rem .45rem .2rem; border-radius: .6rem; background: rgba(0, 0, 0, .6); border: .12rem solid rgba(255, 210, 63, .8); box-shadow: 0 0 .8rem rgba(255, 180, 40, .45); } .sf-mid b { font-family: var(--display); font-weight: 400; font-size: 1.9rem; background: linear-gradient(180deg, #fff27a, #ff9d1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .1rem 0 #7a3000); } .sf-mid b.hurry { background: linear-gradient(180deg, #ffb0b0, #ff2a2a); -webkit-background-clip: text; background-clip: text; animation: pwglow .5s infinite alternate; } .sf-mid small { font-size: .5rem; font-weight: 800; letter-spacing: .1em; color: #ffd23f; } html[data-layout="mobilePortrait"] .sf-side img { width: 2rem; height: 2rem; } html[data-layout="mobilePortrait"] .sf-name b { font-size: .7rem; } html[data-layout="mobilePortrait"] .sf-hp { height: .75rem; } html[data-layout="mobilePortrait"] .sf-mid b { font-size: 1.35rem; } html[data-layout="mobilePortrait"] .sf-wins s { width: .5rem; height: .5rem; } /* letreros ROUND / ¡PELEA! / K.O. */ .fight-bn { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; pointer-events: none; } .fight-bn b { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 11vw, 6rem); color: var(--c); text-align: center; line-height: 1; padding: 0 .5rem; -webkit-text-stroke: .08em #1a0a30; paint-order: stroke fill; text-shadow: 0 .06em 0 #1a0a30, 0 0 .5em var(--c); } .fight-bn.go b { animation: fightIn 1.1s cubic-bezier(.2, 1.4, .4, 1) both; } @keyframes fightIn { 0% { opacity: 0; transform: scale(2.6); } 18% { opacity: 1; transform: scale(.92); } 28% { transform: scale(1.04); } 36%, 80% { transform: scale(1); opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } } /* daño */ .dmg-pop { position: fixed; z-index: 62; pointer-events: none; transform: translate(-50%, -50%); font-family: var(--display); font-size: 1.6rem; -webkit-text-stroke: .06em #1a0a30; paint-order: stroke fill; text-shadow: 0 0 .5rem currentColor; animation: dmgPop 1s ease-out forwards; } @keyframes dmgPop { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -80%) scale(1.3); } 100% { opacity: 0; transform: translate(-50%, 60%) scale(1); } } .rv-board.rv-hit { animation: rvHit .6s ease; } @keyframes rvHit { 0%, 100% { box-shadow: none; filter: none; } 20% { box-shadow: 0 0 0 .25rem var(--pc), 0 0 2rem var(--pc); filter: brightness(1.6); } 40% { transform: translateX(-.25rem); } 60% { transform: translateX(.25rem); } } .g-rival.shake { animation: rvShake .45s ease; } @keyframes rvShake { 20% { transform: translate(-.3rem, .1rem); } 40% { transform: translate(.3rem, -.1rem); } 60% { transform: translate(-.2rem, 0); } 80% { transform: translate(.15rem, 0); } } #reactor.hurt { animation: hurtFx .5s ease; } @keyframes hurtFx { 0%, 100% { filter: none; } 25% { filter: brightness(1.5) sepia(1) hue-rotate(-30deg) saturate(4); } } .flycube { width: 3rem; height: 3rem; filter: drop-shadow(0 0 .8rem #ff3ca8) drop-shadow(0 0 1.4rem #ffb84d); } /* poderes bloqueados hasta 100 pts */ #pwRow.locked .apw { filter: grayscale(.85) brightness(.6); } #pwRow.locked .apw::after { content: '🔒'; position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; font-size: 1.1rem; } #pwRow.locked::before { content: attr(data-lbl); grid-column: 1 / -1; order: -1; font-size: .62rem; font-weight: 800; text-align: center; color: #ffd0d8; } html[data-layout="mobilePortrait"] #pwRow.locked::before { display: none; } /* poderes del rival (mismos que los tuyos) */ .rv-pw { display: flex; gap: .2rem; flex-wrap: wrap; } .rv-pw.locked { opacity: .45; filter: grayscale(.8); } .apw-disc.mini { width: 1.5rem; height: 1.5rem; } .apw-disc.mini em { position: absolute; right: -.25rem; bottom: -.2rem; font-style: normal; font-family: var(--display); font-size: .6rem; min-width: .8rem; height: .8rem; padding: 0 .15rem; border-radius: .5rem; background: #1a0a30; border: .06rem solid #fff; display: grid; place-items: center; } .apw-disc.mini.empty { filter: grayscale(1) brightness(.5); } html[data-layout="mobilePortrait"] .apw-disc.mini { width: 1.15rem; height: 1.15rem; } .mm-pot { display: grid; justify-items: center; gap: .15rem; margin: .4rem auto; padding: .4rem .8rem; border-radius: .8rem; background: rgba(255, 200, 40, .12); border: .1rem solid rgba(255, 210, 63, .6); } .mm-pot b { font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: #ffd23f; } .mm-pot .ico { width: 1.3rem; } .mm-pot small { font-size: .65rem; color: #cfe0ff; text-align: center; } .rw.lvl { background: linear-gradient(180deg, #7affc4, #1ab87a); color: #03321f; } /* Tablet vertical en Arena: tablero del rival grande en la columna derecha y tu tablero más alto */ html[data-layout="tabletPortrait"] #scrGame[data-mode="arena"] { grid-template-columns: 10rem minmax(0, 1fr) 10rem; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: "top top top" "hold board next" "helper board rival" "powers powers powers" "ctrl ctrl ctrl" "status status status"; } html[data-layout="tabletPortrait"] #scrGame[data-mode="arena"] .g-rival { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-self: stretch; min-height: 0; padding: .4rem; gap: .35rem; } html[data-layout="tabletPortrait"] #scrGame[data-mode="arena"] .rv-board { width: 100%; height: 100%; min-height: 11rem; } html[data-layout="tabletPortrait"] #scrGame[data-mode="arena"] .rv-info { gap: .25rem; } html[data-layout="tabletPortrait"] #scrGame[data-mode="arena"] .rv-queue small { display: block; } html[data-layout="tabletPortrait"] #scrGame[data-mode="arena"] .nextlist .pc:not(:first-child) { display: none; } html[data-layout="tabletPortrait"] #scrGame[data-mode="arena"] .g-helper { align-self: stretch; min-height: 9rem; } /* botones de Arena siempre circulares aunque el botón no sea cuadrado */ .apw::before { inset: auto; top: 50%; left: 50%; height: 92%; width: auto; max-width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); } .apw .apw-ic { left: 50%; top: 46%; width: auto; height: 52%; aspect-ratio: 1; transform: translate(-50%, -50%); } html[data-layout="mobilePortrait"] .apw .apw-ic { top: 50%; height: 56%; } .apw .apw-name { bottom: 6%; } /* aviso del rival: ancho suficiente en celulares pequeños */ .ap-warn { width: min(94%, 22rem); min-width: 0; padding: .4rem .6rem .4rem .4rem; } .ap-warn > div { flex: 1; min-width: 0; } .ap-warn small { font-size: clamp(.5rem, 2.6vw, .65rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-warn b { font-size: clamp(.85rem, 4.4vw, 1.2rem); white-space: nowrap; } html[data-layout="mobilePortrait"] .ap-warn .apw-disc { width: 2.2rem; height: 2.2rem; } /* historial de poderes del round */ .pw-log { display: grid; gap: .15rem; } .pl-row { display: flex; align-items: center; gap: .3rem; min-width: 0; } .pl-row small { flex: none; width: 3.9rem; font-size: .5rem; font-weight: 800; letter-spacing: .06em; color: #8fe0ff; } .pl-row.rv small { color: #ff9dbd; } .pl-row > span { display: flex; gap: .2rem; flex-wrap: nowrap; overflow: hidden; } .pl-row .none { font-style: normal; font-size: .6rem; color: var(--muted); } .apw-disc.mini.st-air { animation: pwglow .4s ease-in-out infinite alternate; } .apw-disc.mini.st-blocked { filter: grayscale(1) brightness(.6); } .apw-disc.mini.st-def { box-shadow: 0 0 0 .1rem #4dffb8, 0 0 .5rem var(--c1); } .apw-disc.mini em { font-size: .5rem; } html[data-layout="mobilePortrait"] .pl-row small { width: 3.2rem; font-size: .42rem; } html[data-layout="mobilePortrait"] .pw-log .apw-disc.mini { width: .95rem; height: .95rem; } /* Arena en celular: los avisos salen debajo del panel del rival para no tapar su tablero ni el historial */ html[data-screen="game"][data-gmode="arena"][data-layout="mobilePortrait"] #toasts { top: calc(var(--sat) + 27vh); } html[data-screen="game"][data-gmode="arena"][data-layout="mobilePortrait"] .toast { font-size: .7rem; } /* Power Charge del rival (el bot también lo llena para ganar poderes) */ .rv-charge { display: flex; align-items: center; gap: .3rem; min-width: 0; } .rv-charge small { flex: none; font-size: .5rem; font-weight: 800; letter-spacing: .05em; color: #ffd23f; } .rv-charge em { flex: 1; height: .45rem; border-radius: .3rem; background: rgba(0, 0, 0, .5); overflow: hidden; border: .06rem solid rgba(255, 210, 63, .5); } .rv-charge em i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff9a1a, #ffd23f); box-shadow: 0 0 .4rem #ffd23f; transition: width .3s; } .rv-charge b { flex: none; font-family: var(--display); font-weight: 400; font-size: .6rem; } .rv-charge.full { animation: pwgot .6s ease; } .rv-pw.got { animation: pwgot .6s ease; } html[data-layout="mobilePortrait"] .rv-charge small { font-size: .42rem; } html[data-layout="mobilePortrait"] .rv-charge em { height: .35rem; } .pw.queued { animation: pwglow .35s ease-in-out infinite alternate; } .pw.queued::after { content: '⏳'; position: absolute; z-index: 3; top: -.2rem; left: -.1rem; font-size: .8rem; } #pwRow .pw { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .pw.queued { animation: pwglow .35s ease-in-out infinite alternate; } .pw.queued::after { content: '⏳'; position: absolute; z-index: 3; top: -.2rem; left: -.1rem; font-size: .8rem; } #pwRow .pw { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .mm-bar { display: block; height: .4rem; margin: .2rem auto .6rem; width: 80%; border-radius: .3rem; background: rgba(0, 0, 0, .45); overflow: hidden; } .mm-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #36d0ff, #ff3ca8); transition: width .25s linear; } #mmClock { font-family: var(--display); font-size: .9rem; color: #8fe0ff; } /* Alertas (⚠) en partida: fuera de la zona donde aparece la ficha nueva */ html[data-screen="game"]:not([data-layout="mobilePortrait"]):not([data-layout="tabletPortrait"]) #toasts { top: auto; bottom: 5vh; } html[data-screen="game"][data-layout="tabletPortrait"] #toasts { top: auto; bottom: 16vh; } html[data-screen="game"][data-layout="mobilePortrait"] #toasts { top: calc(var(--sat) + 9vh); } html[data-screen="game"][data-gmode="arena"][data-layout="mobilePortrait"] #toasts { top: calc(var(--sat) + 10vh); } /* contador del Escudo */ .sh-badge { position: absolute; z-index: 7; top: 1.4rem; right: .5rem; padding: .1rem .5rem; border-radius: .7rem; font-family: var(--display); font-size: .9rem; color: #eafff6; background: rgba(6, 60, 40, .85); border: .12rem solid #4dffb8; box-shadow: 0 0 .8rem #4dffb8; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; pointer-events: none; } .sh-badge.on { opacity: 1; transform: scale(1); } .sh-badge.mini { top: .2rem; right: .2rem; font-size: .6rem; padding: 0 .3rem; } /* código promocional */ .promo-in { display: block; width: 100%; margin: .4rem 0; padding: .7rem .9rem; border-radius: .8rem; border: .15rem solid #ffd23f; background: rgba(0, 0, 0, .45); color: #fff; font-family: var(--display); font-size: 1.4rem; letter-spacing: .12em; text-align: center; text-transform: uppercase; outline: none; box-shadow: 0 0 .8rem rgba(255, 210, 63, .35) inset; } .promo-msg.ok { color: #4dffb8; } .promo-msg.bad { color: #ff7a8a; } .btn.gold { background: linear-gradient(180deg, #ffe27a, #f5a50a); color: #3a1c00; border-color: #fff0b0; } .promo-card { display: flex; align-items: center; gap: .7rem; width: 100%; margin-bottom: .8rem; padding: .7rem 1rem; cursor: pointer; text-align: left; border: .12rem solid rgba(255, 210, 63, .7); background: linear-gradient(90deg, rgba(255, 190, 40, .22), rgba(255, 60, 168, .12)); color: #fff; } .promo-card span { font-size: 1.6rem; } .promo-card b { flex: 1; font-family: var(--display); font-weight: 400; } .promo-card i { font-style: normal; color: #ffd23f; font-weight: 800; } /* Arena: los poderes siempre se ven activos (a color), aunque tengas 0 */ html[data-gmode="arena"] #pwRow.busy .pw { filter: none; } html[data-gmode="arena"] .apw.empty::before { filter: saturate(.7) brightness(.8); } html[data-gmode="arena"] .apw.empty .apw-ic { filter: drop-shadow(0 .12rem .15rem rgba(0, 0, 0, .55)); opacity: .8; } /* ===================================================================== MENÚ PRINCIPAL (arte oficial) — se adapta a cualquier pantalla móvil: siempre vertical · tablet: vertical u horizontal · PC: horizontal ===================================================================== */ html[data-screen="home"] #bg .bg-img { background-image: url(../assets/sprites/menu/fondo_menu_v_s.webp) !important; background-position: center 30% !important; } html[data-screen="home"][data-orient="landscape"] #bg .bg-img { background-image: url(../assets/sprites/menu/fondo_menu_h_s.webp) !important; background-position: center !important; } @media (min-resolution: 1.5dppx), (min-width: 1600px) { html[data-screen="home"] #bg .bg-img { background-image: url(../assets/sprites/menu/fondo_menu_v.webp) !important; } html[data-screen="home"][data-orient="landscape"] #bg .bg-img { background-image: url(../assets/sprites/menu/fondo_menu_h.webp) !important; } } html[data-screen="home"] .bg-cubes { display: none; } /* ---------- barra superior ---------- */ #topbar { gap: .5rem; padding: .45rem .7rem; } #topbar .tb-profile { display: flex; align-items: center; gap: .45rem; padding: 0; background: none; border: 0; min-width: 0; flex: 1 1 auto; max-width: 22rem; } .tb-av { position: relative; flex: none; width: 3.2rem; aspect-ratio: 706 / 616; } .tb-av #tbAv { position: absolute; left: 12%; top: 13%; width: 70%; height: 72%; object-fit: cover; border-radius: 18%; border: 0; } .tb-av .tb-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; pointer-events: none; } .tb-lvl { position: absolute; right: 1%; bottom: 7%; width: 30%; aspect-ratio: 1; display: grid; place-items: center; } .tb-lvl b { font-family: var(--display); font-weight: 400; font-size: .72rem; color: #fff; text-shadow: 0 .06rem 0 #3b1d00, 0 0 .2rem #000; } #topbar .tb-pinfo { flex: 1; min-width: 0; display: grid; gap: .05rem; } #topbar .tb-pinfo b { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .08rem .15rem #000; } .tb-xp { position: relative; display: block; width: 100%; aspect-ratio: 2268 / 356; background: url(../assets/sprites/menu/barra_xp_vacia.webp) center / 100% 100% no-repeat; } .tb-xp i { --p: 0%; position: absolute; inset: 0; background: url(../assets/sprites/menu/barra_xp_llena.webp) center / 100% 100% no-repeat; clip-path: inset(0 calc(100% - var(--p)) 0 0 round 1rem); transition: clip-path .4s; } .tb-xp s { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; font-family: var(--display); font-size: .7rem; color: #fff; text-shadow: 0 .06rem .12rem #000, 0 0 .3rem #000; } #topbar .wallet { display: flex; align-items: center; gap: .35rem; flex: none; } .chip2 { position: relative; height: 2.3rem; aspect-ratio: 1192 / 404; padding: 0 1.2rem 0 38%; display: flex; align-items: center; justify-content: flex-start; border: 0; cursor: pointer; background: url(../assets/sprites/menu/chip_monedas.webp) center / 100% 100% no-repeat; } .chip2.gem { background-image: url(../assets/sprites/menu/chip_gemas.webp); } .chip2 b { font-family: var(--display); font-weight: 400; font-size: .85rem; color: #fff; text-shadow: 0 .06rem .12rem #000; white-space: nowrap; } .chip2 .plus { position: absolute; right: -.45rem; top: 50%; height: 78%; transform: translateY(-50%); pointer-events: none; } .icbtn.gear { width: 2.4rem; height: 2.4rem; padding: 0; background: none; border: 0; box-shadow: none; } .icbtn.gear img { width: 100%; height: 100%; object-fit: contain; } .chip2:active, .icbtn.gear:active { transform: scale(.94); } /* ---------- pantalla de inicio ---------- */ #scrHome.hm { display: grid; overflow: hidden; gap: .45rem .5rem; padding: 0 .6rem calc(.6rem + var(--sab)); grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: ". logo menu" ". show menu" "cards show icons"; } #scrHome.hm .logo { grid-area: logo; justify-self: center; align-self: end; width: 100%; max-width: 26rem; margin: 0; filter: drop-shadow(0 .3rem .7rem rgba(0, 0, 0, .55)); } #scrHome.hm .showcase { grid-area: show; position: relative; min-height: 0; display: block; } .hm-stage { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; } #scrHome .vitrina { position: relative; height: 92%; max-height: 100%; aspect-ratio: 1027 / 1488; max-width: 48%; padding: 0; border: 0; background: none; margin-bottom: 4%; } #scrHome .vitrina .rc-label { display: none; } #scrHome .vitrina canvas { position: absolute; left: 50.3%; top: 48.8%; transform: translate(-50%, -50%); z-index: 1; border-radius: .3rem; } #scrHome .vitrina .vit-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } #scrHome .vitrina .hm-base { position: absolute; left: 50%; bottom: -9%; width: 260%; max-width: none; transform: translateX(-50%); z-index: 0; pointer-events: none; } .hm-hero { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 .5rem .8rem rgba(0, 0, 0, .55)); } .hm-hero.left { right: 74%; bottom: -3%; height: 62%; animation: bob 3s ease-in-out infinite; } .hm-hero.right { left: 72%; bottom: -5%; height: 74%; animation: bob 3.4s ease-in-out infinite reverse; } /* botones del menú: placas de arte + icono + texto */ #scrHome.hm .mainmenu { grid-area: menu; display: flex; flex-direction: column; justify-content: center; gap: .35rem; min-width: 0; container-type: inline-size; } #scrHome.hm .mbtn { position: relative; width: 100%; height: auto; aspect-ratio: 1272 / 374; padding: 0 9% 0 21%; margin: 0; border: 0; border-radius: 0; box-shadow: none; gap: 0; background: url(../assets/sprites/menu/btn_aventura.webp) center / 100% 100% no-repeat !important; color: #fff; text-shadow: none; display: flex; align-items: center; font-family: var(--display); font-size: 1.4rem; font-size: clamp(.8rem, 10.5cqw, 2.6rem); transition: transform .12s; } #scrHome.hm .mbtn.arc { background-image: url(../assets/sprites/menu/btn_arcade.webp) !important; } #scrHome.hm .mbtn.are { background-image: url(../assets/sprites/menu/btn_arena.webp) !important; } #scrHome.hm .mbtn.her { background-image: url(../assets/sprites/menu/btn_heroes.webp) !important; } #scrHome.hm .mbtn.shp { background-image: url(../assets/sprites/menu/btn_tienda.webp) !important; } #scrHome.hm .mbtn:active { transform: scale(.97); background-image: url(../assets/sprites/menu/btn_aventura_press.webp) !important; } #scrHome.hm .mbtn.arc:active { background-image: url(../assets/sprites/menu/btn_arcade_press.webp) !important; } #scrHome.hm .mbtn.are:active { background-image: url(../assets/sprites/menu/btn_arena_press.webp) !important; } #scrHome.hm .mbtn.her:active { background-image: url(../assets/sprites/menu/btn_heroes_press.webp) !important; } #scrHome.hm .mbtn.shp:active { background-image: url(../assets/sprites/menu/btn_tienda_press.webp) !important; } #scrHome.hm .mbtn:hover { transform: translateX(.2rem); } #scrHome.hm .mbtn .mi { position: absolute; left: 6%; top: 50%; width: auto; height: 82%; transform: translateY(-52%); font-size: 0; filter: drop-shadow(0 .1rem .2rem rgba(0, 0, 0, .5)); } #scrHome.hm .mbtn b { flex: 1; text-align: center; font-weight: 400; line-height: 1; -webkit-text-stroke: .06em rgba(20, 10, 40, .85); paint-order: stroke fill; text-shadow: 0 .08em 0 rgba(0, 0, 0, .45); } #scrHome.hm .mbtn.adv b { color: #fff; } #scrHome.hm .mbtn i { font-style: normal; font-size: 1.15em; opacity: .9; -webkit-text-stroke: .05em rgba(20, 10, 40, .8); paint-order: stroke fill; } /* tarjetas: recompensa diaria y Reactor Pass */ .hm-cards { grid-area: cards; display: flex; gap: .5rem; align-items: flex-end; min-width: 0; } #scrHome.hm .card.daily, #scrHome.hm .card.pass { position: relative; flex: 1; min-width: 0; max-width: none; margin: 0; padding: .55rem .5rem .6rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .2rem; background: none !important; box-shadow: none; border: 1.1rem solid transparent; border-image: url(../assets/sprites/menu/panel_recompensa.webp) 115 fill / 1.1rem stretch; border-radius: 0; color: #fff; text-align: center; cursor: pointer; } #scrHome.hm .card.pass { border-image-source: url(../assets/sprites/menu/panel_pass.webp); cursor: default; } #scrHome.hm .card.daily > *, #scrHome.hm .card.pass > * { margin: -.5rem 0; } #scrHome.hm .d-title, #scrHome.hm .p-title { font-family: var(--display); font-size: .78rem; line-height: 1.05; color: #fff3b0; text-shadow: 0 .08rem 0 #5a2a00, 0 0 .3rem rgba(0, 0, 0, .6); } #scrHome.hm .p-title { color: #bfefff; text-shadow: 0 .08rem 0 #0a2a60, 0 0 .3rem rgba(0, 0, 0, .6); } #scrHome.hm .d-chest { width: 100%; max-width: 6.5rem; height: auto; font-size: 0; filter: drop-shadow(0 .3rem .4rem rgba(0, 0, 0, .5)); animation: none; } #scrHome.hm .d-chest.c-ready { display: none; } #scrHome.hm .card.daily.ready .c-closed { display: none; } #scrHome.hm .card.daily.ready .c-ready { display: block; animation: wiggle 1.4s ease-in-out infinite; } #scrHome.hm .d-time { font-family: var(--display); font-size: .62rem; padding: .18rem .6rem; border-radius: 1rem; background: rgba(0, 0, 0, .45); color: #fff; white-space: nowrap; } #scrHome.hm .card.daily.ready .d-time { background: linear-gradient(180deg, #fff27a, #ffb21a); color: #4a2300; box-shadow: 0 .15rem 0 #a05a00, 0 0 .6rem rgba(255, 200, 60, .7); } #scrHome.hm .d-dot { position: absolute; top: -1.3rem; right: -1.2rem; width: 1.3rem; margin: 0; display: none; } #scrHome.hm .card.daily.ready .d-dot { display: block; } #scrHome.hm .p-ico { width: 100%; max-width: 6.2rem; height: auto; font-size: 0; filter: drop-shadow(0 .3rem .4rem rgba(0, 0, 0, .5)); } #scrHome.hm .p-row { position: relative; width: 100%; display: flex; align-items: center; } #scrHome.hm .p-lvl { position: relative; z-index: 2; flex: none; width: 1.9rem; height: auto; aspect-ratio: 434 / 498; clip-path: none; background: url(../assets/sprites/menu/insignia_nivel.webp) center / contain no-repeat; display: grid; place-items: center; padding-top: 18%; } #scrHome.hm .p-lvl b { font-family: var(--display); font-weight: 400; font-size: .75rem; color: #4a2300; } #scrHome.hm .p-row .bar { flex: 1; position: relative; margin-left: -.5rem; height: auto; aspect-ratio: 1116 / 284; background: url(../assets/sprites/menu/barra_pass_vacia.webp) center / 100% 100% no-repeat; border: 0; border-radius: 0; overflow: visible; } #scrHome.hm .p-row .bar i { --p: 0%; position: absolute; inset: 0; width: auto; background: url(../assets/sprites/menu/barra_pass_llena.webp) center / 100% 100% no-repeat; clip-path: inset(0 calc(100% - var(--p)) 0 0); transition: clip-path .4s; } #scrHome.hm .p-row .bar s { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; font-family: var(--display); font-size: .55rem; color: #fff; text-shadow: 0 .06rem .12rem #000; } /* fila de iconos inferior */ #scrHome.hm .iconrow { grid-area: icons; display: flex; gap: .45rem; justify-content: flex-end; align-self: end; min-width: 0; } #scrHome.hm .iconrow button { position: relative; flex: 0 1 5.4rem; width: auto; aspect-ratio: 1; padding: 0; background: url(../assets/sprites/menu/tile_icono.webp) center / 100% 100% no-repeat; border: 0; border-radius: 0; box-shadow: none; display: block; } #scrHome.hm .iconrow .ir-ic { position: absolute; left: 50%; top: 42%; width: 68%; height: 68%; object-fit: contain; transform: translate(-50%, -50%); filter: drop-shadow(0 .15rem .2rem rgba(0, 0, 0, .5)); } #scrHome.hm .iconrow button > span { position: absolute; left: 0; right: 0; bottom: 9%; font-family: var(--display); font-size: .62rem; line-height: 1; color: #fff; text-shadow: 0 .06rem 0 #000, 0 0 .25rem #000; white-space: nowrap; } #scrHome.hm .iconrow .dot { position: absolute; top: -.2rem; right: -.2rem; width: 1rem; height: 1rem; border-radius: 50%; background: url(../assets/sprites/menu/punto_notificacion.webp) center / contain no-repeat; border: 0; box-shadow: none; } #scrHome.hm .iconrow button:active { transform: scale(.94); } /* ---------- vertical (celular siempre y tablet vertical) ---------- */ html[data-portrait="1"] #scrHome.hm { gap: .35rem .35rem; padding: 0 .45rem calc(.45rem + var(--sab)); grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "logo logo logo" "show show show" "daily menu pass" "icons icons icons"; } html[data-portrait="1"] #scrHome.hm .logo { max-width: 17rem; width: 78%; } html[data-portrait="1"] .hm-cards { display: contents; } html[data-portrait="1"] #scrHome.hm .card.daily { grid-area: daily; align-self: stretch; } html[data-portrait="1"] #scrHome.hm .card.pass { grid-area: pass; align-self: stretch; } html[data-portrait="1"] #scrHome.hm .card.daily, html[data-portrait="1"] #scrHome.hm .card.pass { border-width: .8rem; border-image-width: .8rem; padding: .35rem .15rem .4rem; justify-content: space-around; } html[data-portrait="1"] #scrHome.hm .d-title, html[data-portrait="1"] #scrHome.hm .p-title { font-size: .62rem; } html[data-portrait="1"] #scrHome.hm .d-time { font-size: .5rem; padding: .15rem .35rem; } html[data-portrait="1"] #scrHome.hm .p-lvl { width: 1.45rem; } html[data-portrait="1"] #scrHome.hm .p-lvl b { font-size: .6rem; } html[data-portrait="1"] #scrHome.hm .mainmenu { gap: .22rem; } html[data-portrait="1"] #scrHome.hm .iconrow { justify-content: space-between; gap: .35rem; } html[data-portrait="1"] #scrHome.hm .iconrow button { flex: 1 1 0; max-width: 5.2rem; } html[data-portrait="1"] #scrHome .vitrina { max-width: 44%; height: 94%; margin-bottom: 5%; } html[data-portrait="1"] .hm-hero.left { height: 60%; right: 70%; } html[data-portrait="1"] .hm-hero.right { height: 72%; left: 70%; } html[data-layout="mobilePortrait"] #topbar { padding: .35rem .45rem; gap: .3rem; } html[data-layout="mobilePortrait"] .tb-av { width: 2.5rem; } html[data-layout="mobilePortrait"] #topbar .tb-pinfo b { display: none; } html[data-layout="mobilePortrait"] .tb-xp s { font-size: .55rem; } html[data-layout="mobilePortrait"] .chip2 { height: 1.75rem; padding-right: .9rem; } html[data-layout="mobilePortrait"] .chip2 b { font-size: .62rem; } html[data-layout="mobilePortrait"] .icbtn.gear { width: 1.9rem; height: 1.9rem; } html[data-layout="mobilePortrait"] #topbar .wallet { gap: .5rem; } /* celulares muy pequeños */ html[data-tiny="1"] #scrHome.hm .logo { max-width: 12rem; } html[data-tiny="1"] #scrHome.hm .iconrow button { max-width: 3.8rem; } @media (prefers-reduced-motion: reduce) { .hm-hero { animation: none !important; } } /* ajustes finos del menú */ #topbar .tb-profile { flex: 1 1 0; max-width: 24rem; } #topbar .wallet { flex: none; } html[data-layout="mobilePortrait"] .tb-av { width: 2.9rem; } html[data-layout="mobilePortrait"] .chip2 { height: 1.95rem; } html[data-layout="mobilePortrait"] .chip2 b { font-size: .7rem; } html[data-layout="mobilePortrait"] #topbar .wallet { gap: .55rem; margin-right: .2rem; } html[data-layout="mobilePortrait"] .icbtn.gear { width: 2.1rem; height: 2.1rem; } html[data-portrait="1"] #scrHome.hm .d-title, html[data-portrait="1"] #scrHome.hm .p-title { font-size: .78rem; } html[data-portrait="1"] #scrHome.hm .d-time { font-size: .6rem; white-space: normal; line-height: 1.1; } html[data-portrait="1"] #scrHome.hm .d-chest, html[data-portrait="1"] #scrHome.hm .p-ico { max-width: 100%; } html[data-portrait="1"] #scrHome.hm .iconrow button > span { font-size: .72rem; } /* horizontal: tarjetas y fila de iconos más grandes, logo protagonista */ html:not([data-portrait="1"]) #scrHome.hm .logo { max-width: 30rem; } html:not([data-portrait="1"]) .hm-cards { position: relative; z-index: 4; align-self: end; height: 34vh; max-height: 17rem; } html:not([data-portrait="1"]) #scrHome.hm .card.daily, html:not([data-portrait="1"]) #scrHome.hm .card.pass { height: 100%; justify-content: space-around; } html:not([data-portrait="1"]) #scrHome.hm .d-chest, html:not([data-portrait="1"]) #scrHome.hm .p-ico { width: auto; max-width: 100%; height: 45%; object-fit: contain; } html:not([data-portrait="1"]) #scrHome.hm .d-title, html:not([data-portrait="1"]) #scrHome.hm .p-title { font-size: .95rem; } html:not([data-portrait="1"]) #scrHome.hm .d-time { font-size: .72rem; } html:not([data-portrait="1"]) #scrHome.hm .iconrow button { flex-basis: 6.6rem; } html:not([data-portrait="1"]) #scrHome.hm .iconrow button > span { font-size: .72rem; } html:not([data-portrait="1"]) #scrHome.hm .mainmenu { justify-content: flex-start; padding-top: .4rem; max-width: 26rem; justify-self: end; width: 100%; } html:not([data-portrait="1"]) #scrHome .vitrina { height: 88%; } /* chips de monedas/gemas: ancho fijo según su alto (no dependen del contenedor) */ .chip2 { --h: 2.3rem; height: var(--h); width: calc(var(--h) * 2.95); aspect-ratio: auto; padding: 0 calc(var(--h) * .42) 0 calc(var(--h) * 1.02); justify-content: center; } html[data-layout="mobilePortrait"] .chip2 { --h: 1.95rem; height: var(--h); padding-right: calc(var(--h) * .42); } /* horizontal: los 5 botones siempre caben en la altura disponible */ html:not([data-portrait="1"]) #scrHome.hm .mainmenu { max-width: min(26rem, 44vh); justify-content: center; align-self: center; padding-top: 0; } html:not([data-portrait="1"]) #scrHome.hm .mainmenu { max-width: min(24rem, 36vh); justify-content: flex-start; align-self: start; min-height: 0; padding-top: .3rem; } /* ===== Textos del menú: grandes, gruesos y con contorno para que se lean sobre el arte ===== */ #scrHome.hm .d-title, #scrHome.hm .p-title, #scrHome.hm .d-time, #scrHome.hm .p-row .bar s, #scrHome.hm .iconrow button > span, .tb-xp s, .chip2 b, .tb-lvl b, #scrHome.hm .p-lvl b { font-family: 'Nunito', system-ui, sans-serif !important; font-weight: 900 !important; letter-spacing: .01em; -webkit-font-smoothing: antialiased; -webkit-text-stroke: .16em rgba(8, 6, 30, .95); paint-order: stroke fill; text-shadow: 0 .1em .25em rgba(0, 0, 0, .8); } #scrHome.hm .d-title { font-size: 1.05rem !important; color: #ffe68a; line-height: 1.05; } #scrHome.hm .p-title { font-size: 1.05rem !important; color: #a8ecff; line-height: 1.05; } #scrHome.hm .d-time { font-size: .85rem !important; color: #fff; background: rgba(0, 0, 0, .55); padding: .2rem .7rem; } #scrHome.hm .card.daily.ready .d-time { color: #fff; -webkit-text-stroke-color: #6a3000; background: linear-gradient(180deg, #ffd84a, #ff9d0a); } #scrHome.hm .p-row .bar s { font-size: .8rem !important; } #scrHome.hm .p-lvl b { font-size: .85rem !important; color: #fff; -webkit-text-stroke-color: #6a3000; } #scrHome.hm .iconrow button > span { font-size: .8rem !important; bottom: 6%; } .tb-xp s { font-size: .8rem !important; } .chip2 b { font-size: .9rem !important; } /* celular vertical */ html[data-portrait="1"] #scrHome.hm .d-title, html[data-portrait="1"] #scrHome.hm .p-title { font-size: .82rem !important; } html[data-portrait="1"] #scrHome.hm .d-time { font-size: .68rem !important; padding: .15rem .35rem; } html[data-portrait="1"] #scrHome.hm .p-row .bar s { font-size: .62rem !important; } html[data-portrait="1"] #scrHome.hm .p-lvl b { font-size: .7rem !important; } html[data-portrait="1"] #scrHome.hm .iconrow button > span { font-size: .72rem !important; } html[data-layout="mobilePortrait"] .tb-xp s { font-size: .66rem !important; } html[data-layout="mobilePortrait"] .chip2 b { font-size: .74rem !important; } #scrHome.hm .p-lvl { padding: 0 !important; position: relative; } #scrHome.hm .p-lvl b { position: absolute; left: 0; right: 0; top: 58%; transform: translateY(-50%); text-align: center; line-height: 1; } .chip2.bump { animation: pwgot .5s cubic-bezier(.3, 1.6, .5, 1); } /* el menú sólo se muestra cuando su pantalla está activa */ #scrHome.hm:not(.on) { display: none !important; } /* ===================== Recompensa diaria (arte oficial v3) ===================== */ .mbox.dailybox { --k: 1rem; position: relative; width: min(94vw, 30rem); max-height: none; overflow: visible; padding: 0; background: none; box-shadow: none; border-radius: 0; border: solid transparent; border-width: calc(var(--k) * 3.4) calc(var(--k) * 2.4) calc(var(--k) * 2.8); border-image: url(../assets/sprites/recompensa_v4/panel.webp) 170 120 140 120 fill / calc(var(--k) * 3.4) calc(var(--k) * 2.4) calc(var(--k) * 2.8) stretch; filter: drop-shadow(0 0 1.4rem rgba(80, 150, 255, .35)); margin-top: 2.2rem; } .dailybox .dpanel { display: none; } .dailybox .dclose { position: absolute; z-index: 6; top: calc(var(--k) * -2.6); right: calc(var(--k) * -1.9); width: 2.7rem; height: 2.7rem; padding: 0; border: 0; background: none; } .dailybox .dclose img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .5)); } .dailybox .dclose:active { transform: scale(.9); } .dhead { position: relative; z-index: 4; display: flex; justify-content: center; margin: calc(var(--k) * -5.2) auto .1rem; height: 4.8rem; } .dribbon { position: relative; height: 100%; display: block; } .dribbon img { height: 100%; width: auto; display: block; filter: drop-shadow(0 .3rem .4rem rgba(0, 0, 0, .5)); } .dribbon b { position: absolute; left: 0; right: 0; top: 49%; transform: translateY(-50%); text-align: center; white-space: nowrap; font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: .02em; color: #fff; -webkit-text-stroke: .14em #6a2600; paint-order: stroke fill; filter: drop-shadow(0 .12rem 0 #3a1400); } .dgift { position: absolute; z-index: 5; right: calc(50% + 7.2rem); top: -.4rem; width: 3.6rem; filter: drop-shadow(0 .3rem .4rem rgba(0, 0, 0, .5)); animation: wiggle 2.4s ease-in-out infinite; } .dbody { position: relative; z-index: 1; padding: 0 .2rem .2rem; } .dsub { text-align: center; margin: 0 0 .5rem; font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; font-size: .78rem; color: #cfe0ff; -webkit-text-stroke: .14em rgba(8, 6, 30, .9); paint-order: stroke fill; } .dsub b { color: #ffd23f; } /* rejilla vertical: 3 columnas + día 7 a lo ancho */ .dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem .45rem; } .dcard { position: relative; aspect-ratio: 487 / 613; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16% 8% 11%; } .dcard.big { grid-column: 1 / -1; aspect-ratio: 700 / 455; padding: 7% 5% 4.5%; } .dcard .dbg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .dcard .dglow { position: absolute; z-index: 0; left: 50%; top: 50%; width: 170%; transform: translate(-50%, -50%); pointer-events: none; animation: dSpin 8s linear infinite, pwglow .9s ease-in-out infinite alternate; } .dcard.big .dglow { width: 115%; } .dcard .dday, .dcard .damt { position: relative; z-index: 2; font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; color: #fff; white-space: nowrap; line-height: 1; -webkit-text-stroke: .16em rgba(8, 6, 30, .95); paint-order: stroke fill; text-shadow: 0 .1em .25em rgba(0, 0, 0, .8); } .dcard .dday { font-size: .82rem; } .dcard .dicon { position: relative; z-index: 1; flex: 1; min-height: 0; width: 84%; object-fit: contain; filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .55)); margin: 4% 0; } .dcard .damt { display: flex; align-items: center; gap: .12rem; font-size: .95rem; } .dcard .damt i { font-style: normal; margin: 0 .15rem; color: #ffd23f; } .dcard .dmini { height: 1.05em; width: auto; } .dcard.big .dday { font-size: 1rem; color: #fff4b0; -webkit-text-stroke-color: #5a2a00; } .dcard.big .damt { font-size: 1.15rem; } .dcard.now .dday, .dcard.now .damt { color: #fff4b0; -webkit-text-stroke-color: #5a2a00; } .dcard.lock .dicon { filter: saturate(.55) brightness(.72) drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .55)); } .dcard.got .dicon { filter: saturate(.55) brightness(.8); opacity: .85; } .dcard .dmark { position: absolute; z-index: 3; filter: drop-shadow(0 .15rem .2rem rgba(0, 0, 0, .6)); } .dcard .dmark.ok { left: -7%; bottom: -5%; width: 36%; } .dcard .dmark.lk { right: -6%; bottom: -5%; width: 27%; } .dcard.big .dmark.ok { width: 14%; left: -2%; bottom: -4%; } .dcard.now { z-index: 2; animation: dPulse 1.1s ease-in-out infinite; } .dcard.just { animation: dGot .5s cubic-bezier(.2, 1.6, .4, 1); } .dcard .dmark.pop { animation: dPop .45s cubic-bezier(.2, 1.8, .4, 1) both; } @keyframes dPulse { 50% { transform: scale(1.05); } } @keyframes dGot { 0% { transform: scale(1.15); filter: brightness(1.8); } 100% { transform: scale(1); } } @keyframes dPop { from { transform: scale(0) rotate(-40deg); opacity: 0; } } @keyframes dSpin { to { transform: translate(-50%, -50%) rotate(360deg); } } /* pie */ .dfoot { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin-top: .7rem; } .dtimer { position: relative; display: flex; align-items: center; justify-content: center; gap: .3rem; width: min(100%, 16rem); aspect-ratio: 844 / 235; padding: 0 1rem 0 2.2rem; background: url(../assets/sprites/recompensa_v4/capsula_reloj.webp) center / 100% 100% no-repeat; } .dtimer img { position: absolute; left: -.5rem; top: 50%; height: 175%; transform: translateY(-52%); filter: drop-shadow(0 .15rem .25rem rgba(0, 0, 0, .5)); } .dtimer b, .dbtn b { font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; color: #fff; white-space: nowrap; -webkit-text-stroke: .16em rgba(8, 6, 30, .95); paint-order: stroke fill; text-shadow: 0 .1em .2em rgba(0, 0, 0, .7); } .dtimer b { font-size: .88rem; } .dtimer b span { color: #8fe8ff; } .dbtn { display: grid; place-items: center; width: min(86%, 15rem); aspect-ratio: 1120 / 385; padding: 0 0 2%; border: 0; cursor: pointer; background: url(../assets/sprites/recompensa_v4/boton_reclamar.webp) center / 100% 100% no-repeat; } .dbtn.go { animation: dPulse 1s ease-in-out infinite; } .dbtn.go b { font-family: var(--display); font-weight: 400; font-size: 1.5rem; -webkit-text-stroke: .12em #0a4a14; letter-spacing: .02em; } .dbtn.go:active { background-image: url(../assets/sprites/recompensa_v4/boton_reclamar_press.webp); transform: scale(.96); animation: none; } .dbtn.off { aspect-ratio: 1060 / 375; background-image: url(../assets/sprites/recompensa_v4/boton_reclamar_off.webp); cursor: default; animation: none; } .dbtn.off b { font-size: 1rem; color: #e4ecfa; -webkit-text-stroke-color: #16244a; } /* efectos */ .dfx { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; } .dfx img { position: absolute; transform: translate(-50%, -50%); will-change: transform, opacity; } /* horizontal (PC / tablet horizontal): días 1-6 en fila + día 7 a la derecha, como la maqueta */ html[data-orient="landscape"] .mbox.dailybox { --k: 1.15rem; width: min(96vw, 60rem, 150vh); } html[data-orient="landscape"] .dgrid { grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 2.25fr); align-items: center; gap: .6rem; } html[data-orient="landscape"] .dcard.big { grid-column: auto; } html[data-orient="landscape"] .dhead { height: 5.6rem; margin-top: calc(var(--k) * -5); } html[data-orient="landscape"] .dribbon b { font-size: 1.45rem; } html[data-orient="landscape"] .dgift { width: 4.4rem; right: calc(50% + 8.6rem); } html[data-orient="landscape"] .dfoot { flex-direction: row; justify-content: center; gap: 1.4rem; margin-top: .9rem; } html[data-orient="landscape"] .dtimer { width: 17rem; } html[data-orient="landscape"] .dbtn { width: 15rem; } /* celular */ html[data-layout="mobilePortrait"] .mbox.dailybox { --k: .78rem; width: 94vw; } html[data-layout="mobilePortrait"] .dhead { height: 3.9rem; } html[data-layout="mobilePortrait"] .dribbon b { font-size: .95rem; } html[data-layout="mobilePortrait"] .dgift { width: 2.9rem; right: calc(50% + 5.7rem); } html[data-layout="mobilePortrait"] .dcard .dday { font-size: .72rem; } html[data-layout="mobilePortrait"] .dcard .damt { font-size: .82rem; } html[data-tiny="1"] .dcard .damt { font-size: .7rem; } html[data-tiny="1"] .dgrid { gap: .4rem .3rem; } .dcard .dglow { animation: dSpin 8s linear infinite, dGlowOp .9s ease-in-out infinite alternate; } @keyframes dGlowOp { from { opacity: .65; } to { opacity: 1; } } .dcard { padding-top: 21%; } .dcard.big { padding-top: 9%; } .dtimer { padding-left: 3.2rem; } .dtimer img { left: -.2rem; height: 150%; } .dtimer { padding-left: 0; justify-content: center; } .dtimer img { position: static; height: 1.7rem; transform: none; margin-left: 0; } /* v3.1: assets a resolución nativa con su brillo completo (sin recortes) */ .mbox.dailybox { border-image-source: url(../assets/sprites/recompensa_v4/panel.webp); border-image-slice: 180 137 154 137 fill; border-image-width: calc(var(--k) * 4.3) calc(var(--k) * 3.3) calc(var(--k) * 3.7); border-image-outset: calc(var(--k) * .95); } .dcard { aspect-ratio: 318 / 405; } .dcard .dbg { inset: -17.3% -22%; width: auto; height: auto; } .dcard.big { aspect-ratio: 530 / 345; } .dcard.big .dbg { inset: -17.4% -11.3%; } .dbtn { aspect-ratio: 739 / 250; background-size: 112.2% 136%; background-position: center; } .dbtn.off { aspect-ratio: 700 / 243; background-size: 112.9% 137%; } .dtimer { aspect-ratio: 556 / 150; background-size: 114.4% 153%; background-position: center; } .dcard .dicon { width: 80%; } html[data-orient="landscape"] .dgrid { gap: .9rem .75rem; } .dgrid { gap: .8rem .7rem; } .dcard .dbg { inset: auto; left: -22%; top: -17.3%; width: 144%; height: 134.6%; max-width: none; } .dcard.big .dbg { left: -11.3%; top: -17.4%; width: 122.6%; height: 134.8%; } .dcard:not(.big) .dday { margin-top: 5%; } .dcard.big .dday { margin-top: 1.5%; } /* ================= TIENDA v2 (assets tienda/) ================= */ html[data-screen="shop"] #bg .bg-img { background-image: url(../assets/sprites/tienda/fondo_v.webp) !important; background-position: center 40% !important; } html[data-screen="shop"][data-orient="landscape"] #bg .bg-img { background-image: url(../assets/sprites/tienda/fondo_h.webp) !important; background-position: center !important; } html[data-screen="shop"] .bg-cubes { display: none; } html[data-screen="shop"] #bg::after { background: linear-gradient(180deg, rgba(6, 8, 30, .25), rgba(6, 8, 30, .55)); } #scrShop.shopv2:not(.on) { display: none !important; } #scrShop.shopv2 { --T: 'Lilita One', 'Nunito', sans-serif; overflow: hidden; gap: .35rem; padding: .1rem max(.6rem, var(--sal)) max(.5rem, var(--sab)) max(.6rem, var(--sar)); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-areas: "head" "hero" "tabs" "panel"; } .shopv2 .sh-head { grid-area: head; display: grid; grid-template-columns: 2.6rem 1fr 2.6rem; align-items: center; } .shopv2 .sh-back { width: 2.6rem; height: 2.6rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .shopv2 .sh-back img { width: 120%; height: 120%; object-fit: contain; filter: drop-shadow(0 .15rem .25rem rgba(0,0,0,.5)); transition: transform .12s; } .shopv2 .sh-back:active img { transform: scale(.9); } .shopv2 .sh-title { justify-self: center; position: relative; width: min(15rem, 62vw); aspect-ratio: 626 / 275; display: block; } .shopv2 .sh-title img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .2rem .4rem rgba(0,0,0,.45)); } .shopv2 .sh-title b { position: absolute; left: 0; right: 0; top: 47%; text-align: center; font-family: var(--T); font-weight: 400; font-size: calc(min(15rem, 62vw) * .125); line-height: 1; color: #fff; letter-spacing: .04em; -webkit-text-stroke: .12em #6a2a00; paint-order: stroke fill; text-shadow: 0 .08em 0 #4a1c00, 0 .12em .2em rgba(0,0,0,.5); } .shopv2 .sh-hero { grid-area: hero; position: relative; display: flex; align-items: flex-end; justify-content: center; gap: .3rem; height: clamp(5.5rem, 17vh, 9.5rem); min-height: 0; } .shopv2 .sh-pando { height: 100%; width: auto; max-width: 55%; object-fit: contain; filter: drop-shadow(0 .3rem .5rem rgba(0,0,0,.55)); transform-origin: 50% 100%; animation: shPando 3.2s ease-in-out infinite; } @keyframes shPando { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3%) } } .shopv2 .sh-pando.happy { animation: shHappy .6s ease-out; } @keyframes shHappy { 0% { transform: scale(1) } 30% { transform: scale(1.08, .94) } 60% { transform: scale(.96, 1.06) translateY(-6%) } 100% { transform: scale(1) } } .shopv2 .sh-bubble { align-self: center; position: relative; max-width: 42%; padding: .45rem .7rem; border-radius: 1rem; background: #fff; color: #23214a; font-family: var(--T); font-weight: 400; font-size: .92rem; line-height: 1.15; text-align: center; box-shadow: 0 .2rem 0 #b9c3ff, 0 .35rem .6rem rgba(0,0,0,.4); transition: transform .2s; } .shopv2 .sh-bubble::before { content: ''; position: absolute; left: -.45rem; bottom: .7rem; border: .35rem solid transparent; border-right: .55rem solid #fff; border-left: 0; } .shopv2 .sh-bubble.pop { animation: shBub .35s ease-out; } @keyframes shBub { 0% { transform: scale(.7) } 70% { transform: scale(1.06) } 100% { transform: scale(1) } } .shopv2 .sh-bubble.bad { color: #b4122e; } /* pestañas: border-image (los extremos no se deforman) */ .shopv2 .sh-tabs { grid-area: tabs; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; padding: 0 .2rem; } .shopv2 .sh-tabs button { --h: 2.5rem; --k: calc(var(--h) / 117); height: var(--h); min-width: 0; position: relative; cursor: pointer; color: #cfe4ff; border: 0 solid transparent; background: none; padding: 0 .3rem; display: flex; align-items: center; justify-content: center; gap: .25rem; border-image: url(../assets/sprites/tienda/pestana_inactiva.webp) 84 100 85 100 fill / calc(84 * var(--k)) calc(100 * var(--k)) calc(85 * var(--k)) / calc(30 * var(--k)) stretch; font-family: var(--T); font-weight: 400; font-size: .82rem; text-shadow: 0 .08rem 0 #071040, 0 0 .3rem #071040; transition: transform .12s, filter .12s; } .shopv2 .sh-tabs button.on { color: #fff; --k: calc(var(--h) / 124); border-image: url(../assets/sprites/tienda/pestana_activa.webp) 87 100 87 100 fill / calc(87 * var(--k)) calc(100 * var(--k)) calc(87 * var(--k)) / calc(30 * var(--k)) stretch; filter: drop-shadow(0 0 .4rem rgba(80, 220, 255, .7)); transform: translateY(-.08rem); } .shopv2 .sh-tabs button:active { transform: scale(.95); } .shopv2 .sh-tabs img { height: 1.45rem; width: 1.45rem; object-fit: contain; flex: none; filter: drop-shadow(0 .08rem .1rem rgba(0,0,0,.6)); } .shopv2 .sh-tabs b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shopv2 .sh-tabs i { position: absolute; top: -.35rem; right: -.1rem; min-width: 1.05rem; height: 1.05rem; border-radius: 1rem; background: #ff2d55; color: #fff; font: 400 .66rem/1.05rem var(--T); text-align: center; font-style: normal; box-shadow: 0 0 0 .1rem #fff; } /* panel principal con marco panel_tienda */ .shopv2 .sh-panel { grid-area: panel; --pk: .021rem; min-height: 0; position: relative; display: flex; margin: .3rem .15rem 0; border: .2rem solid #ffc63a; border-radius: 1.1rem; padding: .25rem; background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(70, 120, 255, .55), rgba(70, 120, 255, 0) 70%), linear-gradient(180deg, #172f9a, #0d1b62 55%, #0a1450); box-shadow: inset 0 0 0 .12rem #24156a, inset 0 0 0 .24rem rgba(80, 215, 255, .75), inset 0 0 1.4rem rgba(60, 190, 255, .35), 0 0 0 .14rem #5b2c00, 0 0 1.1rem rgba(255, 170, 50, .45), 0 .4rem .9rem rgba(0, 0, 0, .55); } .shopv2 .sh-panel::before { content: ''; position: absolute; z-index: 4; left: 50%; top: 0; width: 7.2rem; aspect-ratio: 340 / 114; transform: translate(-50%, -58%); pointer-events: none; background: url(../assets/sprites/tienda/panel_gema.webp) center / contain no-repeat; filter: drop-shadow(0 .15rem .2rem rgba(0,0,0,.5)); } .shopv2 .sh-panel::after { content: ''; position: absolute; inset: .55rem; border-radius: .8rem; pointer-events: none; border: .08rem solid rgba(255, 90, 220, .35); } .shopv2 .sh-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; container-type: inline-size; padding: 1.1rem .7rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(120, 190, 255, .55) transparent; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .shopv2 .sh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem .6rem; align-content: start; } @container (min-width: 27em) { .shopv2 .sh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container (min-width: 40em) { html[data-orient="landscape"] .shopv2 .sh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @container (min-width: 90em) { html[data-orient="landscape"] .shopv2 .sh-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .shopv2 .sh-sec { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; margin: .15rem 0 -.1rem; color: #ffe27a; font: 400 .95rem var(--T); text-shadow: 0 .08rem 0 #3a1a00; } .shopv2 .sh-sec::before, .shopv2 .sh-sec::after { content: ''; flex: 1; height: .55rem; background: url(../assets/sprites/tienda/separador.webp) center / 100% 100% no-repeat; opacity: .9; } .shopv2 .sh-note { grid-column: 1 / -1; text-align: center; color: #b9ccf5; font-size: .72rem; margin: .3rem 0 0; } /* tarjeta */ .shopv2 .sc { position: relative; aspect-ratio: 410 / 458; container-type: inline-size; min-width: 0; animation: scIn .35s ease-out both; } .shopv2 .sc::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(../assets/sprites/tienda/tarjeta.webp) center / 124.4% 121.8% no-repeat; } .shopv2 .sc.feat::before { background-image: url(../assets/sprites/tienda/tarjeta_destacada.webp); background-size: 121.3% 118.7%; } .shopv2 .sc.lock::before { background-image: url(../assets/sprites/tienda/tarjeta_bloqueada.webp); background-size: 124.4% 120%; } .shopv2 .sc.feat { filter: drop-shadow(0 0 .5rem rgba(255, 190, 60, .45)); } @keyframes scIn { from { opacity: 0; transform: translateY(.6rem) scale(.96) } to { opacity: 1; transform: none } } .shopv2 .sc-in { position: absolute; inset: 7cqw 7.5cqw 6.5cqw; z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; justify-items: center; text-align: center; } .shopv2 .sc.feat .sc-in { inset-block-start: 13cqw; } .shopv2 .sc.lock .sc-in { inset-block-start: 12cqw; } .shopv2 .sc-art { position: relative; width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; } .shopv2 .sc-art::before { content: ''; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(120, 200, 255, .38), rgba(120, 200, 255, 0) 68%); } .shopv2 .sc.feat .sc-art::before { background: radial-gradient(circle, rgba(255, 210, 90, .45), rgba(255, 160, 40, 0) 68%); } .shopv2 .sc-art img { position: absolute; inset: 0; margin: auto; width: 88%; height: 100%; object-fit: contain; filter: drop-shadow(0 1.2cqw 1.4cqw rgba(0,0,0,.55)); transition: transform .15s; } .shopv2 .sc:hover .sc-art img { transform: scale(1.05) rotate(-2deg); } .shopv2 .sc.lock .sc-art img { filter: grayscale(.85) brightness(.75); } .shopv2 .sc-nm { font: 400 9.4cqw/1.05 var(--T); color: #fff; margin-top: 1cqw; max-width: 100%; text-shadow: 0 .6cqw 0 #12134a, 0 0 1.4cqw #12134a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shopv2 .sc-sub { font: 800 6.1cqw/1.15 var(--body); color: #b8d3ff; min-height: 7.2cqw; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 1.5cqw; } .shopv2 .sc-own { position: absolute; z-index: 2; top: 6cqw; right: 7cqw; padding: .6cqw 3cqw; border-radius: 9cqw; background: rgba(6, 12, 50, .85); border: .6cqw solid #57c8ff; color: #fff; font: 400 7cqw/1.2 var(--T); } /* botón de precio: border-image para que los extremos no se deformen */ .shopv2 .sb { --H: 21cqw; --fh: 206; --k: calc(var(--H) / var(--fh)); width: 100%; height: var(--H); cursor: pointer; position: relative; border: 0 solid transparent; background: none; padding: 0 4cqw; display: flex; align-items: center; justify-content: center; gap: 2cqw; border-image: url(../assets/sprites/tienda/boton_monedas.webp) 127 121 128 121 fill / calc(127 * var(--k)) calc(121 * var(--k)) calc(128 * var(--k)) / calc(29 * var(--k)) stretch; font: 400 9.6cqw/1 var(--T); color: #fff; -webkit-text-stroke: .14em #6b3a00; paint-order: stroke fill; transition: transform .1s, filter .1s; } .shopv2 .sb.gem { --fh: 205; border-image-source: url(../assets/sprites/tienda/boton_gemas.webp); border-image-slice: 127 120 127 120 fill; border-image-width: calc(127 * var(--k)) calc(120 * var(--k)); -webkit-text-stroke-color: #3d0a6e; } .shopv2 .sb.go { --fh: 242; border-image-source: url(../assets/sprites/tienda/boton_comprar.webp); border-image-slice: 152 140 152 140 fill; border-image-width: calc(152 * var(--k)) calc(140 * var(--k)); border-image-outset: calc(36 * var(--k)); -webkit-text-stroke-color: #0d5212; } .shopv2 .sb.off { --fh: 243; border-image-source: url(../assets/sprites/tienda/boton_comprar_off.webp); border-image-slice: 152 140 153 140 fill; border-image-width: calc(152 * var(--k)) calc(140 * var(--k)) calc(153 * var(--k)); border-image-outset: calc(36 * var(--k)); -webkit-text-stroke-color: #3b4458; color: #eef2fb; } .shopv2 .sb.off img { filter: grayscale(.7) brightness(.95); } .shopv2 .sb:not(.off):hover { filter: brightness(1.08); } .shopv2 .sb:active { transform: scale(.94); } .shopv2 .sb img { height: 11cqw; width: 11cqw; object-fit: contain; flex: none; filter: drop-shadow(0 .4cqw .4cqw rgba(0,0,0,.5)); } .shopv2 .sb span { white-space: nowrap; } .shopv2 .sb.shake { animation: sbShake .38s; } @keyframes sbShake { 0%, 100% { transform: none } 20% { transform: translateX(-4%) } 40% { transform: translateX(4%) } 60% { transform: translateX(-3%) } 80% { transform: translateX(2%) } } /* insignias */ .shopv2 .sc-pop { position: absolute; z-index: 3; left: -3cqw; top: -5cqw; width: 28cqw; pointer-events: none; filter: drop-shadow(0 .8cqw 1cqw rgba(0,0,0,.5)); animation: scBadge 2.4s ease-in-out infinite; } .shopv2 .sc-pop img { width: 100%; display: block; } .shopv2 .sc-pop b { position: absolute; left: 50%; bottom: -4cqw; transform: translateX(-50%) rotate(-6deg); padding: .5cqw 2.6cqw; border-radius: 2cqw; background: linear-gradient(#ff4b5c, #c8102e); color: #fff; font: 400 6cqw/1.2 var(--T); white-space: nowrap; box-shadow: 0 .6cqw 0 #7a0016; } @keyframes scBadge { 0%, 100% { transform: rotate(-6deg) scale(1) } 50% { transform: rotate(4deg) scale(1.06) } } .shopv2 .sc-off { position: absolute; z-index: 3; right: -3cqw; top: -5cqw; width: 30cqw; aspect-ratio: 459 / 397; display: grid; place-items: center; pointer-events: none; background: url(../assets/sprites/tienda/burbuja_descuento.webp) center / contain no-repeat; animation: scBadge 1.8s ease-in-out infinite reverse; } .shopv2 .sc-off b { font: 400 8.2cqw/1 var(--T); color: #d0001c; transform: rotate(-8deg); -webkit-text-stroke: .1em #fff; paint-order: stroke fill; } .shopv2 .sc-rib { position: absolute; z-index: 3; right: -3cqw; top: -3cqw; width: 40cqw; aspect-ratio: 475 / 433; pointer-events: none; background: url(../assets/sprites/tienda/cinta_oferta.webp) center / contain no-repeat; } .shopv2 .sc-rib b { position: absolute; left: 12%; top: 32%; width: 80%; text-align: center; transform: rotate(41deg); font: 400 6.4cqw/1 var(--T); color: #fff; text-shadow: 0 .4cqw 0 #6d0010; } /* efectos de compra */ .shopv2 .sh-fx { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; } .shfx { position: fixed; pointer-events: none; z-index: 45; transform: translate(-50%, -50%); } .shfx.rays { animation: fxRays .9s ease-out forwards; } @keyframes fxRays { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0) } 25% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(70deg) } } .shfx.pow { animation: fxPow .7s cubic-bezier(.2, 1.6, .4, 1) forwards; } @keyframes fxPow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-12deg) } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(4deg) } 75% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25) rotate(0) } } .shfx.pow b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 1.25rem var(--display); color: #d0001c; -webkit-text-stroke: .1em #fff; paint-order: stroke fill; transform: rotate(-6deg); } .sc.bought { animation: scBought .5s ease-out; } @keyframes scBought { 0% { transform: scale(1) } 30% { transform: scale(1.07) } 60% { transform: scale(.97) } 100% { transform: scale(1) } } .chip2.bump { animation: chipBump .45s ease-out; } @keyframes chipBump { 0% { transform: scale(1) } 40% { transform: scale(1.18) } 100% { transform: scale(1) } } /* ---- horizontal (tablet/PC): pestañas verticales a la izquierda con Pando ---- */ html[data-orient="landscape"] #scrShop.shopv2 { grid-template-columns: clamp(10rem, 22vw, 15rem) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head head" "tabs panel" "hero panel"; column-gap: .9rem; } html[data-orient="landscape"] .shopv2 .sh-title { width: min(13rem, 34vh * 2.2); } html[data-orient="landscape"] .shopv2 .sh-title b { font-size: calc(min(13rem, 34vh * 2.2) * .125); } html[data-orient="landscape"] .shopv2 .sh-tabs { grid-template-columns: 1fr; align-content: start; gap: .5rem; padding: .3rem 0 0; } html[data-orient="landscape"] .shopv2 .sh-tabs button { --h: 2.7rem; justify-content: flex-start; padding: 0 .9rem; font-size: 1rem; gap: .5rem; } html[data-orient="landscape"] .shopv2 .sh-tabs button.on { transform: translateX(.3rem); } html[data-orient="landscape"] .shopv2 .sh-tabs img { height: 1.7rem; width: 1.7rem; } html[data-orient="landscape"] .shopv2 .sh-hero { height: auto; min-height: 0; flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: .5rem; padding-bottom: .2rem; } html[data-orient="landscape"] .shopv2 .sh-pando { max-width: 100%; width: 100%; height: auto; max-height: 100%; min-height: 0; flex: 0 1 auto; object-position: bottom; } html[data-orient="landscape"] .shopv2 .sh-bubble { max-width: 100%; align-self: center; font-size: .9rem; } html[data-orient="landscape"] .shopv2 .sh-bubble::before { left: 50%; bottom: -.5rem; transform: translateX(-50%); border: .35rem solid transparent; border-top: .55rem solid #fff; border-bottom: 0; } html[data-orient="landscape"] .shopv2 .sh-panel { margin: 0; } html[data-orient="landscape"] .shopv2 .sh-scroll { container-type: size; } html[data-orient="landscape"] .shopv2 .sh-grid { --rows: 2; width: min(100%, calc((100cqh - 2.2rem - (var(--rows) - 1) * .7rem) / var(--rows) * .895 * 4 + 2rem)); margin: 0 auto; min-height: calc(100cqh - 2.15rem); align-content: center; } html[data-orient="landscape"][data-tiny="1"] .shopv2 .sh-hero { display: none; } /* móvil vertical: un poco más compacto */ html[data-layout="mobilePortrait"] .shopv2 .sh-tabs { gap: .3rem; padding: 0; } html[data-layout="mobilePortrait"] .shopv2 .sh-tabs button { font-size: .7rem; padding: 0 .15rem; gap: .12rem; flex-direction: column; justify-content: center; } html[data-layout="mobilePortrait"] .shopv2 .sh-tabs button { --h: 3rem; } html[data-layout="mobilePortrait"] .shopv2 .sh-tabs img { height: 1.3rem; width: 1.3rem; } html[data-layout="mobilePortrait"] .shopv2 .sh-bubble { font-size: .8rem; } html[data-layout="mobilePortrait"] .shopv2 .sh-hero { height: clamp(4.6rem, 13.5vh, 7.5rem); } html[data-layout="mobilePortrait"] .shopv2 .sh-title { width: min(13rem, 56vw); } html[data-layout="mobilePortrait"] .shopv2 .sh-title b { font-size: calc(min(13rem, 56vw) * .125); } html[data-layout="mobilePortrait"] .shopv2 .sh-panel::before { width: 6rem; } html[data-layout="mobilePortrait"] .shopv2 .sh-scroll { padding: .95rem .45rem .8rem; } html[data-layout="mobilePortrait"] .shopv2 .sh-grid { gap: .55rem .45rem; } @media (orientation: landscape) and (max-height: 520px) { .shopv2 .sh-hero { display: none !important; } #scrShop.shopv2 { grid-template-areas: "head head" "tabs panel" "tabs panel"; } } /* ================= MISIONES v2 (assets misiones/) ================= */ html[data-screen="missions"] #bg .bg-img { background-image: url(../assets/sprites/misiones/fondo_misiones_v.webp) !important; background-position: center 35% !important; } html[data-screen="missions"][data-orient="landscape"] #bg .bg-img { background-image: url(../assets/sprites/misiones/fondo_misiones_h.webp) !important; background-position: center !important; } html[data-screen="missions"] .bg-cubes { display: none; } html[data-screen="missions"] #bg::after { background: linear-gradient(180deg, rgba(6, 8, 30, .3), rgba(6, 8, 30, .6)); } #scrMissions.misv2:not(.on) { display: none !important; } #scrMissions.misv2 { overflow: hidden; gap: .4rem; padding: .1rem max(.6rem, var(--sal)) max(.5rem, var(--sab)) max(.6rem, var(--sar)); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "head" "hero" "panel" "chests"; } .misv2 .ms-head { grid-area: head; display: grid; grid-template-columns: 2.6rem 1fr 2.6rem; align-items: center; } .misv2 .sh-back { width: 2.6rem; height: 2.6rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .misv2 .sh-back img { width: 118%; height: 118%; object-fit: contain; filter: drop-shadow(0 .15rem .25rem rgba(0,0,0,.5)); transition: transform .12s; } .misv2 .sh-back:active img { transform: scale(.9); } .misv2 .ms-title { --w: min(16rem, 66vw); justify-self: center; position: relative; width: var(--w); aspect-ratio: 1545 / 376; display: block; } .misv2 .ms-title img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 .2rem .4rem rgba(0,0,0,.45)); } .misv2 .ms-title b { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 400 calc(var(--w) * .1)/1 var(--display); color: #fff; letter-spacing: .04em; -webkit-text-stroke: .12em #6a2a00; paint-order: stroke fill; text-shadow: 0 .08em 0 #4a1c00, 0 .12em .2em rgba(0,0,0,.5); } .misv2 .ms-hero { grid-area: hero; display: flex; align-items: flex-end; justify-content: center; gap: .5rem; height: clamp(5.2rem, 15vh, 9rem); min-height: 0; } .misv2 .ms-pando { height: 100%; width: auto; max-width: 42%; object-fit: contain; filter: drop-shadow(0 .3rem .5rem rgba(0,0,0,.55)); transform-origin: 50% 100%; animation: shPando 3.2s ease-in-out infinite; } .misv2 .ms-pando.happy { animation: msJump .5s ease-out 3; } @keyframes msJump { 0%, 100% { transform: translateY(0) scale(1) } 40% { transform: translateY(-10%) scale(1.04, .97) } } .misv2 .ms-side { display: grid; gap: .45rem; justify-items: center; align-self: center; min-width: 0; max-width: 56%; } .misv2 .ms-bubble { position: relative; padding: .4rem .7rem; border-radius: 1rem; background: #fff; color: #23214a; font: 400 .85rem/1.15 var(--display); text-align: center; box-shadow: 0 .2rem 0 #b9c3ff, 0 .35rem .6rem rgba(0,0,0,.4); } .misv2 .ms-bubble::before { content: ''; position: absolute; left: -.45rem; bottom: .6rem; border: .35rem solid transparent; border-right: .55rem solid #fff; border-left: 0; } .misv2 .ms-bubble.pop { animation: shBub .35s ease-out; } .misv2 .ms-timer { --h: 2.5rem; --k: calc(var(--h) / 502); position: relative; height: var(--h); display: flex; align-items: center; gap: .3rem; padding: 0 .9rem 0 2.3rem; white-space: nowrap; border: 0 solid transparent; border-image: none; } .misv2 .ms-timer img { position: absolute; left: -.3rem; top: 50%; height: 2.6rem; width: auto; transform: translateY(-52%) rotate(-8deg); filter: drop-shadow(0 .1rem .2rem rgba(0,0,0,.5)); animation: msClock 2.4s ease-in-out infinite; } @keyframes msClock { 0%, 70%, 100% { transform: translateY(-52%) rotate(-8deg) } 80% { transform: translateY(-52%) rotate(172deg) } 90% { transform: translateY(-52%) rotate(172deg) } } .misv2 .ms-timer span { display: grid; line-height: 1.05; } .misv2 .ms-timer small { font: 800 .6rem var(--body); color: #9fd6ff; } .misv2 .ms-timer b { font: 400 .98rem var(--display); color: #fff; letter-spacing: .04em; text-shadow: 0 .08rem 0 #071040; } /* panel */ .misv2 .ms-panel { grid-area: panel; min-height: 0; position: relative; display: flex; margin: .45rem .15rem 0; border: .2rem solid #ffc63a; border-radius: 1.1rem; padding: .25rem; background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(70, 120, 255, .5), rgba(70, 120, 255, 0) 70%), linear-gradient(180deg, #172f9a, #0d1b62 55%, #0a1450); box-shadow: inset 0 0 0 .12rem #24156a, inset 0 0 0 .24rem rgba(80, 215, 255, .75), inset 0 0 1.4rem rgba(60, 190, 255, .35), 0 0 0 .14rem #5b2c00, 0 0 1.1rem rgba(255, 170, 50, .45), 0 .4rem .9rem rgba(0, 0, 0, .55); } .misv2 .ms-panel::before { content: ''; position: absolute; z-index: 4; left: 50%; top: 0; width: 6.6rem; aspect-ratio: 340 / 114; transform: translate(-50%, -58%); pointer-events: none; background: url(../assets/sprites/tienda/panel_gema.webp) center / contain no-repeat; filter: drop-shadow(0 .15rem .2rem rgba(0,0,0,.5)); } .misv2 .ms-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; container-type: inline-size; padding: 1rem .45rem .7rem; scrollbar-width: thin; scrollbar-color: rgba(120, 190, 255, .55) transparent; overscroll-behavior: contain; } .misv2 .ms-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; } @container (min-width: 30em) { .misv2 .ms-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .7rem; } } /* fila de misión */ .misv2 .mr { position: relative; aspect-ratio: 1552 / 367; container-type: inline-size; animation: scIn .35s ease-out both; } .misv2 .mr::before { content: ''; position: absolute; inset: 0; background: none; pointer-events: none; } .misv2 .mr.done { filter: drop-shadow(0 0 .45rem rgba(255, 200, 60, .55)); } .misv2 .mr > * { position: absolute; z-index: 1; } .misv2 .mr-ic { left: 14.7%; top: 50%; width: 15.5cqw; height: 15.5cqw; transform: translate(-50%, -50%); object-fit: contain; filter: drop-shadow(0 .5cqw .6cqw rgba(0,0,0,.5)); } .misv2 .mr.done .mr-ic { animation: mrIc 1.2s ease-in-out infinite; } @keyframes mrIc { 0%, 100% { transform: translate(-50%, -50%) scale(1) } 50% { transform: translate(-50%, -50%) scale(1.08) rotate(-4deg) } } .misv2 .mr.claimed .mr-ic { filter: grayscale(.6) brightness(.8); } .misv2 .mr-ok { left: 19.5%; top: 58%; width: 6.5cqw; height: 6.5cqw; object-fit: contain; } .misv2 .mr-nm { left: 25.5%; right: 36%; top: 16%; font: 400 3.85cqw/1.1 var(--display); color: #fff; text-shadow: 0 .4cqw 0 #0a0f3e, 0 0 1cqw #0a0f3e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .misv2 .mr.claimed .mr-nm { color: #c9d2e6; } .misv2 .mr-bar { --k: calc(36cqw / 1556); left: 25%; width: 36cqw; height: calc(195 * var(--k)); top: 48%; border: 0 solid transparent; border-image: none; } .misv2 .mr-bar i { position: absolute; left: 2.6%; top: 22%; bottom: 24%; width: calc(94.8% * var(--p)); min-width: 0; border-radius: 9cqw; background: linear-gradient(180deg, #b6ff7a 0%, #3fdc4c 45%, #1c9c2c 100%); box-shadow: inset 0 .35cqw 0 rgba(255,255,255,.55), 0 0 1.2cqw rgba(80, 255, 120, .55); transition: width .5s ease-out; } .misv2 .mr.done .mr-bar i, .misv2 .mr.claimed .mr-bar i { background: linear-gradient(180deg, #fff3a6 0%, #ffcf2e 45%, #e08a00 100%); box-shadow: inset 0 .35cqw 0 rgba(255,255,255,.6), 0 0 1.2cqw rgba(255, 210, 60, .6); } .misv2 .mr.claimed .mr-bar i { filter: grayscale(.5); } .misv2 .mr-bar s { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; font: 400 3.1cqw/1 var(--display); color: #fff; text-shadow: 0 .3cqw 0 #061040, 0 0 .8cqw #061040; } .misv2 .mr-rw { left: 63.5%; top: 50%; width: 12.5cqw; transform: translateY(-50%); display: grid; justify-items: center; } .misv2 .mr-rw img { width: 7.6cqw; height: 7.6cqw; object-fit: contain; filter: drop-shadow(0 .4cqw .5cqw rgba(0,0,0,.5)); } .misv2 .mr-rw b { --k: calc(12.5cqw / 1555); position: relative; z-index: 1; margin-top: -1.2cqw; width: 12.5cqw; height: calc(300 * var(--k) + 1.2cqw); display: grid; place-items: center; font: 400 3.1cqw/1 var(--display); color: #ffe27a; text-shadow: 0 .3cqw 0 #3a1800; border: 0 solid transparent; border-image: none; } .misv2 .mr-rw b.gem { color: #f0b6ff; text-shadow: 0 .3cqw 0 #2c0646; } .misv2 .mr.claimed .mr-rw { opacity: .55; filter: grayscale(.5); } .misv2 .mr-btn { --H: 10.5cqw; right: 5.2%; top: 50%; width: 19cqw; height: var(--H); transform: translateY(-50%); cursor: pointer; padding: 0; background: none; --ih: 1251; --k: calc(var(--H) / var(--ih)); border: 0 solid transparent; font: 400 3.15cqw/1 var(--display); color: #fff; -webkit-text-stroke: .12em #0d5212; white-space: nowrap; paint-order: stroke fill; transition: filter .1s; } .misv2 .mr-btn:active { transform: translateY(-50%) scale(.93); } .misv2 .mr-btn.go { -webkit-text-stroke-color: #0b3e7a; } .misv2 .mr.done .mr-btn { animation: mrBtn 1s ease-in-out infinite; } @keyframes mrBtn { 0%, 100% { filter: brightness(1) } 50% { filter: brightness(1.18) drop-shadow(0 0 1.5cqw rgba(120, 255, 120, .8)) } } .misv2 .mr-seal { right: 7.5%; top: 50%; width: 14cqw; height: 14cqw; transform: translateY(-50%) rotate(-14deg); object-fit: contain; filter: drop-shadow(0 .4cqw .5cqw rgba(0,0,0,.45)); } .misv2 .mr-seal.stamp { animation: mrStamp .45s cubic-bezier(.2, 1.8, .4, 1) both; } @keyframes mrStamp { 0% { opacity: 0; transform: translateY(-50%) rotate(-30deg) scale(2.4) } 100% { opacity: 1; transform: translateY(-50%) rotate(-14deg) scale(1) } } .misv2 .ms-note { text-align: center; color: #b9ccf5; font-size: .7rem; margin: .5rem 0 0; } /* cofres de progreso */ .misv2 .ms-chests { grid-area: chests; position: relative; width: min(100%, 34rem); justify-self: center; margin: .2rem 0 0; padding: 2.6rem 7% 1.15rem; container-type: inline-size; } .misv2 .ch-box .ch-ok { position: absolute; right: 4%; bottom: 2%; width: 40%; } .misv2 .ch-track { position: relative; width: 100%; aspect-ratio: 1543 / 187; } .misv2 .ch-fill { position: absolute; left: 5.5%; top: 36%; height: 26%; width: calc(90.5% * var(--p)); border-radius: 2cqw; background: linear-gradient(180deg, #fff3a6, #ffc21f 50%, #e08a00); box-shadow: 0 0 1.5cqw rgba(255, 200, 60, .8); transition: width .6s; } .misv2 .ch-node { position: absolute; top: 50%; width: 6.4cqw; height: 6.4cqw; transform: translate(-50%, -50%); object-fit: contain; } .misv2 .ch-n { position: absolute; top: 108%; transform: translateX(-50%); font: 400 3.3cqw/1 var(--display); color: #fff; text-shadow: 0 .3cqw 0 #061040; white-space: nowrap; } .misv2 .ch-box { position: absolute; bottom: 72%; width: 17cqw; transform: translateX(-50%); padding: 0; border: 0; background: none; cursor: default; } .misv2 .ch-box img { width: 100%; display: block; filter: drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.5)); } .misv2 .ch-box.lock img { filter: grayscale(.35) brightness(.75) drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.5)); } .misv2 .ch-box.ready { cursor: pointer; animation: chReady 1s ease-in-out infinite; } .misv2 .ch-box.ready::before { content: ''; position: absolute; inset: -30%; z-index: -1; background: url(../assets/sprites/misiones/fx_rayos.webp) center / contain no-repeat; animation: chRays 4s linear infinite; opacity: .85; } @keyframes chReady { 0%, 100% { transform: translateX(-50%) rotate(0) } 25% { transform: translateX(-50%) rotate(-6deg) scale(1.05) } 75% { transform: translateX(-50%) rotate(6deg) scale(1.05) } } @keyframes chRays { to { transform: rotate(360deg) } } .misv2 .ch-box.open img { opacity: .9; } .misv2 .ch-box i { position: absolute; left: 50%; top: -18%; transform: translateX(-50%); font: 400 3.2cqw/1 var(--display); color: #fff; background: #ff2d55; padding: .6cqw 1.6cqw; border-radius: 3cqw; font-style: normal; white-space: nowrap; box-shadow: 0 0 0 .4cqw #fff; } /* horizontal: Pando y reloj a la izquierda, misiones a la derecha */ html[data-orient="landscape"] #scrMissions.misv2 { grid-template-columns: clamp(10rem, 22vw, 15rem) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head head" "hero panel" "hero chests"; column-gap: .9rem; } html[data-orient="landscape"] .misv2 .ms-title { --w: min(14rem, 34vh * 2.4); } html[data-orient="landscape"] .misv2 .ms-hero { height: auto; flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: .6rem; padding: .4rem 0 .2rem; } html[data-orient="landscape"] .misv2 .ms-pando { width: 100%; max-width: 100%; height: auto; max-height: 100%; min-height: 0; flex: 0 1 auto; object-position: bottom; } html[data-orient="landscape"] .misv2 .ms-side { max-width: 100%; } html[data-orient="landscape"] .misv2 .ms-bubble::before { left: 50%; bottom: -.5rem; transform: translateX(-50%); border: .35rem solid transparent; border-top: .55rem solid #fff; border-bottom: 0; } html[data-orient="landscape"] .misv2 .ms-panel { margin: .3rem 0 0; } html[data-orient="landscape"] .misv2 .ms-chests { width: min(100%, 40rem); padding-top: 2.4rem; } html[data-orient="landscape"] .misv2 .ms-list { min-height: calc(100% - 1.5rem); align-content: center; } @media (orientation: landscape) and (max-height: 520px) { .misv2 .ms-pando { display: none; } .misv2 .ms-hero { justify-content: flex-start; } } /* móvil vertical */ html[data-layout="mobilePortrait"] .misv2 .ms-title { --w: min(14rem, 60vw); } html[data-layout="mobilePortrait"] .misv2 .ms-hero { height: clamp(4.6rem, 13vh, 7rem); } html[data-layout="mobilePortrait"] .misv2 .ms-bubble { font-size: .74rem; } html[data-layout="mobilePortrait"] .misv2 .ms-scroll { padding: .95rem .3rem .6rem; } html[data-layout="mobilePortrait"] .misv2 .ms-list { gap: .25rem; } html[data-layout="mobilePortrait"] .misv2 .ms-chests { padding-top: 2.2rem; } /* misiones: en tablet/PC la lista cabe completa sin desplazar */ html:not([data-layout="mobilePortrait"]) .misv2 .ms-scroll { container-type: size; } html[data-layout="tabletPortrait"] .misv2 .ms-list { grid-template-columns: minmax(0, 1fr) !important; width: min(100%, calc((100cqh - 4.2rem) / 6 * 4.1)); margin: 0 auto; } html[data-orient="landscape"] .misv2 .ms-list { width: min(100%, calc((100cqh - 3.6rem) / 3 * 4.1 * 2 + .7rem)); margin: 0 auto; } /* ---- Misiones v2.1: marcos dibujados en vectores (bordes nítidos a cualquier resolución) ---- */ .misv2 .mr { --c: 5.2cqw; --ci: 4.3cqw; filter: drop-shadow(0 .55cqw 0 #1b0b45) drop-shadow(0 1cqw 1.2cqw rgba(0,0,0,.45)); } .misv2 .mr::before, .misv2 .mr.done::before, .misv2 .mr.claimed::before { background: linear-gradient(180deg, #fff3b0 0%, #ffcf3f 22%, #f4a21a 60%, #c86a08 82%, #ffd257 100%); clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); } .misv2 .mr::after { content: ''; position: absolute; inset: 1.15cqw; pointer-events: none; background: linear-gradient(180deg, rgba(140, 215, 255, .55) 0, rgba(140, 215, 255, 0) 1.2cqw), radial-gradient(ellipse 70% 120% at 60% 0%, rgba(90, 160, 255, .45), rgba(90, 160, 255, 0) 70%), linear-gradient(180deg, #2a5ae0 0%, #163aa8 50%, #0d2475 100%); clip-path: polygon(var(--ci) 0, calc(100% - var(--ci)) 0, 100% var(--ci), 100% calc(100% - var(--ci)), calc(100% - var(--ci)) 100%, var(--ci) 100%, 0 calc(100% - var(--ci)), 0 var(--ci)); } .misv2 .mr.done { filter: drop-shadow(0 .55cqw 0 #5a2a00) drop-shadow(0 0 1.8cqw rgba(255, 200, 60, .85)); } .misv2 .mr.done::before { background: linear-gradient(180deg, #fffbe0 0%, #ffe066 25%, #ffb420 60%, #e07e05 82%, #ffe27a 100%); } .misv2 .mr.done::after { background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255, 240, 170, .35) 45%, rgba(255,255,255,0) 55%) -100% 0 / 220% 100% no-repeat, linear-gradient(180deg, rgba(255, 230, 140, .5) 0, rgba(255, 230, 140, 0) 1.2cqw), linear-gradient(180deg, #3460e6 0%, #1a40b4 50%, #10287e 100%); animation: mrShine 2.6s ease-in-out infinite; } @keyframes mrShine { 0% { background-position: -120% 0, 0 0, 0 0 } 60%, 100% { background-position: 220% 0, 0 0, 0 0 } } .misv2 .mr.claimed { filter: drop-shadow(0 .55cqw 0 #1d2233) drop-shadow(0 1cqw 1.2cqw rgba(0,0,0,.4)); } .misv2 .mr.claimed::before { background: linear-gradient(180deg, #ffffff 0%, #d5dbe8 25%, #9aa4ba 60%, #6c7590 82%, #dfe4ef 100%); } .misv2 .mr.claimed::after { background: linear-gradient(180deg, rgba(255,255,255,.3) 0, rgba(255,255,255,0) 1.2cqw), linear-gradient(180deg, #5b6684 0%, #3e4762 55%, #2b3249 100%); } .misv2 .mr > * { z-index: 2; } .misv2 .mr-gem { left: 2.4%; top: 50%; width: 4.4cqw; height: 4.4cqw; transform: translate(-50%, -50%) rotate(45deg); border-radius: .8cqw; background: linear-gradient(135deg, #ffd6ff 0%, #d36bff 35%, #8a2be2 70%, #5a14a8 100%); box-shadow: 0 0 0 .5cqw #ffcf3f, 0 0 0 .8cqw #5a2a00, 0 0 1.4cqw rgba(220, 120, 255, .9); } .misv2 .mr.claimed .mr-gem { filter: grayscale(1) brightness(1.1); } .misv2 .mr-ring { left: 13.2%; top: 50%; width: 21cqw; height: 21cqw; transform: translate(-50%, -50%); object-fit: contain; filter: drop-shadow(0 .4cqw .4cqw rgba(0,0,0,.5)); } .misv2 .mr.claimed .mr-ring { filter: grayscale(1) brightness(1.15) drop-shadow(0 .4cqw .4cqw rgba(0,0,0,.5)); } .misv2 .mr-ic { left: 13.2%; width: 13.5cqw; height: 13.5cqw; } .misv2 .mr-ok { left: 18.5%; top: 60%; width: 6.4cqw; height: 6.4cqw; } .misv2 .mr-nm { left: 26.5%; top: 17%; } .misv2 .mr-bar { border: .5cqw solid #ffc531; border-image: none; border-radius: 3cqw; left: 26%; width: 35.5cqw; height: 4.8cqw; top: 51%; background: linear-gradient(180deg, #050b30, #0b1a5c); box-shadow: inset 0 .5cqw .7cqw rgba(0,0,0,.65), 0 .35cqw 0 #6a3300; } .misv2 .mr.claimed .mr-bar { border-color: #c9d0de; box-shadow: inset 0 .5cqw .7cqw rgba(0,0,0,.65), 0 .35cqw 0 #3b4258; } .misv2 .mr-bar i { left: .35cqw; top: .35cqw; bottom: .35cqw; width: calc((100% - .7cqw) * var(--p)); border-radius: 2.4cqw; } .misv2 .mr-rw b { border-image: none; border: .4cqw solid #ffc531; border-radius: 3cqw; height: 4.6cqw; width: auto; min-width: 11cqw; padding: 0 1.2cqw; background: linear-gradient(180deg, #0b1a5c, #050b30); box-shadow: 0 .3cqw 0 #6a3300; } .misv2 .mr-btn { border-image: none; isolation: isolate; --cb: 2.6cqw; } .misv2 .mr-btn::before, .misv2 .mr-btn::after { content: ''; position: absolute; pointer-events: none; clip-path: polygon(var(--cb) 0, calc(100% - var(--cb)) 0, 100% var(--cb), 100% calc(100% - var(--cb)), calc(100% - var(--cb)) 100%, var(--cb) 100%, 0 calc(100% - var(--cb)), 0 var(--cb)); } .misv2 .mr-btn::before { inset: 0; z-index: -2; background: linear-gradient(180deg, #fff3b0, #ffcf3f 30%, #e8920f 75%, #ffd257); } .misv2 .mr-btn::after { inset: .75cqw; --cb: 2cqw; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 45%), linear-gradient(180deg, #8dff63 0%, #39cf43 50%, #1b9227 100%); } .misv2 .mr-btn.go::after { background: linear-gradient(180deg, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 45%), linear-gradient(180deg, #7fe3ff 0%, #2aa5ff 50%, #155fd6 100%); } .misv2 .mr-btn { filter: drop-shadow(0 .45cqw 0 #5a2a00); } /* reloj */ .misv2 .ms-timer { border-image: none; border: .14rem solid #4fd6ff; border-radius: 1.5rem; background: linear-gradient(180deg, #1c4cc4, #0b1c63 60%, #08134a); box-shadow: 0 0 .7rem rgba(79, 214, 255, .65), inset 0 .12rem 0 rgba(255,255,255,.3), inset 0 -.15rem .3rem rgba(0,0,0,.4), 0 .2rem 0 #061040; } /* barra de cofres vectorial */ .misv2 .ch-track { aspect-ratio: auto; height: 7cqw; background: linear-gradient(180deg, #050b30, #0d1d66); border: .7cqw solid #ffc531; border-radius: 5cqw; box-shadow: 0 0 0 .45cqw #5a2a00, 0 0 2cqw rgba(79, 214, 255, .55), inset 0 .6cqw .9cqw rgba(0,0,0,.6); } .misv2 .ch-fill { left: .5cqw; top: .5cqw; bottom: .5cqw; height: auto; width: 0; border-radius: 4cqw; background: linear-gradient(180deg, #fff6b8, #ffcd2a 45%, #e48a00); } .misv2 .ch-dot { position: absolute; top: 50%; width: 5.4cqw; height: 5.4cqw; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #0b1a5c 55%, #133080); box-shadow: 0 0 0 .55cqw #4fd6ff, 0 0 1.4cqw rgba(79, 214, 255, .9); } .misv2 .ch-node { width: 7.2cqw; height: 7.2cqw; } .misv2 .ch-box { bottom: 95%; } .misv2 .ch-n { top: 135%; } .misv2 .mr-gem { left: 3.6%; width: 3.8cqw; height: 3.8cqw; } html[data-orient="landscape"] .misv2 .ms-chests { padding-top: 5rem; width: min(100%, 36rem); } html[data-orient="landscape"] .misv2 .ch-box { width: 15cqw; } /* ---- Misiones v2.2: botones con bordes redondeados perfectamente suavizados ---- */ .misv2 .mr-btn { filter: none; isolation: auto; border: .75cqw solid transparent; border-radius: 3cqw; background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 50%) padding-box, linear-gradient(180deg, #8dff63 0%, #39cf43 52%, #1b9227 100%) padding-box, linear-gradient(180deg, #fff3b0 0%, #ffcf3f 35%, #e8920f 80%, #ffd257 100%) border-box; box-shadow: 0 .55cqw 0 #6a3300, 0 .9cqw 1.2cqw rgba(0,0,0,.45), inset 0 -.6cqw 0 rgba(0,70,0,.35); } .misv2 .mr-btn.go { background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 50%) padding-box, linear-gradient(180deg, #7fe3ff 0%, #2aa5ff 52%, #155fd6 100%) padding-box, linear-gradient(180deg, #fff3b0 0%, #ffcf3f 35%, #e8920f 80%, #ffd257 100%) border-box; box-shadow: 0 .55cqw 0 #6a3300, 0 .9cqw 1.2cqw rgba(0,0,0,.45), inset 0 -.6cqw 0 rgba(0,30,110,.35); } .misv2 .mr-btn::before, .misv2 .mr-btn::after { content: none; } .misv2 .mr-btn:active { transform: translateY(-46%) scale(.95); box-shadow: 0 .2cqw 0 #6a3300, inset 0 -.3cqw 0 rgba(0,0,0,.3); } .misv2 .mr-gem { display: none; } .misv2 .mr-btn, .misv2 .mr-btn.go { border-image: none !important; } /* títulos con cinta: misma cinta completa en Tienda y Misiones, texto centrado exacto sobre la banda */ .misv2 .ms-title, .shopv2 .sh-title { --w: min(19rem, 76vw); width: var(--w); aspect-ratio: 626 / 275; } html[data-orient="landscape"] .misv2 .ms-title, html[data-orient="landscape"] .shopv2 .sh-title { --w: min(17rem, 30vh * 2.28); } html[data-layout="mobilePortrait"] .misv2 .ms-title, html[data-layout="mobilePortrait"] .shopv2 .sh-title { --w: min(17rem, 72vw); } .misv2 .ms-title b, .shopv2 .sh-title b { top: 53.5%; left: 18%; right: 18%; transform: translateY(-50%); font: 400 calc(var(--w) * .1)/1 var(--display); letter-spacing: .03em; white-space: nowrap; -webkit-text-stroke: .13em #6a2a00; paint-order: stroke fill; text-shadow: 0 .09em 0 #4a1c00, 0 .14em .25em rgba(0,0,0,.45); } html[data-orient="landscape"] .misv2 .ms-title, html[data-orient="landscape"] .shopv2 .sh-title { --w: min(30rem, 40vh); } html[data-orient="landscape"] .shopv2 .sh-title, html[data-orient="landscape"] .misv2 .ms-title { width: var(--w); } html .shopv2 .sh-title b { font-size: calc(var(--w) * .1); } html[data-orient="landscape"] .shopv2 .sh-title b, html[data-layout="mobilePortrait"] .shopv2 .sh-title b, html[data-orient="landscape"] .misv2 .ms-title b { font-size: calc(var(--w) * .1); } /* ---- Tienda v2.3 (horizontal): panel al 70% y pestañas con letra grande ajustadas al texto ---- */ html[data-orient="landscape"] .shopv2 .sh-panel { width: 70%; height: 70%; justify-self: center; align-self: center; } html[data-orient="landscape"] .shopv2 .sh-tabs { justify-items: start; gap: .55rem; } html[data-orient="landscape"] .shopv2 .sh-tabs button { --h: 3.1rem; width: auto; max-width: 100%; justify-self: start; padding: 0 1.15rem 0 .85rem; gap: .55rem; font-size: 1.32rem; letter-spacing: .01em; } html[data-orient="landscape"] .shopv2 .sh-tabs img { height: 2.05rem; width: 2.05rem; } html[data-orient="landscape"] .shopv2 .sh-tabs b { overflow: visible; } html[data-orient="landscape"] .shopv2 .sh-tabs i { top: -.4rem; right: -.4rem; } html[data-orient="landscape"] #scrShop.shopv2 { grid-template-columns: max-content minmax(0, 1fr); } html[data-orient="landscape"] .shopv2 .sh-hero { max-width: clamp(10rem, 22vw, 15rem); } html[data-orient="landscape"] .shopv2 .sh-panel { align-self: start; margin-top: .9rem; } html[data-orient="landscape"] .shopv2 .sh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } /* ================= MODAL CÓDIGO PROMO (arte promo/) ================= */ .mbox.promobox { --k: 1rem; position: relative; width: min(92vw, 25rem); max-height: none; overflow: visible; margin-top: 2.6rem; padding: 3.2em 1.2em 1.3em; font-size: var(--k); border: .22em solid #ffc63a; border-radius: 1.3em; background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(80, 140, 255, .55), rgba(80, 140, 255, 0) 70%), linear-gradient(180deg, #1a3aa8, #0f2273 55%, #0a1650); box-shadow: inset 0 0 0 .14em #24156a, inset 0 0 0 .28em rgba(80, 215, 255, .8), inset 0 0 1.6em rgba(60, 190, 255, .35), 0 0 0 .16em #5b2c00, 0 0 1.4em rgba(255, 170, 50, .5), 0 .6em 1.6em rgba(0, 0, 0, .6); animation: prIn .38s cubic-bezier(.2, 1.4, .4, 1) both; } @keyframes prIn { from { transform: scale(.7); opacity: 0 } to { transform: none; opacity: 1 } } .promobox .pr-rib { --w: min(17em, 80vw); position: absolute; left: 50%; top: 0; width: var(--w); aspect-ratio: 626 / 275; transform: translate(-50%, -62%); pointer-events: none; z-index: 3; } .promobox .pr-rib img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 .2em .35em rgba(0,0,0,.5)); } .promobox .pr-rib b { position: absolute; left: 18%; right: 18%; top: 53.5%; transform: translateY(-50%); text-align: center; white-space: nowrap; font: 400 calc(var(--w) * .085)/1 var(--display); color: #fff; -webkit-text-stroke: .13em #6a2a00; paint-order: stroke fill; text-shadow: 0 .09em 0 #4a1c00; } /* botón cerrar (vectorial) */ .promobox .pr-x { position: absolute; z-index: 4; top: -.9em; right: -.9em; width: 2.7em; height: 2.7em; padding: 0; border: .2em solid #ffd257; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 50% 30%, #ff8a9a, #f0284a 55%, #b0102c); box-shadow: 0 0 0 .14em #6a1a00, 0 .25em 0 #6a1a00, 0 .4em .6em rgba(0,0,0,.5), inset 0 .25em 0 rgba(255,255,255,.35); transition: transform .12s; } .promobox .pr-x:active { transform: scale(.9); } .promobox .pr-x i, .promobox .pr-x i::after { position: absolute; left: 50%; top: 50%; width: 1.25em; height: .32em; border-radius: .2em; background: #fff; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 .06em 0 rgba(0,0,0,.25); } .promobox .pr-x i::after { content: ''; transform: translate(-50%, -50%) rotate(90deg); } /* cuerpo */ .promobox .pr-body { display: grid; gap: .6em; } .promobox .pr-hero { position: relative; display: flex; justify-content: center; height: 8.5em; } .promobox .pr-hero::before { content: ''; position: absolute; left: 50%; top: 52%; width: 9em; height: 9em; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(120, 200, 255, .45), rgba(120, 200, 255, 0) 68%); } .promobox .pr-pando { position: relative; height: 100%; width: auto; filter: drop-shadow(0 .3em .4em rgba(0,0,0,.5)); animation: shPando 3s ease-in-out infinite; transform-origin: 50% 100%; } .promobox .pr-tk { position: absolute; left: calc(50% + 2.4em); top: 38%; width: 3.6em; transform: rotate(-14deg); filter: drop-shadow(0 .2em .3em rgba(0,0,0,.5)); animation: prTk 2.2s ease-in-out infinite; } @keyframes prTk { 0%, 100% { transform: rotate(-14deg) translateY(0) } 50% { transform: rotate(-6deg) translateY(-.3em) } } .promobox .pr-side { display: grid; gap: .55em; justify-items: center; min-width: 0; } .promobox .pr-say { margin: 0; text-align: center; font: 800 1em/1.25 var(--body); color: #cfe4ff; } .promobox .pr-say b { font: 400 1.3em/1.2 var(--display); color: #fff; text-shadow: 0 .08em 0 #071040; } .promobox .pr-form { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 3.2em; gap: .45em; align-items: center; } .promobox .pr-form.shake { animation: sbShake .38s; } .promobox .pr-field { position: relative; height: 3.2em; display: flex; align-items: center; gap: .3em; padding: 0 .5em 0 .45em; border-radius: .9em; cursor: text; background: linear-gradient(180deg, #050b30, #0b1a5c); border: .2em solid #ffc531; box-shadow: inset 0 .3em .5em rgba(0,0,0,.6), 0 .2em 0 #6a3300; transition: border-color .15s, box-shadow .15s; } .promobox .pr-field.focus { border-color: #4fd6ff; box-shadow: inset 0 .3em .5em rgba(0,0,0,.6), 0 0 .8em rgba(79, 214, 255, .75), 0 .2em 0 #0b3e7a; } .promobox .pr-field.bad { border-color: #ff4058; box-shadow: inset 0 .3em .5em rgba(0,0,0,.6), 0 0 .8em rgba(255, 64, 88, .75), 0 .2em 0 #6a0016; } .promobox .pr-field.used { border-color: #ff9a2e; box-shadow: inset 0 .3em .5em rgba(0,0,0,.6), 0 0 .8em rgba(255, 154, 46, .7), 0 .2em 0 #6a3300; } .promobox .pr-field.ok { border-color: #3ee06a; box-shadow: inset 0 .3em .5em rgba(0,0,0,.6), 0 0 .8em rgba(62, 224, 106, .8), 0 .2em 0 #0d5212; } .promobox .pr-field > img:first-child { width: 2.1em; height: 2.1em; object-fit: contain; flex: none; } .promobox .pr-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: #fff; padding: 0; text-align: center; font: 400 1.35em/1 var(--display); letter-spacing: .1em; text-transform: uppercase; caret-color: #4fd6ff; } .promobox .pr-field input::placeholder { color: rgba(170, 195, 255, .45); letter-spacing: .14em; } .promobox .pr-st { width: 2.1em; height: 2.1em; object-fit: contain; flex: none; } .promobox .pr-st:not([src]) { visibility: hidden; } .promobox .pr-st.pop { animation: mrStamp2 .4s cubic-bezier(.2, 1.8, .4, 1) both; } @keyframes mrStamp2 { from { opacity: 0; transform: scale(2.2) rotate(-25deg) } to { opacity: 1; transform: scale(1) rotate(-8deg) } } .promobox .pr-paste { width: 3.2em; height: 3.2em; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .1s; } .promobox .pr-paste img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .2em .25em rgba(0,0,0,.45)); } .promobox .pr-paste:active { transform: scale(.9); } .promobox .pr-msg { margin: 0; min-height: 1.3em; text-align: center; font: 800 .88em/1.3 var(--body); color: #9fb8e8; } .promobox .pr-msg.bad { color: #ff7a8a; } .promobox .pr-msg.used { color: #ffb45e; } .promobox .pr-msg.ok { color: #6dff95; } /* botón verde vectorial (igual que Misiones) */ .promobox .pr-go { width: min(100%, 14em); height: 3.3em; cursor: pointer; border: .22em solid transparent; border-radius: 1em; font: 400 1.35em/1 var(--display); color: #fff; letter-spacing: .04em; -webkit-text-stroke: .12em #0d5212; paint-order: stroke fill; font-size: 1.3em; height: 2.6em; background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 50%) padding-box, linear-gradient(180deg, #8dff63 0%, #39cf43 52%, #1b9227 100%) padding-box, linear-gradient(180deg, #fff3b0 0%, #ffcf3f 35%, #e8920f 80%, #ffd257 100%) border-box; box-shadow: 0 .22em 0 #6a3300, 0 .35em .5em rgba(0,0,0,.45), inset 0 -.25em 0 rgba(0,70,0,.35); transition: transform .1s, filter .15s; } .promobox .pr-go:active { transform: translateY(.12em) scale(.97); box-shadow: 0 .08em 0 #6a3300, inset 0 -.12em 0 rgba(0,0,0,.3); } .promobox .pr-go.off { filter: grayscale(.85) brightness(.9); -webkit-text-stroke-color: #3b4458; } /* premio */ .promobox .pr-win { display: none; } .promobox.won .pr-body { display: none; } .promobox.won .pr-win { display: grid; justify-items: center; gap: .45em; position: relative; overflow: hidden; padding-top: .4em; } .promobox .pw-stage { position: relative; width: 11em; height: 9.5em; display: grid; place-items: center; } .promobox .pw-rays { position: absolute; width: 13em; height: 13em; object-fit: contain; animation: chRays 6s linear infinite; opacity: .9; } .promobox .pw-env { position: relative; width: 8.5em; filter: drop-shadow(0 .3em .4em rgba(0,0,0,.5)); animation: pwEnv .6s cubic-bezier(.2, 1.6, .4, 1) both; } .promobox .pw-prize { position: absolute; width: 5em; top: -.6em; filter: drop-shadow(0 .3em .4em rgba(0,0,0,.5)); animation: pwPrize .9s .25s cubic-bezier(.2, 1.4, .4, 1) both; } @keyframes pwEnv { from { transform: scale(.3) rotate(-20deg); opacity: 0 } to { transform: none; opacity: 1 } } @keyframes pwPrize { from { transform: translateY(3em) scale(.3); opacity: 0 } to { transform: none; opacity: 1 } } .promobox .pw-pando { position: absolute; left: -.4em; bottom: 3.6em; width: 5.2em; filter: drop-shadow(0 .3em .4em rgba(0,0,0,.5)); animation: msJump .5s ease-out 3; } .promobox .pw-t { margin: 0; font: 400 1.55em/1.1 var(--display); color: #fff; text-shadow: 0 .08em 0 #071040, 0 0 .5em rgba(255, 210, 80, .6); } .promobox .pw-chip { padding: .3em 1em; border-radius: 2em; border: .18em solid #ffc531; background: linear-gradient(180deg, #0b1a5c, #050b30); font: 400 1.3em/1.2 var(--display); color: #ffe27a; box-shadow: 0 .15em 0 #6a3300; } .promobox .pw-conf { position: absolute; top: -20%; pointer-events: none; animation: pwConf 1.8s ease-in forwards; } @keyframes pwConf { from { transform: translateY(0) rotate(0); opacity: 1 } to { transform: translateY(26em) rotate(540deg); opacity: 0 } } /* horizontal: Pando a la izquierda, formulario a la derecha */ html[data-orient="landscape"] .mbox.promobox { width: min(92vw, 38rem, 150vh); margin-top: 2.2rem; } html[data-orient="landscape"] .promobox .pr-body { grid-template-columns: 11em minmax(0, 1fr); align-items: center; gap: 1em; } html[data-orient="landscape"] .promobox .pr-hero { height: 10.5em; } html[data-layout="mobilePortrait"] .mbox.promobox { --k: .82rem; width: 92vw; } html[data-orient="landscape"][data-tiny="1"] .mbox.promobox { --k: .8rem; } @media (orientation: landscape) and (max-height: 520px) { .mbox.promobox { --k: .72rem; } .promobox .pr-hero { height: 8em; } } /* tamaño más grande y legible */ html[data-layout="mobilePortrait"] .mbox.promobox { --k: 1.02rem; width: 93vw; } html[data-layout="tabletPortrait"] .mbox.promobox { --k: 1.15rem; width: min(80vw, 30rem); } html[data-orient="landscape"] .mbox.promobox { --k: 1.3rem; width: min(92vw, 44rem, 140vh); } @media (orientation: landscape) and (max-height: 520px) { .mbox.promobox { --k: .95rem !important; } } .promobox .pr-say { font-size: 1.05em; } .promobox .pw-pando { position: absolute; left: .2em; bottom: auto; top: 1.5em; width: 6.5em; } .promobox.won .pr-win { min-height: 17em; } .promobox .pw-stage { width: 12em; height: 10em; } /* ================= MODAL AJUSTES (arte ajustes/) ================= */ .mbox.ajbox { width: min(93vw, 27rem); padding: 3em .9em .9em; } .ajbox .aj-body { display: grid; } .ajbox .aj-pando { display: none; } .ajbox .aj-cols { display: grid; gap: .5em; } .ajbox .aj-col { display: grid; gap: .42em; align-content: start; } .ajbox .aj-row { position: relative; display: flex; align-items: center; gap: .55em; min-height: 3.1em; padding: .3em .6em .3em .4em; cursor: pointer; border-radius: .9em; background: linear-gradient(180deg, rgba(40, 80, 200, .55), rgba(12, 28, 100, .75)); border: .13em solid rgba(255, 198, 58, .85); box-shadow: inset 0 .12em 0 rgba(255,255,255,.15), 0 .14em 0 rgba(60, 30, 0, .7); } .ajbox .aj-ic { width: 2.3em; height: 2.3em; object-fit: contain; flex: none; filter: drop-shadow(0 .1em .12em rgba(0,0,0,.5)); } .ajbox .aj-row > span { flex: 1; min-width: 0; font: 400 1.05em/1.1 var(--display); color: #fff; text-shadow: 0 .08em 0 #071040; } .ajbox .aj-row input { position: absolute; opacity: 0; pointer-events: none; } /* interruptor vectorial */ .ajbox .aj-sw { position: relative; flex: none; width: 3.6em; height: 1.9em; border-radius: 1em; border: .16em solid #ffc531; transition: background .2s; background: linear-gradient(180deg, #2a2f44, #4a5068); box-shadow: inset 0 .2em .3em rgba(0,0,0,.55), 0 .12em 0 #6a3300; } .ajbox .aj-sw b { position: absolute; top: .14em; left: .16em; width: 1.36em; height: 1.36em; border-radius: 50%; transition: transform .2s cubic-bezier(.3, 1.5, .5, 1); background: radial-gradient(circle at 40% 30%, #fff, #dfe6f2 60%, #aab4c8); box-shadow: 0 .12em .2em rgba(0,0,0,.5); } .ajbox .aj-row input:checked + .aj-sw { background: linear-gradient(180deg, #8dff63, #2fc23e 55%, #178a24); box-shadow: inset 0 .15em 0 rgba(255,255,255,.4), 0 .12em 0 #6a3300, 0 0 .5em rgba(80, 255, 120, .5); } .ajbox .aj-row input:checked + .aj-sw b { transform: translateX(1.7em); } /* selector segmentado */ .ajbox .aj-row.seg { flex-wrap: wrap; cursor: default; padding-bottom: .45em; } .ajbox .aj-seg { flex: 1 0 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .3em; } .ajbox .aj-seg button { display: flex; align-items: center; justify-content: center; gap: .3em; height: 2.4em; cursor: pointer; border-radius: .7em; border: .13em solid rgba(140, 180, 255, .45); background: rgba(5, 12, 50, .65); color: #b9ccf5; font: 400 .92em/1 var(--display); padding: 0 .3em; transition: transform .1s; } .ajbox .aj-seg button img { width: 1.5em; height: 1.5em; object-fit: contain; opacity: .7; } .ajbox .aj-seg button.on { color: #fff; border-color: #ffc531; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 50%), linear-gradient(180deg, #4fd6ff, #1e86e8 55%, #1257c4); box-shadow: 0 .12em 0 #6a3300, 0 0 .5em rgba(79, 214, 255, .6); text-shadow: 0 .08em 0 #0b3e7a; } .ajbox .aj-seg button.on img { opacity: 1; } .ajbox .aj-seg button:active { transform: scale(.95); } /* botones de acción */ .ajbox .aj-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin-top: .15em; } .ajbox .aj-b { display: flex; align-items: center; justify-content: center; gap: .3em; height: 3em; cursor: pointer; border: .18em solid transparent; border-radius: .9em; padding: 0 .3em; font: 400 .98em/1 var(--display); color: #fff; -webkit-text-stroke: .1em var(--sk); paint-order: stroke fill; transition: transform .1s; background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.06) 46%, rgba(255,255,255,0) 50%) padding-box, var(--bg) padding-box, linear-gradient(180deg, #fff3b0, #ffcf3f 35%, #e8920f 80%, #ffd257) border-box; box-shadow: 0 .2em 0 #6a3300, 0 .3em .45em rgba(0,0,0,.4); } .ajbox .aj-b img { width: 1.8em; height: 1.8em; object-fit: contain; filter: drop-shadow(0 .08em .1em rgba(0,0,0,.4)); } .ajbox .aj-b:active { transform: translateY(.1em) scale(.96); } .ajbox .aj-b.gold { --bg: linear-gradient(180deg, #ffe066, #ffb420 55%, #d97800); --sk: #6a3300; } .ajbox .aj-b.blue { --bg: linear-gradient(180deg, #7fe3ff, #2aa5ff 52%, #155fd6); --sk: #0b3e7a; } .ajbox .aj-b.red { --bg: linear-gradient(180deg, #ff8a8a, #f0303f 52%, #a8101e); --sk: #5a0010; } .ajbox .aj-ver { display: flex; align-items: center; justify-content: center; gap: .3em; margin: .55em 0 0; font: 800 .74em/1 var(--body); color: #8fa6d6; } .ajbox .aj-ver img { width: 1.4em; height: 1.4em; } /* confirmación de borrar */ .ajwarn .aj-warn { display: grid; justify-items: center; gap: .6em; text-align: center; } .ajwarn .aj-wart { position: relative; height: 9em; } .ajwarn .aj-wp { height: 100%; filter: drop-shadow(0 .3em .4em rgba(0,0,0,.5)); animation: sbShake .5s 2; } .ajwarn .aj-wi { position: absolute; right: -2.6em; top: .4em; width: 3.2em; animation: prTk 1.4s ease-in-out infinite; } .ajwarn p { margin: 0; color: #cfe4ff; font: 800 .95em/1.35 var(--body); } .ajwarn p b { font: 400 1.3em/1.3 var(--display); color: #fff; } .ajwarn .aj-wb { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; width: 100%; } /* tamaños por dispositivo */ html[data-layout="mobilePortrait"] .mbox.ajbox { --k: .92rem; width: 94vw; } html[data-layout="tabletPortrait"] .mbox.ajbox { --k: 1.05rem; width: min(84vw, 31rem); } html[data-orient="landscape"] .mbox.ajbox { --k: 1.08rem; width: min(94vw, 58rem, 175vh); } html[data-orient="landscape"] .ajbox .aj-body { grid-template-columns: 9em minmax(0, 1fr); gap: .8em; align-items: end; } html[data-orient="landscape"] .ajbox .aj-pando { display: block; width: 100%; filter: drop-shadow(0 .3em .4em rgba(0,0,0,.5)); animation: shPando 3s ease-in-out infinite; transform-origin: 50% 100%; } html[data-orient="landscape"] .ajbox .aj-cols { grid-template-columns: 1fr 1fr; gap: .6em; } html[data-orient="landscape"] .mbox.ajwarn { width: min(92vw, 30rem); } @media (orientation: landscape) and (max-height: 520px) { .mbox.ajbox { --k: .74rem !important; } } /* ================= HÉROES v2 (arte heroes/) ================= */ html[data-screen="heroes"] #bg .bg-img { background-image: url(../assets/sprites/heroes/fondo_v.webp) !important; background-position: center 30% !important; } html[data-screen="heroes"][data-orient="landscape"] #bg .bg-img { background-image: url(../assets/sprites/heroes/fondo_h.webp) !important; background-position: center 60% !important; } html[data-screen="heroes"] .bg-cubes { display: none; } html[data-screen="heroes"] #bg::after { background: linear-gradient(180deg, rgba(6, 8, 30, .15), rgba(6, 8, 30, .45)); } #scrHeroes.herv2:not(.on) { display: none !important; } #scrHeroes.herv2 { overflow: hidden; gap: .45rem; padding: .1rem max(.6rem, var(--sal)) max(.6rem, var(--sab)) max(.6rem, var(--sar)); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "head" "stage" "roster" "info"; } .herv2 .hv-head { grid-area: head; grid-template-columns: 2.6rem 1fr auto; } .herv2 .sh-back { width: 2.6rem; height: 2.6rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .herv2 .sh-back img { width: 118%; height: 118%; object-fit: contain; filter: drop-shadow(0 .15rem .25rem rgba(0,0,0,.5)); } .herv2 .ms-title { --w: min(15rem, 56vw); justify-self: center; position: relative; width: var(--w); aspect-ratio: 626 / 275; } .herv2 .ms-title img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 .2rem .4rem rgba(0,0,0,.45)); } .herv2 .ms-title b { position: absolute; left: 18%; right: 18%; top: 53.5%; transform: translateY(-50%); text-align: center; white-space: nowrap; font: 400 calc(var(--w) * .1)/1 var(--display); color: #fff; -webkit-text-stroke: .13em #6a2a00; paint-order: stroke fill; text-shadow: 0 .09em 0 #4a1c00; } .herv2 .hv-name { display: flex; align-items: center; gap: .25rem; max-width: 7.5rem; height: 2.1rem; padding: 0 .55rem; cursor: pointer; border-radius: 1rem; border: .12rem solid #ffc531; background: linear-gradient(180deg, #1c4cc4, #0b1c63); color: #fff; font: 400 .78rem var(--display); box-shadow: 0 .12rem 0 #6a3300; } .herv2 .hv-name b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .herv2 .hv-name i { font-style: normal; color: #ffe27a; } /* escenario */ .herv2 .hv-stage { grid-area: stage; position: relative; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; align-items: center; } .herv2 .hv-fig { position: relative; grid-column: 2; grid-row: 1; height: 100%; min-height: 0; display: grid; place-items: end center; } .herv2 .hv-glow { position: absolute; left: 50%; bottom: 4%; width: 78%; aspect-ratio: 3 / 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--hc) 75%, transparent), transparent 70%); filter: blur(.4rem); animation: hvGlow 2.4s ease-in-out infinite; } @keyframes hvGlow { 50% { opacity: .55; transform: translateX(-50%) scale(.9) } } .herv2 .hv-full { position: relative; max-height: 100%; max-width: 100%; height: 100%; width: auto; object-fit: contain; object-position: bottom; filter: drop-shadow(0 .5rem .6rem rgba(0,0,0,.55)); animation: hvIn .4s cubic-bezier(.2, 1.5, .4, 1) both, shPando 3.2s .4s ease-in-out infinite; transform-origin: 50% 100%; } .herv2 .hv-full.lock { filter: brightness(.25) saturate(.3) drop-shadow(0 0 .6rem rgba(120, 180, 255, .6)); } .herv2 .hv-full.unlock { animation: hvUnlock .8s ease-out both; } @keyframes hvIn { from { opacity: 0; transform: translateY(8%) scale(.85) } to { opacity: 1; transform: none } } @keyframes hvUnlock { 0% { filter: brightness(3) } 100% { filter: brightness(1) drop-shadow(0 .5rem .6rem rgba(0,0,0,.55)) } } .herv2 .hv-arr { width: 2.8rem; height: 3.6rem; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .1s; } .herv2 .hv-arr img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .15rem .2rem rgba(0,0,0,.5)); } .herv2 .hv-arr.r img { transform: scaleX(-1); } .herv2 .hv-arr:active { transform: scale(.88); } .herv2 .hv-plate { grid-column: 1 / -1; grid-row: 2; justify-self: center; display: grid; justify-items: center; gap: .05rem; margin-top: -.6rem; padding: .3rem 1.4rem .35rem; border-radius: 1rem; z-index: 2; border: .16rem solid #ffc531; background: linear-gradient(180deg, #1c4cc4, #0b1c63 60%, #08134a); box-shadow: 0 .18rem 0 #6a3300, 0 0 .8rem rgba(79, 214, 255, .45), inset 0 .12rem 0 rgba(255,255,255,.25); } .herv2 .hv-plate b { font: 400 1.35rem/1.05 var(--display); color: #fff; text-shadow: 0 .08rem 0 #071040; white-space: nowrap; } .herv2 .hv-stars i { font-style: normal; font-size: 1rem; color: #4a5a88; text-shadow: 0 .06rem 0 #071040; } .herv2 .hv-stars i.on { color: #ffd23f; text-shadow: 0 0 .35rem rgba(255, 200, 60, .8), 0 .06rem 0 #6a3300; } /* lista de héroes */ .herv2 .hv-roster { grid-area: roster; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; } .herv2 .hv-av { position: relative; display: grid; justify-items: center; gap: .1rem; padding: .3rem .1rem .35rem; cursor: pointer; border-radius: .9rem; border: .13rem solid rgba(140, 180, 255, .45); background: linear-gradient(180deg, rgba(30, 60, 170, .75), rgba(8, 18, 70, .85)); transition: transform .12s; min-width: 0; } .herv2 .hv-av.on { border-color: #ffc531; background: linear-gradient(180deg, color-mix(in srgb, var(--hc) 55%, #1c3aa8), #0b1c63); box-shadow: 0 0 .7rem color-mix(in srgb, var(--hc) 80%, transparent), 0 .15rem 0 #6a3300; transform: translateY(-.15rem); } .herv2 .hv-face { width: 100%; max-width: 4.2rem; aspect-ratio: 1; object-fit: contain; } .herv2 .hv-av.lock .hv-face { filter: grayscale(.85) brightness(.6); } .herv2 .hv-av b { font: 400 .62rem/1.1 var(--display); color: #fff; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .herv2 .hv-lk { position: absolute; top: 28%; left: 50%; width: 38%; transform: translate(-50%, -50%); filter: drop-shadow(0 .1rem .15rem rgba(0,0,0,.6)); } .herv2 .hv-eq { position: absolute; top: -.3rem; right: -.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; display: grid; place-items: center; font: 900 .7rem/1 var(--body); font-style: normal; color: #fff; background: linear-gradient(180deg, #8dff63, #1b9227); box-shadow: 0 0 0 .1rem #fff; } /* información */ .herv2 .hv-info { grid-area: info; display: grid; gap: .35rem; } .herv2 .hv-card { border-radius: .9rem; padding: .4rem .7rem .45rem; border: .13rem solid rgba(255, 198, 58, .85); background: linear-gradient(180deg, rgba(30, 60, 170, .8), rgba(8, 18, 70, .9)); box-shadow: 0 .14rem 0 rgba(60, 30, 0, .7); } .herv2 .hv-card h4 { display: flex; align-items: center; gap: .3rem; margin: 0 0 .15rem; font: 400 .74rem var(--display); color: #8fd6ff; letter-spacing: .04em; text-transform: uppercase; } .herv2 .hv-card h4 img { width: 1.1rem; height: 1.1rem; } .herv2 .hv-card p { margin: 0; font: 800 .86rem/1.3 var(--body); color: #fff; } .herv2 .hv-card span { font: 400 1rem/1.15 var(--display); color: #fff; } .herv2 .hv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; } .herv2 .hv-role { display: flex; align-items: center; gap: .3rem; } .herv2 .hv-role img { width: 1.4rem; height: 1.4rem; object-fit: contain; } .herv2 .hv-rar.r3 span { color: #d6a2ff; text-shadow: 0 0 .4rem rgba(190, 120, 255, .7); } .herv2 .hv-rar.r4 span { background: linear-gradient(90deg, #ffe066, #ff9a2e, #ffe066); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .06rem 0 #6a3300); } .herv2 .hv-btn { display: flex; align-items: center; justify-content: center; gap: .4rem; height: 3rem; cursor: pointer; border: .18rem solid transparent; border-radius: .95rem; padding: 0 .6rem; font: 400 1.25rem/1 var(--display); color: #fff; -webkit-text-stroke: .1em var(--sk); paint-order: stroke fill; transition: transform .1s; background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.06) 46%, rgba(255,255,255,0) 50%) padding-box, var(--bg) padding-box, linear-gradient(180deg, #fff3b0, #ffcf3f 35%, #e8920f 80%, #ffd257) border-box; box-shadow: 0 .2rem 0 #6a3300, 0 .3rem .45rem rgba(0,0,0,.4); } .herv2 .hv-btn em { font-style: normal; } .herv2 .hv-btn img { width: 1.7rem; height: 1.7rem; object-fit: contain; } .herv2 .hv-btn:active { transform: translateY(.1rem) scale(.97); } .herv2 .hv-btn.gold { --bg: linear-gradient(180deg, #ffe066, #ffb420 55%, #d97800); --sk: #6a3300; } .herv2 .hv-btn.blue { --bg: linear-gradient(180deg, #7fe3ff, #2aa5ff 52%, #155fd6); --sk: #0b3e7a; } .herv2 .hv-btn.green { --bg: linear-gradient(180deg, #8dff63, #39cf43 52%, #1b9227); --sk: #0d5212; } .herv2 .hv-btn.gem { --bg: linear-gradient(180deg, #e6a6ff, #a24dff 52%, #6a1ac8); --sk: #3d0a6e; } .herv2 .hv-btn.off { cursor: default; filter: saturate(.8); } .herv2 .hv-btn.poor { filter: grayscale(.75) brightness(.9); } .herv2 .hv-btn.shake { animation: sbShake .38s; } /* modal nombre */ .mbox.nmbox { width: min(90vw, 22rem); } .nmbox .pr-body { justify-items: center; gap: .9em; } .nmbox .pr-field { width: 100%; } /* horizontal: lista a la izquierda, héroe al centro, info a la derecha */ html[data-orient="landscape"] #scrHeroes.herv2 { grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr) minmax(13rem, 21rem); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head head head" "roster stage info"; column-gap: 1rem; } html[data-orient="landscape"] .herv2 .hv-roster { grid-template-columns: 1fr; align-content: center; gap: .4rem; min-height: 0; } html[data-orient="landscape"] .herv2 .hv-av { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: .5rem; padding: .25rem .6rem .25rem .3rem; } html[data-orient="landscape"] .herv2 .hv-face { width: min(3.4rem, 9vh); } html[data-orient="landscape"] .herv2 .hv-av b { font-size: .95rem; } html[data-orient="landscape"] .herv2 .hv-av.on { transform: translateX(.35rem); } html[data-orient="landscape"] .herv2 .hv-lk { top: 50%; left: calc(.3rem + min(3.4rem, 9vh) / 2); width: 1.6rem; } html[data-orient="landscape"] .herv2 .hv-info { align-content: center; } html[data-orient="landscape"] .herv2 .ms-title { --w: min(17rem, 30vh * 2.28); } html[data-orient="landscape"] .herv2 .hv-plate b { font-size: 1.6rem; } html[data-layout="mobilePortrait"] .herv2 .hv-plate b { font-size: 1.2rem; } .herv2 .hv-head { display: grid; align-items: center; gap: .4rem; } .herv2 .hv-head .ms-title { display: block; } .herv2 .hv-full.lock { filter: grayscale(.65) brightness(.55) drop-shadow(0 0 .6rem rgba(120, 180, 255, .55)); } .herv2 .hv-fig .hv-flk { position: absolute; left: 50%; top: 42%; width: min(5rem, 22%); transform: translate(-50%, -50%); filter: drop-shadow(0 .2rem .3rem rgba(0,0,0,.6)); animation: prTk 2s ease-in-out infinite; } .herv2 .hv-fig .hv-flk { animation: none; z-index: 2; } /* ================= RANKING v2 (arte ranking/) ================= */ html[data-screen="board"] #bg .bg-img { background-image: url(../assets/sprites/ranking/fondo_ranking_v.webp) !important; background-position: center 40% !important; } html[data-screen="board"][data-orient="landscape"] #bg .bg-img { background-image: url(../assets/sprites/ranking/fondo_ranking_h.webp) !important; background-position: center !important; } html[data-screen="board"] .bg-cubes { display: none; } html[data-screen="board"] #bg::after { background: linear-gradient(180deg, rgba(6, 8, 30, .25), rgba(6, 8, 30, .55)); } #scrBoard.rkv2:not(.on) { display: none !important; } #scrBoard.rkv2 { overflow: hidden; gap: .45rem; padding: .1rem max(.6rem, var(--sal)) max(.5rem, var(--sab)) max(.6rem, var(--sar)); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head" "tabs" "panel"; } .rkv2 .rk-head { grid-area: head; display: grid; grid-template-columns: 2.6rem 1fr 2.6rem; align-items: center; } .rkv2 .sh-back { width: 2.6rem; height: 2.6rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .rkv2 .sh-back img { width: 118%; height: 118%; object-fit: contain; filter: drop-shadow(0 .15rem .25rem rgba(0,0,0,.5)); } .rkv2 .rk-title { --w: min(18rem, 70vw); justify-self: center; position: relative; display: block; width: var(--w); aspect-ratio: 900 / 325; } .rkv2 .rk-title img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 .2rem .4rem rgba(0,0,0,.45)); } .rkv2 .rk-title b { position: absolute; left: 20%; right: 20%; top: 55%; transform: translateY(-50%); text-align: center; white-space: nowrap; font: 400 calc(var(--w) * .095)/1 var(--display); color: #fff; -webkit-text-stroke: .13em #6a2a00; paint-order: stroke fill; text-shadow: 0 .09em 0 #4a1c00; } /* pestañas */ .rkv2 .rk-tabs { grid-area: tabs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; } .rkv2 .rk-tabs button { display: flex; align-items: center; justify-content: center; gap: .35rem; height: 2.7rem; cursor: pointer; border-radius: .9rem; padding: 0 .3rem; min-width: 0; border: .14rem solid rgba(140, 180, 255, .5); background: linear-gradient(180deg, rgba(30, 60, 170, .85), rgba(8, 18, 70, .9)); color: #b9ccf5; font: 400 .88rem/1 var(--display); transition: transform .1s; } .rkv2 .rk-tabs button b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rkv2 .rk-tabs button img { width: 1.7rem; height: 1.7rem; object-fit: contain; flex: none; } .rkv2 .rk-tabs button.on { color: #fff; border-color: #ffc531; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 50%), linear-gradient(180deg, #4fd6ff, #1e86e8 55%, #1257c4); box-shadow: 0 .15rem 0 #6a3300, 0 0 .7rem rgba(79, 214, 255, .6); text-shadow: 0 .08rem 0 #0b3e7a; } .rkv2 .rk-tabs button:active { transform: scale(.95); } /* panel (reusa el marco de Misiones) */ .rkv2 .rk-panel { grid-area: panel; } .rkv2 .rk-scroll { container-type: inline-size; padding: 1rem .5rem .8rem; } /* filas */ .rkv2 .rk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; } .rkv2 .rk-row { display: grid; grid-template-columns: 2.4rem 2.5rem minmax(0, 1fr) auto auto auto; align-items: center; gap: .45rem; min-height: 3.1rem; padding: .25rem .6rem .25rem .35rem; border-radius: .9rem; border: .13rem solid rgba(140, 180, 255, .4); background: linear-gradient(180deg, rgba(40, 80, 200, .55), rgba(12, 28, 100, .75)); box-shadow: 0 .12rem 0 rgba(0, 0, 30, .6); animation: scIn .3s ease-out both; } .rkv2 .rk-row.top1 { border-color: #ffd23f; } .rkv2 .rk-row.top2 { border-color: #cfdcf0; } .rkv2 .rk-row.top3 { border-color: #e09a5a; } .rkv2 .rk-row.me { border-color: #ffc531; background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0) 50%), linear-gradient(180deg, #ffcf3f, #e8920f); box-shadow: 0 .15rem 0 #6a3300, 0 0 .8rem rgba(255, 200, 60, .55); } .rkv2 .rk-row.me .rk-nm, .rkv2 .rk-row.me .rk-sc { color: #fff; text-shadow: 0 .08rem 0 #6a3300; } .rkv2 .rk-row.sep { margin-top: .5rem; } .rkv2 .rk-med { width: 2.3rem; height: 2.3rem; object-fit: contain; filter: drop-shadow(0 .1rem .12rem rgba(0,0,0,.5)); } .rkv2 .rk-n { justify-self: center; min-width: 2rem; text-align: center; font: 400 1.05rem var(--display); color: #cfe4ff; } .rkv2 .rk-av { width: 2.5rem; height: 2.5rem; object-fit: contain; } .rkv2 .rk-nm { font: 400 1rem/1.15 var(--display); color: #fff; text-shadow: 0 .08rem 0 #071040; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rkv2 .rk-nm i { font-style: normal; font-size: .8em; color: #fff3b0; } .rkv2 .rk-sc { display: flex; align-items: center; gap: .25rem; font: 400 1.05rem var(--display); color: #ffe27a; text-shadow: 0 .08rem 0 #3a1800; white-space: nowrap; } .rkv2 .rk-sc img { width: 1.15rem; height: 1.15rem; } .rkv2 .rk-cube { width: 1.9rem; height: 1.9rem; object-fit: contain; } .rkv2 .rk-t { font: 800 .7rem var(--body); color: #9fb8e8; } .rkv2 .rk-row:not(:has(.rk-cube)) { grid-template-columns: 2.4rem 2.5rem minmax(0, 1fr) auto; } .rkv2 .rk-empty { list-style: none; display: flex; align-items: center; gap: .7rem; padding: .7rem; border-radius: 1rem; background: rgba(5, 12, 50, .5); border: .12rem dashed rgba(140, 180, 255, .4); } .rkv2 .rk-empty img { width: 4.2rem; flex: none; filter: drop-shadow(0 .2rem .3rem rgba(0,0,0,.5)); } .rkv2 .rk-empty p { margin: 0; font: 800 .82rem/1.35 var(--body); color: #b9ccf5; } .rkv2 .rk-empty p b { font: 400 1rem/1.3 var(--display); color: #fff; } /* podio */ .rkv2 .rk-podium { position: relative; width: min(100%, 26rem); margin: 0 auto .6rem; } .rkv2 .rk-base { position: relative; width: 100%; display: block; z-index: 1; filter: drop-shadow(0 .3rem .4rem rgba(0,0,0,.5)); } .rkv2 .rk-ref { position: absolute; top: -10%; width: 26%; opacity: .55; z-index: 0; pointer-events: none; animation: rkRef 3s ease-in-out infinite alternate; } .rkv2 .rk-ref.l { left: 4%; transform: rotate(-12deg); } .rkv2 .rk-ref.r { right: 4%; transform: rotate(12deg) scaleX(-1); animation-delay: -1.5s; } @keyframes rkRef { from { opacity: .3 } to { opacity: .7 } } .rkv2 .rk-p3 { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; margin-bottom: -1.5%; padding: 0 3%; } .rkv2 .rk-pl { display: grid; justify-items: center; position: relative; min-width: 0; } .rkv2 .rk-pl.p2, .rkv2 .rk-pl.p3 { margin-bottom: -30%; } .rkv2 .rk-pl.p1 { margin-bottom: 0; } .rkv2 .rk-pav { width: 70%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 .2rem .3rem rgba(0,0,0,.5)); animation: hvIn .4s cubic-bezier(.2, 1.5, .4, 1) both; } .rkv2 .rk-pl.p1 .rk-pav { width: 78%; } .rkv2 .rk-crown { position: absolute; top: -26%; width: 46%; filter: drop-shadow(0 .15rem .2rem rgba(0,0,0,.5)); animation: prTk 2s ease-in-out infinite; } .rkv2 .rk-pn { max-width: 100%; font: 400 .82rem/1.1 var(--display); color: #fff; text-shadow: 0 .08rem 0 #071040; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rkv2 .rk-ps { font: 400 .8rem/1.1 var(--display); color: #ffe27a; text-shadow: 0 .08rem 0 #3a1800; } .rkv2 .rk-pl.empty { visibility: hidden; } /* mis récords */ .rkv2 .rk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-bottom: .5rem; } @container (min-width: 36em) { .rkv2 .rk-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .rkv2 .rk-tile { display: grid; justify-items: center; text-align: center; gap: .05rem; padding: .45rem .3rem .5rem; border-radius: 1rem; border: .13rem solid rgba(255, 198, 58, .85); background: linear-gradient(180deg, rgba(40, 80, 200, .6), rgba(12, 28, 100, .8)); box-shadow: 0 .14rem 0 rgba(60, 30, 0, .7); } .rkv2 .rk-tile img { width: 2.6rem; height: 2.6rem; object-fit: contain; filter: drop-shadow(0 .12rem .15rem rgba(0,0,0,.5)); } .rkv2 .rk-tile small { font: 800 .7rem var(--body); color: #8fd6ff; text-transform: uppercase; letter-spacing: .03em; } .rkv2 .rk-tile b { font: 400 1.35rem/1.1 var(--display); color: #fff; text-shadow: 0 .08rem 0 #071040; } .rkv2 .rk-tile b small { font: 400 .8rem var(--display); color: #9fb8e8; text-transform: none; } .rkv2 .rk-tile em { font: 800 .68rem var(--body); color: #9fb8e8; font-style: normal; } .rkv2 .rk-sec { display: flex; align-items: center; gap: .5rem; margin: .3rem 0 .4rem; color: #ffe27a; font: 400 .95rem var(--display); text-shadow: 0 .08rem 0 #3a1a00; } .rkv2 .rk-sec::before, .rkv2 .rk-sec::after { content: ''; flex: 1; height: .15rem; background: linear-gradient(90deg, transparent, #ffc531, transparent); } /* arena */ .rkv2 .rk-arena { display: grid; gap: .7rem; } .rkv2 .rk-me { display: grid; justify-items: center; gap: .3rem; padding: .4rem 0 .6rem; } .rkv2 .rk-badge { position: relative; width: min(11rem, 46cqw); aspect-ratio: 1; display: grid; place-items: center; } .rkv2 .rk-rays { position: absolute; inset: -15%; width: 130%; height: 130%; object-fit: contain; opacity: .8; animation: chRays 8s linear infinite; } .rkv2 .rk-bimg { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .3rem .4rem rgba(0,0,0,.55)); animation: hvIn .5s cubic-bezier(.2, 1.5, .4, 1) both; } .rkv2 .rk-rname { font: 400 1.7rem/1.1 var(--display); color: var(--rc); -webkit-text-stroke: .1em #0a1040; paint-order: stroke fill; text-shadow: 0 0 .6rem color-mix(in srgb, var(--rc) 60%, transparent); } .rkv2 .rk-tro { display: flex; align-items: center; gap: .3rem; font: 400 1rem var(--display); color: #ffe27a; } .rkv2 .rk-tro img { width: 1.5rem; height: 1.5rem; } .rkv2 .rk-bar { position: relative; width: min(100%, 22rem); height: 1.6rem; margin: .2rem 1.6rem 0 0; border-radius: 1rem; border: .15rem solid #ffc531; background: linear-gradient(180deg, #050b30, #0b1a5c); box-shadow: inset 0 .2rem .3rem rgba(0,0,0,.6), 0 .12rem 0 #6a3300; } .rkv2 .rk-bar i { position: absolute; left: .15rem; top: .15rem; bottom: .15rem; max-width: calc(100% - .3rem); border-radius: 1rem; background: linear-gradient(180deg, #b6ff7a, #3fdc4c 45%, #1c9c2c); box-shadow: inset 0 .15rem 0 rgba(255,255,255,.5); } .rkv2 .rk-bar s { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; font: 400 .85rem var(--display); color: #fff; text-shadow: 0 .08rem 0 #061040; } .rkv2 .rk-bar img { position: absolute; right: -1.9rem; top: 50%; width: 2.6rem; transform: translateY(-50%); filter: drop-shadow(0 .1rem .15rem rgba(0,0,0,.5)); } .rkv2 .rk-wl { display: flex; gap: .5rem; } .rkv2 .rk-wl b { padding: .15rem .7rem; border-radius: 1rem; font: 400 .9rem var(--display); color: #fff; } .rkv2 .rk-wl .w { background: linear-gradient(180deg, #3fdc4c, #1b9227); } .rkv2 .rk-wl .l { background: linear-gradient(180deg, #ff6a7a, #b0102c); } .rkv2 .rk-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; } @container (min-width: 34em) { .rkv2 .rk-ladder { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .rkv2 .rk-step { display: grid; justify-items: center; gap: .05rem; padding: .35rem .2rem .4rem; border-radius: .9rem; border: .13rem solid rgba(140, 180, 255, .35); background: rgba(5, 12, 50, .55); } .rkv2 .rk-step img { width: 78%; aspect-ratio: 1; object-fit: contain; } .rkv2 .rk-step b { font: 400 .78rem var(--display); color: var(--rc); white-space: nowrap; } .rkv2 .rk-step small { font: 800 .62rem var(--body); color: #9fb8e8; } .rkv2 .rk-step.lock img { filter: grayscale(.8) brightness(.6); } .rkv2 .rk-step.on { border-color: #ffc531; background: linear-gradient(180deg, rgba(255, 210, 80, .25), rgba(5, 12, 50, .6)); box-shadow: 0 0 .7rem rgba(255, 200, 60, .55); transform: translateY(-.15rem); } /* horizontal */ html[data-orient="landscape"] .rkv2 .rk-title { --w: min(19rem, 32vh * 2.77); } html[data-orient="landscape"] .rkv2 .rk-tabs { width: min(100%, 36rem); justify-self: center; } html[data-orient="landscape"] .rkv2 .rk-panel { width: min(100%, 62rem); justify-self: center; } html[data-orient="landscape"] .rkv2 .rk-world { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; align-items: start; } html[data-orient="landscape"] .rkv2 .rk-left { position: sticky; top: 0; padding-top: 1.6rem; } html[data-orient="landscape"] .rkv2 .rk-arena { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } html[data-orient="landscape"] .rkv2 .rk-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rkv2 .rk-world .rk-left { padding-top: 1.4rem; } .rkv2 .rk-panel { min-height: 0; position: relative; display: flex; margin: .45rem .15rem 0; border: .2rem solid #ffc63a; border-radius: 1.1rem; padding: .25rem; background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(70, 120, 255, .5), rgba(70, 120, 255, 0) 70%), linear-gradient(180deg, rgba(23, 47, 154, .92), rgba(13, 27, 98, .92) 55%, rgba(10, 20, 80, .94)); box-shadow: inset 0 0 0 .12rem #24156a, inset 0 0 0 .24rem rgba(80, 215, 255, .75), inset 0 0 1.4rem rgba(60, 190, 255, .35), 0 0 0 .14rem #5b2c00, 0 0 1.1rem rgba(255, 170, 50, .45), 0 .4rem .9rem rgba(0, 0, 0, .55); } .rkv2 .rk-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(120, 190, 255, .55) transparent; } .rkv2 .rk-ref { display: none; } .rkv2 .rk-rays { opacity: .45; } .rkv2 .rk-rname { -webkit-text-stroke: .12em #2a1500; filter: brightness(1.25); } html[data-layout="tabletPortrait"] .rkv2 .rk-scroll, html[data-layout="tabletPortrait"] .rkv2 .rk-tabs { font-size: 1.3rem; } html[data-layout="tabletPortrait"] .rkv2 .rk-tabs button { height: 3.4rem; font-size: 1.1rem; } .rkv2 .rk-rays { display: none; } .rkv2 .rk-badge::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 120, .45), rgba(255, 200, 80, 0) 68%); animation: hvGlow 2.4s ease-in-out infinite; } .rkv2 .rk-step.lock img { filter: grayscale(.85) brightness(.55); } /* ================= AVENTURA v2 (arte aventura/) ================= */ html[data-screen="map"] #bg .bg-img { background-image: url(../assets/sprites/aventura/fondo_aventura_v.webp) !important; background-position: center !important; } html[data-screen="map"][data-orient="landscape"] #bg .bg-img { background-image: url(../assets/sprites/aventura/fondo_aventura_h.webp) !important; } html[data-screen="map"] .bg-cubes { display: none; } html[data-screen="map"] #bg::after { background: linear-gradient(180deg, rgba(6, 8, 30, .1), rgba(6, 8, 30, .35)); } #scrMap.avv2:not(.on) { display: none !important; } #scrMap.avv2 { overflow: hidden; gap: .3rem; padding: .1rem max(.6rem, var(--sal)) max(.5rem, var(--sab)) max(.6rem, var(--sar)); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "head" "world" "path" "stage"; } .avv2 .av-head { grid-area: head; display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .3rem; } .avv2 .sh-back { width: 2.6rem; height: 2.6rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .avv2 .sh-back img { width: 118%; height: 118%; object-fit: contain; filter: drop-shadow(0 .15rem .25rem rgba(0,0,0,.5)); } .avv2 .av-title { --w: min(14.5rem, 54vw); justify-self: center; position: relative; display: block; width: var(--w); aspect-ratio: 900 / 304; } .avv2 .av-title img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 .2rem .4rem rgba(0,0,0,.45)); } .avv2 .av-title b { position: absolute; left: 20%; right: 20%; top: 53%; transform: translateY(-50%); text-align: center; white-space: nowrap; font: 400 calc(var(--w) * .095)/1 var(--display); color: #fff; -webkit-text-stroke: .13em #6a2a00; paint-order: stroke fill; text-shadow: 0 .09em 0 #4a1c00; } .avv2 .av-energy { display: flex; align-items: center; gap: .15rem; height: 2.2rem; padding: 0 .6rem 0 .25rem; border-radius: 1.2rem; border: .14rem solid #ffc531; background: linear-gradient(180deg, #1c4cc4, #0b1c63); box-shadow: 0 .12rem 0 #6a3300, 0 0 .5rem rgba(255, 210, 60, .35); white-space: nowrap; } .avv2 .av-energy img { width: 1.6rem; height: 1.6rem; object-fit: contain; } .avv2 .av-energy b { font: 400 .95rem var(--display); color: #fff; } .avv2 .av-energy small { font: 800 .6rem var(--body); color: #ffe27a; } /* mundo actual */ .avv2 .av-worlds { display: none; } .avv2 .av-world { grid-area: world; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; height: clamp(8rem, 24vh, 14rem); } .avv2 .av-isle { grid-column: 2; position: relative; height: 100%; display: grid; place-items: center; min-height: 0; } .avv2 .av-isle::before { content: ''; position: absolute; width: 70%; aspect-ratio: 2.2 / 1; bottom: 12%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--wc) 60%, transparent), transparent 70%); filter: blur(.5rem); } .avv2 .av-isle img { position: relative; max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 .5rem .6rem rgba(0,0,0,.5)); animation: shPando 4s ease-in-out infinite; } .avv2 .av-isle img.in { animation: hvIn .45s cubic-bezier(.2, 1.4, .4, 1) both, shPando 4s .45s ease-in-out infinite; } .avv2 .av-isle img.lock { filter: grayscale(.8) brightness(.55) drop-shadow(0 .5rem .6rem rgba(0,0,0,.5)); } .avv2 .av-arr { width: 3rem; height: 3rem; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .1s; z-index: 2; } .avv2 .av-arr img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .15rem .2rem rgba(0,0,0,.5)); animation: avArr 1.6s ease-in-out infinite; } .avv2 .av-arr.r img { transform: scaleX(-1); animation-name: avArrR; } @keyframes avArr { 50% { transform: translateX(-.2rem) } } @keyframes avArrR { 0%, 100% { transform: scaleX(-1) } 50% { transform: scaleX(-1) translateX(-.2rem) } } .avv2 .av-arr:disabled { opacity: .25; cursor: default; } .avv2 .av-arr:active { transform: scale(.88); } .avv2 .av-wname { position: absolute; left: 50%; bottom: -.3rem; transform: translateX(-50%); display: grid; justify-items: center; padding: .15rem 1.1rem .25rem; border-radius: 1rem; z-index: 2; border: .15rem solid #ffc531; background: linear-gradient(180deg, #1c4cc4, #0b1c63 60%, #08134a); box-shadow: 0 .16rem 0 #6a3300, 0 0 .7rem color-mix(in srgb, var(--wc) 55%, transparent); white-space: nowrap; } .avv2 .av-wname small { font: 800 .62rem var(--body); color: #9fd6ff; text-transform: uppercase; letter-spacing: .05em; } .avv2 .av-wname b { font: 400 1.15rem/1.05 var(--display); color: #fff; text-shadow: 0 .08rem 0 #071040; } /* camino de niveles */ .avv2 .av-path { grid-area: path; position: relative; min-height: 0; margin: .4rem 1rem .2rem; } .avv2 .av-dot { position: absolute; width: clamp(.8rem, 3.2vmin, 1.5rem); transform: translate(-50%, -50%); opacity: .4; filter: grayscale(.8); pointer-events: none; } .avv2 .av-dot.on { opacity: 1; filter: drop-shadow(0 0 .3rem rgba(255, 210, 80, .8)); } .avv2 .av-node { --n: clamp(3.2rem, 11vmin, 5.6rem); position: absolute; width: var(--n); height: var(--n); transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; transition: transform .12s; } .avv2 .av-node.boss { --n: clamp(4rem, 14vmin, 7rem); } .avv2 .av-node > img:first-child { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .25rem .3rem rgba(0,0,0,.55)); } .avv2 .av-node b { position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%); font: 400 calc(var(--n) * .36)/1 var(--display); color: #fff; -webkit-text-stroke: .1em #0b1c63; paint-order: stroke fill; text-shadow: 0 .06em 0 #0b1c63; } .avv2 .av-node.boss b { top: 58%; -webkit-text-stroke-color: #5a0018; } .avv2 .av-nst { position: absolute; left: 50%; top: 88%; transform: translateX(-50%); display: flex; } .avv2 .av-nst img { width: calc(var(--n) * .28); height: calc(var(--n) * .28); object-fit: contain; margin: 0 -.06rem; } .avv2 .av-nst img:nth-child(2) { transform: translateY(18%); } .avv2 .av-node.sel { transform: translate(-50%, -50%) scale(1.14); } .avv2 .av-node.sel > img:first-child { filter: drop-shadow(0 0 .5rem #fff) drop-shadow(0 0 .9rem #ffd23f); } .avv2 .av-node.cur > img:first-child { animation: avPulse 1.2s ease-in-out infinite; } @keyframes avPulse { 50% { transform: scale(1.08); filter: drop-shadow(0 0 .7rem #4fd6ff) brightness(1.15) } } .avv2 .av-pin { position: absolute; left: 50%; bottom: 82%; width: 62%; transform: translateX(-50%); filter: drop-shadow(0 .2rem .2rem rgba(0,0,0,.5)); animation: prTk 1.8s ease-in-out infinite; } .avv2 .av-node:active { transform: translate(-50%, -50%) scale(.92); } /* panel del nivel */ .avv2 .av-stage { grid-area: stage; position: relative; padding-left: 4.6rem; } .avv2 .av-pando { position: absolute; left: -.5rem; bottom: -.3rem; width: 6.2rem; z-index: 2; pointer-events: none; filter: drop-shadow(0 .3rem .4rem rgba(0,0,0,.5)); } .avv2 .av-card { position: relative; border-radius: 1.1rem; padding: .5rem .7rem .6rem 1.6rem; border: .2rem solid #ffc63a; background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(70, 120, 255, .5), rgba(70, 120, 255, 0) 70%), linear-gradient(180deg, rgba(23, 47, 154, .95), rgba(10, 20, 80, .96)); box-shadow: inset 0 0 0 .12rem #24156a, inset 0 0 0 .24rem rgba(80, 215, 255, .7), 0 0 0 .14rem #5b2c00, 0 0 1rem rgba(255, 170, 50, .4), 0 .4rem .9rem rgba(0,0,0,.55); } .avv2 .av-ch { display: flex; align-items: center; gap: .45rem; } .avv2 .av-id { flex: none; padding: .1rem .55rem; border-radius: .7rem; font: 400 1rem var(--display); color: #fff; background: linear-gradient(180deg, #4fd6ff, #1257c4); box-shadow: 0 .1rem 0 #0b3e7a; } .avv2 .av-id.boss { background: linear-gradient(180deg, #ff6a8a, #b0102c); box-shadow: 0 .1rem 0 #5a0010; } .avv2 .av-ch h3 { flex: 1; min-width: 0; margin: 0; font: 400 1.1rem/1.1 var(--display); color: #fff; text-shadow: 0 .08rem 0 #071040; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .avv2 .av-st { display: flex; flex: none; } .avv2 .av-st img { width: 1.5rem; height: 1.5rem; object-fit: contain; } .avv2 .av-goals { list-style: none; margin: .35rem 0 .3rem; padding: 0; display: grid; gap: .2rem; } .avv2 .av-goals li { display: flex; align-items: center; gap: .4rem; font: 800 .8rem/1.2 var(--body); color: #e6efff; } .avv2 .av-goals img { width: 1.45rem; height: 1.45rem; object-fit: contain; flex: none; } .avv2 .av-goals em { color: #9fb8e8; font-style: normal; } .avv2 .av-obs { display: flex; gap: .25rem; margin-bottom: .3rem; } .avv2 .av-obs canvas { width: 1.7rem; height: 1.7rem; } .avv2 .av-foot { display: flex; align-items: center; gap: .5rem; } .avv2 .av-rw { display: flex; align-items: center; gap: .25rem; font: 400 1rem var(--display); color: #ffe27a; text-shadow: 0 .08rem 0 #3a1800; white-space: nowrap; } .avv2 .av-rw img { width: 2.1rem; height: 2.1rem; object-fit: contain; } .avv2 .av-rw i { font-style: normal; font-size: .8rem; color: #f0b6ff; } .avv2 .av-play { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; height: 3.1rem; cursor: pointer; border: .2rem solid transparent; border-radius: 1rem; padding: 0 .6rem; font: 400 1.35rem/1 var(--display); color: #fff; -webkit-text-stroke: .1em #0d5212; paint-order: stroke fill; background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.06) 46%, rgba(255,255,255,0) 50%) padding-box, linear-gradient(180deg, #8dff63, #39cf43 52%, #1b9227) padding-box, linear-gradient(180deg, #fff3b0, #ffcf3f 35%, #e8920f 80%, #ffd257) border-box; box-shadow: 0 .22rem 0 #6a3300, 0 .35rem .5rem rgba(0,0,0,.4); animation: mrBtn 1.4s ease-in-out infinite; transition: transform .1s; } .avv2 .av-play em { font-style: normal; } .avv2 .av-play > img { width: 1.9rem; height: 1.9rem; object-fit: contain; } .avv2 .av-cost { display: flex; align-items: center; gap: .05rem; padding: .1rem .4rem .1rem .1rem; border-radius: .8rem; background: rgba(0, 50, 0, .45); font-size: .95rem; -webkit-text-stroke: 0; } .avv2 .av-cost img { width: 1.2rem; height: 1.2rem; } .avv2 .av-play:active { transform: translateY(.12rem) scale(.97); } .avv2 .av-play.off { animation: none; filter: grayscale(.9) brightness(.85); -webkit-text-stroke-color: #3b4458; } /* horizontal: mundos a la izquierda, camino y panel a la derecha */ html[data-orient="landscape"] #scrMap.avv2 { grid-template-columns: minmax(12rem, 30vw) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head head" "worlds path" "worlds stage"; column-gap: 1rem; } html[data-orient="landscape"] .avv2 .av-world { display: none; } html[data-orient="landscape"] .avv2 .av-title { --w: min(16rem, 30vh * 2.96); } html[data-orient="landscape"] .avv2 .av-worlds { grid-area: worlds; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; align-content: start; overflow-y: auto; min-height: 0; padding: .6rem; border-radius: 1.1rem; border: .2rem solid #ffc63a; background: linear-gradient(180deg, rgba(23, 47, 154, .9), rgba(10, 20, 80, .93)); box-shadow: inset 0 0 0 .12rem #24156a, inset 0 0 0 .24rem rgba(80, 215, 255, .6), 0 0 0 .14rem #5b2c00, 0 .4rem .9rem rgba(0,0,0,.5); scrollbar-width: thin; } .avv2 .av-wc { position: relative; aspect-ratio: 1.15; padding: .2rem; cursor: pointer; border-radius: .9rem; border: .13rem solid rgba(140, 180, 255, .4); background: rgba(5, 12, 50, .55); display: grid; place-items: center; transition: transform .1s; } .avv2 .av-wc > img:first-child { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .15rem .2rem rgba(0,0,0,.5)); } .avv2 .av-wc.lock > img:first-child { filter: grayscale(.85) brightness(.5); } .avv2 .av-wc.on { border-color: #ffc531; background: radial-gradient(circle, color-mix(in srgb, var(--wc) 45%, transparent), rgba(5, 12, 50, .6) 70%); box-shadow: 0 0 .7rem color-mix(in srgb, var(--wc) 70%, transparent); } .avv2 .av-wc b { position: absolute; top: .15rem; left: .3rem; font: 400 .8rem var(--display); color: #fff; text-shadow: 0 .08rem 0 #071040; } .avv2 .av-wcs { position: absolute; bottom: .1rem; right: .2rem; display: flex; align-items: center; gap: .05rem; padding: 0 .3rem; border-radius: .6rem; background: rgba(5, 12, 50, .8); font: 400 .66rem var(--display); color: #ffe27a; } .avv2 .av-wcs img { width: .85rem; height: .85rem; } .avv2 .av-wlk { position: absolute; width: 38%; filter: drop-shadow(0 .1rem .15rem rgba(0,0,0,.6)); } .avv2 .av-wc:active { transform: scale(.94); } html[data-orient="landscape"] .avv2 .av-path { margin: 1.4rem 2rem .6rem; } html[data-orient="landscape"] .avv2 .av-path::before { content: attr(data-name); } html[data-orient="landscape"] .avv2 .av-stage { padding-left: 5.4rem; } html[data-orient="landscape"] .avv2 .av-pando { width: 7.2rem; } html[data-orient="landscape"] .avv2 .av-goals { grid-template-columns: repeat(3, auto); gap: .2rem .9rem; justify-content: start; } @media (orientation: landscape) and (max-height: 520px) { .avv2 .av-pando { display: none; } html[data-orient="landscape"] .avv2 .av-stage { padding-left: 0; } .avv2 .av-card { padding-left: .7rem; } .avv2 .av-goals { display: none !important; } } html[data-layout="mobilePortrait"] .avv2 .av-goals li { font-size: .74rem; } /* ajustes de proporción del camino en vertical */ .avv2 .av-world { height: clamp(7rem, 21vh, 12rem); } .avv2 .av-path { margin: 1.4rem .6rem .9rem; } .avv2 .av-node { --n: clamp(3.6rem, 13vmin, 6rem); } .avv2 .av-node.boss { --n: clamp(4.4rem, 16vmin, 7.4rem); } html[data-orient="landscape"] .avv2 .av-node { --n: clamp(3.6rem, 12vmin, 7rem); } html[data-orient="landscape"] .avv2 .av-node.boss { --n: clamp(4.4rem, 15vmin, 8.6rem); } .avv2 .av-path { margin-top: 2.2rem; } .avv2 .av-world { z-index: 1; } html[data-layout="tabletPortrait"] .avv2 .av-stage { font-size: 1.25rem; } html[data-layout="tabletPortrait"] .avv2 .av-card, html[data-layout="tabletPortrait"] .avv2 .av-card * { font-size: inherit; } html[data-layout="tabletPortrait"] .avv2 .av-ch h3 { font-size: 1.35rem; } html[data-layout="tabletPortrait"] .avv2 .av-goals li { font-size: 1rem; } html[data-layout="tabletPortrait"] .avv2 .av-play { font-size: 1.6rem; height: 3.6rem; } html[data-layout="tabletPortrait"] .avv2 .av-pando { width: 8rem; } html[data-layout="tabletPortrait"] .avv2 .av-stage { padding-left: 6rem; } html[data-layout="tabletPortrait"] .avv2 .av-st img { width: 1.9rem; height: 1.9rem; } html[data-layout="tabletPortrait"] .avv2 .av-goals img { width: 1.9rem; height: 1.9rem; } .avv2 .av-world { z-index: auto; height: clamp(6rem, 17vh, 10.5rem); } .avv2 .av-path { container-type: size; margin-top: 1.6rem; z-index: 1; } .avv2 .av-node { --n: min(clamp(3.6rem, 13vmin, 6rem), 17cqh, 19cqw); } .avv2 .av-node.boss { --n: min(clamp(4.4rem, 16vmin, 7.4rem), 21cqh, 23cqw); } html[data-orient="landscape"] .avv2 .av-node { --n: min(clamp(3.6rem, 12vmin, 7rem), 30cqh, 13cqw); } html[data-orient="landscape"] .avv2 .av-node.boss { --n: min(clamp(4.4rem, 15vmin, 8.6rem), 36cqh, 16cqw); } /* ===== Arena móvil v2: tablero del rival GRANDE y visible al lado del tuyo ===== */ html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] { gap: .3rem .35rem; padding: .25rem .35rem .35rem; grid-template-columns: minmax(0, 1fr) 6.9rem; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto; grid-template-areas: "top top" "board rival" "board next" "board fuse" "board helper" "powers charge" "ctrl ctrl"; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-rival { grid-area: rival; display: flex; flex-direction: column; gap: .2rem; padding: .25rem; align-self: start; min-width: 0; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-board { order: 2; width: 100%; height: auto; aspect-ratio: 6 / 14; min-height: 0; padding: 2px; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-board canvas { width: 100% !important; height: 100% !important; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-info { display: contents; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-name { order: 1; display: flex; align-items: center; gap: .2rem; min-width: 0; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-name img { width: 1.3rem; height: 1.3rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-name b { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-state { order: 3; font-size: .52rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-charge { order: 4; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .15rem; font-size: .5rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-charge small { font-size: .48rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-pw { order: 5; display: flex; flex-wrap: wrap; gap: .1rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-pw > * { transform: scale(.8); transform-origin: left center; margin-right: -.25rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-queue { order: 6; display: flex; align-items: center; gap: .2rem; font-size: .5rem; min-height: 0; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-queue small { font-size: .46rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .pw-log { display: none; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-zoom { display: none; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-powers { grid-area: powers; align-self: center; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .pw-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; justify-items: center; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .pw { width: min(100%, 3.3rem); } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-charge { grid-area: charge; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-next { grid-area: next; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-fuse { grid-area: fuse; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-helper.posed img { height: 3.4rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] { grid-template-columns: minmax(0, 1fr) 7.8rem; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-queue { flex-wrap: wrap; overflow: hidden; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-queue small { width: 100%; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] #inTurns { font-size: .5rem; white-space: nowrap; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] #inQueue img, html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] #inQueue canvas { width: 1rem; height: 1rem; } /* ===== Arena: tarjetas de efecto ===== */ .fx-card { position: absolute; z-index: 22; left: 50%; top: 38%; width: min(88%, 19rem); transform: translate(-50%, -50%); pointer-events: none; display: grid; justify-items: center; text-align: center; gap: .1rem; padding: 1.7rem .8rem .7rem; border-radius: 1.1rem; background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 30%, #0b1c63), #071040 70%); border: .2rem solid var(--c1); box-shadow: 0 0 0 .14rem rgba(0,0,0,.5), 0 0 1.6rem color-mix(in srgb, var(--c1) 70%, transparent), 0 .5rem 1rem rgba(0,0,0,.55); animation: fxIn .45s cubic-bezier(.2, 1.6, .4, 1) both; } .fx-card.rv { position: fixed; z-index: 45; padding-top: 1.5rem; } .fx-card.out { animation: fxOut .4s ease-in forwards; } @keyframes fxIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-6deg) } to { opacity: 1; transform: translate(-50%, -50%) scale(1) } } @keyframes fxOut { to { opacity: 0; transform: translate(-50%, -70%) scale(.85) } } .fx-card .apw-disc { position: absolute; top: 0; left: 50%; width: 3.2rem; height: 3.2rem; transform: translate(-50%, -55%); filter: drop-shadow(0 .2rem .3rem rgba(0,0,0,.6)); animation: pwglow .4s ease-in-out infinite alternate; } .fx-card.rv .apw-disc { width: 2.7rem; height: 2.7rem; } .fx-card .fx-rays { position: absolute; top: 0; left: 50%; width: 7rem; height: 7rem; transform: translate(-50%, -55%); border-radius: 50%; z-index: -1; background: repeating-conic-gradient(color-mix(in srgb, var(--c1) 55%, transparent) 0 12deg, transparent 12deg 30deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); mask: radial-gradient(circle, #000 25%, transparent 70%); animation: chRays 5s linear infinite; } .fx-card b { font: 400 1.45rem/1.05 var(--display); color: #fff; -webkit-text-stroke: .12em color-mix(in srgb, var(--c1) 40%, #000); paint-order: stroke fill; text-shadow: 0 .1rem 0 rgba(0,0,0,.6), 0 0 .8rem var(--c1); letter-spacing: .02em; } .fx-card.rv b { font-size: 1.15rem; } .fx-card p { margin: 0; font: 800 .82rem/1.25 var(--body); color: #fff; } .fx-card small { margin-top: .2rem; padding: .15rem .55rem; border-radius: .7rem; background: rgba(255, 255, 255, .12); font: 800 .7rem/1.2 var(--body); color: #ffe27a; } .fx-card.bad { border-color: #ff4058; box-shadow: 0 0 0 .14rem rgba(0,0,0,.5), 0 0 1.6rem rgba(255, 64, 88, .75), 0 .5rem 1rem rgba(0,0,0,.55); } .fx-card.good b { -webkit-text-stroke-color: #0a3a20; } html[data-layout="mobilePortrait"] .fx-card b { font-size: 1.2rem; } html[data-layout="mobilePortrait"] .fx-card p { font-size: .72rem; } html[data-layout="mobilePortrait"] .fx-card small { font-size: .62rem; } html[data-layout="mobilePortrait"] .fx-card.rv b { font-size: 1rem; } /* destello del tablero afectado */ .reactor.fx-flash::after, .rv-board.fx-flash::after { content: ''; position: absolute; inset: 0; z-index: 21; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 2.5rem var(--fc), inset 0 0 0 .25rem var(--fc); animation: fxFlash .9s ease-out forwards; } .rv-board.fx-flash { position: relative; } @keyframes fxFlash { 0% { opacity: 0 } 15% { opacity: 1 } 100% { opacity: 0 } } /* poder sugerido para contrarrestar */ .pw.hint { position: relative; z-index: 3; animation: pwHint .5s ease-in-out infinite alternate; } .pw.hint::after { content: attr(data-hint); position: absolute; left: 50%; bottom: calc(100% + .3rem); transform: translateX(-50%); white-space: nowrap; padding: .15rem .45rem; border-radius: .6rem; background: #ffe066; color: #3a1a00; font: 400 .7rem var(--display); box-shadow: 0 .12rem 0 #8a4a00; pointer-events: none; } @keyframes pwHint { from { transform: scale(1); filter: drop-shadow(0 0 .2rem #ffe066) } to { transform: scale(1.14); filter: drop-shadow(0 0 .9rem #ffe066) brightness(1.2) } } /* aviso de ataque entrante: qué hace y cuánto falta */ .ap-warn em { display: block; font: 800 .66rem/1.2 var(--body); color: #fff; font-style: normal; } .ap-warn .ap-tip { display: block; margin-top: .15rem; font: 400 .72rem var(--display); color: #4dffb8; font-style: normal; animation: pwglow .35s ease-in-out infinite alternate; } .ap-warn .ap-timer { position: absolute; left: .6rem; right: .6rem; bottom: .2rem; height: .22rem; border-radius: .2rem; background: rgba(0,0,0,.4); overflow: hidden; } .ap-warn .ap-timer i { display: block; height: 100%; background: var(--c1); animation: apTimer 1.5s linear forwards; } @keyframes apTimer { from { width: 100% } to { width: 0 } } /* insignias de turbo */ .tb-badge { position: absolute; z-index: 7; top: 1.4rem; left: .5rem; padding: .1rem .5rem; border-radius: .7rem; font-family: var(--display); font-size: .85rem; color: #3a2400; background: linear-gradient(180deg, #fff36b, #ffb420); box-shadow: 0 0 .7rem rgba(255, 210, 60, .8); opacity: 0; transform: scale(.6); transition: .2s; pointer-events: none; } .tb-badge.on { opacity: 1; transform: none; animation: pwglow .4s ease-in-out infinite alternate; } .tb-badge.mini { top: .2rem; left: .2rem; font-size: .5rem; padding: 0 .3rem; } .fx-card .apw-disc { transform: none; top: -1.75rem; left: calc(50% - 1.6rem); animation: fxDisc .45s ease-in-out infinite alternate; } .fx-card.rv .apw-disc { top: -1.5rem; left: calc(50% - 1.35rem); } @keyframes fxDisc { from { scale: .92 } to { scale: 1.08 } } .fx-card .fx-rays { transform: none; top: -3.5rem; left: calc(50% - 3.5rem); } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-helper { display: none !important; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] #fuNext, html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .fu-bar { display: none; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-pw { flex-wrap: nowrap; overflow: hidden; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .rv-state { display: none; } html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-next, html[data-layout="mobilePortrait"][data-mlay="7"] #scrGame[data-mode="arena"] .g-fuse { padding: .2rem; } .ajbox .aj-ver a { color: #8fd6ff; } /* ================= TUTORIAL GUIADO ================= */ .tut { position: fixed; inset: 0; z-index: 60; pointer-events: auto; animation: tutIn .3s ease-out; } .tut.out { animation: tutOut .3s ease-in forwards; } @keyframes tutIn { from { opacity: 0 } } @keyframes tutOut { to { opacity: 0 } } .tut-spot { position: fixed; border-radius: 1rem; pointer-events: none; transition: left .35s cubic-bezier(.3, 1.2, .4, 1), top .35s cubic-bezier(.3, 1.2, .4, 1), width .35s, height .35s; box-shadow: 0 0 0 200vmax rgba(3, 6, 24, .8), 0 0 0 .2rem #ffd23f, 0 0 1.4rem .3rem rgba(255, 210, 60, .7); animation: tutSpot 1.2s ease-in-out infinite; } .tut-spot.none { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 200vmax rgba(3, 6, 24, .82); animation: none; } @keyframes tutSpot { 50% { box-shadow: 0 0 0 200vmax rgba(3, 6, 24, .8), 0 0 0 .3rem #fff36b, 0 0 2.2rem .6rem rgba(255, 210, 60, .9) } } .tut-card { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, 30rem); display: flex; align-items: flex-end; gap: .2rem; transition: top .35s, bottom .35s; } .tut-card.at-bottom { top: auto; bottom: max(.8rem, var(--sab)); transform: translateX(-50%); } .tut-card.at-top { top: max(.8rem, var(--sat)); transform: translateX(-50%); } .tut-card.pop .tut-bub { animation: tutPop .35s cubic-bezier(.2, 1.5, .4, 1); } @keyframes tutPop { from { transform: scale(.85); opacity: .3 } } .tut-pando { width: 6.2rem; flex: none; margin-right: -1rem; position: relative; z-index: 2; filter: drop-shadow(0 .3rem .4rem rgba(0,0,0,.6)); animation: shPando 2.6s ease-in-out infinite; transform-origin: 50% 100%; } .tut-bub { position: relative; flex: 1; min-width: 0; padding: .7rem .9rem .8rem 1.4rem; border-radius: 1.2rem; border: .2rem solid #ffc63a; background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(80, 140, 255, .55), rgba(80, 140, 255, 0) 70%), linear-gradient(180deg, #1a3aa8, #0f2273 55%, #0a1650); box-shadow: inset 0 0 0 .14rem #24156a, inset 0 0 0 .28rem rgba(80, 215, 255, .7), 0 0 0 .16rem #5b2c00, 0 0 1.4rem rgba(255, 170, 50, .5), 0 .6rem 1.4rem rgba(0,0,0,.6); } .tut-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .tut-n { font: 400 .75rem var(--display); color: #ffe27a; padding: .05rem .5rem; border-radius: .7rem; background: rgba(0,0,0,.3); } .tut-skip { border: 0; cursor: pointer; padding: .25rem .6rem; border-radius: .8rem; background: rgba(255, 255, 255, .12); color: #cfe4ff; font: 800 .72rem var(--body); } .tut-skip:active { transform: scale(.94); } .tut-bub h3 { margin: .3rem 0 .2rem; font: 400 1.35rem/1.1 var(--display); color: #fff; text-shadow: 0 .08rem 0 #071040, 0 0 .6rem rgba(79, 214, 255, .5); } .tut-bub p { margin: 0; font: 800 .9rem/1.4 var(--body); color: #e2ecff; } .tut-bub p b { color: #ffe27a; } .tut-dots { display: flex; gap: .3rem; justify-content: center; margin: .55rem 0 .45rem; } .tut-dots i { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255,255,255,.25); transition: .2s; } .tut-dots i.ok { background: #4fd6ff; } .tut-dots i.on { width: 1.4rem; border-radius: .5rem; background: #ffd23f; } .tut-btns { display: flex; gap: .5rem; } .tut-b { flex: 1; height: 2.7rem; cursor: pointer; border: .18rem solid transparent; border-radius: .9rem; font: 400 1.05rem var(--display); color: #fff; -webkit-text-stroke: .08em var(--sk); paint-order: stroke fill; background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.05) 46%, rgba(255,255,255,0) 50%) padding-box, var(--bg) padding-box, linear-gradient(180deg, #fff3b0, #ffcf3f 35%, #e8920f 80%, #ffd257) border-box; box-shadow: 0 .2rem 0 #6a3300, 0 .3rem .45rem rgba(0,0,0,.4); transition: transform .1s; } .tut-b:active { transform: translateY(.1rem) scale(.97); } .tut-b.back { flex: .6; --bg: linear-gradient(180deg, #5b6684, #2b3249); --sk: #1d2233; } .tut-b.next { --bg: linear-gradient(180deg, #7fe3ff, #2aa5ff 52%, #155fd6); --sk: #0b3e7a; } .tut-b.next.go { --bg: linear-gradient(180deg, #8dff63, #39cf43 52%, #1b9227); --sk: #0d5212; animation: mrBtn 1s ease-in-out infinite; } /* arte de cada paso */ .tut-cubes { display: flex; align-items: center; justify-content: center; gap: .25rem; margin-top: .45rem; flex-wrap: wrap; } .tut-cubes canvas { width: 2.3rem; height: 2.3rem; } .tut-cubes b { font: 400 1rem var(--display); color: #ffe27a; } .tut-pws { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: .35rem; margin-top: .45rem; } .tut-pws span { display: grid; justify-items: center; text-align: center; padding: .3rem .2rem; border-radius: .8rem; background: rgba(0,0,0,.25); } .tut-pws .apw-disc { width: 2.4rem; height: 2.4rem; } .tut-pws b { font: 400 .78rem var(--display); color: #fff; } .tut-pws small { font: 800 .62rem/1.2 var(--body); color: #a9c4f5; } .tut-vs { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .5rem; font: 400 1.1rem var(--display); color: #fff; } .tut-vs em { font-style: normal; font-size: 1.9rem; color: #ff4a6a; -webkit-text-stroke: .08em #fff; paint-order: stroke fill; animation: pwglow .4s ease-in-out infinite alternate; } .tut-vs span { padding: .2rem .7rem; border-radius: .7rem; background: linear-gradient(180deg, #2aa5ff, #155fd6); } .tut-vs span:last-child { background: linear-gradient(180deg, #ff6a8a, #b0102c); } .tut-warn { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; padding: .4rem .6rem; border-radius: .9rem; border: .15rem solid #4fd6ff; background: rgba(5, 12, 50, .7); } .tut-warn .apw-disc { width: 2.4rem; height: 2.4rem; flex: none; } .tut-warn small { display: block; font: 800 .62rem var(--body); color: #ffd0d8; } .tut-warn b { display: block; font: 400 1rem var(--display); color: #4fd6ff; } .tut-warn em { display: block; font: 400 .72rem var(--display); color: #4dffb8; font-style: normal; } /* aviso al saltar */ .tut-note { position: fixed; z-index: 61; left: 50%; top: 18%; transform: translateX(-50%); width: min(90vw, 22rem); display: grid; gap: .2rem; text-align: center; padding: .7rem 1rem; border-radius: 1rem; border: .18rem solid #ffc63a; background: linear-gradient(180deg, #1c4cc4, #0b1c63); box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.6); animation: fxIn2 .35s cubic-bezier(.2, 1.5, .4, 1); font: 800 .82rem/1.35 var(--body); color: #e2ecff; } .tut-note > b { font: 400 1.1rem var(--display); color: #ffe27a; } .tut-note span b { color: #fff; } .tut-note.out { transition: .4s; opacity: 0; transform: translate(-50%, -1rem); } @keyframes fxIn2 { from { opacity: 0; transform: translate(-50%, -.6rem) scale(.9) } } html[data-layout="mobilePortrait"] .tut-pando { width: 4.6rem; margin-right: -.8rem; } html[data-layout="mobilePortrait"] .tut-bub { padding: .55rem .7rem .65rem 1rem; } html[data-layout="mobilePortrait"] .tut-bub h3 { font-size: 1.1rem; } html[data-layout="mobilePortrait"] .tut-bub p { font-size: .78rem; } html[data-layout="mobilePortrait"] .tut-b { height: 2.4rem; font-size: .95rem; } /* fila de tutoriales en Ajustes */ .ajbox .aj-tut .aj-seg button.on, .ajbox .aj-tut .aj-seg button { color: #fff; } /* ================= ARTE NUEVO DE ARENA (sprites/arena) ================= */ /* medallas de poder: la imagen ya trae aro y fondo */ .apw::before { display: none; } .apw .apw-med, .apw-disc .apw-med { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 .15rem .25rem rgba(0,0,0,.55)); } .apw .apw-med { z-index: 1; } .apw-med.off { display: none; } .apw.empty .apw-med.on { display: none; } .apw.empty .apw-med.off { display: block; } .apw:not(.empty) .apw-med.on { filter: drop-shadow(0 0 .45rem var(--c1)) drop-shadow(0 .15rem .2rem rgba(0,0,0,.5)); } .apw-disc { background: none !important; box-shadow: none !important; border-radius: 0; } .apw .apw-tag { top: -6%; padding: .08rem .45rem; background: url(../assets/sprites/arena/etiqueta_ataque.webp) center / 100% 100% no-repeat; border-radius: 0; text-shadow: 0 .06rem 0 rgba(0,0,0,.7); min-width: 4.2rem; padding-left: 1.3rem; text-align: left; } .apw.def .apw-tag { background: url(../assets/sprites/arena/etiqueta_defensa.webp) center / 100% 100% no-repeat; } .apw .apw-name { bottom: -2%; z-index: 3; } /* aviso de ataque con triángulo de alerta */ .ap-warn .ap-alert { position: absolute; left: -.9rem; top: -.9rem; width: 2rem; z-index: 2; filter: drop-shadow(0 .1rem .15rem rgba(0,0,0,.6)); animation: pwglow .3s ease-in-out infinite alternate; } /* impactos en tablero */ .fx-imp { position: fixed; z-index: 44; pointer-events: none; transform: translate(-50%, -50%); animation: fxImp 1.25s cubic-bezier(.2, 1.2, .4, 1) forwards; filter: drop-shadow(0 0 1rem rgba(255,255,255,.35)); } @keyframes fxImp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1) } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15) } } /* burbuja de escudo mientras está activo */ .sh-bubble { position: absolute; left: -4%; right: -4%; bottom: -2%; width: 108%; z-index: 6; pointer-events: none; opacity: 0; transform: scale(.6) translateY(10%); transform-origin: 50% 100%; transition: opacity .3s, transform .4s cubic-bezier(.2, 1.5, .4, 1); mix-blend-mode: screen; } .sh-bubble.on { opacity: .85; transform: none; animation: shBubble 1.6s ease-in-out infinite alternate; } @keyframes shBubble { from { opacity: .65 } to { opacity: .95 } } .rv-board .sh-bubble { left: -6%; width: 112%; } .reactor.shielded::after { border-color: rgba(77, 255, 184, .5); } /* barra de pelea */ .sf-hpw { position: relative; display: flex; align-items: center; } .sf-hpw .sf-hp { flex: 1; min-width: 0; } .sf-heart { width: 1.45rem; height: 1.45rem; object-fit: contain; flex: none; margin-right: -.35rem; position: relative; z-index: 2; filter: drop-shadow(0 .08rem .1rem rgba(0,0,0,.6)); } .sf-side.rv .sf-hpw { flex-direction: row-reverse; } .sf-side.rv .sf-heart { margin-right: 0; margin-left: -.35rem; } .sf-hp.hit + .sf-heart, .sf-hpw:has(.sf-hp.hit) .sf-heart { animation: pwgot .4s; } .sf-mid { position: relative; padding-top: .2rem; } .sf-mid .sf-clock { position: absolute; inset: -.35rem; width: calc(100% + .7rem); height: calc(100% + .7rem); object-fit: contain; opacity: .22; z-index: -1; } .sf-mid small { display: flex; align-items: center; gap: .15rem; } .sf-mid small img { width: .9rem; height: .9rem; } html[data-layout="mobilePortrait"] .sf-heart { width: 1.1rem; height: 1.1rem; } /* letreros de pelea con arte */ .fight-bn { grid-template-rows: auto auto; align-content: center; } .fight-bn .fb-art { justify-self: center; width: min(46vw, 15rem); filter: drop-shadow(0 .4rem .6rem rgba(0,0,0,.6)); animation: fightIn 1.1s cubic-bezier(.2, 1.4, .4, 1) both; } .fight-bn .fb-art.ko { width: min(70vw, 24rem); } .fight-bn .fb-art.bell, .fight-bn .fb-art.vs { width: min(30vw, 9rem); } /* resultado de Arena */ .arena-res .ares-art { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 8.5rem; margin-bottom: .2rem; } .arena-res .ares-pd { height: 100%; width: auto; filter: drop-shadow(0 .3rem .4rem rgba(0,0,0,.55)); animation: hvIn .5s cubic-bezier(.2, 1.4, .4, 1) both; } .arena-res .ares-ic { position: absolute; top: -1.2rem; right: calc(50% - 6.5rem); width: 4.2rem; z-index: 2; filter: drop-shadow(0 .2rem .3rem rgba(0,0,0,.55)); animation: pwgot .7s .3s both; } .arena-res.lose .ares-ic { right: auto; left: calc(50% - 6.8rem); } /* VS del emparejamiento y del tutorial */ .mm-vs img { width: 3.6rem; height: 3.6rem; object-fit: contain; animation: pwglow .5s ease-in-out infinite alternate; } .tut-vs img { width: 3.2rem; height: 3.2rem; object-fit: contain; animation: pwglow .45s ease-in-out infinite alternate; } .sh-bubble.on { opacity: .5; animation: shBubble2 1.6s ease-in-out infinite alternate; } @keyframes shBubble2 { from { opacity: .38 } to { opacity: .58 } } .fight-bn .fb-art.bell, .fight-bn .fb-art.vs { width: min(20vw, 6.5rem); margin-bottom: -.4rem; } .fight-bn b { font-size: clamp(2.2rem, 10vw, 6rem); } /* ===== Arena: mensajes abajo, translúcidos pero legibles ===== */ #scrGame[data-mode="arena"] .fx-card.me { top: auto; bottom: 4%; transform: translateX(-50%); animation: fxInB .4s cubic-bezier(.2, 1.5, .4, 1) both; background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 22%, rgba(8, 16, 60, .55)), rgba(5, 10, 40, .62)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 1.35rem .7rem .55rem; gap: .05rem; } #scrGame[data-mode="arena"] .fx-card.me.out { animation: fxOutB .4s ease-in forwards; } @keyframes fxInB { from { opacity: 0; transform: translateX(-50%) translateY(40%) scale(.7) } to { opacity: 1; transform: translateX(-50%) } } @keyframes fxOutB { to { opacity: 0; transform: translateX(-50%) translateY(30%) scale(.9) } } #scrGame[data-mode="arena"] .fx-card.me .apw-disc { width: 2.5rem; height: 2.5rem; top: -1.3rem; left: calc(50% - 1.25rem); } #scrGame[data-mode="arena"] .fx-card.me .fx-rays { display: none; } #scrGame[data-mode="arena"] .fx-card b { font-size: 1.15rem; text-shadow: 0 .1rem 0 rgba(0,0,0,.8), 0 0 .5rem rgba(0,0,0,.9); } #scrGame[data-mode="arena"] .fx-card p { text-shadow: 0 .08rem .2rem rgba(0,0,0,.95); } #scrGame[data-mode="arena"] .fx-card small { background: rgba(0,0,0,.35); } .fx-card.rv { background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 22%, rgba(8, 16, 60, .55)), rgba(5, 10, 40, .62)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .fx-card.rv b, .fx-card.rv p { text-shadow: 0 .1rem .2rem rgba(0,0,0,.95); } #scrGame[data-mode="arena"] .ap-warn { top: auto; bottom: 4%; background: linear-gradient(135deg, rgba(10, 12, 40, .6), rgba(10, 12, 40, .5)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation-name: apwarnB; } #scrGame[data-mode="arena"] .ap-warn b, #scrGame[data-mode="arena"] .ap-warn small, #scrGame[data-mode="arena"] .ap-warn em { text-shadow: 0 .08rem .2rem rgba(0,0,0,.95); } @keyframes apwarnB { 0% { opacity: 0; transform: translate(-50%, 30%) scale(.7); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 20% { transform: translate(-50%, 0) scale(1); } 30%, 50%, 70% { transform: translate(-50%, 0) rotate(-1deg); } 40%, 60% { transform: translate(-50%, 0) rotate(1deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 20%) scale(.95); } } /* ===== Selector de idioma ===== */ .flag { display: inline-block; width: 1.9em; height: 1.27em; flex: none; border-radius: .22em; overflow: hidden; box-shadow: 0 0 0 .1em rgba(255,255,255,.85), 0 .12em .25em rgba(0,0,0,.5); line-height: 0; } .flag svg { width: 100%; height: 100%; display: block; } .ajbox .aj-lang { position: relative; z-index: 5; } .ajbox .lg-cur { width: 100%; text-align: left; font: inherit; color: inherit; border-color: #ffc531; background: linear-gradient(180deg, rgba(255, 210, 80, .28), rgba(255, 210, 80, .02) 55%), linear-gradient(180deg, rgba(40, 80, 200, .7), rgba(12, 28, 100, .85)); } .ajbox .lg-pick { display: flex; align-items: center; gap: .4em; padding: .3em .55em; border-radius: .8em; background: rgba(5, 12, 50, .75); border: .12em solid rgba(79, 214, 255, .7); box-shadow: 0 0 .5em rgba(79, 214, 255, .35); font-weight: 400; } .ajbox .lg-pick em { font: 400 .95em var(--display); color: #fff; font-style: normal; white-space: nowrap; } .ajbox .lg-arrow { font-style: normal; color: #ffe27a; transition: transform .25s; } .ajbox .aj-lang.open .lg-arrow { transform: rotate(180deg); } .ajbox .lg-list { position: absolute; left: 0; right: 0; top: calc(100% + .3em); display: grid; gap: .3em; padding: .45em; border-radius: 1em; border: .16em solid #ffc531; background: linear-gradient(180deg, #1c3aa8, #0b1c63); box-shadow: 0 .6em 1.4em rgba(0,0,0,.65), 0 0 1em rgba(79, 214, 255, .35); opacity: 0; visibility: hidden; transform: translateY(-.4em) scale(.97); transform-origin: top; transition: .22s cubic-bezier(.2, 1.3, .4, 1); } .ajbox .aj-lang.open .lg-list { opacity: 1; visibility: visible; transform: none; } .ajbox .lg-opt { display: flex; align-items: center; gap: .6em; height: 2.6em; padding: 0 .7em; cursor: pointer; border-radius: .75em; border: .12em solid rgba(140, 180, 255, .35); background: rgba(5, 12, 50, .55); color: #e2ecff; transition: transform .1s, background .15s; } .ajbox .lg-opt b { flex: 1; text-align: left; font: 400 1.05em var(--display); } .ajbox .lg-opt i:last-child:not(.flag) { font-style: normal; color: #4dffb8; font-weight: 900; } .ajbox .lg-opt:hover { background: rgba(79, 214, 255, .2); } .ajbox .lg-opt.on { border-color: #ffc531; background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 50%), linear-gradient(180deg, #4fd6ff, #1e86e8 55%, #1257c4); color: #fff; text-shadow: 0 .08em 0 #0b3e7a; } .ajbox .lg-opt:active { transform: scale(.97); } .ajbox .aj-lang.flash .lg-cur { animation: pwgot .5s; } /* ---- Arena: avisos abajo y traslúcidos (legibles) ---- */ html[data-screen="game"][data-gmode="arena"] #toasts { top: auto !important; bottom: calc(var(--sab, 0px) + 21vh); } html[data-screen="game"][data-gmode="arena"]:not([data-layout="mobilePortrait"]):not([data-layout="tabletPortrait"]) #toasts { bottom: 7vh; } html[data-screen="game"][data-gmode="arena"] .toast { background: rgba(8, 14, 44, .58); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: 0 0 .6rem var(--tc); text-shadow: 0 1px 2px #000, 0 0 4px #000; font-weight: 700; } html[data-screen="game"][data-gmode="arena"] .toast.out { transform: translateY(.6rem); } /* textos largos (otros idiomas) */ .misv2 .mr-nm.long { white-space: normal; text-overflow: clip; font-size: 3.1cqw; line-height: 1; top: 9%; height: 7cqw; display: flex; align-items: center; } html[data-mlay="4"] #scrGame .g-goal .gl-head b, html[data-mlay="7"] #scrGame .g-goal .gl-head b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .92em; line-height: 1.05; } /* si hay una tarjeta de efecto o aviso abajo, los avisos suben para no encimarse */ html[data-screen="game"][data-gmode="arena"]:has(#scrGame .fx-card.me, #scrGame .ap-warn) #toasts { bottom: calc(var(--sab, 0px) + 34vh); } html[data-screen="game"][data-gmode="arena"]:not([data-layout="mobilePortrait"]):not([data-layout="tabletPortrait"]):has(#scrGame .fx-card.me, #scrGame .ap-warn) #toasts { bottom: 22vh; } /* ===================== Resultado de nivel (v1.24) ===================== */ .modal:has(.mbox.lvc) { overflow-y: auto; align-items: safe center; } .mbox.lvc { --W: min(92vw, 30rem, 54vh); container-type: inline-size; position: relative; width: var(--W); max-height: none; overflow: visible; padding: 0; margin: calc(var(--W) * .17) 0 calc(var(--W) * .03); background: none; border: 0; border-radius: 0; box-shadow: none; animation: lvIn .5s cubic-bezier(.2, 1.35, .4, 1) both; } html[data-layout="tabletPortrait"] .mbox.lvc { --W: min(80vw, 31rem, 56vh); } .mbox.lvc::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 6cqw; pointer-events: none; background: radial-gradient(120% 45% at 50% 0%, rgba(110, 140, 255, .38), transparent 70%), radial-gradient(90% 40% at 50% 100%, rgba(150, 70, 255, .25), transparent 70%), repeating-linear-gradient(90deg, transparent 0 9cqw, rgba(110, 170, 255, .05) 9cqw calc(9cqw + 1px)), repeating-linear-gradient(0deg, transparent 0 9cqw, rgba(110, 170, 255, .05) 9cqw calc(9cqw + 1px)), linear-gradient(180deg, #19287a 0%, #0f1a55 45%, #0a1038 100%); box-shadow: inset 0 0 0 .75cqw #ffd25a, inset 0 0 0 1.05cqw #b8771c, inset 0 0 0 1.75cqw #7d3be6, inset 0 0 0 2.05cqw #23338f, inset 0 0 7cqw rgba(70, 150, 255, .5), 0 0 6cqw rgba(70, 150, 255, .55), 0 1.6cqw 0 #060a26, 0 3cqw 5cqw rgba(0, 0, 0, .6); } .mbox.lvc.lose::before { box-shadow: inset 0 0 0 .75cqw #c9a0ff, inset 0 0 0 1.05cqw #6b3aa8, inset 0 0 0 1.75cqw #b8324f, inset 0 0 0 2.05cqw #2a1d5e, inset 0 0 7cqw rgba(255, 70, 120, .35), 0 0 6cqw rgba(255, 70, 120, .4), 0 1.6cqw 0 #060a26, 0 3cqw 5cqw rgba(0, 0, 0, .6); } @keyframes lvIn { from { transform: scale(.8) translateY(4cqw); opacity: 0; } } /* parte superior: estrellas / trofeo / X */ .lvc-top { position: relative; z-index: 2; height: 27cqw; margin-top: -17cqw; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; } .lvc-rays { position: absolute; left: 50%; top: 52%; width: 100cqw; max-width: none; transform: translate(-50%, -50%); opacity: .8; mix-blend-mode: screen; z-index: -1; animation: lvSpin 16s linear infinite, lvFade .8s .3s both; } @keyframes lvSpin { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes lvFade { from { opacity: 0; } } .lvs { position: relative; width: 24cqw; aspect-ratio: 320 / 305; margin: 0 -1.2cqw 1cqw; } .lvs.s0 { transform: rotate(-14deg); } .lvs.s2 { transform: rotate(14deg); } .lvs.s1 { width: 31cqw; margin-bottom: 5cqw; z-index: 1; } .lvs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .lvs .off { filter: drop-shadow(0 .8cqw 0 rgba(0, 0, 0, .45)); } .lvs .onn, .lvs .bst { opacity: 0; } .lvs.on .onn { filter: drop-shadow(0 0 2.5cqw rgba(255, 200, 60, .85)) drop-shadow(0 .8cqw 0 rgba(90, 40, 0, .5)); animation: lvStar .55s var(--d) both cubic-bezier(.2, 1.5, .4, 1); } .lvs.on .bst { inset: -70%; width: 240%; height: 240%; mix-blend-mode: screen; animation: lvBst .95s var(--d) both ease-out; } @keyframes lvStar { 0% { transform: scale(2.8) rotate(-30deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes lvBst { 0% { transform: scale(.2); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1.25) rotate(25deg); opacity: 0; } } .lvc-big { width: 30cqw; filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 3cqw rgba(255, 200, 80, .55)); animation: lvStar .6s .2s both cubic-bezier(.2, 1.5, .4, 1); } .lvc-big.no { width: 25cqw; margin-bottom: 1cqw; filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 3cqw rgba(255, 60, 90, .7)); animation: lvStar .55s .15s both cubic-bezier(.2, 1.5, .4, 1), lvShake .5s .75s; } .lvc.soft .lvc-big.tro { filter: grayscale(.35) brightness(.85) drop-shadow(0 1cqw 0 rgba(0, 0, 0, .45)); } @keyframes lvShake { 20%, 60% { transform: translateX(-2cqw) rotate(-6deg); } 40%, 80% { transform: translateX(2cqw) rotate(6deg); } } /* contenido */ .lvc-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2.3cqw; padding: 0 5.5cqw 6.5cqw; text-align: center; } .lvc-title { position: relative; width: 106cqw; margin: -2cqw 0 -1.5cqw; animation: lvStar .5s .15s both cubic-bezier(.2, 1.4, .4, 1); } .lvc-title img { display: block; width: 100%; filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .4)); } .lvc-title b { position: absolute; left: 23%; right: 23%; top: 29%; bottom: 27%; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; font: 400 6.3cqw/1 var(--display); color: #fff; letter-spacing: .02em; -webkit-text-stroke: .9cqw #5b1f8f; paint-order: stroke fill; text-shadow: 0 .55cqw 0 #3b0f63; } .lvc.lose .lvc-title img { filter: hue-rotate(-48deg) saturate(.85) brightness(.82) drop-shadow(0 1cqw 0 rgba(0, 0, 0, .4)); } .lvc.lose .lvc-title b { -webkit-text-stroke-color: #6d1030; text-shadow: 0 .55cqw 0 #4a0820; } .lvc-sub { margin: 0; max-width: 100%; white-space: nowrap; overflow: hidden; font: 800 3.7cqw/1.2 var(--ui, 'Nunito', sans-serif); color: #c7d8ff; text-shadow: 0 .3cqw 0 rgba(0, 0, 0, .5); } .lvc-sub.dim { margin-top: -1.5cqw; color: #8ea6d8; font-size: 3.2cqw; } .lvc .world-pos { font-size: 3.2cqw; margin: 0; } .lvc-rw small { display: block; margin-bottom: 1.3cqw; font: 900 2.8cqw/1 var(--ui, 'Nunito', sans-serif); letter-spacing: .3em; color: #8fb4ff; } .lvc-rw > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2cqw; } .lvchip { display: inline-flex; align-items: center; gap: 1.2cqw; padding: .9cqw 3cqw .9cqw 1.1cqw; border-radius: 4cqw; background: linear-gradient(180deg, rgba(36, 60, 160, .9), rgba(12, 20, 66, .95)); box-shadow: inset 0 0 0 .45cqw rgba(110, 210, 255, .75), inset 0 .8cqw 0 rgba(255, 255, 255, .08), 0 .6cqw 0 rgba(0, 0, 0, .35), 0 0 2.4cqw rgba(60, 160, 255, .4); animation: lvChip .4s both cubic-bezier(.2, 1.5, .4, 1); } .lvchip:nth-child(1) { animation-delay: .55s; } .lvchip:nth-child(2) { animation-delay: .65s; } .lvchip:nth-child(3) { animation-delay: .75s; } .lvchip:nth-child(4) { animation-delay: .85s; } .lvchip img { width: 7.6cqw; height: 7.6cqw; object-fit: contain; filter: drop-shadow(0 .4cqw 0 rgba(0, 0, 0, .4)); } .lvchip i { font-style: normal; font-size: 5.6cqw; line-height: 7.6cqw; } .lvchip b { font: 400 4.6cqw/1 var(--display); color: #fff; text-shadow: 0 .4cqw 0 #061038; } @keyframes lvChip { from { transform: scale(.3); opacity: 0; } } .lvc-obj { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: .6cqw; } .lvc-obj li { display: flex; align-items: center; gap: 1.6cqw; height: 10.5cqw; padding: 0; border-style: solid; border-width: 0 5.4cqw; border-color: transparent; border-image: url(../assets/sprites/nivel/fila.webp) 0 255 fill / 0 9.8cqw / 0 stretch; animation: lvRow .45s calc(var(--d) + .4s) both cubic-bezier(.2, 1.2, .4, 1); } .lvc-obj .st { width: 4.6cqw; flex: none; } .lvc-obj li:not(.ok) .st { opacity: .7; } .lvc-obj span { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; font: 800 3.55cqw/1.1 var(--ui, 'Nunito', sans-serif); color: #eef4ff; text-shadow: 0 .3cqw 0 rgba(0, 0, 0, .55); } .lvc-obj li:not(.ok) span { color: #8f9dc9; } .lvc-obj .ck { width: 7.2cqw; flex: none; filter: drop-shadow(0 .4cqw 0 rgba(0, 0, 0, .4)); animation: lvChip .4s calc(var(--d) + 1.1s) both cubic-bezier(.2, 1.6, .4, 1); } @keyframes lvRow { from { transform: translateX(-12cqw); opacity: 0; } } .lvc-score { position: relative; width: 76cqw; aspect-ratio: 1000 / 330; margin-top: .5cqw; animation: lvChip .45s .9s both cubic-bezier(.2, 1.4, .4, 1); } .lvc-score .pl { position: absolute; inset: 0; width: 100%; height: 100%; } .lvc-score .tr { position: absolute; left: -7%; top: 50%; height: 96%; transform: translateY(-52%) rotate(-8deg); filter: drop-shadow(0 .8cqw 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 2cqw rgba(255, 190, 60, .5)); } .lvc-score > div { position: absolute; left: 22%; right: 10%; top: 24%; bottom: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqw; } .lvc-score small { font: 900 2.7cqw/1 var(--ui, 'Nunito', sans-serif); letter-spacing: .18em; text-transform: uppercase; color: #9fc4ff; } .lvc-score b { font: 400 8cqw/1 var(--display); color: #fff; text-shadow: 0 .55cqw 0 #061038, 0 0 3cqw rgba(120, 190, 255, .85); } .lvc-btns { display: flex; gap: 3cqw; width: 100%; justify-content: center; margin-top: .5cqw; } .lvc-btns.col { flex-direction: column; align-items: center; gap: 2cqw; } .lvb { position: relative; flex: 1 1 0; min-width: 0; height: 11.9cqw; margin: 0; padding: 0 0 .6cqw; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-style: solid; border-width: 0 5.5cqw; border-color: transparent; border-image: url(../assets/sprites/nivel/boton_azul.webp) 0 180 fill / 0 11cqw / 0 stretch; filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .35)); transition: transform .12s, filter .12s; animation: lvChip .4s 1.1s both cubic-bezier(.2, 1.5, .4, 1); } .lvb.orange { border-image: url(../assets/sprites/nivel/boton_naranja.webp) 0 200 fill / 0 12.1cqw / 0 stretch; animation-delay: 1.2s; } .lvb:hover { filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .35)) brightness(1.1); } .lvb:active { transform: scale(.94); } .lvb-ic { position: absolute; left: -5.2cqw; top: 50%; width: 11.5cqw; transform: translateY(-50%); filter: drop-shadow(0 .5cqw 0 rgba(0, 0, 0, .4)); } .lvb span { max-width: 100%; white-space: nowrap; overflow: hidden; font: 400 5cqw/1.15 var(--display); color: #fff; -webkit-text-stroke: .7cqw #0b2a7a; paint-order: stroke fill; text-shadow: 0 .45cqw 0 #071a55; } .lvb .lvb-ic + span { padding-left: 6.5cqw; } .lvb.orange span { -webkit-text-stroke-color: #7a3200; text-shadow: 0 .45cqw 0 #5a2200; } .lvc-btns.col .lvb { flex: none; width: 84cqw; } .lvb.slim { height: 9.6cqw; border-image-width: 0 8.9cqw; width: 58cqw !important; } .lvb.slim span { font-size: 4.2cqw; } .lvc-btns.col .lvb.slim { animation-delay: 1.3s; } /* confeti */ .lvc-conf { position: absolute; left: -6cqw; right: -6cqw; top: -26cqw; height: 0; z-index: 3; pointer-events: none; } .lvc-conf img { position: absolute; top: 0; left: var(--x); width: calc(13cqw * var(--s)); opacity: 0; animation: lvConf var(--t) var(--dl) cubic-bezier(.35, .1, .65, 1) forwards; } @keyframes lvConf { 0% { transform: translate(-50%, -6cqw) rotate(0); opacity: 0; } 8% { opacity: 1; } 80% { opacity: .95; } 100% { transform: translate(-50%, 165cqw) rotate(var(--r)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .lvc-rays { animation: none; } .lvc-conf { display: none; } } .lvc-obj li, .lvb { box-sizing: border-box; } .lvc-conf { z-index: 0; } .lvc-conf img { width: calc(10cqw * var(--s)); } .lvc-rays { opacity: .7; } .lvc-score > div { top: 31%; bottom: 16%; gap: .2cqw; } .lvc-score small { font-size: 2.5cqw; } .lvc-score b { font-size: 7.4cqw; } .lvc-title b { -webkit-text-stroke: 1.1cqw #4a157a; text-shadow: 0 .6cqw 0 #2e0a50, 0 0 2cqw rgba(60, 10, 110, .6); } .lvc-in { grid-template-columns: minmax(0, 1fr); } .lvc-title { justify-self: center; } /* ===================== Derrota (v1.25) ===================== */ .mbox.lvc.dflose { margin-top: calc(var(--W) * .40); } .mbox.lvc.dflose::before { background: none; box-shadow: none; border-radius: 0; border: 0 solid transparent; border-image: url(../assets/sprites/derrota/panel.webp) 235 250 235 250 fill / 27.2cqw 28.9cqw / 0 stretch; filter: drop-shadow(0 2cqw 3cqw rgba(0, 0, 0, .6)) drop-shadow(0 0 4cqw rgba(255, 40, 80, .25)); } .dfx-in { padding: 11cqw 13.5cqw 12.5cqw; gap: 2.6cqw; } .dfx-grietas { position: absolute; z-index: -1; right: 9cqw; top: 9cqw; width: 34cqw; opacity: .5; mix-blend-mode: screen; pointer-events: none; transform: scaleX(-1); animation: lvFade 1s .5s both; } .dfx-top { position: absolute; z-index: 2; left: 50%; top: -37cqw; width: 46cqw; transform: translateX(-50%); pointer-events: none; } .dfx-top.sit { top: -33cqw; width: 44cqw; } .dfx-panda { display: block; width: 100%; filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .35)); transform-origin: 50% 100%; animation: dfDrop .6s .1s both cubic-bezier(.3, 1.4, .5, 1), dfSob 1.6s 1s ease-in-out infinite; } .dfx-nube { position: absolute; z-index: 1; width: 24cqw; right: -15cqw; top: -11cqw; filter: drop-shadow(0 .8cqw 1cqw rgba(0, 0, 0, .4)); animation: dfCloud .6s .7s both cubic-bezier(.3, 1.4, .5, 1), dfFloat 3s 1.3s ease-in-out infinite; } @keyframes dfDrop { from { transform: translateY(-14cqw) scale(.7); opacity: 0; } } @keyframes dfSob { 0%, 100% { transform: scale(1, 1); } 15% { transform: scale(1.03, .96); } 30% { transform: scale(.99, 1.02); } 45% { transform: scale(1.02, .97); } 60% { transform: none; } } @keyframes dfCloud { from { transform: translate(-6cqw, 4cqw) scale(.3); opacity: 0; } } @keyframes dfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6cqw); } } .dfx-title { width: 100cqw; margin: 0 0 -1cqw; } .dfx-title b { left: 17%; right: 17%; top: 29%; bottom: 28%; -webkit-text-stroke: 1.1cqw #5a0a1c; text-shadow: 0 .6cqw 0 #3a0410, 0 0 2.5cqw rgba(255, 40, 80, .55); font-size: 6.4cqw; } .mbox.lvc.dflose .dfx-title img { filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .4)); } .dfx-why { display: flex; align-items: center; gap: 2cqw; max-width: 100%; padding: .6cqw 3.2cqw .6cqw .8cqw; border-radius: 4cqw; background: linear-gradient(180deg, rgba(40, 20, 70, .75), rgba(14, 10, 36, .85)); box-shadow: inset 0 0 0 .4cqw rgba(255, 70, 110, .45), 0 .6cqw 0 rgba(0, 0, 0, .3); animation: lvChip .4s .5s both cubic-bezier(.2, 1.5, .4, 1); } .dfx-why img { width: 13cqw; height: 13cqw; object-fit: contain; flex: none; filter: drop-shadow(0 .5cqw 0 rgba(0, 0, 0, .4)); } .dfx-why span { min-width: 0; white-space: nowrap; overflow: hidden; text-align: left; font: 800 3.6cqw/1.15 var(--ui, 'Nunito', sans-serif); color: #ffd6e0; } .dfx-score { position: relative; box-sizing: border-box; width: 72cqw; height: 17cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3cqw; padding-bottom: .6cqw; border: solid transparent; border-width: 0 13cqw; border-image: url(../assets/sprites/derrota/placa.webp) 0 115 0 112 fill / 0 15.8cqw 0 15.4cqw / 0 stretch; animation: lvChip .45s .7s both cubic-bezier(.2, 1.4, .4, 1); } .dfx-score small { font: 900 2.5cqw/1 var(--ui, 'Nunito', sans-serif); letter-spacing: .18em; text-transform: uppercase; color: #d8b4ff; } .dfx-score b { font: 400 7.4cqw/1 var(--display); color: #fff; text-shadow: 0 .55cqw 0 #1a0630, 0 0 3cqw rgba(220, 120, 255, .7); } .dfx-btns { display: grid; justify-items: center; gap: 2.1cqw; width: 100%; margin-top: .4cqw; } .dfb { position: relative; box-sizing: border-box; width: 74cqw; height: 11.6cqw; margin: 0; padding: 0 0 .5cqw; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 1.6cqw; border: solid transparent; border-width: 0 6cqw; filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .35)); transition: transform .12s, filter .12s; animation: lvChip .4s 1s both cubic-bezier(.2, 1.5, .4, 1); } .dfb.rojo { border-image: url(../assets/sprites/derrota/boton_rojo.webp) 0 93 0 92 fill / 0 8.2cqw 0 8.1cqw / 0 stretch; } .dfb.verde { border-width: 0 5cqw 0 12cqw; border-image: url(../assets/sprites/derrota/boton_verde.webp) 0 55 0 160 fill / 0 4.8cqw 0 14cqw / 0 stretch; animation-delay: .9s; } .dfb.lila { border-image: url(../assets/sprites/derrota/boton_lila.webp) 0 92 0 92 fill / 0 8.1cqw / 0 stretch; animation-delay: 1.1s; } .dfb.slim { width: 54cqw; height: 9.6cqw; border-width: 0 5cqw; border-image-width: 0 6.75cqw; } .dfb:hover { filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .35)) brightness(1.1); } .dfb:active { transform: scale(.94); } .dfb img { height: 8cqw; flex: none; filter: drop-shadow(0 .4cqw 0 rgba(0, 0, 0, .4)); } .dfb span { min-width: 0; white-space: nowrap; overflow: hidden; font: 400 4.7cqw/1.15 var(--display); color: #fff; -webkit-text-stroke: .7cqw #5a0a10; paint-order: stroke fill; text-shadow: 0 .45cqw 0 #3a0508; } .dfb.verde span { -webkit-text-stroke-color: #0a4a20; text-shadow: 0 .45cqw 0 #063014; font-size: 4.2cqw; } .dfb.lila span { -webkit-text-stroke-color: #2e0a6a; text-shadow: 0 .45cqw 0 #1e0548; font-size: 4.2cqw; } /* cristales del cubo roto que salen volando */ .dfx-burst { position: absolute; left: 50%; top: -6cqw; width: 0; height: 0; z-index: 0; pointer-events: none; } .dfx-burst img { position: absolute; left: 0; top: 0; width: 9cqw; opacity: 0; animation: dfBurst var(--t) var(--dl) cubic-bezier(.25, .6, .55, 1) forwards; } .dfx-burst img.e { width: 3.6cqw; } @keyframes dfBurst { 0% { transform: translate(-50%, -50%) scale(.3) rotate(0); opacity: 0; } 12% { opacity: 1; } 35% { transform: translate(calc(-50% + var(--dx) * .6), calc(-50% + var(--up))) scale(1) rotate(calc(var(--r) * .35)); } 85% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + 95cqw)) scale(.9) rotate(var(--r)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .dfx-burst { display: none; } .dfx-panda, .dfx-nube { animation: none; } } .mbox.lvc.dflose.arcd { --W: min(90vw, 28rem, 47vh); } html[data-layout="tabletPortrait"] .mbox.lvc.dflose.arcd { --W: min(76vw, 29rem, 50vh); } /* Arena con el nuevo diseño */ .lvc-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3cqw; width: 86%; padding: 1.4cqw 4cqw; border-radius: 4cqw; background: linear-gradient(180deg, rgba(30, 40, 110, .75), rgba(10, 14, 50, .85)); box-shadow: inset 0 0 0 .4cqw rgba(110, 200, 255, .45), 0 .6cqw 0 rgba(0, 0, 0, .3); animation: lvChip .4s .5s both cubic-bezier(.2, 1.5, .4, 1); } .dflose .lvc-vs { width: 100%; background: linear-gradient(180deg, rgba(50, 20, 70, .75), rgba(16, 8, 36, .85)); box-shadow: inset 0 0 0 .4cqw rgba(255, 80, 120, .45), 0 .6cqw 0 rgba(0, 0, 0, .3); } .lvc-vs span { display: grid; justify-items: center; min-width: 0; } .lvc-vs small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 3.1cqw/1.2 var(--ui, 'Nunito', sans-serif); color: #b9cbf2; } .lvc-vs b { font: 400 9.5cqw/1 var(--display); color: #fff; text-shadow: 0 .6cqw 0 #061038; } .lvc-vs em { font: 400 5cqw/1 var(--display); font-style: normal; color: #ffd23f; text-shadow: 0 .45cqw 0 #6a3a00; } .lvc-p { margin: 0; font: 700 3.4cqw/1.3 var(--ui, 'Nunito', sans-serif); color: #d4e2ff; text-shadow: 0 .3cqw 0 rgba(0, 0, 0, .5); } .lvc-p.tro { font-size: 3.2cqw; color: #b9cbf2; } .dflose .lvc-p { color: #ffd9e2; } .mbox.lvc.arena.dflose .dfb.rojo { animation-delay: .8s; } .dfx-in { padding-left: 15.5cqw; padding-right: 15.5cqw; } .dflose .lvc-p { font-size: 3.2cqw; } .dflose .dfx-why, .dflose .lvc-vs { max-width: 100%; box-sizing: border-box; } /* ===================== Búsqueda de rival (v1.26) ===================== */ .mbox.mmbox { --W: min(92vw, 27rem, 62vh); container-type: inline-size; position: relative; width: var(--W); max-height: none; overflow: visible; padding: 0; margin-top: calc(var(--W) * .08); background: none; border: 0; box-shadow: none; border-radius: 0; } .mbox.mmbox::before { content: ''; position: absolute; inset: 0; border-radius: 6cqw; pointer-events: none; background: radial-gradient(70% 40% at 0% 30%, rgba(40, 140, 255, .35), transparent 70%), radial-gradient(70% 40% at 100% 30%, rgba(255, 50, 120, .32), transparent 70%), repeating-linear-gradient(90deg, transparent 0 9cqw, rgba(110, 170, 255, .05) 9cqw calc(9cqw + 1px)), repeating-linear-gradient(0deg, transparent 0 9cqw, rgba(110, 170, 255, .05) 9cqw calc(9cqw + 1px)), linear-gradient(180deg, #17246f 0%, #0e1650 50%, #0a0f36 100%); box-shadow: inset 0 0 0 .75cqw #ffd25a, inset 0 0 0 1.05cqw #b8771c, inset 0 0 0 1.75cqw #7d3be6, inset 0 0 0 2.05cqw #23338f, inset 0 0 7cqw rgba(70, 150, 255, .45), 0 0 6cqw rgba(70, 150, 255, .5), 0 1.6cqw 0 #060a26, 0 3cqw 5cqw rgba(0, 0, 0, .6); } .mbox.mmbox.shake { animation: mmShake .45s; } @keyframes mmShake { 20% { transform: translate(-1.5cqw, .6cqw) rotate(-1deg); } 40% { transform: translate(1.5cqw, -.6cqw) rotate(1deg); } 60% { transform: translate(-1cqw, .4cqw); } 80% { transform: translate(1cqw, 0); } } .mmv { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2.4cqw; padding: 0 6cqw 6cqw; text-align: center; } .mm-title { width: 98cqw; margin: -9cqw 0 -2cqw; justify-self: center; } .mm-title b { font-size: 6.6cqw; } .mm-row2 { display: flex; align-items: center; justify-content: center; gap: 1cqw; width: 100%; } .mmc { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: .8cqw; padding: 2.6cqw 1.5cqw 2cqw; border-radius: 4.5cqw; position: relative; background: linear-gradient(180deg, rgba(30, 90, 220, .45), rgba(10, 20, 70, .85)); box-shadow: inset 0 0 0 .55cqw #36d0ff, inset 0 0 4cqw rgba(54, 208, 255, .35), 0 0 3.5cqw rgba(54, 208, 255, .4), 0 .8cqw 0 rgba(0, 0, 0, .35); } .mmc.rv { background: linear-gradient(180deg, rgba(230, 40, 120, .4), rgba(50, 10, 50, .85)); box-shadow: inset 0 0 0 .55cqw #ff3ca8, inset 0 0 4cqw rgba(255, 60, 168, .35), 0 0 3.5cqw rgba(255, 60, 168, .4), 0 .8cqw 0 rgba(0, 0, 0, .35); } .mmc-av { position: relative; width: 24cqw; height: 24cqw; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #1d2c7a, #0a1038); box-shadow: 0 0 0 .7cqw #fff3, 0 .8cqw 0 rgba(0, 0, 0, .4); } .mmc-av > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mmc b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 4.5cqw/1.1 var(--display); color: #fff; text-shadow: 0 .4cqw 0 #061038; } .mmc small { display: flex; align-items: center; gap: 1cqw; font: 800 3cqw/1 var(--ui, 'Nunito', sans-serif); color: #9fd8ff; min-height: 5.5cqw; } .mmc small img { width: 5.5cqw; height: 5.5cqw; object-fit: contain; } .mmc em { font: 800 3cqw/1 var(--ui, 'Nunito', sans-serif); font-style: normal; color: #ffd23f; } .mm-vs2 { flex: none; width: 17cqw; z-index: 2; margin: 0 -3cqw; } .mm-vs2 img { width: 100%; filter: drop-shadow(0 .8cqw 0 rgba(0, 0, 0, .4)); animation: mmVs 1s ease-in-out infinite; } @keyframes mmVs { 50% { transform: scale(1.12) rotate(-4deg); filter: drop-shadow(0 .8cqw 0 rgba(0, 0, 0, .4)) drop-shadow(0 0 3cqw rgba(255, 200, 60, .8)); } } /* radar + ruleta de rivales */ .mm-radar { position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, rgba(255, 60, 168, .55), rgba(255, 60, 168, 0) 25%, transparent 100%), repeating-radial-gradient(circle, transparent 0 4cqw, rgba(255, 120, 200, .35) 4cqw calc(4cqw + 1px)); mix-blend-mode: screen; animation: mmSweep 1.4s linear infinite; } @keyframes mmSweep { to { transform: rotate(360deg); } } .mm-reel { position: absolute; inset: 0; overflow: hidden; filter: blur(.25cqw) saturate(.7) brightness(.8); } .mm-reel > div { display: grid; animation: mmReel 1.1s linear infinite; } .mm-reel img { width: 24cqw; height: 24cqw; object-fit: cover; } @keyframes mmReel { to { transform: translateY(-50%); } } .mmc.found .mmc-av { animation: lvChip .45s both cubic-bezier(.2, 1.6, .4, 1); } .mmc.found .got { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mmc.found .flash { position: absolute; inset: -60%; width: 220%; height: 220%; z-index: 3; mix-blend-mode: screen; animation: lvBst .8s both ease-out; } .mmc.found b, .mmc.found small, .mmc.found em { animation: lvChip .4s .15s both cubic-bezier(.2, 1.5, .4, 1); } /* pozo */ .mm-pot2 { position: relative; display: flex; align-items: center; justify-content: center; gap: 3cqw; width: 88%; padding: 1.4cqw 5cqw 1.4cqw 3cqw; border-radius: 5cqw; background: linear-gradient(180deg, rgba(255, 210, 63, .22), rgba(60, 30, 0, .55)); box-shadow: inset 0 0 0 .5cqw rgba(255, 210, 63, .75), 0 0 3cqw rgba(255, 190, 40, .3), 0 .7cqw 0 rgba(0, 0, 0, .35); } .mm-pot2 .pile { width: 18cqw; height: 13cqw; object-fit: contain; filter: drop-shadow(0 .6cqw 0 rgba(0, 0, 0, .4)); } .mm-pot2 > div { display: grid; justify-items: start; } .mm-pot2 small { font: 900 3cqw/1 var(--ui, 'Nunito', sans-serif); letter-spacing: .15em; text-transform: uppercase; color: #ffe6a0; } .mm-pot2 b { font: 400 10cqw/1 var(--display); color: #ffd23f; text-shadow: 0 .6cqw 0 #6a3a00, 0 0 3cqw rgba(255, 200, 60, .7); } .mm-pot2 b.pop { animation: lvChip .4s cubic-bezier(.2, 1.8, .4, 1); } .mm-coin { position: absolute; z-index: 5; width: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; pointer-events: none; animation: mmCoin .62s cubic-bezier(.4, 0, .6, 1) forwards; } @keyframes mmCoin { 0% { transform: translate(0, 0) scale(.6); } 45% { transform: translate(calc(var(--tx) * .5), calc(var(--ty) * .5 - 10cqw)) scale(1.1); } 100% { transform: translate(var(--tx), var(--ty)) scale(.7); opacity: .2; } } .mm-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6cqw; } .mm-chips span { padding: 1cqw 2.6cqw; border-radius: 3cqw; font: 800 3cqw/1 var(--ui, 'Nunito', sans-serif); color: #eaf2ff; background: rgba(10, 18, 60, .85); box-shadow: inset 0 0 0 .35cqw rgba(110, 210, 255, .55); } .mm-txt { margin: .6cqw 0 0; font: 800 3.7cqw/1.2 var(--ui, 'Nunito', sans-serif); color: #fff; } .mm-bar2 { display: block; width: 86%; height: 3cqw; border-radius: 2cqw; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 .35cqw rgba(110, 210, 255, .45); overflow: hidden; } .mm-bar2 i { display: block; height: 100%; width: 0; border-radius: 2cqw; background: linear-gradient(90deg, #36d0ff, #b45cff, #ff3ca8); box-shadow: 0 0 2cqw #ff3ca8; transition: width .25s linear; } .mm-tip { margin: 0; min-height: 7.5cqw; font: 700 3.1cqw/1.25 var(--ui, 'Nunito', sans-serif); color: #9fb4e8; font-style: italic; } .mm-tip.in { animation: lvFade .5s both; } .mm-btns { width: 100%; display: grid; justify-items: center; transition: opacity .3s, transform .3s; } .mm-btns.gone { opacity: 0; transform: scale(.8); pointer-events: none; } .mmbox .dfb.lila { width: 78cqw; animation: none; } .mmbox .dfb.lila span { font-size: 4cqw; } .mm-count { position: absolute; left: 50%; top: 42%; z-index: 9; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; font: 400 30cqw/1 var(--display); color: #fff; -webkit-text-stroke: 1.6cqw #5b1f8f; paint-order: stroke fill; text-shadow: 0 1.4cqw 0 #2e0a50, 0 0 6cqw rgba(255, 210, 90, .9); white-space: nowrap; } .mm-count.on { animation: mmCount .62s both cubic-bezier(.2, 1.6, .4, 1); } .mm-count.go { font-size: 17cqw; color: #ffd23f; -webkit-text-stroke-color: #7a1030; } @keyframes mmCount { 0% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } 35% { opacity: 1; transform: translate(-50%, -50%) scale(.95); } 70% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.9); opacity: 0; } } .mm-count.go.on { animation-duration: .9s; animation-fill-mode: both; } .mm-count { color: #ffe27a; } /* ===================== Búsqueda de rival con arte (v1.27) ===================== */ .mbox.mmbox { --W: min(92vw, 27rem, 58vh); margin-top: calc(var(--W) * .1); } .mbox.mmbox::before { border-radius: 0; box-shadow: none; filter: drop-shadow(0 2cqw 3cqw rgba(0, 0, 0, .6)); background: url(../assets/sprites/buscar/panel.webp) center / 100% 100% no-repeat; } .mmbox .mmv { padding: 0 9.5cqw 10.5cqw; gap: 2.2cqw; } .mm-title { position: relative; width: 104cqw; margin: -11cqw 0 -3.5cqw; justify-self: center; z-index: 3; animation: lvStar .5s .1s both cubic-bezier(.2, 1.4, .4, 1); } .mm-title img { display: block; width: 100%; filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .45)); } .mm-title b { position: absolute; left: 24%; right: 24%; top: 27%; bottom: 25%; display: flex; align-items: center; justify-content: center; white-space: nowrap; font: 400 6.8cqw/1 var(--display); color: #fff; -webkit-text-stroke: 1.1cqw #6a3a00; paint-order: stroke fill; text-shadow: 0 .6cqw 0 #4a2600; } .mmbox .mm-row2 { gap: 0; align-items: flex-start; } .mmbox .mmc { padding: 0; background: none; box-shadow: none; gap: .6cqw; } .mmc-fr { position: relative; width: 34cqw; aspect-ratio: 460 / 511; } .mmc.rv .mmc-fr { aspect-ratio: 460 / 532; width: 33cqw; margin-top: -.8cqw; } .mmc-fr .fr { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; filter: drop-shadow(0 .8cqw 0 rgba(0, 0, 0, .4)); } .mmc-pic { position: absolute; z-index: 1; left: 21.5%; right: 21.5%; top: 20%; bottom: 20%; overflow: hidden; border-radius: 1.5cqw; background: radial-gradient(120% 90% at 50% 100%, #2a5bd8, #0b1450 70%); } .mmc.rv .mmc-pic { left: 16%; right: 16%; top: 18%; bottom: 20%; background: radial-gradient(120% 90% at 50% 100%, #b2245e, #2a0828 70%); } .mmc-pic > img, .mmc-pic .got { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; } .mmc.found .got { animation: lvChip .45s both cubic-bezier(.2, 1.6, .4, 1); } .mmc-fr .flash { position: absolute; z-index: 3; left: -40%; top: -35%; width: 180%; mix-blend-mode: screen; pointer-events: none; animation: lvBst .8s both ease-out; } .mmbox .mm-reel { position: absolute; inset: 0; overflow: hidden; filter: blur(.3cqw) saturate(.6) brightness(.6); } .mmbox .mm-reel img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%; display: block; } .mmbox .mm-reel > div { animation: mmReel 1.3s linear infinite; } .mm-radar { position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; } .mm-radar .rd { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; animation: mmPulse 1.8s ease-in-out infinite; } .mm-radar .sw { position: absolute; left: 50%; top: 50%; height: 44%; width: auto; aspect-ratio: 320 / 308; transform-origin: 50% 97.4%; opacity: .85; animation: mmSw 1.6s linear infinite; } @keyframes mmSw { from { transform: translate(-50%, -97.4%) rotate(0); } to { transform: translate(-50%, -97.4%) rotate(360deg); } } @keyframes mmPulse { 50% { opacity: .5; transform: scale(.97); } } .mmc.found .mm-radar, .mmc.found .mm-reel { display: none; } .mmbox .mmc b { font-size: 4.3cqw; margin-top: -.6cqw; } .mmbox .mm-vs2 { width: 25cqw; margin: 6cqw -5cqw 0; } .mmbox .mm-vs2 img { animation: mmVs 1.1s ease-in-out infinite; } .mmbox .mm-pot2 { width: auto; padding: 0; background: none; box-shadow: none; gap: 0; } .mmbox .mm-pot2 .pile { width: 21cqw; height: auto; margin-right: -6cqw; z-index: 1; position: relative; filter: drop-shadow(0 .8cqw 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 2.5cqw rgba(255, 190, 40, .5)); } .mm-pot2 .pl { position: relative; width: 52cqw; aspect-ratio: 760 / 206; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: .2cqw; background: url(../assets/sprites/buscar/placa.webp) center / 100% 100% no-repeat; padding: 0 0 .4cqw 4cqw; } .mmbox .mm-pot2 small { color: #6a3a00; font-size: 2.6cqw; } .mmbox .mm-pot2 b { font-size: 8cqw; color: #fff; -webkit-text-stroke: .9cqw #7a4300; paint-order: stroke fill; text-shadow: 0 .55cqw 0 #5a2c00; } .mmbox .mm-chips span { display: inline-flex; align-items: center; gap: 1cqw; padding: .6cqw 2.4cqw .6cqw .6cqw; } .mmbox .mm-chips img { width: 6cqw; height: 6cqw; object-fit: contain; } .mmbox .mm-txt { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; margin: 0; } .mmbox .mm-txt img { width: 6.5cqw; height: 6.5cqw; animation: mmSweep 6s linear infinite; filter: drop-shadow(0 0 1.5cqw rgba(80, 200, 255, .7)); } .mm-bar3 { position: relative; display: block; width: 84%; height: 7cqw; box-sizing: border-box; border: solid transparent; border-width: 0 10cqw; border-image: url(../assets/sprites/buscar/barra_marco.webp) 0 128 fill / 0 12.4cqw / 0 stretch; } .mm-bar3 > i { position: absolute; left: -3cqw; right: -3cqw; top: 31%; bottom: 31%; border-radius: 3cqw; overflow: hidden; background: rgba(0, 8, 30, .75); } .mm-bar3 b { display: block; height: 100%; width: 0; background: url(../assets/sprites/buscar/barra_relleno.webp) left center / 100% 100% no-repeat; transition: width .25s linear; filter: drop-shadow(0 0 1.5cqw #ff3ca8); } .mmx { position: relative; box-sizing: border-box; width: 78cqw; height: 12cqw; margin: 0; padding: 0 0 .4cqw 8cqw; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border: solid transparent; border-width: 0 7cqw; border-image: url(../assets/sprites/buscar/boton.webp) 0 120 fill / 0 12.2cqw / 0 stretch; filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .35)); transition: transform .12s, filter .12s; } .mmx:hover { filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .35)) brightness(1.12); } .mmx:active { transform: scale(.95); } .mmx img { position: absolute; left: -3.5cqw; top: 50%; width: 10cqw; transform: translateY(-50%); filter: drop-shadow(0 .5cqw 0 rgba(0, 0, 0, .4)); } .mmx span { min-width: 0; white-space: nowrap; overflow: hidden; font: 400 4cqw/1.15 var(--display); color: #fff; -webkit-text-stroke: .6cqw #3a0510; paint-order: stroke fill; text-shadow: 0 .45cqw 0 #2a0308; } .mmbox .mmv { padding: 0 10.5cqw 16cqw; } .mmbox .mm-row2 { margin-top: 1cqw; } .mmc-fr { width: 37cqw; } .mmc.rv .mmc-fr { width: 36cqw; } .mmbox .mm-vs2 { width: 23cqw; margin: 8cqw -6cqw 0; } .mm-pot2 .pl { padding-top: 1.2cqw; } .mmbox .mm-pot2 small { font-size: 2.4cqw; margin-bottom: -.4cqw; } /* ===================== Anuncios con recompensa (v1.28) ===================== */ .adpair { display: flex; justify-content: center; align-items: stretch; gap: .5em; flex-wrap: wrap; margin-top: .55em; transition: opacity .3s, transform .3s; } .adpair.done { opacity: 0; transform: scale(.85); } .adbtn, .adgem { position: relative; display: inline-flex; align-items: center; gap: .45em; min-height: 2.6em; padding: .35em .95em .35em .4em; border: 0; border-radius: 1.4em; cursor: pointer; font: 400 1em/1.05 var(--display); color: #fff; text-shadow: 0 .1em 0 rgba(0, 0, 0, .45); transition: transform .12s, filter .12s; } .adbtn { background: linear-gradient(180deg, #4dffb0, #11b06a 55%, #087a48); box-shadow: inset 0 .12em 0 rgba(255, 255, 255, .45), 0 .22em 0 #05502e, 0 0 1em rgba(60, 255, 160, .45); } .adbtn i { display: grid; place-items: center; width: 1.85em; height: 1.85em; border-radius: 50%; font-style: normal; font-size: .9em; background: #fff; color: #0b8a52; box-shadow: 0 .1em 0 rgba(0, 0, 0, .3); padding-left: .12em; } .adbtn span { display: block; } .adbtn small { display: block; font: 800 .62em/1 var(--ui, 'Nunito', sans-serif); opacity: .9; letter-spacing: .03em; } .adbtn { flex-wrap: wrap; } .adbtn span, .adbtn small { flex: 0 0 auto; } .adbtn > span + small { width: 100%; margin-top: -.05em; padding-left: 2.3em; } .adbtn { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: .45em; row-gap: .05em; text-align: left; } .adbtn i { grid-row: 1 / span 2; } .adbtn > span + small { padding-left: 0; width: auto; } .adgem { padding: .35em .95em; background: linear-gradient(180deg, #c58bff, #7a3ad8 60%, #4f1fa0); box-shadow: inset 0 .12em 0 rgba(255, 255, 255, .35), 0 .22em 0 #2e0d6a; } .adgem b { font-weight: 400; padding: .1em .45em; border-radius: .8em; background: rgba(0, 0, 0, .28); } .adbtn:hover, .adgem:hover { filter: brightness(1.08); } .adbtn:active, .adgem:active { transform: scale(.95); } .adbtn.wide { display: grid; width: 100%; max-width: 22em; margin: 0 auto .45em; justify-content: center; } .lvc .adpair { font-size: 3.4cqw; } .lvc .adbtn.wide, .dflose .adbtn.wide { font-size: 3.6cqw; width: 74cqw; margin-bottom: 0; } .lvchip.x2 { animation: lvChip .45s cubic-bezier(.2, 1.8, .4, 1); box-shadow: inset 0 0 0 .55cqw #4dffb0, 0 0 3cqw rgba(77, 255, 176, .7); } #enBtns .adbtn.wide { font-size: 1.05rem; } .ms-bonus { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .4em .8em; margin: .6em .4em .2em; padding: .55em .8em; border-radius: 1em; background: linear-gradient(180deg, rgba(40, 70, 170, .55), rgba(14, 22, 70, .85)); box-shadow: inset 0 0 0 .14em rgba(255, 210, 63, .6); } .ms-bonus > img { width: 3.2em; height: 3.2em; object-fit: contain; } .ms-bonus > div:not(.adpair) { display: grid; text-align: left; } .ms-bonus > div b { font: 400 1.05em/1.1 var(--display); color: #ffe27a; } .ms-bonus > div small { font: 800 .8em/1.2 var(--ui, 'Nunito', sans-serif); color: #cfe0ff; } .ms-bonus .adpair { margin: 0; font-size: .85em; } /* rivales y bots de la IA, siempre marcados */ .rk-ai { display: inline-block; margin-left: .35em; padding: .05em .4em; border-radius: .5em; font: 900 .62em/1.3 var(--ui, 'Nunito', sans-serif); font-style: normal; letter-spacing: .05em; vertical-align: middle; color: #0b1450; background: linear-gradient(180deg, #9ff3ff, #36d0ff); box-shadow: 0 .08em 0 rgba(0, 0, 0, .35); } #rvName[data-ai]:not([data-ai=""])::after { content: attr(data-ai); display: inline-block; margin-left: .3em; padding: 0 .35em; border-radius: .45em; font: 900 .6em/1.5 var(--ui, 'Nunito', sans-serif); color: #0b1450; background: #36d0ff; vertical-align: middle; } /* ===================== Caja sorpresa: panel de mensajes en PC (v1.28.1) ===================== */ .box-feed { position: absolute; z-index: 6; display: none; pointer-events: none; font-size: var(--fs, 15px); } html[data-device="desktop"][data-layout^="desktop"] #scrGame[data-mode="arcade"] .box-feed { display: block; opacity: 0; transform: translateY(-.4em); transition: opacity .35s, transform .35s; } html[data-device="desktop"][data-layout^="desktop"] #scrGame[data-mode="arcade"] .box-feed.on { opacity: 1; transform: none; } .box-feed h5 { display: flex; align-items: center; gap: .4em; margin: 0 0 .45em; padding: .35em .7em; border-radius: .7em; font: 400 1.05em/1.1 var(--display); color: #ffe27a; letter-spacing: .02em; background: linear-gradient(180deg, rgba(60, 40, 10, .85), rgba(30, 18, 4, .85)); box-shadow: inset 0 0 0 .12em rgba(255, 210, 63, .7), 0 0 1em rgba(255, 190, 40, .3); } .box-feed h5 span { font-size: 1.15em; } .bf-list { display: grid; gap: .35em; } .bf-it { --c: #9fd8ff; padding: .45em .7em; border-radius: .65em; font: 800 .82em/1.3 var(--ui, 'Nunito', sans-serif); color: #fff; text-shadow: 0 .08em .15em rgba(0, 0, 0, .7); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 28%, rgba(8, 14, 44, .92)), rgba(8, 14, 44, .9)); box-shadow: inset .25em 0 0 var(--c), 0 .25em .6em rgba(0, 0, 0, .35); animation: bfIn .45s cubic-bezier(.2, 1.3, .4, 1) both; } .bf-it.big { font: 400 1em/1.2 var(--display); } @keyframes bfIn { from { opacity: 0; transform: translateX(1.2em) scale(.96); } } /* ===================== Arena en PC: los dos tableros a la vista (v1.28.2) ===================== Sólo PC. El tablero del rival sale del panel y se muestra grande (85 % del tuyo) con borde rojo, pegado a la derecha. Celular y tablet no cambian. */ html[data-device="desktop"][data-layout^="desktop"] #scrGame[data-mode="arena"] { --bh: calc(var(--vh) * .79); /* alto aproximado de tu tablero */ grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--vh) * .44)) minmax(0, .82fr) calc(var(--bh) * .85 * .455); grid-template-areas: "top top top top" "hold board next rvb" "powers board rival rvb" "helper board rival rvb" "helper board rival rvb" "status status status status"; } html[data-device="desktop"][data-layout^="desktop"] #scrGame[data-mode="arena"] .g-rival { display: contents; } html[data-device="desktop"][data-layout^="desktop"] #scrGame[data-mode="arena"] .rv-info { grid-area: rival; align-self: start; justify-self: start; width: min(100%, 20rem); padding: .7rem .8rem; border-radius: 1rem; background: var(--panel); border: .15rem solid rgba(255, 60, 110, .55); box-shadow: 0 0 1.2rem rgba(255, 50, 100, .25); } html[data-device="desktop"][data-layout="desktopWide"] #scrGame[data-mode="arena"] .rv-info { width: min(100%, 22rem); } html[data-device="desktop"][data-layout^="desktop"] #scrGame[data-mode="arena"] .g-next { justify-self: start; } html[data-device="desktop"][data-layout^="desktop"] #scrGame[data-mode="arena"] .rv-board { grid-area: rvb; align-self: center; justify-self: end; box-sizing: border-box; width: 100%; height: calc(var(--bh) * .85); min-height: 0; padding: .35rem; cursor: default; border-radius: 1rem; background: linear-gradient(180deg, rgba(40, 6, 24, .85), rgba(14, 4, 20, .9)); border: .2rem solid #ff3060; box-shadow: 0 0 0 .12rem rgba(255, 140, 170, .35) inset, 0 0 1.6rem rgba(255, 40, 90, .55), 0 0 4rem rgba(255, 40, 90, .2); } html[data-device="desktop"][data-layout^="desktop"] #scrGame[data-mode="arena"] .rv-board::before { content: attr(data-label); position: absolute; left: 50%; top: -.95rem; transform: translateX(-50%); z-index: 3; padding: .15rem .8rem; border-radius: .6rem; white-space: nowrap; font: 400 .8rem/1.2 var(--display); color: #fff; letter-spacing: .04em; background: linear-gradient(180deg, #ff4d7a, #c0123f); box-shadow: 0 .15rem 0 #6a0820, 0 0 .8rem rgba(255, 40, 90, .6); } html[data-device="desktop"][data-layout^="desktop"] #scrGame[data-mode="arena"] .rv-board .rv-zoom { display: none; } html[data-device="desktop"][data-layout^="desktop"] #scrGame[data-mode="arena"] .rv-board canvas { border-radius: .6rem; } html[data-device="desktop"][data-layout^="desktop"] #scrGame[data-mode="arena"] .g-rival.alert .rv-board { animation: alertPulse 1s ease-in-out infinite; } html[data-device="desktop"][data-layout^="desktop"] #scrGame[data-mode="arena"] .rv-board.shielded { box-shadow: 0 0 0 .2rem #4dffb8, 0 0 1.6rem #4dffb8; } html[data-device="desktop"][data-layout^="desktop"] #scrGame[data-mode="arena"] .rv-board.turboed { box-shadow: 0 0 0 .2rem #ffd23f, 0 0 1.6rem #ffd23f; } /* ===================== Menú de pausa con arte propio (v1.29) ===================== */ .mbox.pausebox { --W: min(88vw, 25rem, 62vh); container-type: inline-size; position: relative; width: var(--W); max-height: none; overflow: visible; padding: 0; margin-top: calc(var(--W) * .2); background: none; border: 0; border-radius: 0; box-shadow: none; animation: lvIn .4s cubic-bezier(.2, 1.35, .4, 1) both; } .mbox.pausebox::before { content: ''; position: absolute; inset: 0; pointer-events: none; border: solid transparent; border-width: 15cqw; border-image: url(../assets/sprites/pausa/panel.webp) 110 fill / 15cqw / 0 stretch; filter: drop-shadow(0 2cqw 3cqw rgba(0, 0, 0, .55)) drop-shadow(0 0 4cqw rgba(80, 150, 255, .35)); } .pz-emb { position: absolute; z-index: 3; left: 50%; top: 0; width: 30cqw; transform: translate(-50%, -62%); filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 3cqw rgba(80, 170, 255, .6)); animation: pzEmb 2.4s ease-in-out infinite; } @keyframes pzEmb { 50% { transform: translate(-50%, -66%) scale(1.04); } } .pz-x { position: absolute; z-index: 4; right: -2.5cqw; top: -2.5cqw; width: 13cqw; height: 13cqw; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .12s; } .pz-x img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .8cqw 0 rgba(0, 0, 0, .4)); } .pz-x:hover { transform: scale(1.06) rotate(6deg); } .pz-x:active { transform: scale(.92); } .pz-title { position: relative; z-index: 2; width: 92cqw; margin: 11cqw auto 0; } .pz-title b { font-size: 7.4cqw; } .pz-list { position: relative; z-index: 1; display: grid; gap: 3.2cqw; padding: 3cqw 11cqw 11cqw 13cqw; } .pzb { position: relative; box-sizing: border-box; width: 100%; height: 14.5cqw; margin: 0; padding: 0 0 1.6cqw 9cqw; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border: solid transparent; border-width: 0 8cqw 0 7cqw; border-image: url(../assets/sprites/pausa/boton_azul.webp) 0 125 0 95 fill / 0 9.7cqw 0 7.4cqw / 0 stretch; filter: drop-shadow(0 .6cqw 0 rgba(0, 0, 0, .25)); transition: transform .12s, filter .12s; animation: pzIn .4s both cubic-bezier(.2, 1.4, .4, 1); } .pzb.naranja { border-image-source: url(../assets/sprites/pausa/boton_naranja.webp); } .pzb.morado { border-image-source: url(../assets/sprites/pausa/boton_morado.webp); } .pzb.rojo { border-image-source: url(../assets/sprites/pausa/boton_rojo.webp); } .pzb:nth-child(1) { animation-delay: .08s; } .pzb:nth-child(2) { animation-delay: .14s; } .pzb:nth-child(3) { animation-delay: .2s; } .pzb:nth-child(4) { animation-delay: .26s; } .pzb:nth-child(5) { animation-delay: .32s; } @keyframes pzIn { from { opacity: 0; transform: translateX(-6cqw) scale(.95); } } .pzb img { position: absolute; left: -10.5cqw; top: 50%; width: 15.5cqw; height: 15.5cqw; transform: translateY(-54%); filter: drop-shadow(0 .6cqw 0 rgba(0, 0, 0, .35)); transition: transform .2s; } .pzb span { min-width: 0; white-space: nowrap; overflow: hidden; font: 400 5.6cqw/1.15 var(--display); color: #fff; -webkit-text-stroke: .8cqw #0a1250; paint-order: stroke fill; text-shadow: 0 .5cqw 0 #070c3a; } .pzb.naranja span { -webkit-text-stroke-color: #7a3200; text-shadow: 0 .5cqw 0 #5a2200; font-size: 6.2cqw; } .pzb.morado span { -webkit-text-stroke-color: #3a0f7a; text-shadow: 0 .5cqw 0 #28085a; } .pzb.rojo span { -webkit-text-stroke-color: #6a0820; text-shadow: 0 .5cqw 0 #4a0414; } .pzb:hover { filter: drop-shadow(0 .6cqw 0 rgba(0, 0, 0, .25)) brightness(1.08); } .pzb:hover img { transform: translateY(-54%) rotate(-10deg) scale(1.06); } .pzb:active { transform: scale(.96); } .pzb.naranja { height: 16cqw; } /* textos de la pausa más grandes y legibles (contorno más fino, letras con aire) */ .pzb { height: 15.5cqw; } .pzb.naranja { height: 16.5cqw; } .pzb span { font-size: 6.5cqw; letter-spacing: .045em; -webkit-text-stroke-width: .45cqw; line-height: 1.2; padding-top: .3cqw; text-shadow: 0 .45cqw 0 rgba(4, 8, 40, .85), 0 0 1.2cqw rgba(0, 0, 0, .25); } .pzb.naranja span { font-size: 7.2cqw; text-shadow: 0 .45cqw 0 #5a2200; } .pzb.morado span { text-shadow: 0 .45cqw 0 #28085a; } .pzb.rojo span { text-shadow: 0 .45cqw 0 #4a0414; } .pz-title b { font-size: 8cqw; letter-spacing: .05em; -webkit-text-stroke-width: .8cqw; } .pz-list { gap: 3.4cqw; } /* ===================== Antes del nivel: potenciadores y reliquia (v1.30) ===================== */ .mbox.plbox { padding-bottom: 10cqw; } .plbox > :not(.pz-x):not(.pl-title) { position: relative; z-index: 1; margin-inline: 10cqw; } .pl-title { margin-top: 9cqw; } .pl-sub { text-align: center; margin: -1cqw 10cqw 2cqw; color: #bfe0ff; font: 800 4cqw/1.25 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-sub span { color: #ffe27a; } .pl-h { display: flex; align-items: center; gap: 2cqw; margin: 2.5cqw 10cqw 1.6cqw; color: #ffe27a; font: 400 4.6cqw/1 var(--T); letter-spacing: .04em; text-shadow: 0 .5cqw 0 #3a1a00; } .pl-h::after { content: ''; flex: 1; height: .5cqw; border-radius: 1cqw; background: linear-gradient(90deg, rgba(255, 226, 122, .6), rgba(255, 226, 122, 0)); } .pl-h small { font: 800 3.2cqw var(--body); color: #9fc2ff; letter-spacing: 0; text-shadow: none; } .pl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2cqw; } .pl-b { --bc: #57c8ff; position: relative; min-width: 0; aspect-ratio: .78; padding: 1.5cqw 1cqw 2cqw; cursor: pointer; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; align-items: center; border-radius: 3.6cqw; border: .7cqw solid color-mix(in srgb, var(--bc) 55%, #1a2560); color: #fff; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--bc) 30%, transparent), transparent 65%), linear-gradient(#1b2470, #0d1240); box-shadow: inset 0 .8cqw 0 rgba(255, 255, 255, .12), 0 1cqw 0 #050822; transition: transform .12s, box-shadow .15s; } .pl-b img { width: 92%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 .8cqw .8cqw rgba(0, 0, 0, .5)); transition: transform .2s; } .pl-b b { max-width: 100%; font: 800 2.85cqw/1.1 var(--body); color: #e8f1ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-b em { margin-top: .8cqw; min-width: 60%; padding: .4cqw 1.6cqw; border-radius: 3cqw; font: 400 3.6cqw/1.15 var(--T); font-style: normal; text-align: center; background: rgba(4, 8, 40, .8); border: .5cqw solid var(--bc); } .pl-b em.buy { background: linear-gradient(#b65cff, #6a1fc8); border-color: #e2b4ff; } .pl-b:hover img { transform: scale(1.07) rotate(-4deg); } .pl-b:active { transform: scale(.94); } .pl-b.empty img { filter: grayscale(.4) brightness(.8) drop-shadow(0 .8cqw .8cqw rgba(0, 0, 0, .5)); } .pl-b.on { border-color: var(--bc); transform: translateY(-1cqw); box-shadow: 0 0 0 .5cqw #fff, 0 0 4cqw var(--bc), 0 1.6cqw 0 #050822; animation: plOn 1.6s ease-in-out infinite; } .pl-b.on img { transform: scale(1.06); } .pl-b .ok { position: absolute; top: -2cqw; right: -2cqw; width: 7.5cqw; height: 7.5cqw; border-radius: 50%; display: grid; place-items: center; font: 400 4.4cqw/1 var(--T); font-style: normal; background: linear-gradient(#5dff8f, #13b54a); border: .6cqw solid #fff; box-shadow: 0 .6cqw 0 #075e24; animation: plOk .35s cubic-bezier(.2, 1.6, .4, 1); } @keyframes plOn { 50% { box-shadow: 0 0 0 .5cqw #fff, 0 0 6cqw var(--bc), 0 1.6cqw 0 #050822; } } @keyframes plOk { from { transform: scale(0) rotate(-90deg); } } .pl-relic { --rc: #5a6aa0; display: grid; grid-template-columns: 15cqw minmax(0, 1fr) auto; align-items: center; gap: 2.5cqw; padding: 1.8cqw 3cqw 1.8cqw 2cqw; width: calc(100% - 20cqw); box-sizing: border-box; text-align: left; cursor: pointer; color: #fff; border-radius: 4cqw; border: .7cqw solid color-mix(in srgb, var(--rc) 70%, #1a2560); background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 28%, #121a58), #0d1240 70%); box-shadow: inset 0 .8cqw 0 rgba(255, 255, 255, .1), 0 1cqw 0 #050822; } .pl-relic img { width: 15cqw; height: 15cqw; object-fit: contain; filter: drop-shadow(0 0 2.4cqw var(--rc)); animation: plRel 3s ease-in-out infinite; } .pl-relic img.off { filter: grayscale(1) brightness(.55); animation: none; } .pl-relic div { min-width: 0; display: grid; gap: .6cqw; } .pl-relic b { font: 400 4.4cqw/1.1 var(--T); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .5cqw 0 rgba(0, 0, 0, .5); } .pl-relic small { font: 700 3.1cqw/1.25 var(--body); color: #b9ccf5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pl-relic i { font: 400 5.4cqw/1 var(--T); font-style: normal; color: #ffe27a; } .pl-relic.none { cursor: default; } .pl-relic:not(.none):active { transform: scale(.97); } @keyframes plRel { 50% { transform: translateY(-1cqw) rotate(4deg); } } .pl-mini { padding: 1.6cqw 3cqw; border-radius: 3cqw; cursor: pointer; font: 400 3.8cqw/1 var(--T); color: #fff; border: .5cqw solid #fff3; background: linear-gradient(#ff9f3d, #e25d00); box-shadow: 0 .8cqw 0 #7a2f00; } .pl-go { margin-top: 4cqw !important; width: calc(100% - 20cqw) !important; animation: pzIn .4s .1s both cubic-bezier(.2, 1.4, .4, 1), plGo 1.4s 1s ease-in-out infinite; } .pl-go s { margin-left: 2.5cqw; padding: .4cqw 2cqw; border-radius: 3cqw; text-decoration: none; font: 400 4.2cqw/1.2 var(--T); color: #ffe14d; background: rgba(60, 20, 0, .55); } @keyframes plGo { 50% { transform: scale(1.03); } } /* ===================== Tienda: nuevos elementos (v1.30) ===================== */ .shopv2 .sc-tag, .shopv2 .sc-timer { position: absolute; z-index: 2; left: 7cqw; top: 6cqw; padding: .8cqw 3cqw; border-radius: 9cqw; font: 400 5.6cqw/1.2 var(--T); color: #fff; white-space: nowrap; pointer-events: none; } .shopv2 .sc-tag { background: linear-gradient(#ff5fd2, #a3157f); border: .5cqw solid #ffc2ef; box-shadow: 0 .6cqw 0 #4f0a3d; letter-spacing: .03em; } .shopv2 .sc-timer { background: rgba(6, 12, 50, .88); border: .5cqw solid #ffd23f; color: #ffe98a; font-variant-numeric: tabular-nums; } .shopv2 .sc.feat .sc-timer { top: 11cqw; } .shopv2 .sb.real { --fh: 242; border-image-source: url(../assets/sprites/tienda/boton_comprar.webp); border-image-slice: 152 140 152 140 fill; border-image-width: calc(152 * var(--k)) calc(140 * var(--k)); border-image-outset: calc(36 * var(--k)); -webkit-text-stroke-color: #0d5212; flex-direction: column; gap: 0; line-height: 1; } .shopv2 .sb.real span { font-size: 8.6cqw; } .shopv2 .sb.real em { font: 800 4.3cqw/1.1 var(--body); font-style: normal; color: #eaffd8; -webkit-text-stroke: 0; letter-spacing: .02em; margin-top: .3cqw; } .shopv2 .sb.free { animation: sbFree 1.2s ease-in-out infinite; } @keyframes sbFree { 50% { transform: scale(1.06); filter: brightness(1.15) drop-shadow(0 0 2cqw #8dff6a); } } .shopv2 .sb.eq span { color: #8dffb0; } .shopv2 .sc-piggy { position: relative; width: 92%; height: 7.5cqw; margin: 0 0 2cqw; border-radius: 6cqw; overflow: hidden; background: rgba(4, 8, 40, .85); border: .5cqw solid #ff8fe0; } .shopv2 .sc-piggy i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ff6fd0, #b65cff); box-shadow: 0 0 2cqw #ff6fd0; transition: width .4s; } .shopv2 .sc-piggy b { position: relative; display: block; text-align: center; font: 400 5cqw/7cqw var(--T); color: #fff; -webkit-text-stroke: .15em #3d0a6e; paint-order: stroke fill; } .shopv2 .sc.iap .sc-art::before { background: radial-gradient(circle, rgba(200, 120, 255, .5), rgba(200, 120, 255, 0) 68%); } .shopv2 .sc.iap .sc-art img { width: calc(88% * var(--gs, 1)); } .shopv2 .sc.relic .sc-art::after { content: ''; position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%; border: 1cqw dashed rgba(255, 226, 122, .55); animation: scRelSpin 9s linear infinite; pointer-events: none; } .shopv2 .sc.relic .sc-art img { animation: plRel 3s ease-in-out infinite; } @keyframes scRelSpin { to { transform: rotate(360deg); } } .shopv2 .sc-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 0; font-size: 5.6cqw; line-height: 1.12; } /* ventana "¡Próximamente!" de compras con dinero real */ .soon-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.5cqw; padding: 1cqw 12cqw 11cqw; text-align: center; } .soon-in > img { width: 34cqw; height: 34cqw; object-fit: contain; filter: drop-shadow(0 0 4cqw rgba(200, 120, 255, .6)); animation: plRel 3s ease-in-out infinite; } .soon-in b { font: 400 6.4cqw/1.1 var(--T); color: #fff; text-shadow: 0 .6cqw 0 #12134a; } .soon-in small { font: 400 5cqw/1 var(--T); color: #8dff6a; } .soon-in p { margin: 1cqw 0 3cqw; font: 700 3.9cqw/1.35 var(--body); color: #c9dbff; } .soon-in .pzb { width: 100%; } /* aura de la reliquia equipada en el tablero (sólo Aventura) */ #reactor[data-relic]:not([data-relic=""])::after { content: ''; display: block; position: absolute; z-index: 0; top: -1.15rem; bottom: -1.15rem; left: -1.15rem; right: -1.15rem; width: auto; border-radius: 1.3rem; background: none; pointer-events: none; box-shadow: 0 0 1.3rem .15rem var(--relic), inset 0 0 .9rem var(--relic); border: .12rem solid var(--relic); opacity: .55; animation: relicAura 2.6s ease-in-out infinite; } @keyframes relicAura { 50% { opacity: 1; } } .rc-relic { position: absolute; z-index: 3; right: -1.3rem; bottom: -1.2rem; width: 2.6rem; height: 2.6rem; object-fit: contain; pointer-events: none; filter: drop-shadow(0 .15rem .2rem rgba(0, 0, 0, .6)); animation: plRel 3s ease-in-out infinite; } html[data-layout="mobilePortrait"] .rc-relic { width: 2rem; height: 2rem; right: -.9rem; bottom: -.9rem; } .shopv2 .sc-off.l { right: auto; left: -3cqw; top: 22cqw; width: 26cqw; } .shopv2 .sc.feat .sc-timer { left: 8cqw; } .pl-sub em { font-style: normal; } /* PC/horizontal: columnas según cuántos artículos hay (siempre 2 filas grandes) */ html[data-orient="landscape"] .shopv2 .sh-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)) !important; width: min(100%, calc((100cqh - 2.2rem - (var(--rows) - 1) * .7rem) / var(--rows) * .895 * var(--cols, 4) + 2rem)); } .shopv2 .sc-sub { max-width: 86%; }