/* ============================================================
   MemoKey · Hoja de estilos
   ADN visual original (galaxia neón + glassmorphism) +
   componentes nuevos para la versión online (cuentas,
   grupos, cursos, temas, ranking, perfil y admin).
   ============================================================ */
:root{
  --bg1:#0f0c29; --bg2:#241b4d; --bg3:#16213e;
  --neon:#00e5ff; --neon2:#7c4dff; --gold:#ffd54a;
  --ok:#2ecc71; --bad:#ff5470; --ink:#eaf2ff;
  --card:rgba(255,255,255,.08); --line:rgba(255,255,255,.18);
  --card-2:rgba(255,255,255,.05);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{min-height:100%;}
body{font-family:"Avenir Next","Trebuchet MS","Segoe UI",system-ui,Arial,sans-serif; color:var(--ink);
  background:linear-gradient(-45deg,var(--bg1),var(--bg2),var(--bg3),#1a1a40); background-size:400% 400%;
  animation:bgmove 20s ease infinite; min-height:100%; overflow-x:hidden;}
@keyframes bgmove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.bg-photo{position:fixed; inset:0; z-index:0; background:url('assets/fondo.jpg') center/cover no-repeat;}
.bg-photo::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,6,30,.16), rgba(8,6,30,.44));}
#starfield{position:fixed; inset:0; z-index:1; pointer-events:none;}
.bg-orbs{position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden;}
.bg-orbs span{position:absolute; border-radius:50%; filter:blur(70px); opacity:.32; animation:orbFloat 16s ease-in-out infinite;}
.bg-orbs span:nth-child(1){width:280px;height:280px;left:-60px;top:5%; background:radial-gradient(circle,rgba(124,77,255,.6),transparent 70%);}
.bg-orbs span:nth-child(2){width:240px;height:240px;right:-50px;top:45%; background:radial-gradient(circle,rgba(0,229,255,.5),transparent 70%); animation-delay:-5s;}
.bg-orbs span:nth-child(3){width:200px;height:200px;left:30%;bottom:-40px; background:radial-gradient(circle,rgba(255,213,74,.4),transparent 70%); animation-delay:-9s;}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-26px) scale(1.15)}}

.wrap{position:relative; z-index:2; max-width:980px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:clamp(20px,5vh,56px) 18px 56px;}
.wrap.admin-wrap{max-width:1180px;}
.screen{display:none; width:100%; animation:fade .45s ease;}
.screen.active{display:block;}
@keyframes fade{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.card{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:28px 24px;
  backdrop-filter:blur(8px); box-shadow:0 20px 60px rgba(0,0,0,.45);}
h1{font-size:clamp(38px,9vw,76px); line-height:1; letter-spacing:2px; font-weight:900;
  background:linear-gradient(90deg,var(--neon),var(--neon2),var(--gold),var(--neon)); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(0,229,255,.5)); text-align:center; animation:shine 5s linear infinite;}
@keyframes shine{to{background-position:200% center}}
.tagline{text-align:center; font-size:clamp(15px,3.4vw,20px); opacity:.9; margin-top:10px;}
.lock-emoji{font-size:clamp(44px,12vw,82px); text-align:center; display:block; margin-bottom:2px; animation:float 3s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; border:none; border-radius:16px; font-size:clamp(17px,3.6vw,22px);
  font-family:inherit; font-weight:800; padding:16px 28px; color:#06121f; background:linear-gradient(90deg,var(--neon),var(--neon2));
  box-shadow:0 10px 26px rgba(124,77,255,.45); transition:transform .12s ease, box-shadow .12s ease; letter-spacing:.5px;}
