/* Color and contrast. Keep the original illustrations unmodified. */
:root{--ink:#fff8e7;--muted:#e1e6d4;--green:#9edc32;--panel:rgba(12,30,21,.94);--line:rgba(255,204,94,.4)}
.world-backdrop{background-image:linear-gradient(90deg,rgba(3,16,20,.38),rgba(3,16,20,.06) 45%,rgba(3,16,20,.26)),linear-gradient(0deg,#08120cb3,transparent 62%),var(--scene);filter:saturate(1.2) contrast(1.05) brightness(1.03)}
.grain{opacity:.12}
.menu .eyebrow{width:fit-content;max-width:100%;padding:9px 15px;color:#fff7d7;background:#092334eb;border:1px solid #ffcf6599;border-radius:30px;letter-spacing:2px;font-weight:800;font-size:11px;text-shadow:0 1px 2px #000;box-shadow:0 3px 15px #061b2c4d}
.menu .eyebrow::before{background:#ffd452}
.menu h1{color:#fffaf0;text-shadow:0 2px 3px #061b19,0 5px 22px #00190fcc}
.menu h1 em{color:#ffcc39}
body[data-world=futuro] .menu h1 em{color:#47edff}
.menu-description{color:#fff8e8;text-shadow:0 1px 3px #00170f,0 2px 12px #00170f}
.menu-stats,.studio-note,.menu-caption{color:#fff6dc;text-shadow:0 1px 3px #00170f,0 2px 10px #00170f}
.btn.primary{background:linear-gradient(145deg,#b6f344,#78b61c 62%,#4c8c0d);color:#112500;border-color:#d7ff7e;box-shadow:inset 0 1px #edffc2b3,0 5px 20px #0005}
.btn.gold{background:linear-gradient(135deg,#ffdf70,#e59a17);border-color:#ffe18e}
.menu-nav .btn:not(.primary){background:linear-gradient(145deg,#123d28ed,#09291fed);border-color:#a4c96d88;color:#fff9e7}
.clock-art{filter:saturate(1.14) contrast(1.04) drop-shadow(0 0 12px var(--clock-glow))}
.clock-window{background:radial-gradient(ellipse at 50% 40%,#153425,#07140d 84%);border-color:#eac36ca6}
.clock-target{background:linear-gradient(#5c8527,#254b13);border-color:#ffd274b3}
.clock-target span{color:#fff4d6}
.clock-target strong{color:#fffbee}
.digits{color:#fff9e8}
.world-card::after{background:linear-gradient(transparent 26%,#071d1366 55%,#071a11f5)}
.world-card:not(:disabled)>img{filter:saturate(1.12) contrast(1.04)}
.route-panel{background-image:linear-gradient(0deg,#061a1059,#10241405),var(--scene)}
.route-panel::before{background:linear-gradient(90deg,#061a1126,transparent 50%,#061a1133)}
.level-number{background:radial-gradient(#54751f,#16330d 75%);border-color:#ffd166}
.difficulty-tab.active{background:#a5dc37;color:#152501;border-color:#dbff88}
.screen-heading h1{color:#fffaf0;text-shadow:0 2px 4px #00170f,0 4px 18px #00170faa}
.clock.skin-master .clock-art{filter:saturate(1.05) brightness(1.12) drop-shadow(0 0 12px #ffdc6d77)}
.brand-logo{width:68px;height:68px;object-fit:contain;display:block;background:#000;border:1px solid #77dbe477;border-radius:8px;flex:none}
.brand{text-shadow:0 1px 3px #031e26,0 2px 9px #031e26}
.menu h1{font-size:clamp(44px,4.9vw,74px);letter-spacing:-.025em;word-spacing:.12em;line-height:1.04}
.menu .title-start{display:block;white-space:nowrap}
.menu h1 em{white-space:nowrap}
.menu-scoreboard{width:100%;max-width:390px;margin:24px 0 0;padding:15px 14px 17px;background:linear-gradient(135deg,#123b28f5,#041b17f5);border:1px solid #f5c65bc9;border-radius:12px;box-shadow:0 7px 20px #00180f66,0 0 18px #ffd35822,inset 0 1px #ffe29233}
.scoreboard-heading{font-size:10px;font-weight:800;letter-spacing:2.1px;color:#ffe290;margin-bottom:14px;text-align:left}
.menu-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;text-shadow:none}
.score-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;padding:0 9px;border-right:1px solid #d7b15d66}
.score-cell:last-child{border-right:0}
.score-cell>span{font-size:10px;font-weight:700;letter-spacing:1.1px;color:#ebf5df}
.menu-stats .score-cell strong{font-family:Georgia,serif;font-size:32px;line-height:1.1;color:#fff9e5;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.score-cell strong small{font-size:12px;color:#d9e7cb;font-family:system-ui,sans-serif;font-weight:500;white-space:nowrap}
.menu-stats .points strong{color:#ffdb63;text-shadow:0 0 14px #ffc73233}
@media(max-width:760px){.menu .eyebrow{justify-self:center;justify-content:center;margin:0 auto 12px;padding:8px 13px;font-size:10px;letter-spacing:1.6px}.brand-logo{width:53px;height:53px}.brand{gap:7px}.menu h1{font-size:clamp(29px,7.8vw,58px);word-spacing:.12em;letter-spacing:-.025em}.menu .title-start{display:inline}.menu h1 em::before{content:none}.menu-scoreboard{order:4;max-width:450px;margin:20px auto 0;padding:14px 10px 16px}.menu-stats{margin:0;gap:0}.scoreboard-heading{text-align:center;font-size:10px}.menu-stats .score-cell strong{font-size:30px}.score-cell{padding:0 6px}.score-cell>span{font-size:9px}}

/* Progreso independiente para bonos por puntos. */
.bonus-meter{grid-column:1/-1;width:100%;min-width:0;padding:12px;border:1px solid rgba(236,197,91,.45);border-radius:12px;background:rgba(8,25,22,.88);color:#fff4d6;text-align:left}.bonus-meter .progress-label{gap:8px;font-size:11px}.bonus-meter .progress-track{margin-top:8px}.bonus-meter p{font-size:11px;line-height:1.45;margin:9px 0 0}.result>.bonus-meter{margin:16px 0}.bonus-store .bonus-meter{margin-bottom:14px}

/* Reloj visible: XXL al inicio y reducción gradual con la dificultad. */




.attempt-margin{display:block;font-size:12px;line-height:1.5;margin-top:7px;color:#fff2cf;letter-spacing:.4px}



/* Diana de resultado: mayor tamaño, impacto luminoso y pulso POWER. */
.result>.bullseye{width:210px;height:210px;max-width:65vw;max-height:65vw;border-width:17px;margin:22px auto;background:radial-gradient(circle,#ffe290 0 16%,#5fae6a 17% 38%,#35bac3 39% 60%,#9292ed 61%);border-color:#8b6db9;box-shadow:0 0 30px #4cd8c04d,inset 0 0 18px #fff3;isolation:isolate;animation:target-arrive .4s ease-out both}
.result>.bullseye::after{font-size:40px;text-shadow:0 0 15px #fff4b6;pointer-events:none}
.result>.bullseye::before{content:'';position:absolute;inset:-10px;border:2px solid #8af6e0;border-radius:50%;opacity:.35;pointer-events:none}
.result>.bullseye i{width:16px;height:16px;z-index:2;background:#fff7cb;box-shadow:0 0 8px #fff,0 0 22px #ffe169;animation:target-impact .65s ease-out both}
.result>.bullseye i::after{content:'';position:absolute;inset:-7px;border:2px solid #fff5b7;border-radius:50%;animation:target-ripple .8s ease-out both;pointer-events:none}
.result.power-result>.bullseye{border-color:#edc55a;box-shadow:0 0 38px #ffc94988,inset 0 0 20px #fff5}
.result.power-result>.bullseye::before{border-color:#ffe696;animation:target-power 1.2s ease-out 3}
.result.miss-result>.bullseye{border-color:#9c6d89;box-shadow:0 0 24px #dc99713d}
@keyframes target-arrive{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes target-impact{0%{opacity:.2;transform:translate(-50%,-50%) scale(2)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes target-ripple{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(3)}}
@keyframes target-power{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.22)}}
@media(max-width:760px){.result>.bullseye{width:180px;height:180px;border-width:14px;margin:19px auto}}
.reduced-motion .result>.bullseye,.reduced-motion .result>.bullseye::before,.reduced-motion .result>.bullseye i,.reduced-motion .result>.bullseye i::after{animation:none!important}
@media(prefers-reduced-motion:reduce){.result>.bullseye,.result>.bullseye::before,.result>.bullseye i,.result>.bullseye i::after{animation:none!important}}

/* Supera las reglas antiguas que fijaban el reloj móvil en 310px.
   El porcentaje mantiene la progresión incluso si el contenedor limita el XXL. */



/* Mayor diferencia entre XXL y Leyenda; navegación junto al botón principal. */

.game-navigation{display:flex;gap:10px;width:100%;max-width:500px;margin:13px auto 0}
.game-navigation .btn{flex:1;min-width:0;min-height:45px;padding:11px 12px;display:flex;align-items:center;justify-content:center;gap:8px;background:#102a24ed;border-color:#e3c579;color:#fff5d8;font-size:13px}
.game-navigation .btn:hover{background:#294c35}


/* Panel de saldo legible sobre todos los fondos. */
.game-screen .game-center>.progress-box{padding:15px 16px;margin:12px auto 16px;width:100%;max-width:560px;border:1px solid #e9c66c;border-radius:12px;background:linear-gradient(135deg,#092b25f5,#071d19f5);box-shadow:0 5px 17px #0006,inset 0 1px #fff2;text-align:left}
.game-screen .progress-box .progress-label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;color:#fff5d8;font-size:16px;line-height:1.4;font-weight:700;text-shadow:none}
.game-screen .progress-box .progress-label strong{font-size:14px;color:#ffe082}
.game-screen .progress-box .progress-track{height:15px;margin-top:11px;border:1px solid #d0b87599;border-radius:999px;background:#0008;overflow:hidden}
.game-screen .progress-box .progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#a7e63b,#e7ff82);box-shadow:0 0 13px #c5ff6988}
@media(max-width:380px){.game-screen .game-center>.progress-box{padding:12px}.game-screen .progress-box .progress-label{font-size:14px}.game-screen .progress-box .progress-label strong{font-size:12px}}

/* Carcasa compacta original; solo crecen las cifras del contador. */
.game-center>.clock,.training-layout .game-center>.clock{container-type:inline-size}
.game-center .clock .digits,.training-layout .clock .digits{font-size:var(--digit-size,24cqw);letter-spacing:0;line-height:1;font-variant-numeric:tabular-nums}
@media(min-width:761px){.game-screen .game-layout .game-center>.clock{width:min(100%,clamp(210px,calc(100dvh - 500px),430px))}.game-screen .game-center>.progress-box{padding:10px 12px;margin:6px auto 10px}.game-screen .progress-box .progress-track{height:13px;margin-top:7px}.game-screen .target-label{margin-bottom:0}.game-navigation{margin-top:9px}.game-navigation .btn{min-height:39px;padding:8px}.game-screen .key-hint{margin:7px 0}}
@media(max-width:760px){.attempt-margin{font-size:11px}.game-navigation .btn{font-size:12px}}

/* Marca original sin texto duplicado y título luminoso debajo del icono. */
.topbar{height:104px}
.topbar .brand{display:flex;flex-direction:column;align-items:center;gap:5px;padding:5px 0;flex-shrink:0}
.topbar .brand-logo{width:60px;height:60px}
.topbar .brand-game-title{display:block;font-family:system-ui,sans-serif;font-size:17px;font-weight:850;line-height:1.2;letter-spacing:1px;white-space:nowrap;color:#edffff;text-shadow:0 0 2px #fff,0 0 6px #55ecff,0 0 13px #12c7ff,0 0 22px #943fff}
.screen .route-return{padding:10px 15px;margin-top:14px;color:#fff8df;background:#072721f2;border:1px solid #f1d486;border-radius:10px;font-size:14px;font-weight:750;text-shadow:none;box-shadow:0 3px 12px #00191466}
.screen .route-return:hover{background:#234c36;color:#fff}
.screen .route-world-label{width:fit-content;max-width:100%;padding:10px 14px;color:#fff5d5;background:#082722f2;border:1px solid #edcb7d;border-radius:9px;font-size:12px;font-weight:800;line-height:1.5;letter-spacing:1.3px;text-shadow:0 1px 2px #000;box-shadow:0 3px 12px #00191466}
.screen .route-world-label::before{background:#ffe199;flex-shrink:0}
@media(max-width:760px){.topbar{height:92px;gap:8px}.topbar .brand-logo{width:49px;height:49px}.topbar .brand-game-title{font-size:14px;letter-spacing:.6px}.screen .route-world-label{font-size:11px;letter-spacing:.8px}.screen .route-return{font-size:13px}}
@media(max-width:380px){.topbar .brand-game-title{font-size:12px}.topbar .brand-logo{width:45px;height:45px}}

/* Premios independientes por aciertos consecutivos y POWER acumulados. */
.streak-meters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;grid-column:1/-1;text-align:left}
.streak-meters>div{padding:10px;background:#0a2522ed;border:1px solid #bbcc8477;border-radius:10px;min-width:0;display:flex;flex-direction:column;gap:5px}
.streak-meters span{color:#fff3d5;font-size:10px;line-height:1.3;font-weight:700}
.streak-meters strong{color:#ffe28a;font-size:21px;line-height:1.1;font-variant-numeric:tabular-nums}
.streak-meters small{color:#d2ead9;font-size:10px;line-height:1.3}
.game-stats>.streak-meters{margin:8px 0}.result>.streak-meters,.bonus-store .streak-meters{margin:12px 0}
@media(min-width:761px){.game-stats>.streak-meters{grid-template-columns:1fr}}

/* Cabecera sin marca ni título, con controles a la derecha. */
.topbar{height:72px;justify-content:flex-end}
@media(max-width:760px){.topbar{height:64px}}

/* Titulos de canciones legibles, sin recortar nombres largos. */
.music-list .music-row{padding:17px 15px;gap:14px;align-items:center}
.music-list .track-details{min-width:0;flex:1}
.music-list .music-row .track-details h3{font-size:18px;line-height:1.45;font-weight:750;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;margin:0;color:#fff8e5}
.music-list .track-links{font-size:14px;line-height:1.5}
@media(max-width:760px){.music-list .music-row{padding:15px 12px;gap:12px}.music-list .music-row .track-details h3{font-size:16px}}

/* Escenario de luz para la lista musical, sin recursos adicionales. */
.modal.music-modal{isolation:isolate;border-color:#7ae6e880;background:radial-gradient(ellipse at 0% 4%,#1598ab66,transparent 45%),radial-gradient(ellipse at 100% 38%,#8b39bf55,transparent 50%),radial-gradient(ellipse at 15% 95%,#3357a755,transparent 48%),linear-gradient(145deg,#0b2534,#171729 55%,#091c25);box-shadow:0 25px 90px #000b,0 0 34px #30dce528,inset 0 1px #b5ffff44;background-attachment:local}
.music-modal::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:repeating-radial-gradient(ellipse at -15% 25%,transparent 0 34px,#7aeaf319 35px 36px,transparent 37px 60px),linear-gradient(115deg,transparent 28%,#48e7f415 29%,transparent 42%),linear-gradient(245deg,transparent 20%,#c377f51c 21%,transparent 39%);opacity:.85}
.music-modal h2{color:#f1ffff;text-shadow:0 0 18px #65ddea55}
.music-modal>.modal-lead{color:#d8f1f4}
.music-modal .music-row{background:#081b29e8;border-color:#65bcc766;box-shadow:inset 0 1px #a4e7f511,0 3px 10px #0003}
.music-modal .music-row.current{background:linear-gradient(110deg,#14535aeb,#26234af2);border-color:#7cf4ed;box-shadow:0 0 15px #46e8df33,inset 3px 0 #9afff3}
.music-modal .music-row>.icon-btn{background:#102a38;border-color:#7adddc;color:#e4ffff;box-shadow:0 0 10px #4ce0dc22;flex-shrink:0}
.music-modal .music-row.current>.icon-btn{background:#17626a;box-shadow:0 0 15px #64f5ed55}
.music-modal .modal-close{background:#101d30ed;border-color:#9ccdd4;color:#efffff}
.music-modal .settings-section{background:#071a26db;border:1px solid #5ab5c34d;border-radius:12px;padding:15px}

/* El reproductor inferior comparte el escenario y neón de la lista. */
.player{background:repeating-radial-gradient(ellipse at -10% 30%,transparent 0 32px,#7aeaf315 33px 34px,transparent 35px 60px),radial-gradient(ellipse at 0% 0%,#22b8c94d,transparent 55%),radial-gradient(ellipse at 100% 100%,#a354ce38,transparent 55%),linear-gradient(110deg,#14535af5,#26234af7);border-color:#7cf4ed;box-shadow:0 9px 32px #0008,0 0 16px #46e8df33,inset 3px 0 #9afff3}
.player .player-art{background:radial-gradient(#17626a,#102a38);border-color:#7adddc;color:#efffff;box-shadow:0 0 12px #64f5ed33}
.player .player-info .section-label{color:#b8f1f1}
.player .track-title{color:#fff9e9;text-shadow:0 1px 3px #061521}
.player .player-controls .icon-btn{background:#102a38cc;border-color:#7adddc;color:#efffff;box-shadow:0 0 8px #4ce0dc22}
.player .player-controls .icon-btn:hover{background:#17626a}
.player .player-progress{height:3px;opacity:1}
.player .player-progress i{background:linear-gradient(90deg,#6ceee4,#c3a0ff);box-shadow:0 0 8px #6ceee4}

/* El resumen de rachas debe conservar dos columnas legibles en móvil. */
@media(max-width:760px){.game-layout>.game-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:450px;gap:8px;align-items:stretch}.game-layout>.game-stats>.stat-box{order:0;min-width:0;margin:0}.game-layout>.game-stats>.streak-meters{order:1;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}.game-layout>.game-stats .label{font-size:9px;letter-spacing:.7px;white-space:normal}.game-layout>.game-stats .stat-value{line-height:1.2}.game-layout>.game-stats .streak-meters span{font-size:10px}.game-layout>.game-stats .side-robot{display:none}}

/* Mantener el botón de juego por encima del reproductor en teléfonos bajos. */
@media(max-width:760px){.game-layout>.game-stats>.stat-box{padding:8px 10px;min-height:42px}.game-layout>.game-stats>.stat-box:first-child>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:5px;width:100%}.game-layout>.game-stats>.stat-box:first-child>div:nth-child(2){display:none}.game-layout>.game-stats .label{white-space:nowrap;font-size:8px;letter-spacing:.3px}.game-layout>.game-stats .streak-meters>div{padding:7px 9px;gap:3px}.game-layout>.game-stats .streak-meters strong{font-size:19px}.game-layout>.game-stats .streak-meters small{font-size:9px}}
@media(max-width:760px) and (max-height:820px){.game-screen .game-layout .game-center>.clock{width:min(100%,280px)}}
@media(max-width:760px) and (max-height:760px){.game-screen .game-layout .game-center>.clock{width:min(100%,190px)}}

/* En móvil, usar el espacio libre de la cabecera para salir sin tapar el juego. */
.nav-label-short{display:none}
@media(max-width:760px){.game-navigation{position:fixed;top:14px;left:18px;width:auto;max-width:calc(100% - 160px);margin:0;z-index:21;gap:6px}.game-navigation .btn{font-size:11px;min-height:34px;padding:7px 8px;gap:5px;white-space:nowrap}.game-navigation .icon{width:14px;height:14px}.game-navigation .nav-label-full{display:none}.game-navigation .nav-label-short{display:inline}}
@media(max-width:380px){.game-navigation{left:13px;max-width:calc(100% - 120px)}}

@media(max-width:760px){.game-screen{animation:none;transform:none}}