/* ===== Rompe Caramelos - estilos ===== */
:root{
  --bg:#2a0f4d; --bg2:#4a1a7a; --panel:#3d1268; --panel2:#57209a;
  --pink:#ff4f9a; --pink2:#ff85bd; --gold:#ffc83d; --gold2:#ffe38a;
  --green:#3fd46a; --green2:#7bf09a; --red:#ff5b5b; --blue:#48b9ff;
  --txt:#fff; --muted:#c9b3e8;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --r:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  font-family:Verdana,"Trebuchet MS",system-ui,sans-serif;
  color:var(--txt); background:radial-gradient(120% 90% at 50% 0%,#6a2aa8 0%,var(--bg) 60%,#1a0733 100%);
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
b,h1,h2,h3{font-weight:800}
.p-muted{color:var(--muted);font-size:14px;margin:4px 0 12px}

/* ===== Botones ===== */
.btn{
  display:block;width:100%;border:0;border-radius:var(--r);padding:13px 18px;
  font:800 16px/1.1 inherit;color:#fff;cursor:pointer;margin-top:10px;
  background:linear-gradient(#8a4ad0,#6a2aa8); box-shadow:0 5px 0 #4a1a7a, 0 8px 14px rgba(0,0,0,.35);
  transition:transform .08s, box-shadow .08s;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #4a1a7a,0 3px 8px rgba(0,0,0,.35)}
.btn-big{padding:16px;font-size:20px;letter-spacing:.5px}
.btn-green{background:linear-gradient(var(--green2),var(--green));box-shadow:0 5px 0 #1e9c45,0 8px 14px rgba(0,0,0,.35);color:#0a3d1c;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.btn-green:active{box-shadow:0 1px 0 #1e9c45}
.btn-gold{background:linear-gradient(var(--gold2),var(--gold));box-shadow:0 5px 0 #c98f00,0 8px 14px rgba(0,0,0,.35);color:#5a3a00}
.btn-gold:active{box-shadow:0 1px 0 #c98f00}
.btn-ghost{background:rgba(255,255,255,.1);box-shadow:none;color:var(--muted);font-size:14px;padding:10px}
.btn-ghost:active{background:rgba(255,255,255,.18);transform:none}
.btn-danger{color:#ffb3b3}
.icon-btn{
  border:0;background:rgba(255,255,255,.12);color:#fff;width:42px;height:42px;border-radius:50%;
  font-size:19px;cursor:pointer;position:relative;flex:0 0 auto;display:grid;place-items:center;
}
.icon-btn:active{background:rgba(255,255,255,.25)}
.dot{position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;background:var(--red);border:2px solid var(--panel);display:none}
.dot.on{display:block;animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.35)}}

/* ===== Portada ===== */
.boot{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:24px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%,rgba(40,10,80,.35),rgba(20,5,45,0) 70%),
    url("../fondos/inicio.webp") center bottom / cover no-repeat,
    radial-gradient(120% 90% at 50% 20%,#7c34c4,#2a0f4d 70%);
}
.boot.hide{opacity:0;pointer-events:none;transition:opacity .4s}
/* celular parado: portada vertical, que se ve entera en vez de recortada */
@media (orientation:portrait){
  .boot{
    background:
      radial-gradient(ellipse 70% 45% at 50% 38%,rgba(40,10,80,.30),rgba(20,5,45,0) 70%),
      url("../fondos/inicio-vertical.webp") center bottom / cover no-repeat,
      radial-gradient(120% 90% at 50% 20%,#7c34c4,#2a0f4d 70%);
  }
}
.boot-logo{font-size:88px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px) rotate(8deg)}}
.boot-title{
  margin:4px 0 18px;text-align:center;font-size:44px;line-height:.95;letter-spacing:1px;
  color:var(--gold2); -webkit-text-stroke:3px #3d1268; paint-order:stroke fill;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.35));
}
.boot .btn{max-width:260px}
.boot-hint{color:#fff;font-size:13px;font-weight:700;margin-top:14px;text-shadow:0 1px 3px rgba(20,5,45,.9),0 0 10px rgba(20,5,45,.8)}

/* ===== Pantallas ===== */
.screen{position:fixed;inset:0;display:none;flex-direction:column}
.screen.on{display:flex}

/* ===== Barra superior del mapa ===== */
.topbar{
  display:flex;gap:7px;align-items:center;padding:calc(8px + var(--safe-t)) 10px 8px;
  background:linear-gradient(#5a20a0,#42147a);box-shadow:0 4px 14px rgba(0,0,0,.4);z-index:5;
}
.chip{
  display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.18);
  border-radius:99px;padding:5px 11px 5px 7px;font-weight:800;font-size:14px;white-space:nowrap;
}
.chip-ico{font-size:15px}
.chip small{color:var(--muted);font-size:11px;margin-left:2px;font-weight:600}
.chip-coins{color:var(--gold2)}
.chip-stars{color:var(--gold2);margin-right:auto}

/* ===== Mapa ===== */
.map-scroll{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.map-spacer{width:1px}
.map-layer{position:absolute;inset:0 0 auto 0;height:0}
/* Los círculos del mapa son dibujos: traen su anillo blanco y su resplandor.
   Si alguno no cargara, abajo queda el color de siempre como respaldo. */
.node{
  position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  display:grid;place-items:center;font:800 19px/1 inherit;color:#fff;cursor:pointer;
  background:var(--gold) url('../img/mapa/oro.webp?v=4') center/contain no-repeat;
  text-shadow:0 2px 3px rgba(40,10,60,.75),0 0 8px rgba(40,10,60,.6);
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.45));
}
.node:active{transform:translateY(3px)}
.node.n4{font-size:16px}
.node.n5{font-size:13px;letter-spacing:-.5px}
.node.locked{background-color:#6b5d85;background-image:url('../img/mapa/gris.webp?v=4');color:#e8e6f2}
.node.done{background-color:var(--green);background-image:url('../img/mapa/verde.webp?v=4')}
.node.current{animation:jump 1.1s ease-in-out infinite;z-index:3}
.node.boss{width:76px;height:76px;margin:-38px 0 0 -38px;font-size:21px;
  background-color:var(--pink);background-image:url('../img/mapa/jefe.webp?v=4')}
@keyframes jump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1.06)}}
.node .ns{position:absolute;bottom:-8px;display:flex;gap:1px;font-size:12px;line-height:1;padding:2px 5px;border-radius:99px;background:rgba(20,6,40,.75);border:1px solid rgba(255,255,255,.18)}
.node .ns i{font-style:normal;color:#6b5d85}
.node .ns i.on{color:var(--gold);opacity:1}
.dotp{position:absolute;width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.epi{
  position:absolute;left:5%;width:90%;margin-top:-26px;text-align:center;padding:7px 10px;border-radius:12px;
  background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.06));border:2px solid rgba(255,255,255,.22);
  font:800 14px/1.2 inherit;text-shadow:0 2px 3px rgba(0,0,0,.5);
}
.epi small{display:block;font-weight:600;font-size:11px;color:var(--muted)}
.fab{
  position:absolute;left:50%;transform:translateX(-50%);bottom:calc(14px + var(--safe-b));z-index:4;
  border:0;border-radius:99px;padding:11px 20px;font:800 14px inherit;color:#0a3d1c;cursor:pointer;
  background:linear-gradient(var(--green2),var(--green));box-shadow:0 4px 0 #1e9c45,0 8px 16px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.fab.on{opacity:1;pointer-events:auto}

/* ===== Barra de juego ===== */
.gamebar{
  display:flex;align-items:center;gap:8px;padding:calc(6px + var(--safe-t)) 10px 8px;
  background:linear-gradient(#5a20a0,#42147a);box-shadow:0 4px 14px rgba(0,0,0,.4);z-index:5;
}
.gamebar > *{min-width:0}          /* que puedan achicarse en pantallas angostas */
.goal-box,.moves-box{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.28);border-radius:14px;padding:5px 10px;border:2px solid rgba(255,255,255,.15)}
.moves-box{flex:0 0 auto}
.goal-ico{font-size:22px}
.goal-txt{display:flex;flex-direction:column;line-height:1.05}
.goal-txt b{font-size:17px}
.goal-txt small,.moves-box small{font-size:10px;color:var(--muted)}
.moves-box{flex-direction:column;gap:0;min-width:58px;text-align:center}
.moves-box b{font-size:21px;color:var(--gold2)}
.moves-box.low b{color:var(--red);animation:pulse .7s infinite}
.score-box{flex:1 1 0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0;overflow:hidden}
.score-box b{font-size:15px;color:var(--gold2)}
.stars-bar{position:relative;width:100%;max-width:150px;min-width:64px;height:12px}
.stars-bar .bar{position:absolute;inset:2px 0;background:rgba(0,0,0,.4);border-radius:99px;overflow:hidden;border:1px solid rgba(255,255,255,.15)}
.stars-bar .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));border-radius:99px;transition:width .3s}
.stars-bar .st{position:absolute;top:-5px;font-size:15px;color:#3c2a5e;transition:color .2s,transform .2s}
.stars-bar .st.on{color:var(--gold);transform:scale(1.25)}
#st1{left:28%}#st2{left:56%}#st3{left:88%}

.board-wrap{flex:1;position:relative;display:grid;place-items:center;min-height:0;padding:6px}
#board{display:block;max-width:100%;max-height:100%;touch-action:none;border-radius:18px}
.combo-pop{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;
  font:900 34px inherit;color:var(--gold2);-webkit-text-stroke:4px #3d1268;paint-order:stroke fill;text-align:center;
}
.combo-pop.go{animation:combo 1s ease-out}
@keyframes combo{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}75%{opacity:1;transform:translate(-50%,-60%) scale(1)}100%{opacity:0;transform:translate(-50%,-95%) scale(.9)}}

/* ===== Potenciadores ===== */
.boosters{
  display:flex;gap:10px;padding:10px 12px calc(12px + var(--safe-b));justify-content:center;align-items:flex-end;
  background:linear-gradient(rgba(0,0,0,0),rgba(12,3,28,.55) 45%,rgba(12,3,28,.8));
}
.booster{
  position:relative;flex:1;max-width:84px;border:0;background:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;font:800 11px inherit;color:#fff;
  transition:transform .1s;
}
.booster:active{transform:translateY(3px) scale(.96)}
/* el redondel con el icono */
.b-ico{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:26px;line-height:1;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 58%),
             linear-gradient(#8a4ad0,#5a20a0);
  border:3px solid rgba(255,255,255,.55);
  box-shadow:0 5px 0 rgba(0,0,0,.35), 0 8px 16px rgba(0,0,0,.45), inset 0 -6px 10px rgba(0,0,0,.25);
  text-shadow:0 2px 3px rgba(0,0,0,.4);
}
/* cada uno con su color, como los caramelos */
.booster[data-b="moves"] .b-ico{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 58%),linear-gradient(#7bf09a,#25a54e)}
.booster[data-b="hammer"] .b-ico{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 58%),linear-gradient(#ffd98a,#e08a1e)}
.booster[data-b="shuffle"] .b-ico{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 58%),linear-gradient(#9adcff,#1b7fd4)}
.booster[data-b="bomb"] .b-ico{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 58%),linear-gradient(#ff9ac4,#d11e66)}
.b-name{
  background:rgba(12,3,28,.7);border-radius:99px;padding:2px 9px;letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.14);
}
.b-count{
  position:absolute;top:-4px;right:2px;min-width:23px;height:23px;border-radius:99px;
  background:linear-gradient(#ff8080,var(--red));border:2px solid #fff;
  font:800 12px/19px inherit;font-style:normal;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.5);
}
.b-count.zero{background:linear-gradient(var(--gold2),var(--gold));color:#5a3a00}
/* cuando hay que elegir dónde usarlo */
.booster.armed .b-ico{
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(255,200,61,.35), 0 5px 0 rgba(0,0,0,.35), 0 8px 18px rgba(255,160,40,.5);
  animation:latir .7s infinite;
}
.booster.armed .b-name{background:var(--gold);color:#5a3a00;border-color:transparent}
@keyframes latir{50%{transform:scale(1.08)}}

/* ===== Modales ===== */
.overlay{position:fixed;inset:0;z-index:40;background:rgba(10,3,24,.72);display:none;align-items:center;justify-content:center;padding:18px}
.overlay.on{display:flex}
.modal{display:none;width:min(360px,100%);max-height:92%;overflow-y:auto;overflow-x:hidden;border-radius:22px;
  background:linear-gradient(var(--panel2),var(--panel));border:3px solid rgba(255,255,255,.22);box-shadow:0 18px 44px rgba(0,0,0,.6)}
.modal.on{display:block;animation:pop .28s cubic-bezier(.2,1.3,.5,1)}
@keyframes pop{from{transform:scale(.8);opacity:0}}
.ribbon{
  margin:-3px -3px 0;padding:13px;text-align:center;font:800 19px inherit;border-radius:19px 19px 0 0;
  background:linear-gradient(#8a4ad0,#6a2aa8);text-shadow:0 2px 3px rgba(0,0,0,.4);border-bottom:3px solid rgba(0,0,0,.25);
}
.rib-gold{background:linear-gradient(var(--gold2),var(--gold));color:#5a3a00;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.rib-red{background:linear-gradient(#ff8080,var(--red))}
.modal-body{padding:16px}
.world-name{text-align:center;color:var(--gold2);font-weight:800;margin-bottom:10px;font-size:15px}
.obj-card{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.28);border-radius:14px;padding:12px;margin-bottom:12px}
.obj-ico{font-size:36px}
.obj-desc{font-size:15px;font-weight:700;line-height:1.3}
.stars-row{display:flex;justify-content:center;gap:10px;font-size:26px;color:#3c2a5e;margin:8px 0}
.stars-row.big{font-size:44px;gap:6px}
.stars-row .on{color:var(--gold);filter:drop-shadow(0 3px 6px rgba(255,200,61,.6))}
.stars-row small{display:block;font-size:11px;color:var(--muted);text-align:center;margin-top:2px}
.starcol{display:flex;flex-direction:column;align-items:center}
.mini-row{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin:10px 2px}
.big-score{text-align:center;font:900 42px inherit;color:var(--gold2);-webkit-text-stroke:3px #3d1268;paint-order:stroke fill;margin:6px 0}
.reward-row{text-align:center;font-size:16px;font-weight:800;color:var(--gold2);margin-bottom:6px}
.sad{text-align:center;font-size:60px;margin:6px}

.daily-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.day{
  border-radius:12px;padding:8px 4px;text-align:center;background:rgba(0,0,0,.28);border:2px solid rgba(255,255,255,.14);
  font-size:11px;font-weight:700;color:var(--muted);position:relative;
}
.day b{display:block;font-size:19px;margin:2px 0;color:#fff}
.day.taken{background:rgba(63,212,106,.25);border-color:var(--green)}
.day.taken::after{content:"OK";position:absolute;top:2px;right:5px;color:var(--green2);font-size:9px}
.day.today{border-color:var(--gold);background:linear-gradient(rgba(255,200,61,.3),rgba(255,200,61,.1));color:#fff;animation:pulse 1.4s infinite}
.day.day7{grid-column:span 3;background:linear-gradient(rgba(255,79,154,.3),rgba(255,79,154,.1));border-color:var(--pink)}

.shop-list{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.shop-item{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.28);border-radius:14px;padding:10px;border:2px solid rgba(255,255,255,.12)}
.shop-item .si{font-size:28px}
.shop-item .sn{flex:1;font-size:13px;font-weight:700;line-height:1.2}
.shop-item .sn small{display:block;color:var(--muted);font-weight:600;font-size:11px}
.shop-item button{border:0;border-radius:99px;padding:8px 13px;font:800 13px inherit;color:#5a3a00;cursor:pointer;
  background:linear-gradient(var(--gold2),var(--gold));box-shadow:0 3px 0 #c98f00}
.shop-item button:active{transform:translateY(2px);box-shadow:0 1px 0 #c98f00}

.switch-row{display:flex;align-items:center;justify-content:space-between;padding:11px 4px;font-weight:700;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.1)}
.switch-row input{display:none}
.switch-row i{width:50px;height:28px;border-radius:99px;background:rgba(0,0,0,.4);position:relative;transition:background .2s;flex:0 0 auto}
.switch-row i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .2s}
.switch-row input:checked + i{background:var(--green)}
.switch-row input:checked + i::after{left:25px}

.toast{
  position:fixed;left:50%;bottom:26%;transform:translate(-50%,10px);z-index:80;opacity:0;pointer-events:none;
  background:rgba(0,0,0,.85);border:2px solid rgba(255,255,255,.2);border-radius:99px;padding:10px 18px;
  font:700 14px inherit;transition:opacity .25s,transform .25s;max-width:86%;text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-height:620px){
  .b-ico{width:46px;height:46px;font-size:21px;border-width:2px}
  .b-name{font-size:10px;padding:1px 7px}
  .boosters{gap:8px;padding:6px 10px calc(8px + var(--safe-b))}
  .boot-title{font-size:36px}
}

/* ===== Perfil en la barra ===== */
.chip-perfil{
  flex:1;min-width:0;border:2px solid rgba(255,255,255,.18);cursor:pointer;color:#fff;text-align:left;
  background:rgba(0,0,0,.3);font-family:inherit;padding:4px 12px 4px 7px;
}
.chip-perfil:active{background:rgba(0,0,0,.45)}
.perfil-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.perfil-txt b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perfil-txt small{font-size:10px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.chip-perfil .chip-ico{font-size:22px;flex:0 0 auto}
.statbar{
  display:flex;gap:7px;align-items:center;justify-content:center;padding:7px 10px;
  background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,0));z-index:4;
}
.statbar .chip{cursor:pointer}
.statbar .chip-stars{margin-right:0}

/* ===== Cartel del objetivo ===== */
.obj-banner{
  position:absolute;left:10px;right:10px;top:8px;z-index:6;display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:18px;pointer-events:none;
  background:linear-gradient(rgba(138,74,208,.96),rgba(74,26,122,.96));
  border:3px solid rgba(255,255,255,.28);box-shadow:0 10px 26px rgba(0,0,0,.5);
  opacity:0;transform:translateY(-18px) scale(.94);transition:opacity .28s,transform .28s;
}
.obj-banner.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;cursor:pointer}
.ob-ico{font-size:34px;flex:0 0 auto;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.ob-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ob-txt small{font-size:11px;color:var(--gold2);font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.ob-txt b{font-size:15px}
.ob-txt span{font-size:11px;color:var(--muted);margin-top:2px}
.goal-box{cursor:pointer}

/* ===== Campos y figuritas ===== */
.campo{display:block;margin-bottom:12px}
.campo span{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:5px}
.campo input{
  width:100%;border:2px solid rgba(255,255,255,.2);border-radius:14px;padding:12px 14px;
  background:rgba(0,0,0,.35);color:#fff;font:800 17px inherit;outline:none;
}
.campo input:focus{border-color:var(--gold)}
.avatares{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-bottom:12px}
.ava{
  border:2px solid rgba(255,255,255,.15);background:rgba(0,0,0,.3);border-radius:12px;
  font-size:19px;padding:5px 0;cursor:pointer;line-height:1.1;
}
.ava.on{border-color:var(--gold);background:linear-gradient(rgba(255,200,61,.35),rgba(255,200,61,.12));transform:scale(1.06)}
.sep{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--muted);font-size:11px}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.18)}
.google-box{display:flex;justify-content:center;min-height:44px}
.google-estado{display:none;text-align:center;font-size:13px;color:var(--muted);background:rgba(0,0,0,.25);border-radius:12px;padding:10px}
.google-estado b{color:#fff;word-break:break-all}

/* ===== Ranking ===== */
.tabs{display:flex;gap:6px;background:rgba(0,0,0,.3);border-radius:14px;padding:4px;margin-bottom:10px}
.tab{
  flex:1;border:0;border-radius:11px;padding:9px 6px;cursor:pointer;
  background:transparent;color:var(--muted);font:800 13px inherit;
}
.tab.on{background:linear-gradient(#8a4ad0,#6a2aa8);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.rk-lista{max-height:52vh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-bottom:8px}
.rk-fila{
  display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:12px;margin-bottom:5px;
  background:rgba(0,0,0,.26);border:2px solid transparent;font-size:13px;
}
.rk-fila.yo{border-color:var(--gold);background:linear-gradient(rgba(255,200,61,.2),rgba(255,200,61,.07))}
.rk-pos{min-width:26px;text-align:center;font-weight:800;color:var(--gold2);font-size:14px}
.rk-ava{font-size:20px}
.rk-nom{flex:1;min-width:0;font-weight:800;display:flex;flex-direction:column;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-nom small{font-size:10px;color:var(--muted);font-weight:600}
.rk-stars i{font-style:normal;color:#6b5d85;font-size:11px}
.rk-stars i.on{color:var(--gold)}
.rk-est{color:var(--gold2);font-weight:800;font-size:12px;white-space:nowrap}
.rk-pts{font-weight:800;font-size:12px;color:#fff;min-width:56px;text-align:right}
.rk-corte{text-align:center;color:var(--muted);letter-spacing:3px;padding:2px}
.rk-aviso{text-align:center;color:var(--muted);font-size:13px;line-height:1.5;padding:26px 10px}
.rk-yo{
  text-align:center;background:rgba(0,0,0,.3);border-radius:14px;padding:10px;margin-bottom:10px;
  font-size:16px;border:2px solid rgba(255,255,255,.14);
}
.rk-yo span{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-top:3px}
.rank-row{text-align:center;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}

/* ===== Fondos por lugar ===== */
.screen{isolation:isolate}
.fondo-capa{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:0;transition:opacity .7s ease;
}
.fondo-capa.on{opacity:1}
/* velo para que el tablero, los nodos y los textos se sigan leyendo */
.fondo-capa::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(30,8,60,.06),rgba(22,6,44,.12) 55%,rgba(16,4,32,.32));
}

/* ===== Cuenta ===== */
.aviso{display:none;font-size:13px;font-weight:700;text-align:center;padding:9px 10px;border-radius:12px;margin-bottom:6px;
  background:rgba(255,255,255,.12);color:#fff}
.aviso.on{display:block}
.aviso.malo{background:rgba(255,91,91,.22);color:#ffc9c9;border:1px solid rgba(255,91,91,.5)}
.cuenta-box{margin-bottom:4px}
.cuenta-box .p-muted{margin:2px 0 8px}
.cuenta-ok{background:rgba(63,212,106,.18);border:2px solid rgba(63,212,106,.5);border-radius:14px;
  padding:10px;font-size:13px;font-weight:700;text-align:center;line-height:1.4}
.cuenta-ok b{display:block;color:var(--green2);word-break:break-all;font-size:13px;margin-top:2px}

/* ===== Selfie ===== */
.selfie-marco{
  width:200px;height:200px;margin:4px auto 12px;border-radius:50%;overflow:hidden;
  border:4px solid var(--gold);background:rgba(0,0,0,.45);display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.selfie-marco video,.selfie-marco canvas{width:100%;height:100%;object-fit:cover;display:block}
.selfie-marco video{transform:scaleX(-1)}
.foto-fila{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.foto-mia{
  width:62px;height:62px;border-radius:50%;flex:0 0 auto;background:rgba(0,0,0,.3);
  border:3px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:30px;overflow:hidden;
}
.foto-mia img{width:100%;height:100%;object-fit:cover;display:block}
.foto-txt{flex:1;min-width:0}
.foto-txt .btn{margin-top:0}
.foto-txt .btn + .btn{margin-top:6px}
/* la foto reemplaza al emoji donde haga falta */
.chip-perfil .chip-ico img,.rk-ava img{width:1.5em;height:1.5em;border-radius:50%;object-fit:cover;display:block}
.chip-perfil .chip-ico,.rk-ava{display:grid;place-items:center}

/* ===== Caritas de los jugadores en el mapa ===== */
.caras{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.cara{
  position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:rgba(20,6,40,.9);border:2px solid #fff;overflow:hidden;pointer-events:auto;cursor:pointer;
  display:grid;place-items:center;font-size:12px;line-height:1;
  box-shadow:0 2px 5px rgba(0,0,0,.5);transition:transform .12s;
}
.cara:hover,.cara:active{transform:scale(1.25);z-index:4}
.cara img{width:100%;height:100%;object-fit:cover;display:block}
.cara.mas{background:var(--pink);border-color:#fff;font:800 10px/1 inherit;color:#fff;pointer-events:none}
.node.boss .cara{width:24px;height:24px;margin:-12px 0 0 -12px}

/* ===== Ficha del jugador ===== */
.fj-cara{
  width:96px;height:96px;margin:0 auto 10px;border-radius:50%;overflow:hidden;
  background:rgba(0,0,0,.3);border:4px solid var(--gold);display:grid;place-items:center;font-size:48px;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
}
.fj-cara img{width:100%;height:100%;object-fit:cover;display:block}
.fj-nombre{text-align:center;font:800 20px inherit;margin-bottom:10px;word-break:break-word}
.fj-nombre small{color:var(--muted);font-size:13px}
.fj-datos{display:flex;justify-content:center;gap:8px;margin-bottom:8px}
.fj-datos span{
  flex:1;background:rgba(0,0,0,.28);border:2px solid rgba(255,255,255,.12);border-radius:12px;
  padding:8px 4px;text-align:center;font-size:10px;color:var(--muted);font-weight:700;
  display:flex;flex-direction:column;gap:1px;
}
.fj-datos b{display:block;font-size:17px;color:var(--gold2)}
.fj-pts{text-align:center;color:var(--muted);font-size:13px;font-weight:700;margin-bottom:6px}

/* ===== Vistazo a un nivel bloqueado ===== */
.vz-marco{position:relative;display:grid;place-items:center;margin-bottom:12px}
.vz-marco canvas{
  max-width:100%;border-radius:16px;
  filter:grayscale(1) brightness(.85) contrast(1.05);    /* todavía no se puede jugar */
}
.vz-candado{
  position:absolute;font-size:52px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.7));opacity:.92;
}

/* ===== Racha de niveles ganados ===== */
.racha{
  background:linear-gradient(rgba(255,124,17,.28),rgba(255,79,154,.18));
  border:2px solid rgba(255,160,60,.55);border-radius:14px;padding:9px 10px;margin:8px 0 2px;
  text-align:center;font-size:15px;font-weight:800;line-height:1.25;
}
.racha b{color:var(--gold2)}
.racha small{display:block;font-size:11px;color:var(--muted);font-weight:700;margin-top:2px}

/* ===== Premios por video ===== */
.btn-video{
  background:linear-gradient(#ffd98a,#e08a1e);color:#4a2c00;box-shadow:0 5px 0 #a35f09,0 8px 14px rgba(0,0,0,.35);
  line-height:1.15;
}
.btn-video:active{box-shadow:0 1px 0 #a35f09}
.btn-video small{display:block;font-size:11px;font-weight:700;opacity:.75;margin-top:2px}
/* video de mentira para probar sin la app */
.video-prueba{position:fixed;inset:0;z-index:90;background:rgba(6,2,14,.92);display:grid;place-items:center;padding:20px}
.vp-caja{width:min(320px,100%);text-align:center;background:linear-gradient(var(--panel2),var(--panel));
  border:3px solid rgba(255,255,255,.2);border-radius:20px;padding:22px}
.vp-tele{font-size:60px;animation:bob 1.6s ease-in-out infinite}
.vp-caja b{display:block;font-size:18px;margin-top:6px}
.vp-caja p{color:var(--muted);font-size:13px;margin:4px 0 12px}
.vp-barra{height:8px;border-radius:99px;background:rgba(0,0,0,.4);overflow:hidden;margin-bottom:12px}
.vp-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));
  animation:vpCarga 3.2s linear forwards}
@keyframes vpCarga{to{width:100%}}

/* ===== Comprar "sin anuncios" ===== */
.btn-sinads{
  background:linear-gradient(#b9e8ff,#3aa0e0);color:#04314f;
  box-shadow:0 5px 0 #1e6d9e,0 8px 14px rgba(0,0,0,.35);line-height:1.15;
}
.btn-sinads:active{box-shadow:0 1px 0 #1e6d9e}
.btn-sinads small{display:block;font-size:11px;font-weight:700;opacity:.8;margin-top:2px}
.ya-sinads{
  background:rgba(63,212,106,.18);border:2px solid rgba(63,212,106,.6);border-radius:12px;
  padding:9px 12px;margin:0 0 10px;font-size:13px;font-weight:700;color:#bff5cf;text-align:center;
}
/* la fila destacada arriba de la tienda */
.shop-item.destacada{
  background:linear-gradient(90deg,rgba(58,160,224,.35),rgba(58,160,224,.12));
  border:2px solid rgba(185,232,255,.55);
}
.shop-item.destacada button{background:linear-gradient(#b9e8ff,#3aa0e0);color:#04314f;box-shadow:0 3px 0 #1e6d9e}

/* ===== Ventana de "te quedaste sin ..." ===== */
.mf-ico{font-size:54px;text-align:center;line-height:1;margin:2px 0 6px;animation:bob 1.8s ease-in-out infinite}
#m-faltan .p-muted{text-align:center}

/* titulo que separa lo que se paga con plata, dentro de la tienda */
.shop-titulo{
  margin:14px 0 6px;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);text-align:center;
}
.shop-item.plata{border:2px solid rgba(185,232,255,.45)}
.shop-item.plata button{background:linear-gradient(#b9e8ff,#3aa0e0);color:#04314f;box-shadow:0 3px 0 #1e6d9e}

/* ===== Niveles con dos objetivos ===== */
.goal-box{gap:0}
.goal-uno{display:flex;align-items:center;gap:7px}
/* con dos, achicamos un poco todo para que entren en la barra */
.goal-box.dos{gap:10px}
.goal-box.dos .goal-ico{font-size:17px;width:26px;height:26px}
.goal-box.dos .goal-txt b{font-size:15px}
.goal-box.dos .goal-txt small{font-size:9px}

/* ===== Íconos de objetivo dibujados (caramelo del color pedido) ===== */
.con-dibujo{display:flex;align-items:center;justify-content:center;line-height:0}
.con-dibujo canvas{display:block}

/* ===== Pestaña del pago: "ya está, volvé al juego" ===== */
.tapa-pago{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,#6a2aa8,#2a0f4d 60%,#1a0733);color:#fff;
  font-family:Verdana,"Trebuchet MS",system-ui,sans-serif;
}
.tapa-pago .tp-ico{font-size:64px;animation:bob 1.8s ease-in-out infinite}
.tapa-pago b{display:block;font-size:22px;margin:10px 0 6px;color:var(--gold2)}
.tapa-pago p{color:var(--muted);font-size:15px;max-width:320px;margin:0 auto}

/* ===== El caramelo de la pantalla de inicio, para jugar con el dedo ===== */
/* Es el mismo caramelo de siempre: lo único que cambia es el color, girando
   el tono con un filtro. */
.boot-logo{
  position:relative;display:grid;place-items:center;
  width:124px;height:124px;margin:0 auto;padding:0;border:0;background:none;cursor:pointer;
  font-size:88px;line-height:1;animation:bob 2s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
.boot-logo .carita{display:block;transition:transform .12s, filter .25s}
.boot-logo:active .carita{transform:scale(.88)}
.boot-logo.pum .carita{animation:caramPum .5s ease-out}
@keyframes caramPum{
  0%{transform:scale(1)}
  22%{transform:scale(1.35) rotate(-8deg)}
  45%{transform:scale(.72) rotate(6deg)}
  100%{transform:scale(1) rotate(0)}
}
.chispa{
  position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;
  pointer-events:none;animation:chispaVuela .6s ease-out forwards;
}
@keyframes chispaVuela{
  from{transform:translate(-50%,-50%) scale(1);opacity:1}
  to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.25);opacity:0}
}

/* ===== Barra de juego en pantallas angostas =====
   En un celular común entran justo el objetivo, las movidas y el puntaje, y si
   además el nivel tiene DOS objetivos se amontona todo. Acá se achica cada cosa
   lo justo para que nada se pise. */
@media (max-width:430px){
  .gamebar{gap:6px;padding-left:6px;padding-right:6px}
  .goal-box,.moves-box{padding:4px 7px;gap:5px;border-radius:12px}
  .goal-ico{font-size:19px}
  .goal-txt b{font-size:15px}
  .goal-txt small,.moves-box small{font-size:9px}
  .moves-box{min-width:46px}
  .moves-box b{font-size:18px}
  .score-box b{font-size:13px}
  .stars-bar{max-width:112px;height:11px}
  .stars-bar .st{font-size:13px;top:-4px}
  .gamebar .icon-btn{width:34px;height:34px;font-size:16px}
  /* con dos objetivos hay que apretar un poco más */
  .goal-box.dos{gap:7px;padding:4px 6px}
  .goal-box.dos .goal-ico{font-size:15px;width:22px;height:22px}
  .goal-box.dos .goal-txt b{font-size:13px}
  .goal-box.dos .goal-txt small{font-size:8px}
}
@media (max-width:340px){
  .goal-txt small,.moves-box small{display:none}   /* en las más chicas, sin etiquetas */
  .stars-bar{max-width:86px}
}

/* ===== Denunciar a un jugador ===== */
.btn-denunciar{margin-top:14px;font-size:13px;padding:9px 14px;opacity:.75}
.btn-denunciar:hover{opacity:1}
#m-denuncia .btn-ghost{text-align:left;font-size:14px}

/* ===== Botón de Google adentro de la app =====
   Google pide fondo blanco, su letra y su dibujo, así que este botón no
   sigue el estilo del resto del juego. */
.btn-google{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:260px;max-width:100%;padding:11px 16px;border:none;border-radius:999px;
  background:#fff;color:#3c4043;cursor:pointer;
  font:600 15px/1 Roboto,'Trebuchet MS',Verdana,system-ui,sans-serif;
  box-shadow:0 2px 0 rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.25)}
.btn-google:active{transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,.35)}
.btn-google svg{flex:0 0 auto}