.btn:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 16px 34px rgba(0,229,255,.55);}
.btn:active{transform:translateY(0) scale(.99);}
.btn.big{width:100%; margin-top:14px; padding:20px;}
.btn.ghost{background:transparent; color:var(--ink); border:2px solid var(--line); box-shadow:none;}
.btn.ghost:hover{border-color:var(--neon);}
.btn.small{padding:9px 14px; font-size:14px; border-radius:12px;}
.btn.gold{background:linear-gradient(90deg,var(--gold),#ff9f1c); color:#2a1500; box-shadow:0 10px 26px rgba(255,213,74,.4);}
.btn.danger{background:linear-gradient(90deg,#ff5470,#c0223c); color:#fff; box-shadow:0 10px 26px rgba(255,84,112,.35);}
.btn.dis{opacity:.45; filter:grayscale(.6); cursor:default;}
.btn:disabled{cursor:default;}
.section-title{text-align:center; font-size:clamp(22px,5vw,32px); margin-bottom:6px; font-weight:900;}
.section-sub{text-align:center; opacity:.8; margin:8px 0 14px; font-size:14px;}

/* píldoras */
.coinpill{display:inline-flex; align-items:center; gap:6px; background:rgba(255,213,74,.16); border:1px solid var(--gold); color:var(--gold);
  font-weight:800; padding:7px 14px; border-radius:20px;}
.keypill{display:inline-flex; align-items:center; gap:6px; background:rgba(0,229,255,.14); border:1px solid var(--neon); color:var(--neon);
  font-weight:800; padding:7px 14px; border-radius:20px;}

/* cabecera de pantalla reutilizable */
.scr-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:10px; flex-wrap:wrap;}
.scr-head .head-pills{display:flex; gap:8px; align-items:center;}

/* avatares (imagen) */
.av-pic{width:100%; height:100%; background-size:cover; background-position:center 18%; border-radius:inherit;}

/* ============================================================
   LOBBY
   ============================================================ */
.lobby{text-align:center; position:relative; overflow:hidden;}
.lobby-fx{position:absolute; inset:0; pointer-events:none; z-index:0;}
.lobby-fx i{position:absolute; bottom:-10px; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(255,213,74,.6) 50%,transparent 70%); opacity:.8; animation:rise linear infinite;}
.lobby-fx i:nth-child(1){left:10%; animation-duration:7s; animation-delay:0s}
.lobby-fx i:nth-child(2){left:25%; animation-duration:9s; animation-delay:-2s; background:radial-gradient(circle,#fff,rgba(0,229,255,.6) 50%,transparent 70%)}
.lobby-fx i:nth-child(3){left:45%; animation-duration:6s; animation-delay:-3s}
.lobby-fx i:nth-child(4){left:65%; animation-duration:10s; animation-delay:-1s; background:radial-gradient(circle,#fff,rgba(124,77,255,.7) 50%,transparent 70%)}
.lobby-fx i:nth-child(5){left:80%; animation-duration:8s; animation-delay:-4s}
.lobby-fx i:nth-child(6){left:92%; animation-duration:11s; animation-delay:-6s; background:radial-gradient(circle,#fff,rgba(0,229,255,.6) 50%,transparent 70%)}
@keyframes rise{0%{transform:translateY(0) scale(.6); opacity:0}10%{opacity:.9}100%{transform:translateY(-340px) scale(1.1); opacity:0}}
.lobby > *{position:relative; z-index:1;}
.lobby-logo{width:min(180px,48%); aspect-ratio:1; height:auto; object-fit:cover; display:block; margin:4px auto 6px; border-radius:28px; filter:drop-shadow(0 6px 26px rgba(124,77,255,.6)); animation:float 4s ease-in-out infinite;}
.lobby-avatar{width:108px; height:108px; margin:6px auto 4px; border-radius:50%; overflow:hidden;
  border:3px solid rgba(255,213,74,.55); box-shadow:0 0 26px rgba(124,77,255,.6), 0 0 50px rgba(0,229,255,.3); animation:float 4s ease-in-out infinite;}
.lobby-hi{font-weight:800; font-size:20px; margin:4px 0 6px;}
.lobby-grp{font-size:13px; opacity:.78; margin-bottom:8px;}
.lobby-stats{display:flex; gap:10px; justify-content:center; margin-bottom:6px; flex-wrap:wrap;}
.menu-row{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px;}
.menu-card{cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 8px;
  border-radius:18px; background:var(--card); border:2px solid var(--line); color:var(--ink); font-family:inherit; font-weight:800; font-size:14px; transition:.16s;}
.menu-card:hover{transform:translateY(-3px); border-color:var(--neon);}
.menu-card .mc-ico{font-size:30px;}

/* ============================================================
   BIENVENIDA / LOGIN
   ============================================================ */
.welcome{text-align:center; position:relative; overflow:hidden;}
.welcome-logo{width:min(170px,46%); aspect-ratio:1; height:auto; display:block; margin:0 auto 4px; border-radius:26px; filter:drop-shadow(0 6px 26px rgba(124,77,255,.6)); animation:float 4s ease-in-out infinite;}
.role-toggle{display:flex; gap:8px; background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:16px; padding:6px; margin:18px auto 6px; max-width:360px;}
.role-toggle button{flex:1; cursor:pointer; border:none; border-radius:11px; padding:12px 8px; font-family:inherit; font-weight:800; font-size:15px;
  background:transparent; color:var(--ink); opacity:.7; transition:.16s; display:flex; align-items:center; justify-content:center; gap:7px;}
.role-toggle button.active{background:linear-gradient(90deg,var(--neon),var(--neon2)); color:#06121f; opacity:1; box-shadow:0 6px 16px rgba(124,77,255,.4);}
.field{text-align:left; margin:14px auto 0; max-width:380px;}
.field label{display:block; font-size:13px; font-weight:800; opacity:.85; margin:0 0 6px 4px; letter-spacing:.3px;}
.input{width:100%; padding:15px 16px; border-radius:14px; border:2px solid var(--line); background:rgba(0,0,0,.28);
  color:var(--ink); font-family:inherit; font-size:17px; transition:.15s; outline:none;}
.input::placeholder{color:rgba(234,242,255,.4);}
.input:focus{border-color:var(--neon); box-shadow:0 0 0 3px rgba(0,229,255,.18);}
.input.code{text-align:center; letter-spacing:6px; font-weight:900; font-size:24px; text-transform:uppercase;}
.nameinput{width:100%; padding:14px; border-radius:14px; border:2px solid var(--line); background:rgba(0,0,0,.25);
  color:var(--ink); font-family:inherit; font-size:17px; text-align:center; margin-bottom:4px; outline:none;}
.nameinput:focus{border-color:var(--neon);}
.welcome-note{font-size:12.5px; opacity:.6; margin-top:14px; max-width:400px; margin-left:auto; margin-right:auto;}
.divider{display:flex; align-items:center; gap:12px; color:rgba(234,242,255,.4); font-size:12px; font-weight:700; margin:18px auto; max-width:380px;}
.divider::before,.divider::after{content:''; flex:1; height:1px; background:var(--line);}

/* mini-selector de avatar en login */
.av-strip{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:10px auto 2px; max-width:420px;}
.av-strip .av-chip{width:54px; height:54px; border-radius:50%; overflow:hidden; border:2px solid var(--line); cursor:pointer; transition:.15s; flex-shrink:0;}
.av-strip .av-chip:hover{transform:translateY(-2px); border-color:var(--neon);}
.av-strip .av-chip.sel{border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,213,74,.35), 0 0 18px rgba(255,213,74,.4);}

/* ============================================================
   GRUPO
   ============================================================ */
.grp-choices{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0;}
@media(max-width:560px){ .grp-choices{grid-template-columns:1fr;} }
.grp-choice{cursor:pointer; text-align:center; padding:22px 16px; border-radius:20px; background:var(--card); border:2px solid var(--line); transition:.16s;}
.grp-choice:hover{transform:translateY(-3px); border-color:var(--neon); box-shadow:0 14px 30px rgba(0,0,0,.35);}
.grp-choice .gc-ico{font-size:44px; display:block; margin-bottom:8px;}
.grp-choice .gc-nm{font-weight:900; font-size:18px; margin-bottom:4px;}
.grp-choice .gc-sub{font-size:13px; opacity:.75; line-height:1.3;}
.code-cells{display:flex; gap:8px; justify-content:center; margin:8px 0;}
.code-cells .cell{width:46px; height:58px; border-radius:12px; border:2px solid var(--line); background:rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:900; color:var(--neon); text-transform:uppercase;}
.code-cells .cell.on{border-color:var(--neon); box-shadow:0 0 14px rgba(0,229,255,.3);}
.grp-found{display:flex; align-items:center; gap:14px; padding:16px; border-radius:16px; margin-top:14px;
  background:rgba(46,204,113,.12); border:1px solid rgba(46,204,113,.45);}
.grp-found .gf-emoji{font-size:40px;}
.grp-found .gf-nm{font-weight:900; font-size:18px;}
.grp-found .gf-meta{font-size:13px; opacity:.8;}

/* ============================================================
   SELECCIÓN DE CURSO
   ============================================================ */
.course-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:6px;}
@media(max-width:720px){ .course-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:480px){ .course-grid{grid-template-columns:repeat(2,1fr);} }
.course-card{position:relative; cursor:pointer; text-align:center; padding:18px 10px 16px; border-radius:18px;
  background:var(--card); border:2px solid var(--line); transition:.16s; overflow:hidden;}
.course-card::before{content:''; position:absolute; inset:0; background:var(--ccol,transparent); opacity:.14; transition:.16s;}
.course-card:hover{transform:translateY(-4px); border-color:var(--cline,var(--neon)); box-shadow:0 14px 30px rgba(0,0,0,.4);}
.course-card:hover::before{opacity:.24;}
.course-card.sel{border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,213,74,.3), 0 14px 30px rgba(0,0,0,.4);}
.course-card > *{position:relative; z-index:1;}
.course-card .cc-stage{font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; opacity:.7;}
.course-card .cc-num{font-size:38px; font-weight:900; line-height:1; margin:6px 0 2px; color:var(--ccol2,var(--ink));}
.course-card .cc-lvl{font-size:13px; font-weight:800;}
.course-card .cc-emoji{font-size:24px; margin-top:6px; display:block;}
.stage-label{font-size:13px; font-weight:900; letter-spacing:1px; text-transform:uppercase; opacity:.7; margin:18px 0 8px; padding-left:4px;
  display:flex; align-items:center; gap:8px;}
.stage-label::after{content:''; flex:1; height:1px; background:var(--line);}

/* ============================================================
   SELECCIÓN DE TEMA
   ============================================================ */
.topic-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:6px;}
@media(max-width:720px){ .topic-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:430px){ .topic-grid{grid-template-columns:1fr;} }
.topic-card{position:relative; cursor:pointer; padding:18px 16px; border-radius:20px; background:var(--card);
  border:2px solid var(--line); transition:.16s; overflow:hidden; text-align:left; display:flex; flex-direction:column; gap:6px; min-height:130px;}
.topic-card::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 0%, var(--tcol,transparent), transparent 60%); opacity:.5; transition:.16s;}
.topic-card:hover{transform:translateY(-4px); border-color:var(--tline,var(--neon)); box-shadow:0 16px 34px rgba(0,0,0,.4);}
.topic-card:hover::before{opacity:.8;}
.topic-card > *{position:relative; z-index:1;}
.topic-card .tc-ico{width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:30px;
  background:var(--tbg,rgba(255,255,255,.08)); border:1px solid var(--tline,var(--line)); margin-bottom:2px;}
.topic-card .tc-nm{font-weight:900; font-size:18px;}
.topic-card .tc-sub{font-size:12.5px; opacity:.72; line-height:1.3;}
.topic-card .tc-tag{margin-top:auto; align-self:flex-start; font-size:11px; font-weight:800; padding:3px 9px; border-radius:20px;
  background:rgba(255,255,255,.1); border:1px solid var(--line);}
.topic-card .tc-new{position:absolute; top:12px; right:12px; z-index:2; font-size:10px; font-weight:900; letter-spacing:.5px;
  background:linear-gradient(90deg,var(--gold),#ff9f1c); color:#2a1500; padding:3px 9px; border-radius:20px; box-shadow:0 4px 12px rgba(255,213,74,.4);}
.topic-card.remix{border-style:dashed; border-color:rgba(255,213,74,.5);}
.topic-card.remix .tc-ico{background:linear-gradient(135deg,rgba(124,77,255,.3),rgba(0,229,255,.2));}
/* tarjeta "Escape de la Academia" — destacada a todo el ancho */
.topic-card.escape{grid-column:1/-1; flex-direction:row; align-items:center; gap:16px; min-height:auto;
  background:linear-gradient(100deg, rgba(124,77,255,.28), rgba(0,229,255,.14)); border-color:rgba(255,213,74,.55);}
.topic-card.escape .tc-ico{width:62px; height:62px; font-size:34px; background:linear-gradient(135deg,rgba(255,213,74,.35),rgba(124,77,255,.3)); flex-shrink:0;}
.topic-card.escape .tc-nm{font-size:20px;}
.topic-card.escape .tc-tag{position:absolute; top:14px; right:14px; margin:0; background:linear-gradient(90deg,var(--gold),#ff9f1c); color:#2a1500; border-color:transparent;}
.topic-row.escape{background:linear-gradient(100deg, rgba(124,77,255,.28), rgba(0,229,255,.12)); border-color:rgba(255,213,74,.5);}
.topic-row.escape .tr-ico{background:linear-gradient(135deg,rgba(255,213,74,.35),rgba(124,77,255,.3));}

/* ============================================================
   RANKING ONLINE
   ============================================================ */
.tabs{display:flex; gap:8px; background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:16px; padding:6px; margin:6px auto 16px; max-width:420px;}
.tabs button{flex:1; cursor:pointer; border:none; border-radius:11px; padding:11px 8px; font-family:inherit; font-weight:800; font-size:14px;
  background:transparent; color:var(--ink); opacity:.7; transition:.15s; display:flex; align-items:center; justify-content:center; gap:6px;}
.tabs button.active{background:linear-gradient(90deg,var(--neon),var(--neon2)); color:#06121f; opacity:1;}
.podium{display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:8px; align-items:end; margin:8px 0 18px;}
.podium .pod{display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; border-radius:18px 18px 14px 14px;
  background:var(--card); border:1px solid var(--line); position:relative;}
.podium .pod .p-av{width:60px; height:60px; border-radius:50%; overflow:hidden; border:3px solid var(--line);}
.podium .pod.p1{transform:translateY(-12px);}
.podium .pod.p1 .p-av{border-color:var(--gold); box-shadow:0 0 22px rgba(255,213,74,.55);}
.podium .pod.p2 .p-av{border-color:#cfe3ff;}
.podium .pod.p3 .p-av{border-color:#ffb98a;}
.podium .pod .p-medal{font-size:26px;}
.podium .pod .p-nm{font-weight:900; font-size:14px; text-align:center; line-height:1.1;}
.podium .pod .p-score{font-size:13px; font-weight:800; color:var(--gold);}
.podium .pod .p-bar{width:100%; border-radius:8px; margin-top:4px; background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04));}
.podium .pod.p1 .p-bar{height:42px;} .podium .pod.p2 .p-bar{height:28px;} .podium .pod.p3 .p-bar{height:18px;}
.rank{}
.rank h3{font-size:18px; margin-bottom:10px; text-align:center;}
.rank-list{display:flex; flex-direction:column; gap:6px;}
.rank-row{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:14px; background:var(--card-2); border:1px solid transparent; font-size:14px; transition:.14s;}
.rank-row .r-pos{font-weight:900; width:30px; text-align:center; opacity:.7;}
.rank-row .r-av{width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid var(--line);}
.rank-row .r-nm{font-weight:800; flex:1;}
.rank-row .r-grp{font-size:11.5px; opacity:.6; font-weight:700;}
.rank-row .r-score{font-weight:900; color:var(--gold); display:flex; align-items:center; gap:5px;}
.rank-row.me{background:rgba(255,213,74,.14); border-color:rgba(255,213,74,.4); box-shadow:0 0 0 1px rgba(255,213,74,.2);}
.rank-row.me .r-pos{color:var(--gold); opacity:1;}
.rank-empty{text-align:center; opacity:.7; padding:20px;}
.rank-sticky{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);}

/* ============================================================
   PERFIL / HISTORIAL
   ============================================================ */
.profile-head{display:flex; align-items:center; gap:18px; margin-bottom:18px; flex-wrap:wrap;}
.profile-av{width:96px; height:96px; border-radius:50%; overflow:hidden; border:3px solid var(--gold); flex-shrink:0;
  box-shadow:0 0 26px rgba(0,229,255,.4), 0 0 50px rgba(124,77,255,.3);}
.profile-id{flex:1; min-width:160px;}
.profile-id .pi-nm{font-size:26px; font-weight:900; line-height:1.1;}
.profile-id .pi-grp{font-size:13px; opacity:.78; margin-top:2px;}
.profile-id .pi-pills{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:6px 0 18px;}
@media(max-width:560px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }
.stat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 10px; text-align:center;}
.stat .v{font-size:clamp(22px,6vw,30px); font-weight:900; color:var(--gold);}
.stat .l{font-size:12px; opacity:.8; margin-top:2px;}
.block-title{font-size:15px; font-weight:900; letter-spacing:.5px; margin:6px 0 10px; display:flex; align-items:center; gap:8px;}
.medal-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.medal-chip{display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 14px; border-radius:16px; min-width:84px;
  background:var(--card); border:1px solid var(--line); position:relative;}
.medal-chip.locked{opacity:.4; filter:grayscale(.7);}
.medal-chip .m-ico{font-size:32px;}
.medal-chip .m-nm{font-size:11px; font-weight:800; text-align:center; line-height:1.1;}
.history-list{display:flex; flex-direction:column; gap:8px;}
.hist-row{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:var(--card-2); border:1px solid var(--line);}
.hist-row .h-ico{font-size:26px; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); flex-shrink:0;}
.hist-row .h-main{flex:1; min-width:0;}
.hist-row .h-nm{font-weight:800; font-size:14px;}
.hist-row .h-meta{font-size:12px; opacity:.7;}
.hist-row .h-res{text-align:right; font-weight:900; font-size:14px;}
.hist-row .h-res.win{color:var(--ok);} .hist-row .h-res.lose{color:var(--bad);}
.progress-track{height:12px; border-radius:10px; background:rgba(255,255,255,.1); overflow:hidden; margin:4px 0 2px;}
.progress-track .pf{height:100%; border-radius:10px; background:linear-gradient(90deg,var(--neon),var(--neon2)); box-shadow:0 0 12px rgba(0,229,255,.4);}

/* empty states */
.empty{text-align:center; padding:30px 16px; opacity:.85;}
.empty .e-emoji{font-size:54px; display:block; margin-bottom:10px; animation:float 3.4s ease-in-out infinite;}
.empty .e-nm{font-weight:900; font-size:18px; margin-bottom:4px;}
.empty .e-sub{font-size:13px; opacity:.7; max-width:300px; margin:0 auto;}

/* ============================================================
   PANEL DE ADMIN
   ============================================================ */
.admin-topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap;}
.admin-brand{display:flex; align-items:center; gap:12px;}
.admin-brand img{width:46px; height:46px; border-radius:12px;}
.admin-brand .ab-nm{font-weight:900; font-size:20px; line-height:1;}
.admin-brand .ab-tag{font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); opacity:.9;}
.admin-mode{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; padding:7px 13px; border-radius:20px;
  background:rgba(255,84,112,.12); border:1px solid rgba(255,84,112,.5); color:#ff9bb0;}
.admin-mode .dot{width:8px; height:8px; border-radius:50%; background:var(--bad); box-shadow:0 0 8px var(--bad); animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.admin-layout{display:grid; grid-template-columns:212px 1fr; gap:16px; align-items:start;}
@media(max-width:760px){ .admin-layout{grid-template-columns:1fr;} }
.admin-nav{display:flex; flex-direction:column; gap:6px; position:sticky; top:16px;}
@media(max-width:760px){ .admin-nav{flex-direction:row; overflow-x:auto; position:static; padding-bottom:4px;} }
.admin-nav button{display:flex; align-items:center; gap:10px; cursor:pointer; border:1px solid var(--line); border-radius:14px; padding:13px 14px;
  font-family:inherit; font-weight:800; font-size:14px; background:var(--card); color:var(--ink); transition:.15s; text-align:left; white-space:nowrap;}
.admin-nav button .an-ico{font-size:18px;}
.admin-nav button:hover{border-color:var(--neon);}
.admin-nav button.active{background:linear-gradient(100deg,rgba(0,229,255,.2),rgba(124,77,255,.2)); border-color:var(--neon); box-shadow:0 0 0 1px rgba(0,229,255,.2);}
.admin-panel{min-height:400px;}
.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px;}
@media(max-width:620px){ .kpi-row{grid-template-columns:repeat(2,1fr);} }
.kpi{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px;}
.kpi .k-l{font-size:12px; opacity:.75; font-weight:700; display:flex; align-items:center; gap:6px;}
.kpi .k-v{font-size:30px; font-weight:900; margin-top:6px; color:var(--ink);}
.kpi .k-d{font-size:12px; font-weight:800; margin-top:2px;}
.kpi .k-d.up{color:var(--ok);} .kpi .k-d.down{color:var(--bad);}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
.panel-head .ph-title{font-size:20px; font-weight:900; display:flex; align-items:center; gap:9px;}
.panel-head .ph-sub{font-size:12.5px; opacity:.7; margin-top:2px;}
.search{display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.28); border:1px solid var(--line); border-radius:12px; padding:9px 13px; min-width:180px;}
.search input{flex:1; background:transparent; border:none; outline:none; color:var(--ink); font-family:inherit; font-size:14px;}

/* tabla admin */
.tbl{width:100%; border-collapse:separate; border-spacing:0 8px;}
.tbl thead th{text-align:left; font-size:11px; letter-spacing:.6px; text-transform:uppercase; opacity:.6; font-weight:800; padding:0 14px 2px;}
.tbl tbody tr{background:var(--card-2);}
.tbl tbody tr:hover{background:var(--card);}
.tbl tbody td{padding:12px 14px; font-size:14px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.tbl tbody td:first-child{border-left:1px solid var(--line); border-radius:14px 0 0 14px;}
.tbl tbody td:last-child{border-right:1px solid var(--line); border-radius:0 14px 14px 0; text-align:right;}
.tbl .cell-ico{font-size:26px;}
.tbl .cell-av{width:40px; height:40px; border-radius:10px; overflow:hidden; border:1px solid var(--line);}
.tbl .cell-nm{font-weight:800;}
.tbl .price-tag{display:inline-flex; align-items:center; gap:5px; font-weight:800; color:var(--gold);}
.tag{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:20px; border:1px solid var(--line); background:rgba(255,255,255,.06);}
.tag.green{color:#7bffb0; border-color:rgba(46,204,113,.4); background:rgba(46,204,113,.1);}
.tag.cyan{color:#8fe9ff; border-color:rgba(0,229,255,.4); background:rgba(0,229,255,.1);}
.tag.gold{color:var(--gold); border-color:rgba(255,213,74,.4); background:rgba(255,213,74,.1);}
.tag.gray{opacity:.7;}
.icon-btn{cursor:pointer; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--ink); border-radius:10px; padding:7px 10px;
  font-size:14px; font-family:inherit; transition:.14s; margin-left:6px;}
.icon-btn:hover{border-color:var(--neon); background:rgba(0,229,255,.1);}
.icon-btn.del:hover{border-color:var(--bad); background:rgba(255,84,112,.12); color:#ff9bb0;}

/* === Panel admin en MÓVIL: tablas anchas → tarjetas apiladas === */
@media(max-width:600px){
  .admin-layout, .admin-nav, .admin-panel{min-width:0;}            /* permitir que encojan, no desbordar */
  #screen-admin .card{overflow-x:hidden;}
  .admin-topbar{gap:10px;}
  .admin-brand img{width:38px; height:38px;}
  .admin-brand .ab-nm{font-size:17px;}
  .panel-head .ph-title{font-size:17px;}
  .search{min-width:0; width:100%;}
  /* convertir cada fila de la tabla en una tarjeta */
  .tbl{border-spacing:0; width:100%;}
  .tbl thead{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);}
  .tbl, .tbl tbody, .tbl tr, .tbl td{display:block; width:100%;}
  .tbl tbody tr{background:var(--card-2); border:1px solid var(--line); border-radius:14px; margin-bottom:10px; padding:8px 8px;}
  .tbl tbody tr:hover{background:var(--card-2);}
  .tbl tbody td{border:none !important; padding:6px 10px; font-size:14px; text-align:left !important;
    display:flex; align-items:center; gap:10px; min-height:0;}
  .tbl tbody td:first-child, .tbl tbody td:last-child{border-radius:0;}
  .tbl tbody td:last-child{justify-content:flex-end; gap:8px; padding-top:8px;}
  .tbl tbody td[data-label]::before{content:attr(data-label) ":"; font-weight:800; opacity:.55;
    font-size:11px; letter-spacing:.4px; text-transform:uppercase; min-width:78px;}
  .tbl .cell-ico{font-size:28px;}
  .tbl .cell-av{width:34px; height:34px;}
}

/* tarjetas de grupos admin */
.grp-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
@media(max-width:620px){ .grp-cards{grid-template-columns:1fr;} }
.grp-card{padding:16px; border-radius:18px; background:var(--card); border:1px solid var(--line);}
.grp-card .gc-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.grp-card .gc-code{font-size:13px; font-weight:900; letter-spacing:3px; color:var(--neon); background:rgba(0,229,255,.1);
  border:1px solid rgba(0,229,255,.35); padding:5px 12px; border-radius:10px;}
.grp-card .gc-name{font-weight:900; font-size:18px;}
.grp-card .gc-meta{font-size:12.5px; opacity:.72; margin-top:2px;}
.grp-card .gc-foot{display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.avatar-stack{display:flex;}
.avatar-stack .as-av{width:30px; height:30px; border-radius:50%; overflow:hidden; border:2px solid var(--bg2); margin-left:-8px;}
.avatar-stack .as-av:first-child{margin-left:0;}
.avatar-stack .as-more{width:30px; height:30px; border-radius:50%; margin-left:-8px; background:rgba(255,255,255,.12); border:2px solid var(--bg2);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;}

/* avatares grid admin */
.av-admin-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px;}
@media(max-width:620px){ .av-admin-grid{grid-template-columns:repeat(3,1fr);} }
.av-admin-card{text-align:center; padding:10px; border-radius:16px; background:var(--card-2); border:1px solid var(--line); transition:.15s;}
.av-admin-card:hover{border-color:var(--neon);}
.av-admin-card .aa-art{width:100%; aspect-ratio:1; border-radius:12px; overflow:hidden; margin-bottom:8px;}
.av-admin-card .aa-nm{font-weight:800; font-size:13px;}
.av-admin-card .aa-actions{display:flex; gap:6px; justify-content:center; margin-top:8px;}

/* mini gráfico de barras de actividad */
.bars{display:flex; align-items:flex-end; gap:8px; height:120px; padding:10px 4px 0;}
.bars .bar{flex:1; border-radius:8px 8px 4px 4px; background:linear-gradient(180deg,var(--neon),var(--neon2)); position:relative; min-height:6px; transition:.3s;}
.bars .bar span{position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:11px; opacity:.65; font-weight:700;}
.bars-wrap{padding-bottom:22px;}

/* ============================================================
   HUD reto (sin cambios respecto al original)
   ============================================================ */
.shop-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:10px;}
.avatar-preview{width:152px; height:152px; margin:4px auto 10px; border-radius:50%; overflow:hidden;
  border:3px solid var(--gold); box-shadow:0 0 28px rgba(0,229,255,.4);}
.shop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
@media(max-width:560px){ .shop-grid{grid-template-columns:repeat(2,1fr);} }
.shop-item{text-align:center; padding:10px 8px; border-radius:16px; background:var(--card); border:2px solid var(--line);}
.shop-item.equipped{border-color:var(--gold); box-shadow:0 0 0 2px rgba(255,213,74,.35);}
.shop-item .si-art{width:100%; aspect-ratio:1; border-radius:14px; overflow:hidden; margin-bottom:6px;}
.shop-item .si-nm{font-size:14px; font-weight:800; margin:2px 0 8px;}
.premio-item{text-align:center; padding:14px 8px; border-radius:16px; background:var(--card); border:2px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:space-between;}
.premio-item.equipped{border-color:var(--ok); box-shadow:0 0 0 2px rgba(46,204,113,.25);}
.premio-item .pr-ico{font-size:46px; line-height:1; margin-bottom:6px;}
.premio-item .pr-nm{font-size:13px; font-weight:800; line-height:1.15; min-height:34px; margin-bottom:8px;}

.hud{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin-bottom:14px;}
.hud .chip{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 12px; font-weight:700; font-size:14px;}
.hud .lives{color:var(--bad);} .hud .keys{color:var(--gold);} .hud .streak{color:var(--neon);}
.enemy-bar{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.enemy-bar .eface{font-size:52px; animation:float 3s ease-in-out infinite;}
.enemy-bar .ename{font-weight:800; font-size:clamp(18px,4.4vw,24px);}
.enemy-bar .eroom{font-size:13px; opacity:.8;}
.doorbar{height:14px; border-radius:10px; background:rgba(255,255,255,.12); overflow:hidden; margin-bottom:4px;}
.doorfill{height:100%; width:0%; border-radius:10px; background:linear-gradient(90deg,var(--gold),var(--neon)); transition:width .4s ease;}
.doorlbl{font-size:12px; opacity:.8; text-align:right; margin-bottom:14px;}
.timerbar{height:8px; border-radius:8px; background:rgba(255,255,255,.12); overflow:hidden; margin-bottom:18px;}
.timerfill{height:100%; width:100%; background:linear-gradient(90deg,var(--ok),var(--gold),var(--bad)); transition:width .1s linear;}
.question{font-size:clamp(20px,4.6vw,28px); font-weight:800; line-height:1.25; margin-bottom:18px; min-height:60px;}
.options{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:560px){ .options{grid-template-columns:1fr;} }
.opt{cursor:pointer; padding:18px 16px; border-radius:16px; font-size:clamp(16px,3.8vw,20px); font-weight:700; font-family:inherit; color:var(--ink);
  background:var(--card); border:2px solid var(--line); transition:.14s; text-align:left;}
.opt:hover{border-color:var(--neon); transform:translateY(-2px);}
.opt.correct{background:rgba(46,204,113,.25); border-color:var(--ok);}
.opt.wrong{background:rgba(255,84,112,.25); border-color:var(--bad);}
.opt:disabled{cursor:default;}
.feedback{margin-top:16px; padding:14px 16px; border-radius:14px; font-size:15px; display:none;}
.feedback.show{display:block; animation:fade .3s ease;}
.feedback.good{background:rgba(46,204,113,.18); border:1px solid var(--ok);}
.feedback.bad{background:rgba(255,84,112,.18); border:1px solid var(--bad);}
.feedback .next{margin-top:12px;}

.medal{font-size:clamp(80px,22vw,140px); text-align:center; display:block; animation:pop .6s ease;}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.result-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0;}

.toast{position:fixed; top:22px; left:50%; transform:translateX(-50%) translateY(-120px);
  background:linear-gradient(90deg,var(--neon),var(--neon2)); color:#06121f; font-weight:900; padding:14px 26px;
  border-radius:16px; z-index:50; font-size:clamp(16px,4vw,22px); box-shadow:0 14px 30px rgba(0,0,0,.4); transition:transform .4s cubic-bezier(.2,1.4,.4,1); text-align:center;}
.toast.show{transform:translateX(-50%) translateY(0);}
.shake{animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-7px)}80%{transform:translateX(7px)}}
#confetti{position:fixed; inset:0; pointer-events:none; z-index:40;}

.ach-overlay{position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; background:rgba(5,6,24,.82); backdrop-filter:blur(5px); padding:20px;}
.ach-overlay.show{display:flex; animation:fade .25s ease;}
.ach-card{text-align:center; padding:34px 30px; border-radius:26px; max-width:440px; width:100%;
  background:linear-gradient(145deg, rgba(124,77,255,.45), rgba(0,229,255,.25));
  border:2px solid var(--gold); box-shadow:0 0 70px rgba(255,213,74,.55), inset 0 0 30px rgba(255,255,255,.08);}
.ach-card.pop{animation:achpop .55s cubic-bezier(.2,1.6,.4,1);}
@keyframes achpop{0%{transform:scale(.3) rotate(-10deg); opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1) rotate(0); opacity:1}}
.ach-card .kicker{letter-spacing:3px; font-size:14px; color:var(--gold); font-weight:900;}
.ach-card .ico{font-size:clamp(64px,18vw,96px); display:block; margin:10px 0; filter:drop-shadow(0 0 18px rgba(255,213,74,.7)); animation:float 2.5s ease-in-out infinite;}
.ach-card .atitle{font-size:clamp(24px,6vw,32px); font-weight:900; line-height:1.1;}
.ach-card .asub{opacity:.9; margin-top:8px; font-size:15px;}

.mute{position:fixed; top:14px; right:14px; z-index:60; cursor:pointer; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 12px; font-size:18px; color:var(--ink);}
.foot{text-align:center; opacity:.55; font-size:12px; margin-top:20px;}

/* ===== MAPA DE ISLAS ===== */
.mapstage{position:relative; width:100%; height:min(580px,86vw); border-radius:20px; overflow:hidden; isolation:isolate; cursor:default;}
.sky-layer{position:absolute; inset:0; pointer-events:none;}
.sky-gradient{background:radial-gradient(ellipse 80% 60% at 50% -10%, #1a0533 0%, transparent 70%),radial-gradient(ellipse 120% 80% at 30% 110%, #031b3a 0%, transparent 60%),linear-gradient(175deg,#0a0220 0%,#0b1d45 35%,#0d2e5a 60%,#091428 100%); z-index:0;}
.aurora{mix-blend-mode:screen; opacity:.35;}
.aurora-1{background:linear-gradient(105deg,transparent 20%,rgba(0,229,255,.25) 35%,rgba(124,77,255,.3) 50%,transparent 65%); animation:auroraDrift 14s ease-in-out infinite alternate; z-index:1;}
.aurora-2{background:linear-gradient(75deg,transparent 25%,rgba(0,229,255,.15) 40%,rgba(46,204,113,.2) 58%,transparent 72%); animation:auroraDrift 19s ease-in-out infinite alternate-reverse; z-index:1;}
@keyframes auroraDrift{0%{transform:translateX(-8%) scaleY(1); opacity:.25}50%{transform:translateX(5%) scaleY(1.08); opacity:.45}100%{transform:translateX(10%) scaleY(.95); opacity:.30}}
.stars-canvas{z-index:2;}
.star{position:absolute; border-radius:50%; background:#fff; animation:starTwinkle var(--dur,3s) ease-in-out infinite; animation-delay:var(--delay,0s);}
@keyframes starTwinkle{0%,100%{opacity:var(--lo,.2); transform:scale(1)}50%{opacity:var(--hi,.9); transform:scale(1.4)}}
.sparkles{position:absolute; inset:0; pointer-events:none; z-index:3;}
.sparkle{position:absolute; width:6px; height:6px; animation:sparklePop var(--dur,4s) ease-in-out infinite; animation-delay:var(--delay,0s);}
.sparkle::before,.sparkle::after{content:''; position:absolute; inset:0; background:var(--color,#ffd54a); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
.sparkle::after{transform:rotate(22.5deg); opacity:.6;}
@keyframes sparklePop{0%,100%{opacity:0; transform:scale(.4) rotate(0)}40%,60%{opacity:1; transform:scale(1) rotate(45deg)}}
.glow-orb{position:absolute; border-radius:50%; pointer-events:none; filter:blur(60px); z-index:2; animation:orbPulse 8s ease-in-out infinite;}
.glow-orb-1{width:200px;height:200px;top:-60px;left:20%; background:radial-gradient(circle,rgba(124,77,255,.4) 0%,transparent 70%);}
.glow-orb-2{width:160px;height:160px;bottom:-40px;right:15%; background:radial-gradient(circle,rgba(0,229,255,.35) 0%,transparent 70%); animation-delay:-4s;}
@keyframes orbPulse{0%,100%{transform:scale(1); opacity:.7}50%{transform:scale(1.25); opacity:1}}
.cloud{position:absolute; border-radius:50px; pointer-events:none; z-index:3; filter:blur(2px); opacity:.16;}
.cloud::before,.cloud::after{content:''; position:absolute; border-radius:50%; background:inherit;}
.cloud-1{width:90px;height:28px;top:12%;left:5%; background:linear-gradient(135deg,#c8d8ff,#e8f0ff); animation:cloudDrift 22s linear infinite;}
.cloud-1::before{width:44px;height:44px;top:-20px;left:12px;} .cloud-1::after{width:32px;height:32px;top:-12px;left:40px;}
.cloud-2{width:70px;height:22px;top:22%;right:8%; background:linear-gradient(135deg,#b8d0ff,#dce8ff); animation:cloudDrift 30s linear infinite; animation-delay:-12s;}
.cloud-2::before{width:36px;height:36px;top:-16px;left:10px;} .cloud-2::after{width:26px;height:26px;top:-10px;left:34px;}
.cloud-3{width:110px;height:32px;top:8%;right:30%; background:linear-gradient(135deg,#d0d8ff,#eaf0ff); animation:cloudDrift 26s linear infinite; animation-delay:-8s; opacity:.12;}
.cloud-3::before{width:52px;height:52px;top:-24px;left:16px;} .cloud-3::after{width:40px;height:40px;top:-16px;left:54px;}
@keyframes cloudDrift{0%{transform:translateX(0)}50%{transform:translateX(20px)}100%{transform:translateX(0)}}
/* ----- camino warp entre mundos ----- */
.map-paths{position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; overflow:visible;}
.path-glow{fill:none; stroke-width:16; stroke-linecap:round; stroke-linejoin:round; filter:blur(6px);}
.path-outer{fill:none; stroke-width:7; stroke-linecap:round; stroke-linejoin:round;}
.path-inner{fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.path-done-glow{stroke:rgba(46,204,113,.22);}
.path-done-outer{stroke:rgba(46,204,113,.4);}
.path-done-inner{stroke:#7dffb0; stroke-dasharray:2 12; animation:pathMarch 1.6s linear infinite;}
.path-locked-glow{stroke:transparent;}
.path-locked-outer{stroke:rgba(255,255,255,.05);}
.path-locked-inner{stroke:rgba(255,255,255,.22); stroke-dasharray:2 12; animation:pathMarch 3.4s linear infinite;}
.path-current-glow{stroke:rgba(255,213,74,.25);}
.path-current-outer{stroke:rgba(255,213,74,.4);}
.path-current-inner{stroke:#fff3c0; stroke-dasharray:3 11; animation:pathMarch 1s linear infinite;}
@keyframes pathMarch{to{stroke-dashoffset:-28}}
.path-comet{fill:#fff;}

/* ----- MUNDOS (planetas) ----- */
.island{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:9px; cursor:default; z-index:6; transition:transform .2s ease;}
.island-platform{position:relative; width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.3rem; line-height:1; flex-shrink:0; transition:transform .3s ease;
  --pcol:#60a8ff; --pdark:#15306e;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 12%, transparent 30%),
    radial-gradient(circle at 70% 78%, rgba(0,0,0,.45) 0%, transparent 55%),
    radial-gradient(circle at 42% 40%, var(--pcol), var(--pdark) 78%);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 10px 22px rgba(0,0,0,.55), 0 0 26px -2px var(--pcol);
  filter:drop-shadow(0 0 14px color-mix(in srgb, var(--pcol) 50%, transparent));}
/* halo de atmósfera */
.island-platform::before{content:''; position:absolute; inset:-9px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, transparent 56%, color-mix(in srgb, var(--pcol) 40%, transparent) 70%, transparent 80%); transition:.3s;}
/* sombra proyectada al "suelo" cósmico */
.island-platform::after{content:''; position:absolute; bottom:-12px; left:50%; transform:translateX(-50%); width:64%; height:13px; border-radius:50%; background:rgba(0,0,0,.5); filter:blur(7px); transition:.3s;}
.island-emoji{position:relative; z-index:2; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));}
/* anillo orbital tipo saturno */
.planet-ring{position:absolute; left:50%; top:50%; width:138%; height:46%; border-radius:50%; transform:translate(-50%,-50%) rotate(-22deg);
  border:3px solid color-mix(in srgb, var(--pcol) 70%, #fff 10%); border-top-color:transparent; border-bottom-color:transparent; opacity:.85; z-index:1; pointer-events:none;}
.island-label{position:relative; font-size:.62rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--ink);
  background:rgba(10,14,38,.82); border:1px solid var(--line); padding:4px 10px; border-radius:20px; white-space:normal; text-align:center; line-height:1.14;
  backdrop-filter:blur(4px); text-shadow:0 1px 4px rgba(0,0,0,.9); max-width:118px; transition:.3s;}
.island-badge{position:absolute; top:-4px; right:-4px; width:27px; height:27px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.92rem; z-index:3; border:2px solid rgba(255,255,255,.25); box-shadow:0 3px 8px rgba(0,0,0,.5);}

/* mundo BOSS (último) más grande e imponente */
.island.boss .island-platform{width:104px; height:104px; font-size:2.9rem;}

/* estado COMPLETADO */
.island.done .island-platform{--pcol:#3dffb0; --pdark:#147a4a;}
.island.done .island-badge{background:linear-gradient(135deg,#ffe27a,#ff9800); box-shadow:0 0 12px rgba(255,213,74,.8);}
.island.done .island-label{border-color:rgba(46,204,113,.45); color:#a8ffd0;}
.island.done .planet-ring{border-color:rgba(125,255,176,.7); border-top-color:transparent; border-bottom-color:transparent;}

/* estado ACTUAL */
.island.current{cursor:pointer;}
.island.current .island-platform{--pcol:#ffe27a; --pdark:#cf8a08; animation:worldPulse 2.2s ease-in-out infinite;}
.island.current .island-platform::before{animation:haloPulse 2.2s ease-in-out infinite;}
.island.current .island-label{border-color:rgba(255,213,74,.6); color:var(--gold); background:rgba(40,30,5,.85);}
.island.current:hover .island-platform{transform:scale(1.06);}
.island-arrow{position:absolute; top:-30px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:1px; z-index:4;
  font-size:.58rem; font-weight:900; letter-spacing:.5px; color:var(--gold); text-transform:uppercase; animation:arrowBounce .9s ease-in-out infinite; filter:drop-shadow(0 0 6px rgba(255,213,74,.9)); white-space:nowrap;}
.island-arrow b{font-size:1.1rem; line-height:.7;}
@keyframes arrowBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-7px)}}
@keyframes worldPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 10px 22px rgba(0,0,0,.55), 0 0 26px 0 rgba(255,213,74,.55)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 10px 22px rgba(0,0,0,.55), 0 0 50px 6px rgba(255,213,74,.85)}}
@keyframes haloPulse{0%,100%{inset:-9px; opacity:.8}50%{inset:-15px; opacity:.45}}

/* estado BLOQUEADO (planeta helado y apagado) */
.island.locked .island-platform{--pcol:#46506e; --pdark:#161b2e; filter:saturate(.45) brightness(.7); box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 8px 16px rgba(0,0,0,.55);}
.island.locked .island-emoji{opacity:.35; filter:grayscale(1);}
.island.locked .island-label{color:rgba(234,242,255,.4); border-color:rgba(255,255,255,.08);}
.island.locked .island-badge{background:rgba(28,30,52,.92); border-color:rgba(255,255,255,.14);}
.island.locked .planet-ring{opacity:.3; border-color:rgba(120,130,160,.5); border-top-color:transparent; border-bottom-color:transparent;}

/* ----- ficha del jugador (cápsula espacial) ----- */
.avatar-token{position:absolute; width:64px; height:64px; transform:translate(-50%,-150%); z-index:8;
  transition:left .9s cubic-bezier(.45,0,.25,1.4), top .9s cubic-bezier(.45,0,.25,1.4); pointer-events:none;}
.avatar-token .av-pic{border-radius:50%; border:3px solid #fff;
  box-shadow:0 0 0 3px var(--gold), 0 8px 18px rgba(0,0,0,.75), 0 0 26px rgba(255,213,74,.6);
  animation:tokenBob 2.6s ease-in-out infinite;}
/* propulsor bajo la cápsula */
.avatar-token::after{content:''; position:absolute; bottom:-8px; left:50%; width:14px; height:20px; transform:translateX(-50%);
  background:radial-gradient(circle at 50% 0%, rgba(0,229,255,.9), rgba(124,77,255,.5) 50%, transparent 75%);
  border-radius:50% 50% 50% 50%/30% 30% 70% 70%; filter:blur(1px); animation:thrust .5s ease-in-out infinite alternate;}
@keyframes tokenBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes thrust{0%{opacity:.55; height:16px}100%{opacity:1; height:24px}}
.avatar-token.land .av-pic{animation:tokenLand .46s ease;}
@keyframes tokenLand{0%{transform:translateY(-10px) scale(1.12)}45%{transform:translateY(2px) scale(.9,1.08)}70%{transform:translateY(0) scale(1.05,.96)}100%{transform:translateY(0) scale(1)}}

@media(max-width:480px){ .island-platform{width:70px;height:70px;font-size:1.9rem;} .island.boss .island-platform{width:86px;height:86px;font-size:2.4rem;} .island-label{font-size:.55rem;padding:3px 8px;max-width:100px;} .avatar-token{width:52px;height:52px;} }
@media(max-width:560px){ .mapstage{height:76vh;} .menu-row{grid-template-columns:repeat(4,1fr); gap:8px;} .menu-card{padding:12px 4px; font-size:12px;} .menu-card .mc-ico{font-size:26px;} }
.stat .l{font-size:13px; opacity:.8;}

/* ============================================================
   ICONOS DE LÍNEA + COMPONENTES NUEVOS
   ============================================================ */
.ico{width:1.15em; height:1.15em; vertical-align:-0.22em; flex-shrink:0;}
.section-title .ico{width:1em; height:1em; vertical-align:-0.12em; margin-right:4px;}
.linkish{background:none; border:none; color:var(--neon); font-family:inherit; font-weight:800; font-size:13px; cursor:pointer; padding:4px; text-decoration:underline; text-underline-offset:3px;}
.linkish:hover{color:#fff;}

/* conmutador de variantes A/B */
.variant-switch{display:flex; align-items:center; gap:8px; justify-content:center; flex-wrap:wrap; margin:0 auto 14px; padding:7px; max-width:560px;
  background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:16px; backdrop-filter:blur(8px);}
.variant-switch .vs-tag{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:900; letter-spacing:.5px; color:var(--gold); padding:0 6px; opacity:.9;}
.variant-switch button{cursor:pointer; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink); border-radius:11px;
  padding:8px 12px; font-family:inherit; font-weight:800; font-size:12.5px; transition:.15s;}
.variant-switch button:hover{border-color:var(--neon);}
.variant-switch button.on{background:linear-gradient(90deg,var(--neon),var(--neon2)); color:#06121f; border-color:transparent;}

/* LOGIN variante B (avatar primero) */
.welcome-b{text-align:center;}
.wb-head{display:flex; align-items:center; gap:14px; justify-content:center; margin-bottom:6px;}
.wb-logo{width:74px; height:74px; border-radius:18px; filter:drop-shadow(0 6px 20px rgba(124,77,255,.6));}
.wb-title{font-size:clamp(30px,7vw,52px); text-align:left;}
.wb-hero{display:flex; align-items:center; justify-content:center; gap:14px; margin:14px 0 6px;}
.wb-av{width:148px; height:148px; border-radius:50%; overflow:hidden; border:4px solid var(--gold);
  box-shadow:0 0 30px rgba(0,229,255,.45), 0 0 60px rgba(124,77,255,.35); animation:float 4s ease-in-out infinite;}
.wb-arrow{cursor:pointer; width:50px; height:50px; border-radius:50%; border:2px solid var(--line); background:var(--card); color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:.15s; flex-shrink:0;}
.wb-arrow:hover{border-color:var(--neon); transform:scale(1.08);}
.wb-arrow .ico{width:24px; height:24px; vertical-align:0;}
.wb-arrow.flip{transform:scaleX(-1);} .wb-arrow.flip:hover{transform:scaleX(-1) scale(1.08);}
.wb-avname{font-weight:900; font-size:20px; margin:2px 0 6px; color:var(--gold);}
.wb-links{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px;}
.wb-links button{display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--ink);
  font-family:inherit; font-weight:800; font-size:13px; padding:10px 14px; border-radius:12px; transition:.15s;}
.wb-links button:hover{border-color:var(--neon);}

/* TEMA variante B (lista) */
.topic-list{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.topic-row{position:relative; cursor:pointer; display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px;
  background:var(--card); border:2px solid var(--line); transition:.16s; overflow:hidden;}
.topic-row::before{content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--tline,var(--neon));}
.topic-row:hover{transform:translateX(4px); border-color:var(--tline,var(--neon)); box-shadow:0 12px 26px rgba(0,0,0,.35);}
.topic-row .tr-ico{width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:30px;
  background:var(--tbg,rgba(255,255,255,.08)); border:1px solid var(--tline,var(--line)); flex-shrink:0;}
.topic-row .tr-main{flex:1; min-width:0;}
.topic-row .tr-nm{font-weight:900; font-size:18px; display:flex; align-items:center; gap:8px;}
.topic-row .tr-new{font-size:10px; font-weight:900; background:linear-gradient(90deg,var(--gold),#ff9f1c); color:#2a1500; padding:2px 8px; border-radius:20px;}
.topic-row .tr-sub{font-size:13px; opacity:.72; margin-top:2px;}
.topic-row .tr-go{opacity:.5; flex-shrink:0;} .topic-row:hover .tr-go{opacity:1; color:var(--neon);}

/* botón "Continuar" con flecha derecha */
.btn .ico{width:1em; height:1em; vertical-align:-0.1em;}

/* lobby llaves */
.lobby-keys{}

/* en modo admin, ocultar el botón de silencio (es escritorio) */
body.admin-on .mute{display:none;}
.admin-foot{text-align:center; opacity:.5; font-size:12px; margin-top:18px;}