/* ============ CHROMA RUSH — estilos ============ */
:root{
  --bg:#0b0e17;
  --bg2:#121729;
  --panel:#171d33;
  --panel2:#1e2643;
  --ink:#eaf0ff;
  --muted:#8a93b8;
  --up:#22d38a;
  --down:#ffb020;
  --left:#ff5470;
  --right:#3ba7ff;
  --gold:#ffd54a;
  --good:#37e6a4;
  --bad:#ff4d6d;
  --shadow:0 10px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 800px at 50% -10%, #182146 0%, var(--bg) 60%);
  color:var(--ink);
  overflow:hidden;
  user-select:none;
  touch-action:none;
}
#app{
  position:fixed; inset:0;
  max-width:560px; margin:0 auto;
  overflow:hidden;
}

/* ---------- screens ---------- */
.screen{
  position:absolute; inset:0;
  display:none; flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.screen.active{display:flex;}

/* ---------- logos ---------- */
.logo-big{
  font-weight:900; font-size:min(16vw,68px); letter-spacing:2px;
  text-align:center; line-height:.95; margin:auto;
}
.logo-big .rush{color:var(--gold);}
.logo-big .c1{color:var(--left);} .logo-big .c2{color:var(--right);}
.logo-big .c3{color:var(--up);} .logo-big .c4{color:var(--down);}
.logo{font-weight:900;font-size:min(11vw,52px);letter-spacing:1px;text-align:center;}
.logo .c1{background:linear-gradient(90deg,var(--left),var(--right),var(--up));-webkit-background-clip:text;background-clip:text;color:transparent;}
.logo .rush{color:var(--gold);}

#screen-loading{align-items:center;justify-content:center;}
.loader{width:180px;height:8px;border-radius:8px;background:var(--panel);overflow:hidden;margin-top:24px;}
.loader-bar{height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--left),var(--right),var(--up),var(--down));animation:load 1.1s ease forwards;}
@keyframes load{to{width:100%;}}

/* ---------- topbar / chips ---------- */
.topbar{display:flex;justify-content:space-between;padding:14px 16px;}
.chip{
  background:var(--panel); border:1px solid #2a3358; color:var(--ink);
  border-radius:999px; padding:8px 14px; font-size:15px; font-weight:700;
  display:inline-flex; gap:6px; align-items:center; cursor:pointer;
}
.chip b{color:var(--gold);}
.chip-streak b{color:#ff8a4c;}

/* ---------- menu ---------- */
.menu-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:10px 22px 30px;overflow-y:auto;}
.tagline{color:var(--muted);text-align:center;max-width:340px;margin:0;font-size:15px;line-height:1.4;}
.rank-card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid #2a3358; border-radius:18px; padding:14px 20px;
  display:flex; flex-direction:column; align-items:center; gap:6px; min-width:220px;
  box-shadow:var(--shadow);
}
.rank-card-league{font-weight:900;letter-spacing:3px;font-size:14px;color:var(--gold);}
.rank-card-pos{font-size:22px;color:var(--muted);}
.rank-card-pos b{color:var(--ink);font-size:26px;}
.season-timer{font-size:13px;color:var(--muted);margin-top:2px;}
.season-timer.urgent{color:var(--bad);animation:pulse 1s infinite;}

.btn-play{
  width:min(86%,360px); border:none; cursor:pointer;
  background:linear-gradient(180deg,#ffe27a,var(--gold));
  color:#3a2b00; font-weight:900; font-size:26px; letter-spacing:2px;
  padding:20px; border-radius:20px; box-shadow:0 10px 30px rgba(255,213,74,.35);
  transition:transform .08s;
}
.btn-play:active{transform:scale(.97);}
.menu-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.btn-secondary{
  background:var(--panel); border:1px solid #2a3358; color:var(--ink);
  border-radius:14px; padding:12px 18px; font-size:15px; font-weight:700; cursor:pointer;
}
.btn-secondary:active{transform:scale(.97);}
.btn-mute{background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);margin-top:4px;}

