/* Arcade polish: restrained light, clear hierarchy and responsive controls. */
:root { --cyan:#63f4d3; --mag:#ff6386; --yel:#f3d6a1; --ink:#f5f7fc; --dim:#9ba9c1; --font:"Segoe UI",system-ui,sans-serif; --panel:#101725; --line:#29344a; }
.screen { padding:max(3.5vh,14px) max(4.2vw,calc(var(--safe-r) + 14px)) max(3.5vh,14px) max(4.2vw,calc(var(--safe-l) + 14px)); animation:screen-in .3s cubic-bezier(.2,.7,.2,1); }
@keyframes screen-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.btn { border:1px solid var(--line); border-radius:10px; background:rgba(16,23,38,.95); font-style:normal; font-weight:750; letter-spacing:.025em; text-shadow:none; box-shadow:0 5px 16px #0002; transform:none; min-height:44px; transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s,background .18s,box-shadow .18s; }
.btn > * { transform:none; }
.btn:hover,.btn:focus-visible,body.pad-nav .btn:focus { transform:translateY(-2px); background:#1b283c; border-color:var(--cyan); box-shadow:0 8px 22px #0003; outline:2px solid var(--cyan); outline-offset:3px; }
.btn:active { transform:translateY(1px) scale(.985); }
.btn.primary { background:var(--cyan); color:#071c19; border-color:var(--cyan); animation:none; padding:.75em 1.3em; font-size:clamp(18px,3.3vh,28px); box-shadow:0 8px 35px #63f4d316; }
.btn.primary:hover,.btn.primary:focus-visible { background:#98ffe6; color:#071c19; box-shadow:0 8px 35px #63f4d32a; }
.btn.primary small { color:#224b43; }
.btn.ghost { background:rgba(16,23,38,.7); color:#b6c4d9; }
.btn.disabled:hover { transform:none; background:#101725; }
.btn small { font-family:var(--font); font-weight:450; letter-spacing:.01em; }
.icon-btn { border:1px solid #3b465c; border-radius:9px; width:38px; height:38px; background:#111a2bc9; transition:background .15s; }
.icon-btn:hover,.icon-btn:focus-visible { box-shadow:none; background:#253149; outline:2px solid var(--cyan); outline-offset:3px; }
h2,h3 { font-style:normal; }
.bar { margin-bottom:3vh; }
.bar h2 { text-shadow:none; font-weight:800; color:#f5f7fc; letter-spacing:-.035em; }
.coins { text-shadow:none; font-style:normal; }
.card,.dcard,.pick { background:linear-gradient(145deg,#152033,#0c1422); border:1px solid #2a3950; box-shadow:none; border-radius:14px; padding:16px; }
.card { transition:transform .2s,border-color .2s; }
.card:hover { border-color:#55708c; }
.card.eq { border-color:var(--cyan); box-shadow:inset 0 0 30px #63f4d308; }
.card b,.pick b { font-style:normal; }
.card.style .btn { margin-top:12px; }
.card.style p { line-height:1.55; font-weight:450; }
.card.locked canvas { filter:grayscale(.7) brightness(.75); }
.show-shop .screen,.show-stages .screen,.show-settings .screen,.show-daily .screen,.show-vssetup .screen,.show-help .screen { background:radial-gradient(ellipse at 20% 0,#182436 0,transparent 55%),#090e19f8; }
.tab { font-style:normal; font-weight:700; border-bottom-width:2px; padding:.6em 1em; }
.tab.on { border-color:var(--cyan); color:var(--cyan); text-shadow:none; }
.tabs { gap:6px; margin-bottom:2vh; }
.stat u.on { box-shadow:none; }
.perk-card { border:1px solid #40506b; background:linear-gradient(150deg,#19243b,#0c1423); box-shadow:none; border-radius:16px; transition:transform .2s,border-color .2s; }
.perk-card:hover,.perk-card:focus-visible { background:#192a3c; border-color:var(--cyan); box-shadow:0 16px 40px #0005; transform:translateY(-6px); }
.perk-card i,.stats b,h2.big { text-shadow:none; }
.help { font-weight:450; line-height:1.7; }
.help .tip { font-weight:500; color:#b6d9d1; }
.help h3 { font-weight:750; }
.rows { gap:8px; }
.rows .btn { flex-shrink:0; font-size:clamp(11px,2.1vh,16px); padding:13px 16px; }
.rows .btn b { color:var(--cyan); font-style:normal; }
.rows .btn.danger { margin-top:16px; border-color:#5c3546; }
.rows .btn.danger b { color:var(--mag); }
.rows [aria-pressed="false"] b { color:#8593ac; }
.rows::-webkit-scrollbar,.grid::-webkit-scrollbar,.help::-webkit-scrollbar { width:5px; }
.rows::-webkit-scrollbar-thumb,.grid::-webkit-scrollbar-thumb,.help::-webkit-scrollbar-thumb { background:#3a4b65; border-radius:4px; }
/* Home */
.screen.title { display:grid; grid-template-columns:1.1fr 1fr; grid-template-rows:54px minmax(0,1fr) 62px; column-gap:7vw; row-gap:3vh; background:linear-gradient(110deg,#080e1bf5 0%,#0a1224ea 58%,#111c2aee 100%); overflow:auto; touch-action:pan-y; }
.screen.title::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 24% 65%,#38d8bc10,transparent 45%),radial-gradient(ellipse at 95% 0,#ef51700d,transparent 40%); }
.screen.title > * { position:relative; z-index:1; }
.arena-header { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ffffff12; padding-bottom:15px; }
.wordmark { display:flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.12em; font-weight:850; white-space:nowrap; }
.wordmark strong { color:#8c9bb2; font-weight:500; }
.brand-mark { display:inline-flex; width:31px; height:31px; align-items:center; justify-content:center; background:var(--cyan); color:#081b18; font:italic 900 23px Impact,sans-serif; border-radius:5px; position:relative; }
.brand-mark span { position:absolute; right:1px; top:0; font:600 12px system-ui; }
.arena-header-right { display:flex; align-items:center; gap:12px; }
.local-label { display:flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.13em; color:#99a8bd; margin-right:15px; }
.local-label i { width:5px; height:5px; background:var(--cyan); border-radius:50%; box-shadow:0 0 9px #63f4d377; }
.wallet { font-size:13px; font-weight:650; color:var(--yel); padding:8px 14px; border:1px solid #364052; border-radius:7px; }
.title-hero { display:flex; flex-direction:column; align-self:center; min-height:0; }
.eyebrow { font:650 10px var(--font); letter-spacing:.22em; color:var(--cyan); display:flex; align-items:center; gap:10px; margin:0 0 16px; }
.eyebrow span { display:block; width:23px; height:1px; background:var(--cyan); }
.hero-title { margin:0; font:900 clamp(34px,5vw,83px)/.99 "Arial Black",Impact,sans-serif; letter-spacing:-.065em; }
.hero-title em { color:var(--cyan); font-style:normal; }
.hero-copy { margin:17px 0 0; color:#99aac3; font:400 clamp(11px,1vw,15px)/1.7 var(--font); }
.duel-art { width:100%; max-height:26vh; min-height:90px; overflow:visible; margin-top:3px; }
.duelist { transform-box:fill-box; transform-origin:50% 100%; animation:duel-breathe 3s ease-in-out infinite alternate; filter:drop-shadow(0 0 6px #63f4d33a); }
.duelist-b { animation-delay:-1.2s; filter:drop-shadow(0 0 6px #ff66863a); }
.duel-spark { transform-box:fill-box; transform-origin:center; animation:spark-breathe 2.4s ease-in-out infinite; }
@keyframes duel-breathe { to { transform:translateY(-3px) rotate(.7deg); } }
@keyframes spark-breathe { 50% { opacity:.45; transform:scale(.8); } }
.hero-meta { display:flex; align-items:center; flex-wrap:wrap; gap:14px; border-top:1px solid #ffffff12; padding-top:12px; font-size:10px; letter-spacing:.06em; }
.hero-meta span:first-child { color:var(--cyan); font-weight:750; text-transform:uppercase; }
.hero-meta span:nth-child(2) { color:#9facc1; }
.text-link { padding:5px 0; border:0; background:none; color:#b0bed3; cursor:pointer; font:600 9px var(--font); margin-left:auto; letter-spacing:.06em; }
.text-link:hover,.text-link:focus-visible { color:var(--cyan); outline:1px solid var(--cyan); outline-offset:4px; }
.arena-menu { display:flex; flex-direction:column; justify-content:center; gap:12px; align-self:center; }
.section-label { display:flex; justify-content:space-between; margin-bottom:4px; font-size:9px; letter-spacing:.14em; color:#8496b1; }
.section-label b { color:#63758f; font-weight:500; }
.mode-main.btn { display:flex; flex-direction:row; text-align:left; gap:18px; padding:23px; min-height:105px; justify-content:flex-start; border-radius:13px; }
.mode-main .mode-icon { font:400 40px system-ui; align-self:center; }
.mode-main .mode-text { display:flex; flex-direction:column; gap:7px; }
.mode-main .mode-text b { font:900 clamp(17px,2.1vw,31px)/1.1 var(--font); letter-spacing:-.035em; }
.mode-main .mode-text small { font-size:11px; font-weight:500; }
.mode-main .mode-text small:first-child { font-size:8px; font-weight:650; letter-spacing:.16em; }
.mode-arrow { margin-left:auto; font:400 25px system-ui; }
.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mode-card.btn { min-height:130px; padding:20px; gap:8px; text-align:left; align-items:flex-start; justify-content:flex-end; background:linear-gradient(145deg,#172339cc,#111a2bcc); border-color:#334057; }
.mode-card .mode-symbol { color:#a5b9d5; font:400 27px system-ui; margin-bottom:9px; }
.mode-card b { font-size:clamp(12px,1.15vw,17px); }
.mode-card small { font-size:10px; color:#9aaac2; }
.tile-tag { position:absolute; right:13px; top:17px; font:650 7px var(--font); padding:4px 6px; border:1px solid #3c4b65; border-radius:4px; color:#a4b7d0; letter-spacing:.1em; }
.practice-card.btn { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:15px; text-align:left; padding:17px 20px; background:#101e28b3; border-color:#2b4648; }
.practice-card .mode-symbol { color:var(--cyan); font:400 29px system-ui; }
.practice-card b { font-size:14px; display:block; }
.practice-card small { font-size:10px; display:block; margin-top:5px; color:#9aaec2; }
.practice-card .mode-arrow { font-size:21px; color:var(--cyan); }
.menu-utilities { display:flex; gap:8px; margin-top:1px; }
.menu-utilities .btn { font-size:9px; min-height:36px; padding:9px 12px; border-radius:6px; }
.menu-utilities .btn:first-child { flex:1; }
.arena-footer { grid-column:1 / -1; display:flex; align-items:center; gap:42px; border-top:1px solid #ffffff16; padding-top:16px; }
.record-item { display:flex; flex-direction:column; gap:5px; }
.record-item > span { font-size:8px; letter-spacing:.16em; color:#8495ac; }
.record-item b { font:650 22px/1 var(--font); color:#e7eef8; }
.record-item small { font-size:8px; letter-spacing:.05em; color:#8d9fb7; margin-left:5px; font-weight:500; }
.arena-footer p { margin:0 0 0 auto; text-align:right; color:#9caec4; font-size:9px; letter-spacing:.09em; line-height:1.8; }
.arena-footer p span { display:block; color:#586b88; font-size:8px; }
/* Lessons and overlays */
.help-screen { overflow-y:auto; touch-action:pan-y; }
.help-intro { margin:0 0 20px; color:#a8b7cc; font-size:14px; }
.lesson-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; flex:1; min-height:0; }
.lesson { border:1px solid #2c3b50; border-radius:12px; padding:18px; background:#101b2b; }
.lesson > span { color:#5c7594; font-size:11px; font-weight:700; }
.lesson h3 { font-size:13px; color:#edf3ff; margin:10px 0 14px; letter-spacing:0; }
.lesson kbd { background:#152f31; color:var(--cyan); border:1px solid #365851; font-size:12px; padding:5px 9px; }
.lesson p { color:#a7b8d1; font-size:12px; line-height:1.65; margin:12px 0 0; }
.pause .menu { min-width:280px; width:min(460px,80vw); }
.pause-sub { color:#8fa4bf; font-size:10px; letter-spacing:.15em; margin:12px 0 25px; }
.show-pause .screen,.show-perk .screen,.show-result .screen,.show-dailynext .screen { background:radial-gradient(ellipse at center,#08101ad6,#070c17f5); backdrop-filter:blur(6px); }
#toast { border:1px solid #385951; background:#10201fef; box-shadow:0 8px 32px #0004; font-style:normal; font-size:12px; letter-spacing:.02em; border-radius:8px; padding:12px 18px; top:max(20vh,85px); }
#btn-pause { border-radius:8px; background:#0d182ce6; border:1px solid #465673; opacity:1; }
.tbtn { border-width:1px; box-shadow:0 4px 15px #0003,inset 0 0 20px #ffffff06; text-shadow:none; background:#0d1524b3; opacity:.86; transition:transform .08s,background .08s; }
.tbtn.down { box-shadow:0 0 20px color-mix(in srgb,var(--c) 25%,transparent); }
.t-special { opacity:.4; }
#touch.ready .t-special { opacity:1; background:#293321c9; box-shadow:0 0 14px #f3d6a140; }
.t-dash { --c:#a5c5ff; width:calc(var(--tb) * .7); height:calc(var(--tb) * .7); font-size:calc(var(--tb) * .15); margin-left:calc(var(--tb) * .12); overflow:visible; } /* sin el botón BLOQUEO (retroceder bloquea): el DASH queda sobre la cruceta, en el flujo */
.t-dash::after { content:""; position:absolute; inset:-5px; border-radius:50%; pointer-events:none; background:conic-gradient(var(--c) calc(var(--dash-charge,1) * 1turn),#29334d66 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0); opacity:.72; }
#touch.dash-ready .t-dash { background:#1c3049d9; box-shadow:0 0 17px #a5c5ff66,inset 0 0 18px #a5c5ff14; }
#touch.dash-ready .t-dash::after { opacity:1; filter:drop-shadow(0 0 4px #a5c5ff); }
#touch.air-jump-ready .t-jump { box-shadow:0 0 18px #ffe14d77,inset 0 0 17px #ffe14d22; }
#dpad { border-width:1px; background:#0d1524b3; box-shadow:inset 0 0 18px #ffffff06; }
/* Motion preferences apply to menus as well as the renderer settings. */
body.reduced-motion *,body.reduced-motion *::before,body.reduced-motion *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }
@media(max-height:600px) {
 .screen.title { grid-template-rows:43px minmax(0,1fr) 47px; row-gap:2vh; column-gap:5vw; }
 .hero-title { font-size:clamp(30px,5vw,65px); }
 .eyebrow { margin-bottom:10px; font-size:8px; }
 .hero-copy { margin-top:10px; font-size:11px; line-height:1.5; }
 .duel-art { max-height:23vh; min-height:55px; }
 .hero-meta { font-size:8px; padding-top:8px; gap:8px; }
 .arena-menu { gap:8px; }
 .mode-main.btn { min-height:75px; padding:14px 18px; gap:12px; }
 .mode-main .mode-text { gap:4px; }
 .mode-main .mode-text small { font-size:9px; }
 .mode-card.btn { min-height:94px; padding:12px 15px; gap:5px; }
 .mode-card .mode-symbol { font-size:21px; margin-bottom:3px; }
 .mode-card small { font-size:9px; }
 .tile-tag { top:12px; right:10px; font-size:6px; }
 .practice-card.btn { padding:10px 15px; }
 .practice-card small { margin-top:3px; }
 .menu-utilities .btn { min-height:30px; padding:7px 9px; font-size:8px; }
 .arena-footer { padding-top:10px; }
 .record-item b { font-size:18px; }
 .record-item > span { font-size:7px; }
 .lesson { padding:12px; }
 .lesson h3 { margin:7px 0 9px; font-size:11px; }
 .lesson p { font-size:11px; line-height:1.5; }
 .lesson-grid { min-height:0; }
}
@media(max-height:430px) {
 .screen { padding:10px max(3vw,var(--safe-l)); }
 .screen.title { grid-template-rows:34px minmax(0,1fr) 35px; gap:9px 5vw; }
 .wordmark { font-size:10px; gap:8px; } .brand-mark { width:24px; height:24px; font-size:18px; }
 .arena-header { padding-bottom:8px; }
 .icon-btn { width:28px; height:28px; } .icon-btn svg { width:16px; height:16px; }
 .local-label { display:none; }
 .wallet { padding:5px 10px; font-size:10px; }
 .hero-title { font-size:clamp(30px,5.2vw,54px); }
 .eyebrow { margin-bottom:7px; font-size:7px; }
 .hero-copy { margin-top:9px; font-size:9px; }
 .duel-art { max-height:19vh; min-height:38px; }
 .hero-meta { padding-top:5px; font-size:7px; } .hero-meta span:nth-child(2) { display:none; } .text-link { font-size:7px; }
 .arena-menu { gap:6px; } .section-label { font-size:7px; margin:0; }
 .mode-main.btn { min-height:60px; padding:10px 14px; }
 .mode-main .mode-text b { font-size:17px; } .mode-main .mode-text small:first-child { font-size:6px; }
 .mode-main .mode-text small:last-child { display:none; } .mode-main .mode-icon { font-size:28px; }
 .mode-card.btn { min-height:68px; padding:9px 12px; gap:4px; }
 .mode-card .mode-symbol { font-size:16px; margin:0; } .mode-card b { font-size:10px; } .mode-card small { display:none; }
 .tile-tag { top:10px; font-size:5px; padding:2px 3px; }
 .practice-card.btn { padding:8px 12px; gap:9px; min-height:44px; } .practice-card b { font-size:11px; } .practice-card small { display:none; } .practice-card .mode-symbol { font-size:22px; }
 .menu-utilities .btn { min-height:27px; font-size:7px; padding:5px 8px; }
 .arena-footer { padding-top:5px; gap:25px; } .record-item { gap:2px; } .record-item b { font-size:14px; } .record-item small { font-size:6px; } .arena-footer p { font-size:7px; } .arena-footer p span { display:none; }
 .lesson-grid { grid-template-columns:repeat(3,1fr); flex:none; } .help-intro { font-size:11px; margin-bottom:12px; }
 .pause .menu { gap:8px; } .pause-sub { margin:8px 0 14px; font-size:8px; }
 .pause .btn { min-height:34px; font-size:14px; padding:9px 15px; }
 .lesson-grid .lesson p { font-size:10px; } .lesson kbd { font-size:9px; }
}
@media(max-width:700px) and (min-height:500px) {
 .screen.title { display:flex; flex-direction:column; gap:25px; padding:18px 22px; }
 .arena-header { flex:none; } .wordmark strong,.local-label { display:none; }
 .arena-header-right { gap:7px; } .title-hero { width:100%; }
 .hero-title { font-size:clamp(39px,9vw,65px); } .hero-copy { font-size:12px; }
 .duel-art { max-height:160px; } .arena-menu { width:100%; } .arena-footer { width:100%; flex-shrink:0; padding-bottom:10px; gap:24px; } .arena-footer p { display:none; }
 .mode-card b { font-size:12px; } .mode-card small { font-size:9px; }
 .lesson-grid { grid-template-columns:1fr; min-height:0; flex:none; } .cols { grid-template-columns:1fr; overflow:auto; } .settings .help { display:none; }
}

/* Neon home identity — scoped to the title so other screens keep their layout. */
.screen.title {
 --cyan:#00f0ff; --mag:#ff2bd6; --yel:#ffe14d;
 background:linear-gradient(90deg,rgba(5,3,15,.78),rgba(8,3,24,.52) 47%,rgba(8,3,24,.86) 100%);
}
.screen.title::before {
 background:radial-gradient(ellipse at 17% 46%,#00f0ff14,transparent 46%),radial-gradient(ellipse at 90% 40%,#ff2bd61a,transparent 50%);
}
.screen.title::after {
 content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
 background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#05030f20 3px,#05030f20 4px);
 opacity:.35;
}
.title .arena-header { border-bottom-color:#7254a04d; }
.title .brand-mark { color:#030b16; background:#00f0ff; box-shadow:0 0 16px #00f0ff70; border-radius:2px; }
.title .wordmark { color:#caffff; text-shadow:0 0 10px #00f0ff88; }
.title .wordmark strong { color:#ff94ef; font-weight:700; }
.title .local-label i { background:#00f0ff; box-shadow:0 0 9px #00f0ff; }
.title .wallet { color:#ffe14d; border-color:#ffe14d66; background:#171020a6; box-shadow:inset 0 0 12px #ffe14d0c; }
.title .icon-btn { color:#cffbff; border-color:#8562c8; background:#130827b8; }
.title .icon-btn:hover,.title .icon-btn:focus-visible { color:#00f0ff; border-color:#00f0ff; box-shadow:0 0 16px #00f0ff66; }
.title .eyebrow { color:#b2faff; text-shadow:0 0 10px #00f0ff70; font-weight:750; }
.title .eyebrow span { background:#00f0ff; box-shadow:0 0 10px #00f0ff; }
.title .hero-title { display:flex; flex-direction:column; gap:9px; transform:skewX(-8deg); padding-left:8px; letter-spacing:-.045em; line-height:.85; }
.title .hero-neon {
 font:italic 900 clamp(65px,10.4vw,158px)/.85 "Arial Black",Impact,sans-serif;
 color:#9bfbff; letter-spacing:-.045em;
 text-shadow:0 0 6px #00f0ff,0 0 23px #00f0ffb3,0 0 64px #00f0ff6b;
}
.title .hero-brawl {
 font:italic 900 clamp(28px,4.38vw,67px)/1 "Arial Black",Impact,sans-serif;
 color:#ff71e7; white-space:nowrap; letter-spacing:-.035em;
 text-shadow:0 0 7px #ff2bd6b3,0 0 25px #ff2bd68c,0 0 55px #ff2bd64d;
}
.title .hero-copy { color:#bdb4d6; margin-top:22px; line-height:1.9; }
.title .hero-copy strong { color:#d7e9ff; font-size:.88em; font-weight:800; letter-spacing:.17em; }
.title .duelist-a { filter:drop-shadow(0 0 4px #00f0ff) drop-shadow(0 0 13px #00f0ff88); }
.title .duelist-b { filter:drop-shadow(0 0 4px #ff2bd6) drop-shadow(0 0 13px #ff2bd688); }
.title .duel-spark { filter:drop-shadow(0 0 8px #fff); }
.title .hero-meta { border-top-color:#00f0ff40; }
.title .hero-meta span:first-child { color:#6af7ff; text-shadow:0 0 10px #00f0ff55; }
.title .text-link { color:#e2bbff; }
.title .section-label { color:#c9b7eb; letter-spacing:.16em; }
.title .section-label b { color:#ae7bdc; }
.title .btn { border-radius:4px; transform:skewX(-5deg); }
.title .btn > * { transform:skewX(5deg); }
.title .btn:hover,.title .btn:focus-visible,body.pad-nav .title .btn:focus { transform:skewX(-5deg) translateY(-2px); outline-offset:4px; }
.title .btn:active { transform:skewX(-5deg) scale(.98); }
.title .mode-main.btn.primary {
 color:#fff; background:linear-gradient(110deg,#631552c7,#280c42dc);
 border:2px solid #ff2bd6; box-shadow:0 0 13px #ff2bd673,0 0 40px #ff2bd626,inset 0 0 28px #ff2bd621;
}
.title .mode-main .mode-text b { font-style:italic; color:#fff4fd; text-shadow:0 0 15px #ff2bd6aa; }
.title .mode-main .mode-text small { color:#e7b9e1; }
.title .mode-main .mode-text small:first-child { color:#ff91ea; }
.title .mode-main .mode-icon,.title .mode-main .mode-arrow { color:#ff8be9; text-shadow:0 0 12px #ff2bd6; }
.title .mode-main.btn.primary:hover,.title .mode-main.btn.primary:focus-visible {
 background:linear-gradient(110deg,#831768dc,#3d104fe8); color:#fff;
 box-shadow:0 0 22px #ff2bd6b3,0 0 52px #ff2bd642,inset 0 0 32px #ff2bd633;
 outline-color:#ffb7f3;
}
.title .mode-card.btn { border:1px solid #00f0ffaa; background:linear-gradient(145deg,#08293fc7,#10092de8); box-shadow:0 0 12px #00f0ff21,inset 0 0 18px #00f0ff0e; }
.title .mode-card.btn:nth-child(2) { border-color:#cb6affb3; background:linear-gradient(145deg,#321144c7,#10092de8); box-shadow:0 0 12px #c64dff24,inset 0 0 18px #c64dff10; }
.title .mode-card b { font-style:italic; color:#ddfdff; text-shadow:0 0 10px #00f0ff55; }
.title .mode-card:nth-child(2) b { color:#f2ddff; text-shadow:0 0 10px #cb6aff77; }
.title .mode-card .mode-symbol { color:#00f0ff; text-shadow:0 0 13px #00f0ff; }
.title .mode-card:nth-child(2) .mode-symbol { color:#d184ff; text-shadow:0 0 13px #cb6aff; }
.title .mode-card small { color:#b6c4df; }
.title .tile-tag { border-color:#9572b4; color:#ead3ff; border-radius:2px; }
.title .mode-card:first-child .tile-tag { color:#ffe14d; border-color:#ffe14d77; background:#ffe14d0e; }
.title .mode-card.btn:hover,.title .mode-card.btn:focus-visible { border-color:#00f0ff; background:#103048e8; box-shadow:0 0 20px #00f0ff70; }
.title .mode-card.btn:nth-child(2):hover,.title .mode-card.btn:nth-child(2):focus-visible { border-color:#d989ff; background:#32134ee8; box-shadow:0 0 20px #cb6aff70; outline-color:#d989ff; }
.title .practice-card.btn { border-color:#5b79ddb3; background:linear-gradient(110deg,#121b3dd9,#160c30e6); box-shadow:0 0 12px #637aff18; }
.title .practice-card .mode-symbol,.title .practice-card .mode-arrow { color:#9aabff; text-shadow:0 0 12px #7b7dff88; }
.title .practice-card b { color:#e5e6ff; font-style:italic; }
.title .practice-card small { color:#b4b5d6; }
.title .practice-card.btn:hover,.title .practice-card.btn:focus-visible { border-color:#a6b2ff; box-shadow:0 0 22px #637aff55; background:#20204be6; }
.title .menu-utilities .btn { border-color:#7650a6; color:#d5c5ed; background:#170a2bbf; box-shadow:inset 0 0 15px #a459ff0b; border-radius:3px; }
.title .menu-utilities .btn:hover { color:#fff; border-color:#c487ff; box-shadow:0 0 13px #c487ff55; background:#2b1446; }
.title .arena-footer { border-top-color:#ff2bd633; }
.title .record-item b { color:#e7ffff; text-shadow:0 0 12px #00f0ff55; }
.title .record-item > span { color:#b1a0c9; }
.title .arena-footer p { color:#b9a6d3; }
.title .arena-footer p span { color:#88709f; }
@media(max-height:600px) {
 .title .hero-neon { font-size:clamp(58px,9.5vw,121px); }
 .title .hero-brawl { font-size:clamp(25px,4vw,51px); }
 .title .hero-copy { margin-top:14px; }
}
@media(max-height:430px) {
 .title .hero-title { gap:5px; }
 .title .hero-neon { font-size:clamp(52px,9.3vw,91px); }
 .title .hero-brawl { font-size:clamp(23px,3.9vw,39px); }
 .title .hero-copy { margin-top:10px; line-height:1.7; }
}
@media(max-width:700px) and (min-height:500px) {
 .title .hero-title { padding-left:5px; gap:7px; }
 .title .hero-neon { font-size:clamp(70px,20vw,125px); }
 .title .hero-brawl { font-size:clamp(29px,8.4vw,52px); }
 .title .hero-copy { margin-top:17px; }
}

/* tienda de burlas y celebraciones */
.emotegrid { grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 34vh, 260px), 1fr)); }
.card.emote { display:flex; flex-direction:column; gap:6px; padding:10px; text-align:left; }
.card.emote .eprev { width:100%; height:auto; aspect-ratio:13/11; background:radial-gradient(circle at 40% 80%, #2a1a4d, #0b0a1a); border-radius:9px; border:1px solid #2a3950; }
.card.emote > b { font-size:12px; }
.card.emote > small { font-size:10.5px; line-height:1.4; opacity:.8; min-height:3.1em; }
.card.emote .btn { margin-top:auto; font-size:11px; padding:8px; min-height:38px; }
.hint.top { margin:0 0 8px; text-align:center; }
.tabs { flex-wrap: wrap; justify-content: center; }
.tabs .tab { font-size: clamp(11px, 2.4vh, 15px); padding: .5em .7em; }

/* lista de movimientos */
.mvstyle { display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 8px; }
.mvstyle b { font-size:18px; letter-spacing:.06em; color:var(--c); text-shadow:0 0 12px color-mix(in srgb,var(--c) 40%,transparent); display:grid; text-align:center; }
.mvstyle small { font-size:10px; opacity:.7; letter-spacing:.16em; }
.moves .mvlist { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:8px 12px; align-content:start; }
.moves .mv-sec { grid-column:1 / -1; margin:10px 0 0; font-size:12px; letter-spacing:.2em; color:#7fb7ff; border-bottom:1px solid #2a3950; padding-bottom:4px; }
.moves .mv { display:flex; gap:10px; background:linear-gradient(145deg,#152033,#0c1422); border:1px solid #2a3950; border-radius:10px; padding:8px; }
.moves .mvprev { flex:0 0 96px; width:96px; height:84px; border-radius:7px; background:radial-gradient(circle at 40% 85%,#2a1a4d,#0b0a1a); }
.moves .mvprev.ph { display:grid; place-items:center; opacity:.4; font-size:26px; }
.moves .mvtext { display:grid; gap:3px; align-content:start; min-width:0; }
.moves .mvtext b { font-size:12.5px; font-style:normal; }
.moves .mvtext kbd { justify-self:start; font-size:10.5px; padding:2px 6px; }
.moves .mvtext em { font-size:10px; color:#ffe14d; font-style:normal; letter-spacing:.08em; }
.moves .mvtext p { margin:0; font-size:10.5px; line-height:1.4; opacity:.8; }
.moves .tag { justify-self:start; font-size:9px; padding:1px 5px; border-radius:4px; margin-left:0; font-style:normal; background:#ffb04d33; color:#ffb04d; vertical-align:middle; }
.moves .tag.BAJO { background:#4dc8ff33; color:#4dc8ff; }

/* retos de combos */
.trials .trlist { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:8px 12px; align-content:start; }
.trial { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; background:linear-gradient(145deg,#152033,#0c1422); border:1px solid #2a3950; border-radius:10px; padding:9px 11px; }
.trial.done { border-color:#63f4d355; }
.trial .tn { font:900 20px/1 var(--font); opacity:.35; }
.trial b { font-size:12.5px; font-style:normal; }
.trial p { margin:2px 0 4px; font-size:10.5px; line-height:1.35; opacity:.8; }
.trial .tm { display:flex; align-items:center; gap:5px; }
.trial .tm em { font-style:normal; font-size:10.5px; color:#9fffe9; margin-left:4px; }
.medal { width:13px; height:13px; border-radius:50%; border:2px solid var(--m); opacity:.35; display:inline-block; }
.medal.on { background:var(--m); opacity:1; box-shadow:0 0 8px var(--m); }
.medal.big { width:22px; height:22px; vertical-align:middle; }

/* torneo y rey de la colina */
.arcade .arc-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:14px; align-items:start; margin:6px 0 8px; }
.roundrush .rr-title span { color:#ff365f; text-shadow:0 0 18px #ff365f99; }
.roundrush .ladder li { border-left:3px solid color-mix(in srgb,var(--rr) 68%,#2a3950); }
.roundrush .ladder li.cur { border-color:var(--rr); box-shadow:0 0 16px color-mix(in srgb,var(--rr) 42%,transparent); }
.roundrush .ladder li.cur b { color:var(--rr); text-shadow:0 0 9px color-mix(in srgb,var(--rr) 55%,transparent); }
.roundrush .rr-card { border-color:color-mix(in srgb,var(--rr) 65%,#3a5070); box-shadow:inset 0 0 34px color-mix(in srgb,var(--rr) 10%,transparent),0 0 18px color-mix(in srgb,var(--rr) 18%,transparent); }
.roundrush .rr-card > b { color:var(--rr); text-shadow:0 0 12px color-mix(in srgb,var(--rr) 55%,transparent); }
.roundrush .rr-card blockquote { margin:4px 0; padding:7px 9px; border-left:2px solid var(--rr); background:#05091466; font-size:11px; line-height:1.45; font-style:italic; }
.roundrush .rr-card.final { --rr:#ffd34d; }
.ladder { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.ladder li { display:grid; grid-template-columns:24px 1fr auto; gap:8px; align-items:center; background:#0c1422; border:1px solid #2a3950; border-radius:8px; padding:5px 9px; font-size:11.5px; }
.ladder li span { font:900 13px/1 var(--font); opacity:.6; text-align:center; }
.ladder li em { font-style:normal; font-size:9.5px; opacity:.65; letter-spacing:.08em; }
.ladder li.done { border-color:#63f4d355; opacity:.65; } .ladder li.done span { color:#63f4d3; opacity:1; }
.ladder li.cur { border-color:#ffe14d; box-shadow:0 0 14px #ffe14d33; }
.arc-next { background:linear-gradient(145deg,#1b2740,#0c1422); border:1px solid #3a5070; border-radius:12px; padding:12px 14px; display:grid; gap:5px; }
.arc-next b { font:900 22px/1.1 var(--font); font-style:italic; } .arc-next em { font-style:normal; font-size:11px; color:#9fffe9; letter-spacing:.12em; }
.arc-next p { margin:2px 0; font-size:12.5px; line-height:1.5; } .arc-next small { font-size:10.5px; opacity:.7; letter-spacing:.1em; }
.kothlist { display:grid; gap:6px; }
.koth-row { display:flex; align-items:center; gap:10px; background:linear-gradient(145deg,#152033,#0c1422); border:1px solid #2a3950; border-left:4px solid var(--c); border-radius:10px; padding:6px 10px; }
.koth-row b { min-width:96px; font-size:12px; color:var(--c); } .koth-row .ks { min-width:90px; text-align:center; font-weight:800; font-size:13px; }

/* repeticiones */
#replaybar { position:fixed; left:50%; bottom:max(14px, env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:30; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; background:rgba(8,4,24,.82); border:1px solid #6d5aff88; box-shadow:0 0 22px #6d5aff44; }
#replaybar[hidden] { display:none; }
#replaybar b { font:italic 900 13px/1 var(--font); letter-spacing:.14em; color:#ffe14d; margin-right:4px; }
#replaybar button { font:800 12px/1 var(--font); color:#fff; background:#1b2740; border:1px solid #3a5070; border-radius:8px; padding:8px 11px; min-width:40px; }
#replaybar button:active { transform:scale(.94); }
body.replaying #btn-pause, body.replaying #touch { display:none !important; }
.clipbar { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:4px 0 2px; }
.cliplist { display:grid; gap:7px; }
.clip { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; background:linear-gradient(145deg,#152033,#0c1422); border:1px solid #2a3950; border-radius:10px; padding:8px 12px; }
.clip b { font-size:13px; } .clip em { display:block; font-style:normal; font-size:10.5px; opacity:.7; margin-top:2px; }

/* personalización: muestras de estelas y chispas */
.swatchgrid { grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 30vh, 230px), 1fr)); }
.swatch { height: clamp(26px, 8vh, 48px); width: 86%; margin: 10px auto 6px; border-radius: 999px; box-shadow: 0 0 14px #ffffff33; }
.swatch.spark { border-radius: 4px; clip-path: polygon(0 50%, 8% 20%, 16% 50%, 26% 8%, 36% 50%, 48% 14%, 58% 50%, 70% 6%, 80% 50%, 90% 18%, 100% 50%, 90% 82%, 80% 50%, 70% 94%, 58% 50%, 48% 86%, 36% 50%, 26% 92%, 16% 50%, 8% 80%); height: clamp(34px, 10vh, 60px); }

/* Perfil, maestria, logros y objetivos. */
.progress-shortcut{width:100%;margin-bottom:clamp(4px,1vh,8px);border-color:#00f0ff66!important;color:#bffaff!important}
.progress{overflow:auto;padding-bottom:30px}.profile-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:1180px;margin:18px auto}
.profile-summary div{padding:14px 18px;border:1px solid #00f0ff38;background:linear-gradient(135deg,#0a0c1feb,#140526e0);clip-path:polygon(0 0,94% 0,100% 24%,100% 100%,6% 100%,0 76%)}
.profile-summary span,.master-card small{display:block;color:#aab4d1;font-size:10px;letter-spacing:.12em}.profile-summary b{display:block;color:#fff;font-size:24px;margin-top:4px}
.progress-cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:18px;max-width:1180px;margin:auto}.progress h3{color:#dffcff;font-size:13px;letter-spacing:.12em;margin:14px 0 10px}
.master-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.master-card{display:flex;min-height:126px;align-items:center;gap:10px;padding:6px 12px;border:1px solid #ffffff21;background:#070718db}
.master-card.locked{opacity:.48;filter:saturate(.35)}.master-card canvas{width:84px;height:112px;flex:0 0 auto}.master-card div{flex:1;min-width:0}.master-card b,.master-card em{display:block}
.master-card b{color:#fff;font-size:16px}.master-card em{color:#71ecff;font-size:10px;margin:4px 0 9px;font-style:normal}.xpbar{display:block;height:7px;background:#14152c;border:1px solid #ffffff29;margin-bottom:5px;overflow:hidden}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#a02bff,#00eaff);box-shadow:0 0 12px #00eaff}.weekly{list-style:none;margin:0 0 8px;padding:0;border:1px solid #ffe14d33}
.weekly li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:11px;border-bottom:1px solid #ffffff14;background:#080719e6}.weekly li:last-child{border:0}.weekly li.done span,.weekly li.done em{color:#8dffb4}.weekly em{font-style:normal;color:#ffe14d}
.achievement-grid{display:grid;gap:6px;max-height:380px;overflow:auto;padding-right:4px}.achievement{display:grid;grid-template-columns:25px 1fr auto;gap:8px;align-items:center;padding:9px;background:#080719c7;border:1px solid #ffffff17;opacity:.57}
.achievement.done{opacity:1;border-color:#5dffbb59}.achievement i{color:#7b7894;font-style:normal;font-size:18px}.achievement.done i{color:#5dffbb}.achievement b{color:#fff;font-size:11px}.achievement p{margin:2px 0 0;color:#aab4d1;font-size:10px}.achievement em{color:#ffe14d;font-style:normal;font-size:10px}
body.high-contrast #game{filter:contrast(1.22) saturate(1.12) brightness(1.04)}body.color-assist #game{filter:saturate(.78) contrast(1.16)}body.high-contrast.color-assist #game{filter:saturate(.82) contrast(1.32) brightness(1.05)}
body.high-contrast .btn,body.high-contrast .card{border-width:2px!important}
@media(max-width:800px),(max-height:560px){.progress-cols{grid-template-columns:1fr}.profile-summary{grid-template-columns:repeat(2,1fr)}.master-grid{grid-template-columns:1fr}}