/* MEMORY RUSH — estilos (solo vertical, mobile-first) */
@font-face { font-family: 'Russo'; src: url('../assets/fonts/russo.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Raj'; src: url('../assets/fonts/rajdhani600.woff2') format('woff2'); font-weight: 600; font-display: block; }
@font-face { font-family: 'Raj'; src: url('../assets/fonts/rajdhani700.woff2') format('woff2'); font-weight: 700; font-display: block; }

:root {
  --cyan: #38c8ff; --cyan2: #7fe9ff; --blue: #1a6dff; --navy: #050b26; --gold: #ffcb3b; --pink: #ff4fd8; --green: #2bff6a; --red: #ff3b5c;
  --panel: linear-gradient(180deg, rgba(16, 38, 98, .94), rgba(6, 14, 46, .96));
  --wc: #38c8ff; --wc2: #1a6dff; --theme: #38c8ff;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; background: #02040f; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
body { font-family: 'Raj', 'Segoe UI', sans-serif; font-weight: 600; color: #e8f4ff; }
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #0b1648 0%, #02040f 70%); }
#app { position: relative; width: var(--aw, 100vw); height: var(--ah, 100vh); overflow: hidden; font-size: var(--fs, 16px); background: #050b26; }
@media (min-aspect-ratio: 7/10) { #app { border-radius: 1.2em; box-shadow: 0 0 60px rgba(40, 150, 255, .35), 0 0 0 2px rgba(80, 180, 255, .35); } }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

.screen { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; background-size: cover; background-position: center; }
.screen.on { display: flex; animation: scrIn .35s ease-out; }
@keyframes scrIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.bgimg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.bgimg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 6, 24, .25), rgba(2, 6, 24, .1) 40%, rgba(2, 6, 24, .55)); }
.layer { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; min-height: 0; }

.t-russo, h1, h2, h3, .btn, .title { font-family: 'Russo', sans-serif; font-weight: 400; letter-spacing: .02em; }
.glowtxt { text-shadow: 0 0 .4em rgba(56, 200, 255, .9), 0 .08em 0 #031033; }
.gold { color: var(--gold); }
.muted { opacity: .7; }

/* ---------- Botones ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 3em; padding: .2em 1.4em .35em; background: url(../assets/img/bb_blue.webp) center/100% 100% no-repeat; color: #fff; font-size: 1.05em; text-transform: uppercase; text-shadow: 0 .1em 0 rgba(0, 0, 0, .45), 0 0 .5em rgba(255, 255, 255, .35); transition: transform .08s, filter .15s; white-space: nowrap; }
.btn:active { transform: scale(.94); filter: brightness(1.25); }
.btn.green { background-image: url(../assets/img/bb_green.webp); }
.btn.orange { background-image: url(../assets/img/bb_orange.webp); }
.btn.purple { background-image: url(../assets/img/bb_purple.webp); }
.btn.red { background-image: url(../assets/img/bb_red.webp); }
.btn.yellow { background-image: url(../assets/img/bb_yellow.webp); color: #3a1d00; text-shadow: 0 .06em 0 rgba(255, 255, 255, .5); }
.btn.cyan { background-image: url(../assets/img/bb_cyan.webp); }
.btn.navy { background-image: url(../assets/img/bb_navy.webp); }
.btn.magenta { background-image: url(../assets/img/bb_magenta.webp); }
.btn.dark { background-image: url(../assets/img/bb_dark.webp); }
.btn.sm { min-height: 2.4em; font-size: .9em; padding: .1em 1em .3em; }
.btn.wide { width: 100%; }
.btn[disabled] { filter: grayscale(1) brightness(.6); pointer-events: none; }
.btn img.ic { width: 1.25em; height: 1.25em; object-fit: contain; }
.imgbtn { display: block; transition: transform .08s, filter .15s; }
.imgbtn img { display: block; width: 100%; }
.imgbtn:active { transform: scale(.93); filter: brightness(1.2); }
.ibtn { width: 2.9em; height: 2.9em; flex: none; }
.ibtn img { width: 100%; height: 100%; object-fit: contain; }
.ibtn:active { transform: scale(.9); }
.badge-dot { position: absolute; top: -.1em; right: -.1em; width: .9em; height: .9em; border-radius: 50%; background: #ff2d4a; box-shadow: 0 0 .5em #ff2d4a; border: 2px solid #fff; }

/* ---------- Paneles ---------- */
.panel { background: var(--panel); border: 2px solid rgba(90, 190, 255, .75); border-radius: .9em; box-shadow: 0 0 1.2em rgba(40, 150, 255, .45), inset 0 0 1.4em rgba(40, 150, 255, .22); position: relative; }
.panel.pink { border-color: rgba(255, 90, 220, .8); box-shadow: 0 0 1.2em rgba(255, 60, 200, .45), inset 0 0 1.4em rgba(255, 60, 200, .2); }
.panel.gold { border-color: rgba(255, 200, 70, .85); box-shadow: 0 0 1.2em rgba(255, 180, 40, .45), inset 0 0 1.4em rgba(255, 180, 40, .2); }
.panel.red { border-color: rgba(255, 70, 90, .85); box-shadow: 0 0 1.2em rgba(255, 50, 80, .5), inset 0 0 1.4em rgba(255, 50, 80, .2); }
.chip { display: inline-flex; align-items: center; gap: .35em; background: rgba(4, 12, 40, .78); border: 1.5px solid rgba(90, 190, 255, .6); border-radius: 2em; padding: .15em .7em .15em .25em; font-family: 'Russo'; font-size: .95em; box-shadow: inset 0 0 .6em rgba(40, 150, 255, .25); }
.chip img { width: 1.6em; height: 1.6em; object-fit: contain; }
.chip .plus { width: 1.25em; height: 1.25em; border-radius: 50%; background: radial-gradient(#4bd2ff, #1a6dff); display: inline-grid; place-items: center; font-size: .85em; margin-left: .2em; box-shadow: 0 0 .4em #38c8ff; }

/* ---------- Topbar ---------- */
.topbar { display: flex; align-items: center; gap: .5em; padding: calc(.6em + var(--safe-t)) .7em .4em; position: relative; z-index: 2; }
.topbar .sp { flex: 1; }
.avatar { position: relative; width: 3.3em; height: 3.3em; flex: none; }
.avatar .face { position: absolute; inset: 12%; border-radius: .5em; background: radial-gradient(circle at 50% 35%, #1d4fb8, #071338); overflow: hidden; display: grid; place-items: center; }
.avatar .face img { width: 115%; margin-top: 18%; }
.avatar .frame { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: contain; }
.pname { line-height: 1; }
.pname b { font-family: 'Russo'; font-size: 1em; display: block; }
.pname small { font-size: .8em; color: var(--gold); display: flex; align-items: center; gap: .25em; }
.pname small img { width: 1.1em; }
.hdr { display: flex; align-items: center; gap: .6em; padding: calc(.6em + var(--safe-t)) .8em .5em; position: relative; z-index: 2; }
.hdr h2 { margin: 0; flex: 1; font-size: 1.45em; text-align: center; text-shadow: 0 0 .5em rgba(56, 200, 255, .8); }

/* ---------- Boot ---------- */
#scr-boot { background: #050b26 url(../assets/img/bg_home.webp) center/cover; justify-content: flex-end; align-items: center; padding-bottom: calc(2.2em + var(--safe-b)); }
.boot-box { width: 86%; display: flex; flex-direction: column; align-items: center; gap: .7em; }
.loadbar { width: 100%; height: 1.5em; border-radius: 1em; background: rgba(2, 8, 30, .9); border: 2px solid rgba(90, 190, 255, .8); box-shadow: 0 0 1em rgba(40, 150, 255, .6); overflow: hidden; padding: .2em; }
.loadbar i { display: block; height: 100%; width: 0; border-radius: 1em; background: linear-gradient(90deg, #38e8ff, #4f7bff, #ff4fe6); box-shadow: 0 0 .8em #38c8ff; transition: width .2s; }
.boot-pct { font-family: 'Russo'; font-size: 1.4em; }
.tip { display: flex; gap: .6em; align-items: center; padding: .7em .9em; font-size: .95em; line-height: 1.2; }
.tip b { color: var(--gold); font-family: 'Russo'; }
.tapstart { font-family: 'Russo'; font-size: 1.3em; animation: pulse 1.1s infinite; text-shadow: 0 0 .6em #38c8ff; padding: .6em 1.6em; }
@keyframes pulse { 50% { opacity: .45; transform: scale(.96); } }

/* ---------- Home ---------- */
#scr-home .bgimg { background-image: url(../assets/img/bg_home.webp); background-position: center top; }
#scr-home .bgimg::after { background: none; }
.home-mid { flex: 1; position: relative; }
.home-bottom { padding: 0 1em calc(.8em + var(--safe-b)); display: flex; flex-direction: column; gap: .55em; position: relative; }
.energy { padding: .55em .8em .6em; display: flex; flex-direction: column; gap: .3em; }
.energy .row { display: flex; align-items: center; justify-content: space-between; font-size: .85em; }
.energy .row b { font-family: 'Russo'; color: var(--cyan2); }
.ebar { position: relative; height: .95em; border-radius: 1em; background: rgba(0, 0, 0, .55); border: 1px solid rgba(90, 190, 255, .5); }
.ebar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1em; background: linear-gradient(90deg, #1a6dff, #38e8ff); box-shadow: 0 0 .7em #38c8ff; transition: width .8s cubic-bezier(.2, .9, .3, 1); }
.ebar > s { position: absolute; top: -.25em; width: 1.4em; height: 1.4em; margin-left: -.7em; border-radius: 50%; background: #0a1a4a; border: 2px solid rgba(120, 200, 255, .6); display: grid; place-items: center; font-size: .65em; text-decoration: none; }
.ebar > s.on { background: radial-gradient(#ffe27a, #ff9a1a); border-color: #fff3b0; box-shadow: 0 0 .6em #ffc63b; }
.playbtn { width: 100%; position: relative; }
.playbtn small { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font-family: 'Russo'; font-size: .78em; color: #e8ffe8; text-shadow: 0 1px 0 #064a1a; }
.playbtn img { filter: drop-shadow(0 0 .8em rgba(43, 255, 106, .5)); }
.home-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4em; }
.navbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3em; padding: .35em; }
.navbar button { display: flex; flex-direction: column; align-items: center; font-size: .72em; gap: .1em; position: relative; padding: .2em 0; border-radius: .6em; }
.navbar button img { width: 2.6em; height: 2.6em; object-fit: contain; }
.navbar button:active { background: rgba(80, 180, 255, .2); }
.float { animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-.5em); } }

/* ---------- Mapa ---------- */
#scr-map .layer { overflow: hidden; }
.wtabs { display: flex; gap: .35em; overflow-x: auto; padding: .2em .8em .5em; scrollbar-width: none; flex: none; }
.wtabs::-webkit-scrollbar { display: none; }
.wtab { flex: none; padding: .35em .7em; border-radius: .7em; font-family: 'Russo'; font-size: .78em; background: rgba(4, 12, 40, .75); border: 1.5px solid rgba(90, 190, 255, .4); white-space: nowrap; }
.wtab.on { background: linear-gradient(180deg, var(--wc), var(--wc2)); border-color: #fff; box-shadow: 0 0 .8em var(--wc); color: #fff; }
.wtab.lock { opacity: .45; }
.whead { margin: 0 .8em .4em; padding: .6em .8em; display: flex; align-items: center; gap: .7em; }
.whead .wn { font-family: 'Russo'; font-size: 1.15em; line-height: 1.05; }
.whead .ws { font-size: .85em; opacity: .85; }
.whead .wst { margin-left: auto; text-align: right; font-family: 'Russo'; font-size: .9em; }
.mapscroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: .5em 0 4em; position: relative; scrollbar-width: none; }
.mapscroll::-webkit-scrollbar { display: none; }
.mappath { position: relative; margin: 0 auto; width: 100%; }
.mappath svg { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.lvl { position: absolute; width: 4.4em; height: 4.4em; margin-left: -2.2em; margin-top: -2.2em; display: grid; place-items: center; }
.lvl .disc { width: 3.7em; height: 3.7em; border-radius: 50%; display: grid; place-items: center; font-family: 'Russo'; font-size: 1.2em; color: #fff; background: radial-gradient(circle at 50% 30%, var(--wc), var(--wc2) 70%, #061038); border: .18em solid rgba(255, 255, 255, .85); box-shadow: 0 0 1em var(--wc), inset 0 -.3em .5em rgba(0, 0, 0, .35); text-shadow: 0 .08em 0 rgba(0, 0, 0, .5); transition: transform .1s; }
.lvl:active .disc { transform: scale(.9); }
.lvl.mini .disc { background: radial-gradient(circle at 50% 30%, #ffe27a, #ff9a1a 70%, #5a2a00); box-shadow: 0 0 1.1em #ffb03b; }
.lvl.locked .disc { background: radial-gradient(circle at 50% 30%, #3a4a6a, #121a32); border-color: rgba(150, 170, 210, .4); box-shadow: none; color: rgba(255, 255, 255, .45); }
.lvl.cur .disc { animation: curpulse 1.2s infinite; }
@keyframes curpulse { 50% { box-shadow: 0 0 2em #fff, 0 0 1em var(--wc); transform: scale(1.08); } }
.lvl .stars { position: absolute; bottom: -.55em; display: flex; gap: 0; }
.lvl .stars i { width: 1.05em; height: 1.05em; background: url(../assets/img/star_off.svg) center/contain no-repeat; }
.lvl .stars i.on { background-image: url(../assets/img/star_on.svg); }
.lvl.boss { width: 6.2em; height: 6.6em; margin-left: -3.1em; margin-top: -3.3em; }
.lvl.boss img.bb { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 .8em #ff2d4a); }
.lvl.boss.locked img.bb { filter: grayscale(1) brightness(.5); }
.lvl.boss .num { position: absolute; top: 40%; font-family: 'Russo'; font-size: .9em; display: none; }
.lvl.boss .stars { bottom: -.2em; }
.lvl .nexo-here { position: absolute; width: 3.6em; top: -3.4em; left: 50%; margin-left: -1.8em; animation: float 2.4s ease-in-out infinite; filter: drop-shadow(0 0 .5em #38c8ff); }
.lvl .lk { position: absolute; font-size: 1.1em; }

/* ---------- Juego ---------- */
#scr-game .bgimg::after { background: linear-gradient(180deg, rgba(2, 6, 24, .55), rgba(2, 6, 24, .2) 35%, rgba(2, 6, 24, .6)); }
.g-top { display: flex; align-items: center; gap: .5em; padding: calc(.5em + var(--safe-t)) .7em .3em; }
.g-title { flex: 1; text-align: center; line-height: 1.05; }
.g-title small { display: block; font-size: .78em; color: var(--wc); text-transform: uppercase; letter-spacing: .06em; }
.g-title b { font-family: 'Russo'; font-size: 1.1em; }
.g-score { min-width: 5.4em; text-align: right; font-family: 'Russo'; font-size: 1.15em; color: var(--gold); text-shadow: 0 0 .5em rgba(255, 200, 60, .7); line-height: 1; }
.g-score small { display: block; font-family: 'Raj'; font-size: .6em; color: #ffe7a8; }
.g-hud { display: flex; align-items: center; gap: .5em; padding: .15em .8em .3em; min-height: 2.3em; }
.lives { display: flex; gap: .15em; }
.lives i { width: 1.45em; height: 1.3em; background: url(../assets/img/heart.svg) center/contain no-repeat; filter: drop-shadow(0 0 .3em #ff3b8a); transition: transform .3s, opacity .3s; }
.lives i.off { opacity: .22; filter: grayscale(1); transform: scale(.8); }
.lives i.lost { animation: heartlost .6s; }
@keyframes heartlost { 30% { transform: scale(1.6); } 100% { transform: scale(.8); } }
.rounds { flex: 1; display: flex; gap: .3em; justify-content: center; }
.rounds i { flex: 1; max-width: 2.6em; height: .55em; border-radius: 1em; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); }
.rounds i.done { background: linear-gradient(90deg, var(--wc), #fff); box-shadow: 0 0 .5em var(--wc); }
.rounds i.cur { background: rgba(255, 255, 255, .35); animation: pulse 1s infinite; }
.combo { min-width: 3.8em; text-align: right; font-family: 'Russo'; color: #ffa53b; text-shadow: 0 0 .5em #ff6a00; font-size: 1em; opacity: 0; transition: opacity .2s; }
.combo.on { opacity: 1; }
.combo.bump { animation: bump .25s; }
@keyframes bump { 50% { transform: scale(1.35); } }
.ltimer { font-family: 'Russo'; color: #7fe9ff; display: none; align-items: center; gap: .25em; }
.ltimer.on { display: flex; }
.ltimer.warn { color: #ff5a6a; animation: pulse .5s infinite; }

.boss-area { display: none; align-items: center; gap: .6em; margin: .1em .8em .2em; padding: .35em .7em; }
.boss-area.on { display: flex; }
.boss-orb { width: 3.4em; height: 3.4em; position: relative; flex: none; }
.boss-orb img { width: 100%; height: 100%; object-fit: contain; animation: spin 6s linear infinite; }
.boss-orb .eyes { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .35em; }
.boss-orb .eyes i { width: .5em; height: .3em; background: #fff; border-radius: 0 0 .3em .3em; box-shadow: 0 0 .4em #fff; transform: rotate(var(--r)); }
.boss-orb.hit { animation: hit .4s; }
@keyframes hit { 20% { transform: translateX(-.3em) scale(1.15); filter: brightness(3); } 60% { transform: translateX(.3em); } }
@keyframes spin { to { transform: rotate(360deg); } }
.boss-info { flex: 1; }
.boss-info b { font-family: 'Russo'; font-size: .9em; color: #ff8a9a; text-shadow: 0 0 .5em #ff2d4a; display: block; }
.hpbar { height: .8em; border-radius: 1em; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 90, 110, .6); overflow: hidden; margin-top: .2em; }
.hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #ff2d4a, #ff9a3b); box-shadow: 0 0 .6em #ff2d4a; transition: width .5s; }
.boss-phase { font-size: .75em; color: #ffd0d6; }

.board-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.board-zone { position: relative; width: var(--bs); height: var(--bs); }
.platform { position: absolute; left: -12%; right: -12%; bottom: -24%; width: 124%; opacity: .9; pointer-events: none; filter: drop-shadow(0 0 1.5em var(--theme)); }
.board { position: absolute; inset: 0; border-radius: 1.4em; background:
  radial-gradient(circle at 50% 50%, rgba(40, 120, 255, .18), transparent 70%),
  linear-gradient(160deg, #18264a, #0a1230 45%, #070c22); border: .22em solid #2a3d6e;
  box-shadow: 0 0 0 .14em #0c1530, 0 0 1.6em color-mix(in srgb, var(--theme) 70%, transparent), inset 0 0 1.5em rgba(0, 0, 0, .7), inset 0 0 .3em var(--theme); transition: box-shadow .3s; }
.board::before { content: ''; position: absolute; inset: .5em; border-radius: 1em; border: 1px solid color-mix(in srgb, var(--theme) 40%, transparent); pointer-events: none; }
.board .corner { position: absolute; width: 1.3em; height: 1.3em; border: .22em solid var(--theme); filter: drop-shadow(0 0 .3em var(--theme)); }
.board .corner.tl { top: -.35em; left: -.35em; border-right: 0; border-bottom: 0; border-radius: .6em 0 0 0; }
.board .corner.tr { top: -.35em; right: -.35em; border-left: 0; border-bottom: 0; border-radius: 0 .6em 0 0; }
.board .corner.bl { bottom: -.35em; left: -.35em; border-right: 0; border-top: 0; border-radius: 0 0 0 .6em; }
.board .corner.br { bottom: -.35em; right: -.35em; border-left: 0; border-top: 0; border-radius: 0 0 .6em 0; }
.board.input { box-shadow: 0 0 0 .14em #0c1530, 0 0 2.4em var(--theme), inset 0 0 1.5em rgba(0, 0, 0, .7), inset 0 0 .6em var(--theme); }
.board.shake { animation: shake .45s; }
@keyframes shake { 15% { transform: translate(-.5em, .1em) rotate(-1deg); } 35% { transform: translate(.5em, -.1em) rotate(1deg); } 55% { transform: translate(-.3em, 0); } 75% { transform: translate(.3em, 0); } }
.board.redflash { box-shadow: 0 0 0 .14em #300, 0 0 3em #ff2d4a, inset 0 0 2em #ff2d4a; }
.board.goodflash { box-shadow: 0 0 0 .14em #031, 0 0 3em #2bff6a, inset 0 0 2em #2bff6a; }
.rot { position: absolute; inset: 4%; transition: transform .9s cubic-bezier(.6, -0.15, .3, 1.25); transform-style: preserve-3d; }
.tile { position: absolute; width: var(--ts); height: var(--ts); margin: 0; transition: left .5s cubic-bezier(.5, -0.3, .4, 1.35), top .5s cubic-bezier(.5, -0.3, .4, 1.35), opacity .35s, transform .15s; touch-action: none; cursor: pointer; }
.tile .im { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: contain; transition: filter .25s, transform .12s, opacity .25s; filter: brightness(.62) saturate(.9) var(--tf, ); }
.tile .im.lit { opacity: 0; filter: var(--tf, ) drop-shadow(0 0 .7em var(--g)) brightness(1.25); }
.tile.on .im.lit { opacity: 1; transform: scale(1.12); }
.tile.on .im.base { opacity: 0; }
.tile.press .im { transform: scale(.9); }
.tile.dormant { pointer-events: none; }
.tile.dormant .im.base { filter: brightness(.25) saturate(0); opacity: .55; }
.tile.dark .im.base { filter: brightness(.14) saturate(.3) var(--tf, ); }
.tile.invis .im.base { opacity: .04; }
.tile.wiggle { animation: wiggle .5s; }
@keyframes wiggle { 25% { transform: translate(.25em, -.2em) rotate(6deg); } 50% { transform: translate(-.25em, .15em) rotate(-6deg); } 75% { transform: translate(.15em, .2em) rotate(3deg); } }
.tile.phantom .im.base { animation: phantom .5s steps(2) 1; }
@keyframes phantom { 0% { filter: brightness(2.4) saturate(0) sepia(1) hue-rotate(-50deg) saturate(6) contrast(1.4); transform: translateX(-.15em) skewX(8deg); } 50% { filter: brightness(.3); transform: translateX(.15em) skewX(-8deg); } 100% { filter: brightness(2.2) saturate(0) sepia(1) hue-rotate(-50deg) saturate(6); transform: none; } }
.tile.hint::after { content: ''; position: absolute; inset: -6%; border-radius: 22%; border: .2em solid #fff; animation: hintring 1s infinite; }
@keyframes hintring { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.25); } }
.tile.start::after { content: ''; position: absolute; inset: -4%; border-radius: 22%; border: .22em dashed #7fe9ff; animation: spin 6s linear infinite; }
.tile.good::before, .tile.bad::before { content: ''; position: absolute; inset: 6%; border-radius: 18%; z-index: 2; }
.tile.good::before { box-shadow: 0 0 0 .25em #2bff6a, 0 0 1.4em #2bff6a; }
.tile.bad::before { box-shadow: 0 0 0 .25em #ff2d4a, 0 0 1.4em #ff2d4a; background: rgba(255, 40, 70, .25); }
.tile.dual-a .im.lit { filter: drop-shadow(0 0 .7em #38e8ff) drop-shadow(0 0 .2em #38e8ff) brightness(1.25) var(--tf, ); }
.tile.dual-b .im.lit { filter: drop-shadow(0 0 .7em #ff4fe6) drop-shadow(0 0 .2em #ff4fe6) brightness(1.25) var(--tf, ); }
.tile .lbl { position: absolute; z-index: 3; top: -.4em; right: -.2em; font-family: 'Russo'; font-size: .9em; padding: .05em .35em; border-radius: .4em; display: none; }
.mline { position: absolute; z-index: 4; pointer-events: none; display: none; background: repeating-linear-gradient(var(--dir, 180deg), #fff 0 .5em, transparent .5em 1em); box-shadow: 0 0 .6em #c08bff; opacity: .85; }
.mline.on { display: block; animation: pulse 1.4s infinite; }
.bflash { position: absolute; inset: 0; border-radius: 1.4em; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
.bflash.go { animation: bflash .22s; }
@keyframes bflash { 30% { opacity: .9; } 100% { opacity: 0; } }
.tbar { position: absolute; left: 6%; right: 6%; top: -1.1em; height: .5em; border-radius: 1em; background: rgba(0, 0, 0, .5); overflow: hidden; display: none; }
.tbar.on { display: block; }
.tbar i { display: block; height: 100%; background: linear-gradient(90deg, #2bff6a, #ffd23b, #ff2d4a); background-size: 300% 100%; transform-origin: left; }
.spark { position: absolute; z-index: 6; width: 3.4em; height: 3.4em; margin: -1.7em 0 0 -1.7em; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #fff3b0 22%, #ffc63b 42%, rgba(255, 140, 20, .55) 58%, transparent 72%); box-shadow: 0 0 1.6em #ffb03b, 0 0 .4em #fff inset; animation: sparkin .3s ease-out, sparkpulse .6s .3s infinite; cursor: pointer; }
@keyframes sparkin { from { transform: scale(0); } }
@keyframes sparkpulse { 50% { transform: scale(1.15); } }
.delay-ring { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 5; pointer-events: none; }
.delay-ring.on { display: flex; }
.delay-ring div { width: 42%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(10, 20, 60, .85), rgba(10, 20, 60, .5)); border: .25em solid #ff9a3b; box-shadow: 0 0 2em #ff9a3b; font-family: 'Russo'; font-size: 2.3em; text-align: center; line-height: .9; }
.delay-ring div small { display: block; font-size: .3em; letter-spacing: .1em; }

.seqbar { display: flex; justify-content: center; gap: .35em; min-height: 1.4em; padding: .2em; flex-wrap: wrap; }
.seqbar i { width: .85em; height: .85em; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); transition: all .15s; }
.seqbar i.on { background: var(--wc); box-shadow: 0 0 .6em var(--wc); border-color: #fff; transform: scale(1.2); }
.seqbar i.ok { background: #2bff6a; box-shadow: 0 0 .5em #2bff6a; }
.seqbar i.a { border-color: #38e8ff; } .seqbar i.b { border-color: #ff4fe6; }
.question { display: none; justify-content: center; align-items: center; gap: .3em; padding: .4em .6em; margin: 0 .8em; flex-wrap: wrap; }
.question.on { display: flex; }
.question .q { width: 2.6em; height: 2.6em; position: relative; }
.question .q img { width: 100%; height: 100%; object-fit: contain; }
.question .q.mark { display: grid; place-items: center; font-family: 'Russo'; font-size: 1.1em; border: .15em dashed #ffd23b; border-radius: .5em; color: #ffd23b; animation: pulse 1s infinite; width: 2.3em; height: 2.3em; }
.question .arrow { opacity: .6; font-size: .8em; }
.g-bottom { display: flex; align-items: flex-end; gap: .4em; padding: 0 .8em calc(.6em + var(--safe-b)); min-height: 5.4em; }
.g-nexo { width: 4.8em; flex: none; filter: drop-shadow(0 0 .6em rgba(56, 200, 255, .6)); }
.g-nexo img { width: 100%; }
.g-say { flex: 1; padding: .55em .8em; font-size: 1em; line-height: 1.15; margin-bottom: .6em; min-height: 2.6em; display: flex; align-items: center; }
.g-say b { font-family: 'Russo'; color: var(--cyan2); }
.g-say.watch b { color: #ffd23b; } .g-say.go b { color: #2bff6a; }
.g-banner { position: absolute; left: 0; right: 0; top: 42%; z-index: 20; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.g-banner .t { font-family: 'Russo'; font-size: 2.6em; color: #fff; text-shadow: 0 0 .3em var(--wc), 0 0 .8em var(--wc), 0 .08em 0 #021; animation: bannerin .9s cubic-bezier(.2, 1.4, .3, 1) both; text-align: center; padding: 0 .4em; line-height: 1; }
.g-banner .s { font-family: 'Russo'; font-size: 1em; color: var(--gold); margin-top: .3em; animation: bannerin .9s .08s cubic-bezier(.2, 1.4, .3, 1) both; text-align: center; }
.g-banner.out .t, .g-banner.out .s { animation: bannerout .3s forwards; }
@keyframes bannerin { 0% { transform: scale(2.4); opacity: 0; letter-spacing: .4em; } 100% { transform: none; opacity: 1; } }
@keyframes bannerout { to { transform: scale(.6); opacity: 0; } }
.g-banner img.bimg { width: 70%; animation: bannerin .8s cubic-bezier(.2, 1.4, .3, 1) both; filter: drop-shadow(0 0 1em rgba(255, 60, 200, .7)); }

/* ---------- Modales ---------- */
#modal-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.mback { position: absolute; inset: 0; background: rgba(1, 4, 18, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; pointer-events: auto; animation: fadein .2s; padding: 1em; }
@keyframes fadein { from { opacity: 0; } }
.modal { width: 100%; max-height: 92%; overflow-y: auto; padding: 1.2em 1em 1em; display: flex; flex-direction: column; align-items: center; gap: .7em; animation: popin .35s cubic-bezier(.2, 1.5, .4, 1); scrollbar-width: none; }
.modal::-webkit-scrollbar { display: none; }
@keyframes popin { from { transform: scale(.7); opacity: 0; } }
.modal h2 { margin: 0; font-size: 1.5em; text-align: center; text-shadow: 0 0 .5em rgba(56, 200, 255, .9); }
.modal h2.gold { color: #ffd23b; text-shadow: 0 0 .5em rgba(255, 180, 40, .9); }
.modal p { margin: 0; text-align: center; line-height: 1.25; font-size: 1.02em; }
.modal .x { position: absolute; top: .5em; right: .5em; width: 2.4em; height: 2.4em; }
.modal .row { display: flex; gap: .5em; width: 100%; }
.modal .row > * { flex: 1; }
.mstars { display: flex; align-items: flex-end; gap: .2em; margin: .2em 0; }
.mstars i { width: 4.2em; height: 4.2em; background: url(../assets/img/star_off.svg) center/contain no-repeat; }
.mstars i:nth-child(2) { width: 5.2em; height: 5.2em; margin-bottom: .6em; }
.mstars i.on { background-image: url(../assets/img/star_on.svg); animation: starin .5s cubic-bezier(.2, 1.6, .4, 1) both; filter: drop-shadow(0 0 .6em #ffc63b); }
@keyframes starin { from { transform: scale(2.5) rotate(-60deg); opacity: 0; } }
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; width: 100%; }
.stat { background: rgba(4, 14, 44, .75); border: 1px solid rgba(90, 190, 255, .35); border-radius: .6em; padding: .4em .6em; }
.stat small { display: block; font-size: .78em; opacity: .75; }
.stat b { font-family: 'Russo'; font-size: 1.15em; }
.rewards { display: flex; gap: .6em; justify-content: center; flex-wrap: wrap; }
.rw { display: flex; flex-direction: column; align-items: center; background: rgba(4, 14, 44, .75); border: 1px solid rgba(255, 200, 70, .45); border-radius: .7em; padding: .4em .7em; min-width: 4.5em; font-family: 'Russo'; animation: popin .4s both; }
.rw img { width: 2.4em; height: 2.4em; object-fit: contain; }
.lvl-intro .meta { display: flex; gap: .4em; flex-wrap: wrap; justify-content: center; }
.tag { font-family: 'Russo'; font-size: .78em; padding: .2em .6em; border-radius: 1em; background: rgba(56, 200, 255, .18); border: 1px solid rgba(56, 200, 255, .6); }
.tag.red { background: rgba(255, 45, 74, .2); border-color: #ff5a6a; color: #ffb0ba; }
.tag.gold { background: rgba(255, 190, 50, .2); border-color: #ffc63b; color: #ffe2a0; }
.diff { width: 100%; }
.diff .ebar > i { background: linear-gradient(90deg, #2bff6a, #ffd23b, #ff2d4a); }
.objs { width: 100%; display: flex; flex-direction: column; gap: .25em; font-size: .92em; }
.objs div { display: flex; align-items: center; gap: .4em; }
.objs img { width: 1.2em; }
.chest-big { width: 62%; animation: chestshake .5s infinite; filter: drop-shadow(0 0 1.5em #ffc63b); }
.chest-big.open { animation: chestopen .6s forwards; }
@keyframes chestshake { 25% { transform: rotate(-4deg) scale(1.02); } 75% { transform: rotate(4deg) scale(1.02); } }
@keyframes chestopen { 40% { transform: scale(1.3); filter: brightness(3) drop-shadow(0 0 3em #fff); } 100% { transform: scale(.9); opacity: .25; } }
.rays { position: absolute; width: 140%; aspect-ratio: 1; left: -20%; top: -10%; background: repeating-conic-gradient(rgba(255, 210, 80, .22) 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: spin 10s linear infinite; pointer-events: none; mask: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); }
.toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .4em .2em; border-bottom: 1px solid rgba(90, 190, 255, .18); font-size: 1.05em; }
.toggle img { width: 4.2em; }
.nameinput { width: 100%; font: inherit; font-family: 'Russo'; font-size: 1.1em; padding: .5em .8em; border-radius: .6em; border: 2px solid rgba(90, 190, 255, .7); background: rgba(2, 8, 30, .9); color: #fff; outline: none; text-align: center; user-select: text; -webkit-user-select: text; }

/* ---------- NEXO diálogo ---------- */
#nexo-layer { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.nexo-dlg { position: absolute; left: 0; right: 0; bottom: 0; top: 0; pointer-events: auto; display: flex; align-items: flex-end; padding: 0 .7em calc(1em + var(--safe-b)); background: linear-gradient(180deg, transparent 35%, rgba(1, 4, 18, .75)); animation: fadein .25s; }
.nexo-dlg .nx { width: 9em; flex: none; animation: nexoin .45s cubic-bezier(.2, 1.4, .4, 1) both, float 3s 0.5s ease-in-out infinite; filter: drop-shadow(0 0 1em rgba(56, 200, 255, .7)); margin-right: -1em; z-index: 2; }
.nexo-dlg .nx img { width: 100%; }
@keyframes nexoin { from { transform: translateX(-100%) rotate(-20deg); opacity: 0; } }
.nexo-dlg .bub { flex: 1; margin-bottom: 4.5em; padding: .9em 1em 1.6em; font-size: 1.12em; line-height: 1.25; min-height: 5em; animation: popin .3s .1s both; }
.nexo-dlg .bub .who { font-family: 'Russo'; color: var(--cyan2); font-size: .82em; letter-spacing: .1em; display: block; margin-bottom: .2em; }
.nexo-dlg .bub .nxt { position: absolute; right: .8em; bottom: .4em; font-family: 'Russo'; font-size: .75em; color: var(--gold); animation: pulse 1s infinite; }
.handptr { position: absolute; width: 4.2em; z-index: 25; pointer-events: none; animation: handtap 1s infinite; filter: drop-shadow(0 0 .6em #38c8ff); }
@keyframes handtap { 0%, 100% { transform: translate(.3em, .6em) scale(1); } 50% { transform: translate(0, 0) scale(.9); } }

/* ---------- Toast ---------- */
#toast-layer { position: absolute; left: 0; right: 0; top: calc(4.5em + var(--safe-t)); z-index: 45; display: flex; flex-direction: column; align-items: center; gap: .4em; pointer-events: none; }
.toast { padding: .5em 1em; font-family: 'Russo'; font-size: .95em; display: flex; align-items: center; gap: .5em; animation: toastin .35s cubic-bezier(.2, 1.4, .4, 1), toastout .35s 2.3s forwards; max-width: 90%; }
.toast img { width: 1.8em; }
@keyframes toastin { from { transform: translateY(-1.5em); opacity: 0; } }
@keyframes toastout { to { transform: translateY(-1em); opacity: 0; } }

/* ---------- Arena / modos ---------- */
.list { flex: 1; overflow-y: auto; padding: .3em .8em calc(1.5em + var(--safe-b)); display: flex; flex-direction: column; gap: .7em; scrollbar-width: none; }
.list::-webkit-scrollbar { display: none; }
.mode { display: flex; align-items: center; gap: .8em; padding: .8em; }
.mode .mi { width: 4.6em; height: 4.6em; flex: none; display: grid; place-items: center; }
.mode .mi img { max-width: 100%; max-height: 100%; }
.mode .md { flex: 1; min-width: 0; }
.mode .md b { font-family: 'Russo'; font-size: 1.15em; display: block; }
.mode .md p { margin: .15em 0 .3em; font-size: .88em; opacity: .85; line-height: 1.15; }
.mode .md small { color: var(--gold); font-family: 'Russo'; font-size: .8em; }
.mode.lock { filter: grayscale(.8) brightness(.7); }

/* ---------- Tienda ---------- */
.tabs { display: flex; gap: .3em; padding: 0 .8em .5em; overflow-x: auto; scrollbar-width: none; flex: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; padding: .45em .9em; border-radius: .6em; font-family: 'Russo'; font-size: .82em; background: rgba(4, 12, 40, .8); border: 1.5px solid rgba(90, 190, 255, .4); }
.tabs button.on { background: linear-gradient(180deg, #38c8ff, #1a6dff); border-color: #fff; box-shadow: 0 0 .8em #38c8ff; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.item { display: flex; flex-direction: column; align-items: center; gap: .35em; padding: .6em .5em .6em; text-align: center; }
.item .pv { width: 100%; aspect-ratio: 1.05; display: grid; place-items: center; border-radius: .6em; background: radial-gradient(circle, rgba(56, 200, 255, .2), transparent 70%); position: relative; overflow: hidden; }
.item .pv img { max-width: 88%; max-height: 92%; object-fit: contain; }
.item b { font-family: 'Russo'; font-size: .92em; line-height: 1.05; }
.item .lockmsg { font-size: .76em; opacity: .8; min-height: 2em; }
.item.eq { border-color: #2bff6a; box-shadow: 0 0 1.2em rgba(43, 255, 106, .5), inset 0 0 1.2em rgba(43, 255, 106, .2); }
.swatch { width: 70%; aspect-ratio: 1; border-radius: 1em; border: .3em solid; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8%; padding: 10%; background: #0a1230; }
.swatch i { border-radius: 20%; background: rgba(255, 255, 255, .1); }
.vfxpv { width: 80%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 2.6em; }

/* ---------- Perfil ---------- */
.prof { padding: 1em; display: flex; flex-direction: column; align-items: center; gap: .4em; }
.prof .avatar { width: 6.5em; height: 6.5em; }
.prof h3 { margin: 0; font-size: 1.4em; display: flex; align-items: center; gap: .4em; }
.prof .rankimg { width: 5em; }
.ach { display: flex; align-items: center; gap: .7em; padding: .6em .7em; }
.ach .ai { width: 3em; height: 3em; flex: none; display: grid; place-items: center; }
.ach .ai img { max-width: 100%; max-height: 100%; }
.ach .ad { flex: 1; min-width: 0; }
.ach .ad b { font-family: 'Russo'; font-size: .95em; display: block; }
.ach .ad small { opacity: .8; font-size: .85em; }
.ach.done { border-color: #2bff6a; }
.ach.claimed { opacity: .55; }

/* ---------- Rotación ---------- */
#rotate-hint { display: none; position: fixed; inset: 0; z-index: 100; background: #050b26; color: #fff; align-items: center; justify-content: center; text-align: center; font-family: 'Raj'; font-size: 20px; }
#rotate-hint img { width: 140px; animation: float 2s infinite; }
#rotate-hint b { font-family: 'Russo'; color: #38c8ff; }
@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse) { #rotate-hint { display: flex; } }
.rot::before { content: ''; position: absolute; left: 50%; top: -3.2%; width: 9%; height: 2.2%; margin-left: -4.5%; border-radius: 0 0 .5em .5em; background: var(--theme); box-shadow: 0 0 .8em var(--theme); opacity: .9; }
.tile .lbl.note { display: block; top: auto; bottom: -.1em; left: 50%; right: auto; transform: translateX(-50%); font-size: calc(var(--bs, 20em) / 22); background: rgba(3, 8, 30, .85); border: 1px solid rgba(255, 255, 255, .45); color: #fff; padding: .05em .45em .1em; border-radius: .5em; letter-spacing: .04em; pointer-events: none; text-shadow: 0 0 .3em var(--g); white-space: nowrap; }
.tile.invis .lbl.note, .tile.dark .lbl.note { opacity: .15; }
.songstars { color: #ffd23b; }

/* ---------- Poderes ---------- */
.powers { display: flex; justify-content: center; gap: .3em; padding: .15em .5em .25em; flex-wrap: nowrap; }
.pw { position: relative; width: 3.05em; height: 3.05em; flex: none; animation: pwin .55s cubic-bezier(.2, 1.6, .4, 1) both; transition: transform .1s, filter .2s; }
.pw img { width: 100%; height: 100%; filter: drop-shadow(0 0 .35em var(--c)); }
.pw .cnt { position: absolute; right: -.25em; bottom: -.2em; min-width: 1.3em; height: 1.3em; padding: 0 .3em; border-radius: 1em; background: #071338; border: 1.5px solid var(--c); font-family: 'Russo'; font-style: normal; font-size: .62em; display: grid; place-items: center; color: #fff; box-shadow: 0 0 .4em var(--c); }
.pw.free .cnt { background: #ffc63b; color: #3a1d00; font-size: .5em; }
.pw.off { filter: grayscale(.85) brightness(.55); }
.pw.empty { opacity: .45; }
.pw:not(.off) { animation: pwin .55s cubic-bezier(.2, 1.6, .4, 1) both, pwready 1.6s 1s ease-in-out infinite; }
.pw:active { transform: scale(.85); }
@keyframes pwin { from { transform: translateY(2.5em) scale(.3) rotate(-90deg); opacity: 0; } }
@keyframes pwready { 50% { transform: translateY(-.15em); filter: brightness(1.25); } }
.pfx { position: absolute; inset: 0; z-index: 35; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.pfx-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c) 70%, #fff), transparent 60%); animation: pfxflash .9s ease-out forwards; }
.pfx-rays { position: absolute; width: 180%; aspect-ratio: 1; left: -40%; top: calc(45% - 90vw); background: repeating-conic-gradient(color-mix(in srgb, var(--c) 45%, transparent) 0 8deg, transparent 8deg 18deg); border-radius: 50%; animation: pfxrays 1.2s ease-out forwards; mask: radial-gradient(circle, #000 15%, transparent 60%); -webkit-mask: radial-gradient(circle, #000 15%, transparent 60%); }
.pfx img { width: 9em; position: relative; animation: pfximg 1.15s cubic-bezier(.2, 1.4, .3, 1) forwards; filter: drop-shadow(0 0 1.5em var(--c)) drop-shadow(0 0 .4em #fff); }
.pfx-name { position: relative; font-family: 'Russo'; font-size: 2.2em; color: #fff; text-shadow: 0 0 .3em var(--c), 0 0 .8em var(--c), 0 .08em 0 #000; animation: pfxname 1.15s cubic-bezier(.2, 1.4, .3, 1) forwards; white-space: nowrap; }
.pfx-sub { position: relative; font-family: 'Russo'; font-size: 1.3em; color: #ffe27a; animation: pfxname 1.4s .1s cubic-bezier(.2, 1.4, .3, 1) both; }
.pfx.od-in .pfx-name { font-size: 2.4em; color: #fff3b0; }
.pfx.od-in img { animation-duration: 1.4s; }
@keyframes pfxflash { 0% { opacity: 0; } 15% { opacity: .9; } 100% { opacity: 0; } }
@keyframes pfxrays { from { transform: rotate(0) scale(.3); opacity: 0; } 25% { opacity: 1; } to { transform: rotate(120deg) scale(1.2); opacity: 0; } }
@keyframes pfximg { 0% { transform: scale(3.5) rotate(-200deg); opacity: 0; } 30% { transform: scale(.9) rotate(10deg); opacity: 1; } 45% { transform: scale(1.1) rotate(0); } 75% { transform: scale(1); opacity: 1; } 100% { transform: translateY(1.5em) scale(.2); opacity: 0; } }
@keyframes pfxname { 0% { transform: scale(2.6); letter-spacing: .5em; opacity: 0; } 30% { transform: scale(1); letter-spacing: .04em; opacity: 1; } 78% { opacity: 1; transform: scale(1); } 100% { transform: scale(.8); opacity: 0; } }

.shieldfx, .frostfx, .ghostfx { position: absolute; inset: -5%; border-radius: 2em; pointer-events: none; opacity: 0; transition: opacity .4s; z-index: 7; }
.shieldfx { background: radial-gradient(ellipse at center, transparent 55%, rgba(80, 170, 255, .35) 80%, rgba(140, 210, 255, .6) 92%, transparent 100%), repeating-linear-gradient(60deg, rgba(120, 200, 255, .12) 0 2px, transparent 2px 18px), repeating-linear-gradient(-60deg, rgba(120, 200, 255, .12) 0 2px, transparent 2px 18px); border: .2em solid rgba(140, 210, 255, .8); box-shadow: 0 0 2em #3ba0ff, inset 0 0 2em rgba(59, 160, 255, .6); }
.shieldfx.on { opacity: 1; animation: shieldin .6s cubic-bezier(.2, 1.6, .4, 1), shieldpulse 2s .6s ease-in-out infinite; }
.shieldfx.break { opacity: 0; animation: shieldbreak .7s ease-out; }
@keyframes shieldin { from { transform: scale(1.6); opacity: 0; } }
@keyframes shieldpulse { 50% { box-shadow: 0 0 3em #3ba0ff, inset 0 0 3em rgba(59, 160, 255, .8); } }
@keyframes shieldbreak { 0% { opacity: 1; transform: scale(1); filter: brightness(3); } 100% { opacity: 0; transform: scale(1.4); } }
.frostfx { inset: -3%; border: .35em solid #bff3ff; box-shadow: 0 0 2em #96ebff, inset 0 0 3em rgba(190, 240, 255, .7); background: radial-gradient(circle at 0 0, rgba(220, 250, 255, .55), transparent 30%), radial-gradient(circle at 100% 100%, rgba(220, 250, 255, .55), transparent 30%), radial-gradient(circle at 100% 0, rgba(220, 250, 255, .4), transparent 25%), radial-gradient(circle at 0 100%, rgba(220, 250, 255, .4), transparent 25%); }
.frostfx.on { opacity: 1; animation: shieldin .5s ease-out; }
.tbar.frozen i { filter: hue-rotate(160deg) saturate(.4) brightness(1.6); }
.slowfx { position: absolute; top: -1.6em; right: -.4em; z-index: 8; font-family: 'Russo'; color: #fff; background: linear-gradient(180deg, #b06bff, #6a2ad8); border: 2px solid #fff; border-radius: 1em; padding: .1em .55em; font-size: .85em; box-shadow: 0 0 1em #b06bff; opacity: 0; transform: scale(0); transition: all .4s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; }
.slowfx.on { opacity: 1; transform: none; }
.ghostfx { inset: 0; border-radius: 1.4em; overflow: hidden; border: .18em solid rgba(255, 74, 94, .7); }
.ghostfx::after { content: ''; position: absolute; left: 0; right: 0; height: 18%; background: linear-gradient(180deg, transparent, rgba(255, 74, 94, .45), transparent); animation: scan 1.6s linear infinite; }
.ghostfx.on { opacity: 1; }
@keyframes scan { from { top: -20%; } to { top: 100%; } }
.fakemark { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; font-family: 'Russo'; color: #ff2d4a; font-size: calc(var(--bs, 20em) / 7); text-shadow: 0 0 .3em #ff2d4a, 0 0 .1em #fff; line-height: .8; animation: popin .3s; }
.fakemark small { display: block; font-size: .28em; color: #fff; background: #ff2d4a; padding: .1em .4em; border-radius: .4em; }
.bflash.fake { background: #ff2d4a; }
.bflash.fake::after { content: 'FALSO'; position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Russo'; font-size: 2.4em; color: #fff; }
.tile.revealed .im.base { filter: brightness(1) saturate(1.1) var(--tf, ) drop-shadow(0 0 .5em #ff5ad2) !important; opacity: 1 !important; }
.tile.revealed { animation: revealin .35s ease-out; }
@keyframes revealin { from { transform: scale(1.25); filter: brightness(3); } }

/* ---------- Overdrive ---------- */
.odwrap { display: flex; align-items: center; gap: .4em; margin: 0 1em .1em; height: 1.4em; }
.odwrap img { width: 1.5em; height: 1.5em; }
.odwrap b { font-family: 'Russo'; font-weight: 400; font-size: .68em; color: #ffd23b; opacity: .55; letter-spacing: .08em; }
.odbar { flex: 1; height: .55em; border-radius: 1em; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 200, 60, .45); overflow: hidden; }
.odbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff9a1a, #ffd23b, #fff3b0); box-shadow: 0 0 .6em #ffc63b; transition: width .25s; }
.odwrap.full b { opacity: 1; animation: pulse .4s infinite; }
.odwrap.full .odbar i { transition: none; }
#scr-game.od .board { box-shadow: 0 0 0 .14em #3a2400, 0 0 3em #ffc63b, inset 0 0 2em rgba(255, 198, 59, .6), inset 0 0 .5em #ffd23b; border-color: #8a6a1a; animation: odboard .5s ease-in-out infinite alternate; }
#scr-game.od .board .corner { border-color: #ffd23b; filter: drop-shadow(0 0 .5em #ffd23b); }
#scr-game.od .bgimg { animation: odbg 1s ease-in-out infinite alternate; }
#scr-game.od .g-score { color: #fff3b0; transform: scale(1.12); text-shadow: 0 0 .6em #ffc63b, 0 0 1.2em #ff9a1a; }
#scr-game.od .platform { filter: drop-shadow(0 0 2em #ffc63b) hue-rotate(-160deg) saturate(2); }
@keyframes odboard { to { box-shadow: 0 0 0 .14em #3a2400, 0 0 4.5em #ffd23b, inset 0 0 3em rgba(255, 198, 59, .8), inset 0 0 .8em #fff3b0; } }
@keyframes odbg { from { filter: brightness(1) hue-rotate(0); } to { filter: brightness(1.35) hue-rotate(-25deg) saturate(1.4); } }
.infcard { padding: .9em .9em .8em; display: flex; flex-direction: column; gap: .5em; overflow: hidden; border-color: #ffc63b; background: linear-gradient(160deg, rgba(60, 30, 110, .95), rgba(10, 16, 50, .96) 55%, rgba(80, 20, 40, .95)); }
.inf-glow { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(255, 198, 59, .18), transparent 30%, rgba(255, 79, 216, .18), transparent 60%, rgba(56, 232, 255, .18), transparent 90%); animation: spin 8s linear infinite; pointer-events: none; }
.inf-top { display: flex; gap: .7em; align-items: center; position: relative; }
.inf-top b { font-family: 'Russo'; font-size: 1.35em; color: #fff3b0; text-shadow: 0 0 .5em #ffc63b; }
.inf-top p { margin: .1em 0 0; font-size: .88em; line-height: 1.15; }
.inf-sym { font-family: 'Russo'; font-size: 3.4em; line-height: .8; background: linear-gradient(180deg, #fff3b0, #ffc63b 40%, #ff4fd8); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 .25em #ffc63b); animation: float 2.4s ease-in-out infinite; }
.inf-phases { display: flex; align-items: center; gap: .3em; font-family: 'Russo'; font-size: .75em; position: relative; flex-wrap: wrap; }
.inf-phases span { padding: .2em .55em; border-radius: 1em; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .25); }
.inf-phases i { font-style: normal; opacity: .6; }
.inf-best { font-size: .88em; position: relative; color: #ffe2a0; }
.infcard .row { position: relative; display: flex; gap: .5em; }
.infcard .row > * { flex: 1; }
.rank { width: 100%; display: flex; flex-direction: column; gap: .25em; }
.rrow { display: flex; align-items: center; gap: .5em; padding: .35em .6em; border-radius: .6em; background: rgba(4, 14, 44, .75); border: 1px solid rgba(90, 190, 255, .25); font-variant-numeric: tabular-nums; }
.rrow .rp { width: 1.6em; text-align: center; font-family: 'Russo'; }
.rrow .rn { flex: 1; min-width: 0; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .rn small { display: block; font-size: .72em; opacity: .65; }
.rrow b { font-family: 'Russo'; color: #ffd23b; }
.rrow.p1 { border-color: #ffc63b; background: rgba(80, 60, 10, .6); }
.rrow.me { border-color: #2bff6a; box-shadow: 0 0 .8em rgba(43, 255, 106, .5); }
.list > * { flex: none; }

/* ---------- Cuentas ---------- */
.login-box { margin: 0 1em calc(1.2em + var(--safe-b)); padding: 1.1em 1em .9em; display: flex; flex-direction: column; align-items: center; gap: .6em; animation: popin .4s cubic-bezier(.2, 1.4, .4, 1); }
.login-box .lt { font-family: 'Russo'; font-weight: 400; font-size: 1.35em; color: #fff3b0; text-shadow: 0 0 .5em #ffc63b; }
.login-box .ls { margin: 0 0 .2em; text-align: center; font-size: .95em; line-height: 1.2; opacity: .9; }
.sbtn { width: 100%; min-height: 3em; border-radius: .8em; display: flex; align-items: center; justify-content: center; gap: .6em; font-family: 'Russo'; font-size: 1em; position: relative; transition: transform .08s, filter .15s; box-shadow: 0 .25em 0 rgba(0, 0, 0, .35), 0 0 1em rgba(0, 0, 0, .3); }
.sbtn:active { transform: translateY(.15em) scale(.98); }
.sbtn svg, .sbtn img { width: 1.6em; height: 1.6em; flex: none; }
.sbtn.google { background: #fff; color: #1f1f1f; }
.sbtn.facebook { background: #1877f2; color: #fff; }
.sbtn.mail { background: linear-gradient(180deg, #38c8ff, #1a6dff); color: #fff; border: 2px solid rgba(255, 255, 255, .6); }
.sbtn.guest { background: rgba(4, 12, 40, .85); border: 2px solid rgba(150, 170, 220, .5); color: #dfe8ff; flex-direction: column; gap: 0; min-height: 3.2em; }
.sbtn.guest small { font-family: 'Raj'; font-size: .78em; color: #ffb0ba; }
.or { width: 100%; display: flex; align-items: center; gap: .6em; font-size: .85em; opacity: .7; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: rgba(150, 190, 255, .4); }
.linkbtn { color: #7fe9ff; text-decoration: underline; font-size: .88em; padding: .3em; }
.legal { margin: .2em 0 0; font-size: .75em; opacity: .7; text-align: center; }
.legal a { color: #7fe9ff; }
.authform { width: 100%; display: flex; flex-direction: column; gap: .5em; }
.authform .nameinput { text-align: left; font-family: 'Raj'; font-weight: 700; font-size: 1.1em; }
.ferr { margin: 0; min-height: 1.1em; color: #ff8a9a; font-size: .9em; text-align: center; }
.guestbar { width: 100%; padding: .45em .7em; border-radius: .7em; background: rgba(120, 20, 60, .85); border: 1.5px solid #ff6a9a; font-size: .82em; color: #ffe0ea; display: flex; justify-content: space-between; align-items: center; gap: .5em; }
.guestbar b { font-family: 'Russo'; font-weight: 400; color: #fff; background: #2bb35a; padding: .2em .6em; border-radius: .5em; white-space: nowrap; }
.acct { padding: .7em .8em; display: flex; flex-direction: column; gap: .5em; }
.acct p { margin: 0; font-size: .92em; }
.acct .arow { display: flex; justify-content: space-between; align-items: center; gap: .5em; font-size: .92em; }
.acct .arow small { opacity: .75; }
.acct .sync { color: #2bff6a; font-size: .85em; text-align: right; }
.acct .sync.pend { color: #ffd23b; }
.acct .row { display: flex; gap: .5em; } .acct .row > * { flex: 1; }