/* ---------- game HUD ---------- */
#screen-game{background:radial-gradient(900px 700px at 50% 45%, #10182f, var(--bg));}
.hud{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px 0;z-index:5;}
.hud-label{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);}
.hud-score b{font-size:30px;font-weight:900;line-height:1;}
.lives{display:flex;gap:5px;margin-top:8px;}
.life{width:14px;height:14px;border-radius:50%;background:var(--bad);box-shadow:0 0 8px rgba(255,77,109,.6);}
.life.lost{background:#33395a;box-shadow:none;}
.hud-center{text-align:center;}
.time-ring{position:relative;width:64px;height:64px;}
.time-ring svg{width:64px;height:64px;transform:rotate(-90deg);}
.tr-bg{fill:none;stroke:#242c4d;stroke-width:4;}
.tr-fg{fill:none;stroke:var(--good);stroke-width:4;stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:0;transition:stroke .3s;}
.time-ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;}
.hud-right{text-align:right;}
.combo{font-weight:900;font-size:30px;line-height:1;color:var(--gold);}
.combo .combo-x{font-size:18px;opacity:.7;}
.combo-bar{width:70px;height:6px;background:#242c4d;border-radius:6px;margin-top:6px;overflow:hidden;margin-left:auto;}
.combo-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),#ff8a4c);border-radius:6px;transition:width .12s;}

.hotzone-banner{
  position:absolute;top:96px;left:50%;transform:translateX(-50%) scale(.6);
  background:linear-gradient(90deg,var(--left),var(--down));
  color:#241000;font-weight:900;padding:8px 20px;border-radius:999px;font-size:18px;
  opacity:0;pointer-events:none;transition:.25s;z-index:6;letter-spacing:1px;
}
.hotzone-banner.show{opacity:1;transform:translateX(-50%) scale(1);}

#canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;}

.ghost-rail{
  position:absolute;right:12px;top:120px;bottom:90px;width:10px;
  background:#1a2140;border-radius:10px;z-index:4;
}
.ghost-marker{position:absolute;right:-8px;transition:bottom .25s ease;display:flex;align-items:center;}
.ghost-marker .gm-avatar{font-size:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.ghost-marker.you{z-index:2;}
.ghost-marker.rival{z-index:1;opacity:.75;}
.ghost-marker.you::before{content:"";position:absolute;right:26px;width:8px;height:8px;border-radius:50%;background:var(--good);top:8px;}

.countdown{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:120px;font-weight:900;z-index:8;pointer-events:none;
}
.countdown b{animation:cd .8s ease;}
@keyframes cd{0%{transform:scale(2.2);opacity:0;}30%{opacity:1;}100%{transform:scale(.6);opacity:0;}}
.btn-quit{position:absolute;top:14px;right:14px;z-index:9;background:rgba(0,0,0,.3);border:none;color:var(--muted);width:34px;height:34px;border-radius:50%;font-size:16px;cursor:pointer;display:none;}
#screen-game.playing .btn-quit{display:block;}

/* ---------- results ---------- */
#screen-results{align-items:center;justify-content:center;padding:20px;}
.results-card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid #2a3358;border-radius:24px;padding:26px 22px;width:min(94%,420px);
  box-shadow:var(--shadow);text-align:center;
}
.results-title{font-weight:900;font-size:30px;letter-spacing:2px;color:var(--gold);}
.results-score{margin:14px 0 6px;}
.results-score b{font-size:64px;font-weight:900;display:block;line-height:1;
  background:linear-gradient(90deg,var(--left),var(--right),var(--up));-webkit-background-clip:text;background-clip:text;color:transparent;}
.results-best{font-size:15px;color:var(--muted);min-height:20px;}
.results-best .newbest{color:var(--gold);font-weight:800;}
.ghost-result{margin:12px 0;font-size:16px;font-weight:700;}
.ghost-result.win{color:var(--good);} .ghost-result.lose{color:var(--muted);}
.rank-change{font-size:16px;margin-bottom:8px;}
.rank-change .up{color:var(--good);font-weight:800;} .rank-change .down{color:var(--bad);font-weight:800;}
.rewards{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0 20px;}
.reward-pill{background:var(--panel);border:1px solid #2a3358;border-radius:12px;padding:8px 14px;font-weight:700;font-size:15px;}
.reward-pill b{color:var(--gold);}
.results-actions{display:flex;flex-direction:column;gap:12px;align-items:center;}
.results-sub{display:flex;gap:10px;}

/* ---------- ranking / shop pages ---------- */
.page-head{display:flex;align-items:center;gap:8px;padding:16px;}
.page-head h2{margin:0;font-size:20px;flex:1;}
.btn-back{background:var(--panel);border:1px solid #2a3358;color:var(--ink);width:40px;height:40px;border-radius:12px;font-size:24px;line-height:1;cursor:pointer;}
.page-timer{font-size:13px;color:var(--muted);}

.league-strip{display:flex;gap:6px;overflow-x:auto;padding:0 16px 12px;}
.league-pip{flex:0 0 auto;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:1px;background:var(--panel);border:1px solid #2a3358;color:var(--muted);}
.league-pip.active{color:#1a1200;}

.ladder{flex:1;overflow-y:auto;padding:0 12px 20px;}
.ladder-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;margin-bottom:8px;background:var(--panel);border:1px solid #232b4c;}
.ladder-row.me{background:linear-gradient(90deg,rgba(255,213,74,.14),var(--panel2));border-color:var(--gold);}
.ladder-row.promo{border-left:4px solid var(--good);}
.ladder-row.releg{border-left:4px solid var(--bad);}
.lr-rank{font-weight:900;font-size:18px;width:34px;text-align:center;color:var(--muted);}
.ladder-row.me .lr-rank{color:var(--gold);}
.lr-av{font-size:24px;}
.lr-name{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lr-score{font-weight:900;font-variant-numeric:tabular-nums;}
.ladder-divider{text-align:center;color:var(--muted);font-size:11px;letter-spacing:2px;padding:6px 0;}
.fair-badge{text-align:center;color:var(--muted);font-size:12px;padding:8px 16px 16px;margin:0;}

/* ---------- shop ---------- */
.shop-tabs{display:flex;gap:8px;padding:0 16px 12px;}
.shop-tab{flex:1;background:var(--panel);border:1px solid #2a3358;color:var(--muted);border-radius:12px;padding:10px;font-weight:700;cursor:pointer;}
.shop-tab.active{color:#1a1200;background:linear-gradient(180deg,#ffe27a,var(--gold));}
.shop-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px 10px;}
.shop-item{background:var(--panel);border:1px solid #2a3358;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;text-align:center;}
.shop-item.owned{border-color:var(--good);}
.shop-item.equipped{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,213,74,.3) inset;}
.si-icon{font-size:38px;line-height:1;}
.si-name{font-weight:800;font-size:15px;}
.si-desc{font-size:12px;color:var(--muted);flex:1;line-height:1.35;}
.si-buy{border:none;border-radius:12px;padding:10px;font-weight:800;cursor:pointer;font-size:14px;}
.si-buy.gems{background:linear-gradient(180deg,#7ad0ff,var(--right));color:#04233c;}
.si-buy.usd{background:linear-gradient(180deg,#ffe27a,var(--gold));color:#3a2b00;}
.si-buy.equip{background:var(--panel2);color:var(--ink);border:1px solid #2a3358;}
.si-buy.equipped{background:var(--good);color:#04241a;}
.si-buy:disabled{opacity:.5;}
.shop-note{font-size:11px;color:var(--muted);text-align:center;padding:6px 16px 16px;margin:0;}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(4,6,14,.7);display:none;align-items:center;justify-content:center;z-index:20;padding:20px;}
.modal.show{display:flex;}
.modal-box{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid #2a3358;border-radius:22px;padding:24px;width:min(94%,420px);text-align:center;box-shadow:var(--shadow);}
.modal-box h3{margin:0 0 16px;font-size:22px;}
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.how-cell{background:var(--panel);border-radius:14px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.how-cell .hc-shape{font-size:30px;}
.how-cell .hc-dir{font-weight:800;font-size:13px;color:var(--muted);}
.how-tip{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 18px;}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--panel2);border:1px solid #2a3358;color:var(--ink);
  padding:12px 18px;border-radius:14px;font-weight:700;font-size:14px;
  opacity:0;pointer-events:none;transition:.25s;z-index:30;max-width:90%;text-align:center;box-shadow:var(--shadow);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@keyframes pulse{50%{opacity:.4;}}

/* screen transition */
.screen{animation:none;}
.screen.active{animation:fade .28s ease;}
@keyframes fade{from{opacity:0;transform:scale(.99);}to{opacity:1;transform:scale(1);}}

/* ---------- nivel / modo / misiones ---------- */
.chip-level b{color:#8ad0ff;}
.mode-indicator{
  background:var(--panel);border:1px solid #2a3358;color:var(--muted);
  border-radius:999px;padding:8px 16px;font-size:14px;cursor:pointer;font-weight:600;
}
.mode-indicator b{color:var(--ink);}
.btn-secondary{position:relative;}
.badge{background:var(--bad);color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:1px 6px;margin-left:2px;display:none;}
.badge.show{display:inline-block;}

.effect-badge{
  position:absolute;top:150px;left:50%;transform:translateX(-50%);
  padding:6px 14px;border-radius:999px;font-weight:800;font-size:14px;z-index:6;
  opacity:0;transition:.2s;pointer-events:none;
}
.effect-badge.slow{background:#1e4a6e;color:#8fd7ff;opacity:1;box-shadow:0 0 16px rgba(90,180,255,.5);}
.effect-badge.fast{background:#6e4a1e;color:#ffd28f;opacity:1;box-shadow:0 0 16px rgba(255,180,60,.5);}

.shuffle-flash{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%) scale(.5);
  font-weight:900;font-size:34px;color:#fff;z-index:7;opacity:0;pointer-events:none;
  text-shadow:0 2px 18px rgba(120,160,255,.9);letter-spacing:2px;
}
.shuffle-flash.show{animation:flashpop .7s ease;}
@keyframes flashpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5);}30%{opacity:1;transform:translate(-50%,-50%) scale(1.1);}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3);}}

/* modos */
.modes-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.mode-card{background:var(--panel);border:2px solid #2a3358;border-radius:16px;padding:14px;text-align:center;cursor:pointer;position:relative;}
.mode-card.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,213,74,.25) inset;}
.mode-card.locked{opacity:.55;cursor:not-allowed;}
.mode-card .mc-icon{font-size:32px;}
.mode-card .mc-name{font-weight:900;font-size:16px;margin-top:4px;}
.mode-card .mc-desc{font-size:12px;color:var(--muted);line-height:1.35;margin-top:4px;}
.mode-card .mc-tag{display:inline-block;margin-top:8px;font-size:10px;font-weight:800;letter-spacing:1px;padding:3px 8px;border-radius:999px;}
.mode-card .mc-tag.ranked{background:rgba(255,213,74,.18);color:var(--gold);}
.mode-card .mc-tag.casual{background:rgba(120,140,200,.16);color:var(--muted);}
.mode-card .mc-lock{position:absolute;top:8px;right:10px;font-size:12px;color:var(--muted);font-weight:800;}

/* misiones */
.missions-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.mission{background:var(--panel);border:1px solid #2a3358;border-radius:14px;padding:12px 14px;text-align:left;}
.mission.done{border-color:var(--good);}
.mission-top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.mission-label{font-weight:700;font-size:14px;}
.mission-reward{font-weight:800;font-size:13px;color:var(--gold);white-space:nowrap;}
.mission.done .mission-reward{color:var(--good);}
.mission-bar{height:8px;background:#242c4d;border-radius:8px;overflow:hidden;margin-top:8px;}
.mission-bar-fill{height:100%;background:linear-gradient(90deg,var(--right),var(--up));border-radius:8px;transition:width .3s;}
.mission.done .mission-bar-fill{background:var(--good);}
.mission-prog{font-size:11px;color:var(--muted);margin-top:4px;}

/* leyenda de especiales en "cómo jugar" */
.how-specials{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;text-align:left;}
.spec-cell{background:var(--panel);border-radius:12px;padding:8px 10px;font-size:12px;display:flex;gap:8px;align-items:center;}
.spec-cell .se{font-size:20px;}
.spec-cell b{color:var(--ink);}

/* ---------- perfil ---------- */
.profile-body{flex:1;overflow-y:auto;padding:0 16px 24px;}
.profile-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0 18px;}
.profile-avatar{font-size:64px;width:96px;height:96px;border-radius:50%;background:var(--panel);border:2px solid #2a3358;display:flex;align-items:center;justify-content:center;}
.profile-name{background:none;border:none;color:var(--ink);font-size:22px;font-weight:800;cursor:pointer;}
.profile-level{color:var(--gold);font-weight:800;letter-spacing:1px;}
.xp-bar{width:min(80%,300px);height:8px;background:#242c4d;border-radius:8px;overflow:hidden;}
.xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),#ff8a4c);border-radius:8px;transition:width .3s;}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
.stat-cell{background:var(--panel);border:1px solid #2a3358;border-radius:14px;padding:12px;text-align:center;}
.stat-cell .sc-val{font-size:24px;font-weight:900;}
.stat-cell .sc-lbl{font-size:11px;color:var(--muted);letter-spacing:.5px;margin-top:2px;}
.avatar-label,.boost-tray-label{font-size:12px;color:var(--muted);letter-spacing:1px;margin:6px 0 8px;text-transform:uppercase;}
.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.avatar-opt{background:var(--panel);border:2px solid #2a3358;border-radius:12px;font-size:26px;padding:8px 0;cursor:pointer;text-align:center;}
.avatar-opt.sel{border-color:var(--gold);background:var(--panel2);}

/* ---------- logros ---------- */
.ach-list{flex:1;overflow-y:auto;padding:0 12px 20px;display:flex;flex-direction:column;gap:8px;}
.ach{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid #232b4c;border-radius:14px;padding:12px 14px;}
.ach.done{border-color:var(--gold);background:linear-gradient(90deg,rgba(255,213,74,.1),var(--panel));}
.ach-icon{font-size:30px;filter:grayscale(1);opacity:.5;}
.ach.done .ach-icon{filter:none;opacity:1;}
.ach-body{flex:1;min-width:0;}
.ach-name{font-weight:800;font-size:15px;}
.ach-desc{font-size:12px;color:var(--muted);}
.ach-mini{height:6px;background:#242c4d;border-radius:6px;overflow:hidden;margin-top:6px;}
.ach-mini-fill{height:100%;background:linear-gradient(90deg,var(--right),var(--up));border-radius:6px;}
.ach.done .ach-mini-fill{background:var(--gold);}
.ach-reward{font-size:12px;font-weight:800;color:var(--gold);white-space:nowrap;}
.ach.done .ach-reward::after{content:" ✓";color:var(--good);}

/* ---------- bandeja de mejoras (modal de modos) ---------- */
.boost-tray{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;}
.boost-chip{background:var(--panel);border:2px solid #2a3358;border-radius:12px;padding:8px 10px;cursor:pointer;text-align:center;min-width:64px;}
.boost-chip.armed{border-color:var(--good);background:var(--panel2);}
.boost-chip.empty{opacity:.4;cursor:default;}
.boost-chip .bc-ic{font-size:22px;}
.boost-chip .bc-ct{font-size:11px;color:var(--muted);font-weight:700;}
.boost-chip.armed .bc-ct{color:var(--good);}

/* ---------- online / ranking por modo / pulido ---------- */
.net-badge{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.5px;margin-bottom:2px;}
.net-badge.online{color:var(--good);}

.rank-tabs{display:flex;gap:6px;overflow-x:auto;padding:0 16px 8px;-webkit-overflow-scrolling:touch;}
.rank-tabs::-webkit-scrollbar{height:0;}
.rank-tab{flex:0 0 auto;background:var(--panel);border:2px solid #2a3358;color:var(--muted);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;}
.rank-tab.active{background:var(--panel2);}
.rank-source{font-size:12px;color:var(--muted);padding:0 16px 8px;}

.confetti{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;opacity:.95;z-index:40;pointer-events:none;animation:confetti-fall 1.6s ease-in forwards;}
@keyframes confetti-fall{0%{transform:translateY(0) rotate(0);opacity:1;}100%{transform:translateY(92vh) rotate(560deg);opacity:0;}}

/* fondo animado sutil del menú */
#screen-menu{position:absolute;overflow:hidden;}
#screen-menu::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(300px 300px at 20% 28%, rgba(255,84,112,.13), transparent 62%),
    radial-gradient(320px 320px at 82% 18%, rgba(59,167,255,.13), transparent 62%),
    radial-gradient(300px 300px at 62% 82%, rgba(34,211,138,.11), transparent 62%),
    radial-gradient(280px 280px at 30% 90%, rgba(160,107,255,.11), transparent 62%);
  animation:drift 20s ease-in-out infinite alternate;}
#screen-menu>*{position:relative;z-index:1;}
@keyframes drift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-5%,4%) scale(1.1);}}

/* ---------- pulido visual v3 ---------- */
/* logo animado (shimmer) */
.logo .c1{background:linear-gradient(90deg,var(--left),var(--right),var(--up),var(--down),var(--left));
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s linear infinite;}
@keyframes shimmer{to{background-position:220% center;}}

/* viñeta in-game para profundidad */
#screen-game::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0,0,0,.38));}

/* popup de hitos de combo */
.milestone-pop{position:absolute;top:37%;left:50%;transform:translate(-50%,-50%) scale(.4);
  font-weight:900;font-size:clamp(26px,8vw,40px);color:#fff;z-index:7;opacity:0;pointer-events:none;
  text-align:center;white-space:nowrap;text-shadow:0 3px 24px rgba(255,180,60,.95),0 0 10px rgba(255,255,255,.5);}
.milestone-pop.show{animation:milepop 1.1s ease;}
@keyframes milepop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4);}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.12);}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-62%) scale(1);}}

/* título en perfil */
.profile-title{font-size:13px;font-weight:800;color:#8ad0ff;background:var(--panel);border:1px solid #2a3358;border-radius:999px;padding:3px 14px;}

/* logros por categoría */
.ach-cat{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:12px;letter-spacing:1.5px;color:var(--muted);margin:16px 4px 4px;text-transform:uppercase;}
.ach-cat span{color:var(--gold);}

/* sonido / música */
.sound-row{display:flex;gap:16px;justify-content:center;}
.btn-mute.off{opacity:.38;}

/* desafíos semanales */
.weekly-title{font-size:13px;font-weight:800;letter-spacing:1px;color:var(--gold);margin:16px 0 8px;text-align:left;}

/* amigos / duelos */
.friends-body{flex:1;overflow-y:auto;padding:0 16px 24px;}
.mycode-box{background:var(--panel);border:1px solid #2a3358;border-radius:16px;padding:14px;text-align:center;margin-bottom:12px;}
.mycode-label{font-size:11px;color:var(--muted);letter-spacing:.5px;margin-bottom:6px;}
.mycode{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;font-weight:800;color:#8ad0ff;word-break:break-all;margin-bottom:10px;background:var(--bg);border-radius:10px;padding:9px;}
.add-friend{display:flex;gap:8px;margin-bottom:12px;}
.add-friend input{flex:1;background:var(--panel);border:1px solid #2a3358;border-radius:12px;color:var(--ink);padding:12px;font-size:14px;}
.add-friend input:focus{outline:none;border-color:var(--right);}
.friends-list{display:flex;flex-direction:column;gap:8px;}
.friend-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid #232b4c;border-radius:14px;padding:12px 14px;}
.friend-row.win{border-left:4px solid var(--good);}
.friend-row.lose{border-left:4px solid var(--bad);}
.friend-av{font-size:24px;}
.friend-info{flex:1;min-width:0;}
.friend-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.friend-vs{font-size:12px;color:var(--muted);}
.friend-vs b{color:var(--ink);}
.friend-badge{font-weight:900;font-size:18px;}
.friend-del{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:4px;}
.friends-empty{text-align:center;color:var(--muted);padding:24px 12px;font-size:14px;line-height:1.5;}

/* coop / reto / temporada */
.modes-extra{display:flex;gap:8px;margin-bottom:12px;}
.modes-extra .btn-secondary{flex:1;}
.season-league{font-weight:900;font-size:28px;letter-spacing:3px;margin:8px 0 2px;}
.season-rank{color:var(--muted);font-size:14px;}
.season-reward{font-size:30px;font-weight:900;color:var(--gold);margin:12px 0;}
#modal-challenge .rank-tabs{padding:0 0 12px;justify-content:flex-start;flex-wrap:wrap;overflow:visible;}
#modal-challenge .btn-play{margin-bottom:10px;}

/* ---------- temas desbloqueables ---------- */
body.theme-ocean{background:radial-gradient(1200px 800px at 50% -10%, #0d3a63 0%, #061826 60%);}
body.theme-ocean #screen-game{background:radial-gradient(900px 700px at 50% 45%, #0a2c4d, #061826);}
body.theme-forest{background:radial-gradient(1200px 800px at 50% -10%, #10402a 0%, #071a12 60%);}
body.theme-forest #screen-game{background:radial-gradient(900px 700px at 50% 45%, #0d3220, #071a12);}
body.theme-grape{background:radial-gradient(1200px 800px at 50% -10%, #3a1a5e 0%, #160a24 60%);}
body.theme-grape #screen-game{background:radial-gradient(900px 700px at 50% 45%, #2a1247, #160a24);}
body.theme-mint{background:radial-gradient(1200px 800px at 50% -10%, #0f4a3a 0%, #06201a 60%);}
body.theme-mint #screen-game{background:radial-gradient(900px 700px at 50% 45%, #0b3a2e, #06201a);}
body.theme-rose{background:radial-gradient(1200px 800px at 50% -10%, #5e1a34 0%, #240a16 60%);}
body.theme-rose #screen-game{background:radial-gradient(900px 700px at 50% 45%, #47142a, #240a16);}
body.theme-carbon{background:radial-gradient(1200px 800px at 50% -10%, #23262b 0%, #0a0b0d 60%);}
body.theme-carbon #screen-game{background:radial-gradient(900px 700px at 50% 45%, #17181c, #0a0b0d);}
body.theme-sunset{background:radial-gradient(1200px 800px at 50% -10%, #3a1c4a 0%, #150a1f 60%);}
body.theme-sunset #screen-game{background:radial-gradient(900px 700px at 50% 45%, #2a1330, #150a1f);}
body.theme-mono{background:radial-gradient(1200px 800px at 50% -10%, #262a33 0%, #0c0d10 60%);}
body.theme-mono #screen-game{background:radial-gradient(900px 700px at 50% 45%, #1a1c22, #0c0d10);}
body.theme-candy{background:radial-gradient(1200px 800px at 50% -10%, #4a1f3a 0%, #1c0d18 60%);}
body.theme-candy #screen-game{background:radial-gradient(900px 700px at 50% 45%, #35142a, #1c0d18);}

@media (min-width:480px){
  .shop-grid{grid-template-columns:1fr 1fr 1fr;}
}