/* =============================================================
   style.css — aspecto de menús, HUD y botones.
   El juego en sí se dibuja en el canvas; esto es todo lo demás.
   ============================================================= */

/* Fuentes propias, incluidas en local (licencia OFL, ver CREDITS.md).
   Nada de CDNs: el juego no hace ninguna petición fuera de su carpeta. */
@font-face{
  font-family:'Chakra Petch';
  src:url('fonts/ChakraPetch-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Chakra Petch';
  src:url('fonts/ChakraPetch-SemiBold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Chakra Petch';
  src:url('fonts/ChakraPetch-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('fonts/JetBrainsMono.ttf') format('truetype');
  font-weight:400 800; font-style:normal; font-display:swap;
}

:root{
  --bg:#04060f;
  --cyan:#38e8ff;
  --green:#3ef2a0;
  --pink:#ff5d8f;
  --gold:#ffd166;
  --violet:#b388ff;
  --ink:#e8f6ff;
  --dim:#7b90a8;
  --panel:rgba(9,16,30,.92);
  --line:rgba(56,232,255,.28);
  --font: 'Chakra Petch', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  width:100%; height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  touch-action:none;
}

#app{
  position:fixed; top:0; right:0; bottom:0; left:0; inset:0;
  display:block;
  touch-action:none;
}

canvas#game{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  width:100%; height:100%;
  display:block;
  touch-action:none;
}

.hidden{ display:none !important; }

/* ---------------- Botones ---------------- */
.btn{
  -webkit-appearance:none; appearance:none;
  font-family:var(--font);
  font-size:16px; font-weight:700; letter-spacing:.09em;
  color:var(--ink);
  background:rgba(56,232,255,.08);
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:14px 20px;
  min-height:48px;
  cursor:pointer;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
  width:100%;
  touch-action:manipulation;
}
.btn:hover{ background:rgba(56,232,255,.16); border-color:var(--cyan); }
.btn:active{ transform:scale(.97); }
.btn.primary{
  background:linear-gradient(180deg, rgba(62,242,160,.28), rgba(56,232,255,.16));
  border-color:var(--green);
  color:#eafff6;
  box-shadow:0 0 22px rgba(62,242,160,.22);
}
.btn.primary:hover{ background:linear-gradient(180deg, rgba(62,242,160,.42), rgba(56,232,255,.24)); }
.btn.big{ font-size:21px; padding:18px 22px; min-height:60px; }
.btn.ghost{ background:transparent; border-color:rgba(123,144,168,.35); color:var(--dim); }
.btn.ghost:hover{ color:var(--ink); border-color:var(--dim); }
.btn.reward{
  background:linear-gradient(180deg, rgba(255,209,102,.26), rgba(255,93,143,.14));
  border-color:var(--gold); color:#fff4d8;
  box-shadow:0 0 20px rgba(255,209,102,.2);
}
.btn.reward .tv{ color:var(--gold); margin-right:8px; }
.btn[disabled]{ opacity:.45; cursor:default; }
.btn-row{ display:flex; gap:10px; width:100%; }
.menu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }

/* ---------------- Ofertas (anuncio / monedas / no gracias) ----------------
   El portal exige que el botón de rechazar tenga el mismo tamaño, tipografía
   y color que el del anuncio. Por eso TODAS las opciones de una oferta usan
   exactamente la misma clase .offer; solo cambia el texto.                  */
.offer-box{ width:100%; display:flex; flex-direction:column; gap:8px; }
.offer-row{ display:flex; gap:8px; width:100%; }
.offer-row > .btn.offer{ flex:1 1 0; min-width:0; }
.offer-col{ display:flex; flex-direction:column; gap:10px; width:100%; }
.btn.offer{
  font-size:14px; letter-spacing:.06em;
  padding:11px 10px; min-height:48px;
  background:rgba(56,232,255,.08);
  border-color:var(--line);
  color:var(--ink);
  white-space:normal; line-height:1.25;
}
.btn.offer:hover{ background:rgba(56,232,255,.16); border-color:var(--cyan); }
.btn.offer .tv{ margin-right:6px; }
.btn.offer .coin-dot{ display:inline-block; width:10px; height:10px; margin:0 5px 0 3px; vertical-align:-1px; }
.btn.offer .count{ font-family:var(--mono); }
.ad-note{
  font-size:12.5px; line-height:1.4; color:var(--gold);
  text-align:center; padding:2px 4px;
}
.boost-ready{
  font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--green);
  border:1.5px solid rgba(62,242,160,.35); border-radius:12px;
  padding:12px; text-align:center; background:rgba(62,242,160,.07);
}
.menu-grid .span2{ grid-column:1 / -1; }
.wide-btn{ margin-top:14px; }

.chip{
  -webkit-appearance:none; appearance:none;
  font-family:var(--font); font-size:12px; font-weight:700; letter-spacing:.1em;
  color:var(--dim);
  background:transparent;
  border:1.5px solid rgba(123,144,168,.3);
  border-radius:999px;
  padding:10px 14px; min-height:44px;
  cursor:pointer;
  touch-action:manipulation;
}
.chip.on{ color:var(--cyan); border-color:var(--line); }
.chip:active{ transform:scale(.96); }

.icon-btn{
  -webkit-appearance:none; appearance:none;
  width:46px; height:46px;
  border-radius:12px;
  border:1.5px solid var(--line);
  background:rgba(9,16,30,.6);
  color:var(--ink);
  font-size:15px; font-weight:800; letter-spacing:2px;
  cursor:pointer;
  touch-action:manipulation;
}

/* ---------------- Pantallas ---------------- */
.screen{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  display:none;
  align-items:center; justify-content:center;
  padding:16px;
  padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  /* Se ve el sector de fondo: el menú no es una pantalla aparte */
  background:radial-gradient(ellipse at center, rgba(4,6,15,.60), rgba(4,6,15,.88));
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  z-index:20;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
.screen.show{ display:flex; animation:fade .18s ease-out; }
.screen.no-dim{ background:rgba(5,7,15,.55); }
@keyframes fade{ from{opacity:0} to{opacity:1} }

.panel{
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:18px;
  padding:26px 22px;
  width:min(420px, 100%);
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  box-shadow:0 0 60px rgba(56,232,255,.10), inset 0 0 40px rgba(56,232,255,.04);
}
.panel.wide{ width:min(620px, 100%); }
.panel.center{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.menu-panel{ gap:14px; }
.level-panel{ width:min(880px, 100%); }
.results-panel{ gap:10px; }

.logo{
  font-size:34px; font-size:clamp(34px, 9vw, 54px);
  font-weight:900; letter-spacing:.18em;
  color:var(--cyan);
  text-shadow:0 0 14px rgba(56,232,255,.6), 0 0 42px rgba(56,232,255,.28);
  line-height:1;
}
h2{
  font-size:20px; font-size:clamp(20px, 5vw, 27px); font-weight:900; letter-spacing:.14em;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(56,232,255,.45);
}
.glow-green{ color:var(--green); text-shadow:0 0 14px rgba(62,242,160,.5); }
.glow-pink{ color:var(--pink); text-shadow:0 0 14px rgba(255,93,143,.5); }
.tag{ color:var(--dim); font-size:14px; letter-spacing:.06em; }
.tag.small{ font-size:12.5px; }
.muted{ color:var(--dim); }

.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }

/* Monedero */
.wallet{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:17px; font-weight:700;
  color:var(--gold);
  background:rgba(255,209,102,.08);
  border:1px solid rgba(255,209,102,.28);
  border-radius:999px; padding:8px 16px;
}
.wallet.small{ font-size:14px; padding:6px 12px; }
.wallet-sep{ width:1px; height:16px; background:rgba(255,209,102,.3); }
.wallet .muted{ font-size:13px; color:var(--dim); }
.coin-dot{
  width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #fff2c0, var(--gold));
  box-shadow:0 0 9px rgba(255,209,102,.7);
  flex:none;
}

.settings-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:2px; }

.help{ list-style:none; display:flex; flex-direction:column; gap:12px; margin:14px 0 4px; }
.help li{
  color:var(--ink); font-size:14.5px; line-height:1.5;
  padding-left:20px; position:relative; text-align:left;
}
.help li::before{ content:'▸'; position:absolute; left:0; color:var(--green); }

/* ---------------- Listas (tienda / personajes) ---------------- */
.list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }

.row{
  display:flex; align-items:center; gap:12px;
  background:rgba(56,232,255,.05);
  border:1.5px solid rgba(56,232,255,.16);
  border-radius:14px;
  padding:12px 14px;
  text-align:left;
}
.row.locked{ opacity:.55; }
.row.active{ border-color:var(--green); background:rgba(62,242,160,.09); }
.row-main{ flex:1; min-width:0; }
.row-name{ font-weight:800; font-size:15px; letter-spacing:.06em; color:var(--ink); }
.row-desc{ font-size:12.5px; color:var(--dim); margin-top:3px; line-height:1.35; }
.row-side{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; }
.row .btn{ width:auto; min-width:104px; padding:11px 14px; font-size:13px; min-height:44px; }

.pips{ display:flex; gap:4px; }
.pip{ width:13px; height:6px; border-radius:3px; background:rgba(123,144,168,.28); }
.pip.on{ background:var(--green); box-shadow:0 0 7px rgba(62,242,160,.6); }

.price{ font-family:var(--mono); font-size:13px; color:var(--gold); display:flex; align-items:center; gap:5px; }
.price .coin-dot{ width:9px; height:9px; }

/* ---------------- Cartas de mejora ---------------- */
.cards{ display:flex; gap:12px; width:100%; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.card{
  flex:1 1 220px; max-width:270px; min-width:0;
  background:rgba(9,16,30,.94);
  border:1.5px solid var(--line);
  border-radius:16px;
  padding:18px 16px;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  text-align:center;
  transition:transform .1s ease, border-color .15s ease, background .15s ease;
  touch-action:manipulation;
  min-height:44px;
  /* Es un <button>: sin esto hereda el texto negro por defecto del navegador */
  color:var(--ink);
  font-family:var(--font);
}
.card:hover{ border-color:var(--green); background:rgba(62,242,160,.08); transform:translateY(-3px); }
.card:active{ transform:scale(.98); }
.card-icon{ width:52px; height:52px; flex:none; }
.card-ico{ display:flex; flex:none; }
.card .card-icon{ width:64px; height:64px; }
.card-name{
  font-weight:800; font-size:19px; letter-spacing:.1em;
  text-transform:uppercase;
  color:#ffffff;
  text-shadow:0 0 12px rgba(62,242,160,.75), 0 0 3px rgba(255,255,255,.7);
}
.card-desc{ font-size:14px; color:#c4d3e6; line-height:1.35; }
.card-badge.hidden, .card-hint.hidden{ display:none; }
/* Las cartas entran una tras otra (solo transformación y opacidad: barato en móvil) */
.screen.show .card{ animation:cartaEntra .3s cubic-bezier(.2,1.4,.4,1) both; animation-delay:calc(var(--i, 0) * 70ms); }
@keyframes cartaEntra{ from{ opacity:0; transform:translateY(18px) scale(.92); } to{ opacity:1; transform:none; } }
.card-badge{
  font-size:12px; font-weight:800; letter-spacing:.12em;
  padding:3px 9px; border-radius:999px;
  border:1px solid currentColor;
}
.badge-new{ color:var(--gold); }
.badge-lv{ color:var(--cyan); }

/* Rareza: el marco y el icono llevan el color. Una ojeada basta para
   saber si la carta es común, rara o épica. */
.card.common{ --rar:var(--cyan); }
.card.rare{   --rar:var(--violet); }
.card.epic{   --rar:var(--gold); }
.card{ border-color:color-mix(in srgb, var(--rar, var(--cyan)) 40%, transparent); }
.card .card-icon{ color:var(--rar, var(--cyan)); filter:drop-shadow(0 0 7px currentColor); }
.card:hover{ border-color:var(--rar, var(--green)); background:rgba(56,232,255,.08); }
.card.rare:hover{ background:rgba(179,136,255,.10); }
.card.epic:hover{ background:rgba(255,209,102,.10); }
.card.hook::after{
  content:'SHORT CIRCUIT';
  position:absolute; top:8px; right:10px;
  font-size:9px; font-weight:800; letter-spacing:.14em;
  color:var(--cyan); opacity:.75;
}
.card{ position:relative; }
.r-common{ color:var(--cyan); }
.r-rare{ color:var(--violet); }
.r-epic{ color:var(--gold); }

/* ---------------- Ajustes ---------------- */
.set-list{ width:100%; display:flex; flex-direction:column; gap:10px; margin:4px 0 12px; }
.set-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  border:1px solid rgba(56,232,255,.16); border-radius:12px;
  background:rgba(56,232,255,.04);
  min-height:52px;
}
.set-name{ flex:1 1 auto; font-size:13px; font-weight:700; letter-spacing:.11em; color:var(--ink); }
.set-val{ font-family:var(--mono); font-size:13px; color:var(--cyan); min-width:46px; text-align:right; }
.chip.grow{ min-width:88px; }

.slider{
  -webkit-appearance:none; appearance:none;
  flex:2 1 150px; height:26px; background:transparent; cursor:pointer; margin:0;
}
.slider::-webkit-slider-runnable-track{
  height:6px; border-radius:99px;
  background:linear-gradient(90deg, rgba(56,232,255,.75), rgba(179,136,255,.5));
}
.slider::-moz-range-track{
  height:6px; border-radius:99px;
  background:linear-gradient(90deg, rgba(56,232,255,.75), rgba(179,136,255,.5));
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; margin-top:-7px; border-radius:50%;
  background:var(--ink); border:2px solid var(--cyan);
  box-shadow:0 0 12px rgba(56,232,255,.6);
}
.slider::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--ink); border:2px solid var(--cyan);
  box-shadow:0 0 12px rgba(56,232,255,.6);
}
.slider:focus-visible{ outline:2px solid var(--cyan); outline-offset:4px; border-radius:99px; }

@media (max-width:560px){
  .set-row{ flex-wrap:wrap; gap:8px; }
  .slider{ flex:1 1 100%; order:3; }
}

/* ---------------- Nombre del nanobot (opcional) ---------------- */
.name-edit{ display:flex; align-items:center; gap:8px; flex:0 1 62%; min-width:0; }
.name-input{
  -webkit-appearance:none; appearance:none;
  flex:1 1 auto; min-width:0; width:100%;
  font-family:var(--mono); font-size:16px; font-weight:700; letter-spacing:.06em;   /* 16px: iOS no hace zoom */
  color:var(--ink); background:rgba(4,6,15,.75);
  border:1.5px solid var(--line); border-radius:10px;
  padding:9px 12px; min-height:44px;
  -webkit-user-select:text; user-select:text; touch-action:auto;
}
.name-input::placeholder{ color:var(--dim); opacity:.8; }
.name-input:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 14px rgba(56,232,255,.25); }
.name-ok{ flex:0 0 auto; }
.name-row .set-name{ flex:0 0 auto; }
@media (max-width:560px){ .name-edit{ flex:1 1 100%; } }
.profile{ width:100%; margin:2px 0 10px; }
.profile-row{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  border:1px solid rgba(56,232,255,.18); border-radius:12px; background:rgba(56,232,255,.05);
}
.profile-icon{ width:30px; height:30px; flex:0 0 30px; color:var(--cyan); }
.profile-icon svg{ width:100%; height:100%; }
.profile-name{
  flex:1 1 auto; min-width:0; font-family:var(--mono); font-size:16px; font-weight:800; letter-spacing:.06em;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.profile-edit, .name-invite{ display:inline-flex; align-items:center; gap:6px; }
.profile-edit svg, .name-invite svg{ width:16px; height:16px; }
.profile .name-edit{ margin-top:8px; flex:1 1 auto; width:100%; }
/* SHOW NAME IN RUNS también aquí, junto al nombre (de serie, apagado) */
.profile-show{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; padding:0 12px; }
.profile-show span{ font-size:12px; font-weight:700; letter-spacing:.11em; color:var(--dim); }
.res-name{
  font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--cyan);
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.9;
}
.res-name .res-unit{ color:var(--dim); }
.name-invite{
  -webkit-appearance:none; appearance:none; margin-top:6px;
  font-family:var(--font); font-size:12px; font-weight:700; letter-spacing:.1em;
  color:var(--cyan); background:transparent; border:1px dashed rgba(56,232,255,.4); border-radius:999px;
  padding:7px 14px; min-height:36px; cursor:pointer; touch-action:manipulation;
}
.res-head .name-edit{ margin-top:6px; width:min(320px, 100%); flex:none; }

/* ---------------- Botón de dash (táctil) ---------------- */
.dash-btn{
  position:absolute; right:22px; bottom:24px; z-index:13;
  width:128px; height:128px; border-radius:50%;          /* grande: fácil de acertar (Mario, PC4) */
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-family:var(--font); font-size:16px; font-weight:800; letter-spacing:.14em;
  color:var(--ink);
  background:radial-gradient(circle at 38% 32%, rgba(56,232,255,.22), rgba(56,232,255,.06));
  border:2.5px solid rgba(56,232,255,.5);
  box-shadow:0 0 22px rgba(56,232,255,.22);
  touch-action:none; cursor:pointer; user-select:none; -webkit-user-select:none;
}
.dash-btn small{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--dim); font-weight:700; }
.dash-btn:active{ transform:scale(.94); background:rgba(56,232,255,.28); }
@media (max-height:470px){ .dash-btn{ width:104px; height:104px; right:14px; bottom:14px; font-size:14px; } }
@media (max-width:560px) and (orientation:portrait){ .dash-btn{ width:118px; height:118px; right:16px; bottom:22px; } }

/* ---------------- Resultados ---------------- */
.stats{ width:100%; display:flex; flex-direction:column; gap:7px; margin:6px 0 10px; }
.stat{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; gap:10px; }
.stat span:first-child{ color:var(--dim); }
.stat span:last-child{ font-family:var(--mono); font-weight:700; color:var(--ink); }
.stat.gold span:last-child{ color:var(--gold); }
.record{
  color:var(--gold); font-weight:900; letter-spacing:.14em; font-size:14px;
  text-shadow:0 0 12px rgba(255,209,102,.5);
  animation:pop .5s ease-out;
}
@keyframes pop{ from{ transform:scale(.7); opacity:0 } to{ transform:scale(1); opacity:1 } }


/* ---------------- HUD ---------------- */
#hud{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  pointer-events:none;
  z-index:10;
  padding:10px 12px 0;
  padding:max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  display:flex; flex-direction:column; gap:7px;
}
.hud-top{ display:flex; align-items:flex-start; gap:12px; }
.hud-left{ flex:1 1 0; max-width:230px; }
.hud-center{ flex:0 0 auto; text-align:center; }
.hud-right{ flex:1 1 0; display:flex; justify-content:flex-end; }
#btn-pause{ pointer-events:auto; }

.big-num{
  font-family:var(--mono); font-size:22px; font-size:clamp(22px, 5.4vw, 30px); font-weight:800;
  color:var(--ink); letter-spacing:.04em; line-height:1;
  text-shadow:0 0 12px rgba(56,232,255,.35);
}
.hud-sub{ font-size:12px; color:var(--dim); letter-spacing:.1em; margin-top:3px; }

.bar{
  position:relative;
  height:20px;
  background:rgba(4,8,16,.72);
  border:1.5px solid rgba(56,232,255,.25);
  border-radius:999px;
  overflow:hidden;
}
.bar .fill{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; width:100%; transform-origin:left center; transition:transform .12s linear; }
.hp-bar .fill{ background:linear-gradient(90deg, #3ef2a0, #38e8ff); box-shadow:0 0 12px rgba(62,242,160,.5); }
.hp-bar span{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; font-weight:800; color:#04110c;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.xp-row{ display:flex; align-items:center; gap:9px; }
.lv-chip{
  font-family:var(--mono); font-size:12px; font-weight:800; letter-spacing:.08em;
  color:var(--violet);
  border:1.5px solid rgba(179,136,255,.4);
  background:rgba(179,136,255,.1);
  border-radius:999px; padding:3px 9px; flex:none;
}
.xp-bar{ flex:1; height:9px; border-color:rgba(179,136,255,.3); }
.xp-bar .fill{ background:linear-gradient(90deg, #b388ff, #38e8ff); box-shadow:0 0 10px rgba(179,136,255,.5); }

.boss-wrap{ margin:2px auto 0; width:min(460px, 94%); text-align:center; }
.boss-name{
  font-size:12px; font-weight:900; letter-spacing:.24em; color:var(--pink);
  text-shadow:0 0 10px rgba(255,93,143,.5); margin-bottom:3px;
}
.boss-hp{ height:11px; border-color:rgba(255,93,143,.4); }
.boss-hp .fill{ background:linear-gradient(90deg, #ff5d8f, #ffd166); box-shadow:0 0 12px rgba(255,93,143,.5); }

/* ---------------- Joystick ---------------- */
#stick{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:12; pointer-events:none; }
#stick-base{
  position:absolute; width:124px; height:124px; margin:-62px 0 0 -62px;
  border-radius:50%;
  border:2px solid rgba(56,232,255,.3);
  background:rgba(56,232,255,.05);
  opacity:0; transition:opacity .12s ease;
}
#stick.active #stick-base{ opacity:1; }
#stick-knob{
  position:absolute; left:50%; top:50%;
  width:54px; height:54px; margin:-27px 0 0 -27px;
  border-radius:50%;
  background:radial-gradient(circle at 36% 32%, rgba(62,242,160,.75), rgba(56,232,255,.35));
  border:2px solid rgba(62,242,160,.7);
  box-shadow:0 0 18px rgba(62,242,160,.4);
}

/* ---------------- Capas de anuncio ---------------- */
.ad-layer{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:60;
  display:none; align-items:center; justify-content:center;
  background:rgba(2,4,9,.96);
}
.ad-layer.show{ display:flex; }
.ad-box{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px; }
.ad-label{ font-size:20px; font-weight:900; letter-spacing:.2em; color:var(--dim); }
.ad-sub{ font-size:13px; color:#4d5d72; max-width:320px; line-height:1.5; }
.ad-count{ font-family:var(--mono); font-size:34px; font-weight:800; color:var(--cyan); }
.spinner{
  width:36px; height:36px; border-radius:50%;
  border:3px solid rgba(56,232,255,.2); border-top-color:var(--cyan);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ---------------- Avisos ---------------- */
#toast{
  position:absolute; left:50%; bottom:24px; bottom:max(24px, env(safe-area-inset-bottom));
  transform:translate(-50%, 20px);
  background:rgba(9,16,30,.96);
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:11px 20px;
  font-size:13px; color:var(--ink);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:70; max-width:88vw; text-align:center;
}
#toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ---------------- Pantallas pequeñas ---------------- */
@media (max-width:520px){
  .panel{ padding:20px 16px; border-radius:16px; }
  .card{ flex:1 1 100%; max-width:none; padding:14px; flex-direction:row; text-align:left; gap:14px; min-height:84px; }
  .chest-choice{ flex-wrap:wrap; }
  .card-icon, .card .card-icon{ width:50px; height:50px; }
  .card-body{ flex:1; }
  .cards{ gap:9px; }
  .hud-left{ max-width:150px; }
  .row{ padding:10px 11px; gap:9px; }
  .row .btn{ min-width:90px; font-size:12px; padding:10px; }
}
/* Móvil en horizontal: hay muy poca altura, así que se compacta todo
   y los botones secundarios pasan a una rejilla de 2 columnas. */
@media (max-height:470px){
  .panel{ padding:13px 16px; }
  .panel.center{ gap:8px; }
  .menu-panel{ gap:8px; width:min(500px, 100%); }
  .logo{ font-size:27px; letter-spacing:.14em; }
  h2{ font-size:19px; }
  #menu-sub, #s-menu .tag{ display:none; }
  .wallet{ padding:5px 13px; font-size:14px; }
  .btn{ font-size:13.5px; padding:10px 12px; min-height:44px; }
  .btn.big{ font-size:17px; min-height:48px; padding:12px; }
  .menu-grid{ grid-template-columns:repeat(3, 1fr); }
  .btn.offer{ font-size:13px; padding:9px 8px; min-height:44px; }
  .offer-col{ gap:8px; }
  .offer-box{ gap:6px; }
  /* Estadísticas de resultados en dos columnas para ahorrar altura */
  .stats{ display:grid; grid-template-columns:1fr 1fr; column-gap:18px; }
  .settings-row{ margin-top:0; }
  .chip{ padding:8px 12px; min-height:44px; font-size:12px; }
  .cards{ flex-wrap:nowrap; gap:8px; }
  .card{ flex:1 1 0; padding:11px; flex-direction:column; text-align:center; }
  .card-icon, .card .card-icon{ width:40px; height:40px; }
  .card-name{ font-size:16px; }
  .card-desc{ font-size:12.5px; }
  .card-hint{ display:none; }
  .stats{ gap:4px; margin:4px 0 6px; }
  .stat{ font-size:12.5px; }
  .help li{ font-size:12.5px; }
}

/* =============================================================
   Fase 3: evoluciones, cofres, presentación de jefes, modo sin fin
   ============================================================= */

/* Carta de evolución: marco blanco dorado y un brillo que recorre el borde */
.card.evolution{ --rar:#fff0b0; border-width:2px; background:linear-gradient(160deg, rgba(255,240,176,.12), rgba(9,16,30,.94) 55%); }
/* El borde que gira (evoluciones y legendarias). Fase C (tirones): antes era un degradado cónico
   recortado con una máscara doble y girado con @property, que la tarjeta gráfica tenía que pintar
   entero al aparecer la carta (~30 ms de golpe al estallar el cofre de jefe, más en un móvil) y, en
   PC, otra vez en CADA fotograma. Ahora (span .aro, ui.js): una pieza cuadrada con el degradado que
   gira con transform (lo mueve el compositor, sin repintar), recortada por un marco redondeado, y
   encima el fondo de la carta (opaco) que solo deja ver los 2 px del borde. */
.aro{ display:none; }
.card.legendary, .card.evolution, .reel-card.evolution.parado{ isolation:isolate; }
.card.legendary .aro, .card.evolution .aro, .reel-card.evolution.parado .aro{
  display:block; position:absolute; top:-2px; right:-2px; bottom:-2px; left:-2px; inset:-2px;
  border-radius:16px; overflow:hidden; z-index:-1; pointer-events:none; }
.aro i{ position:absolute; left:50%; top:50%; width:220%; height:0; padding-top:220%; margin:-110% 0 0 -110%;
  animation:aroGira 2.4s linear infinite; }
.aro b{ position:absolute; top:2px; right:2px; bottom:2px; left:2px; inset:2px; border-radius:14px; }
@keyframes aroGira{ to{ transform:rotate(360deg); } }
.card.evolution .aro i, .reel-card.evolution.parado .aro i{
  background:conic-gradient(transparent 0 70%, rgba(255,240,176,.75) 80%, transparent 90%); }
.reel-card.evolution.parado .aro i{ background:conic-gradient(transparent 0 70%, rgba(255,240,176,.85) 80%, transparent 90%); }
.card.evolution .aro b{ background:linear-gradient(160deg, #242527, #090f1d 55%); }
.reel-card.evolution.parado .aro b{ background:#090f1d; }
.r-evolution{ color:#fff0b0; }
.r-legendary{ color:#ff7ae0; }
.card.legendary{ --rar:#ff7ae0; border-width:2px; background:linear-gradient(160deg, rgba(255,122,224,.16), rgba(9,16,30,.94) 58%); }
.card.legendary .aro i{ background:conic-gradient(#ff7ae0, #ffd166, #38e8ff, #b388ff, #ff7ae0); opacity:.9; animation-duration:3s; }
/* (el fondo de antes, con la transparencia de arriba ya mezclada sobre el oscuro de las pantallas) */
.card.legendary .aro b{ background:linear-gradient(160deg, #2e1b33, #090f1d 58%); }
.card.legendary:hover .aro b{ background:linear-gradient(160deg, #3a2240, #0c1424 58%); }
.card.evolution:hover .aro b{ background:linear-gradient(160deg, #2e2f31, #0c1424 55%); }
.card.legendary .card-name{ text-shadow:0 0 12px rgba(255,122,224,.8), 0 0 3px rgba(255,255,255,.7); }
.card-hint{ font-size:11px; color:var(--dim); opacity:.75; margin-top:5px; letter-spacing:.03em; }

/* Cofre: una ceremonia en cuatro tiempos (carga, estallido, ruletas, monedas) */
.chest-screen{ background:radial-gradient(ellipse at center, rgba(40,28,4,.6), rgba(4,6,15,.86)); overflow:hidden; }
/* El cofre está SIEMPRE maquetado y pintado, transparente y sin recibir toques: al abrirlo solo
   cambia su opacidad. (Antes se ocultaba con visibility, que se HEREDA: mostrarlo obligaba a
   recalcular el estilo de sus ~110 elementos en el mismo fotograma de la apertura: con la CPU de un
   móvil, un tirón de 70-150 ms. Medido con una traza de Chrome, 09-10, PERFORMANCE.md.) Sin el
   desenfoque de fondo de las demás pantallas: el juego se ve detrás tal cual (y es mucho más barato). */
#s-chest{ display:flex; opacity:0; pointer-events:none; contain:layout style paint; -webkit-backdrop-filter:none; backdrop-filter:none; }
#s-chest.show{ opacity:1; pointer-events:auto; }
/* (cerrado, nada de dentro recibe toques aunque quede alguna clase de la ceremonia: es invisible
   pero sigue ahí, y sus cartas o su SKIP no pueden tapar el botón PLAY ni el campo de juego) */
#s-chest:not(.show) *{ pointer-events:none !important; }
#s-level{ -webkit-backdrop-filter:none; backdrop-filter:none; }
.chest-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; z-index:2; }
.chest-rays{
  position:absolute; left:50%; top:50%; width:760px; height:760px; margin:-380px 0 0 -380px; pointer-events:none;
  background:repeating-conic-gradient(rgba(255,211,90,.2) 0 7deg, transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle, #000 0, transparent 62%); mask:radial-gradient(circle, #000 0, transparent 62%);
  opacity:0; transform:scale(.3);
}
.chest-screen.abierto .chest-rays{ animation:rayosSalen .7s cubic-bezier(.2,1.4,.4,1) forwards, giraRayos 12s linear infinite; }
/* Con lienzo (ui.js, Rayos): las franjas ya vienen pintadas; sin degradado, máscara ni esquinas
   redondeadas que la tarjeta gráfica tenga que calcular al estallar el cofre (fase C, tirones) */
.chest-rays.lienzo, .chest-screen.leg .chest-rays.lienzo, body.lowfx .chest-rays.lienzo,
body.lowfx .chest-screen.leg .chest-rays.lienzo{ background:none; -webkit-mask:none; mask:none; border-radius:0; }
.rays-cv{ display:block; width:100%; height:100%; }
.chest-screen.rico .chest-rays{ background:repeating-conic-gradient(rgba(255,211,90,.26) 0 6deg, rgba(56,232,255,.1) 6deg 9deg, transparent 9deg 18deg); }
@keyframes rayosSalen{ to{ opacity:1; transform:scale(1); } }
@keyframes giraRayos{ from{ rotate:0deg; } to{ rotate:360deg; } }
.chest-flash{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; pointer-events:none; opacity:0; z-index:3;
  background:radial-gradient(circle at center, #fff 0, rgba(255,230,150,.85) 25%, rgba(255,211,90,0) 70%); }
.chest-screen.abierto .chest-flash{ animation:destello .7s ease-out; }
.chest-screen.suave .chest-flash{ display:none; }
@keyframes destello{ 0%{ opacity:0; } 12%{ opacity:.95; } 100%{ opacity:0; } }
.chest-title{ position:relative; color:var(--gold); letter-spacing:.24em; text-shadow:0 0 18px rgba(255,211,90,.7);
  animation:entraAbajo .35s ease-out; margin:0; }
.chest-stage{ position:relative; display:flex; align-items:center; justify-content:center; min-height:150px; }
/* (el cofre va SIEMPRE fuera del flujo, centrado en su escenario: al abrirse no se recoloca nada) */

/* El cofre dibujado: tiembla y se carga de luz; al abrirse, la tapa sale volando */
.chest-box{ position:absolute; left:50%; top:50%; margin:-62.5px 0 0 -75px; width:150px; height:125px; filter:drop-shadow(0 0 6px rgba(255,211,90,.5)); }
.chest-box svg{ width:100%; height:100%; overflow:visible; }
.cb-fill{ fill:#0d1424; }
.cb-line{ fill:none; stroke:var(--gold); stroke-width:3; stroke-linejoin:round; }
.cb-line.thin{ stroke-width:1.6; opacity:.7; }
.cb-lock{ fill:var(--gold); }
.chest-screen.rico .cb-line{ stroke:#fff0b0; }
.chest-screen.carga .chest-box{ animation:cofreCae .35s cubic-bezier(.3,1.6,.5,1), cofreTiembla .9s ease-in .2s forwards; }
.chest-screen.carga .cb-lock{ animation:cerrojo .9s ease-in .2s forwards; }
.cb-lid{ transform-box:fill-box; transform-origin:50% 100%; }
.chest-screen.abierto .cb-lid{ animation:tapaVuela .5s cubic-bezier(.2,.8,.3,1) forwards; }
.chest-screen.abierto .chest-box{ animation:cofreSeVa .45s ease-in .1s forwards; }
@keyframes cofreCae{ 0%{ transform:translateY(-60px) scale(.7); opacity:0; } 100%{ transform:none; opacity:1; } }
@keyframes cofreTiembla{
  0%{ transform:none; filter:drop-shadow(0 0 6px rgba(255,211,90,.5)); }
  20%{ transform:translate(-2px,0) rotate(-2deg); } 30%{ transform:translate(2px,-1px) rotate(2deg); }
  45%{ transform:translate(-3px,0) rotate(-3deg) scale(1.03); } 55%{ transform:translate(3px,-2px) rotate(3deg) scale(1.04); }
  70%{ transform:translate(-4px,0) rotate(-4deg) scale(1.07); } 80%{ transform:translate(4px,-3px) rotate(4deg) scale(1.09); }
  90%{ transform:translate(-5px,-2px) rotate(-5deg) scale(1.12); }
  100%{ transform:translate(0,-4px) scale(1.16); filter:drop-shadow(0 0 30px rgba(255,240,176,1)) brightness(1.8); }
}
@keyframes cerrojo{ to{ fill:#fff; } }
@keyframes tapaVuela{ to{ transform:translate(30px,-90px) rotate(28deg); opacity:0; } }
@keyframes cofreSeVa{ to{ transform:scale(.4) translateY(40px); opacity:0; } }

/* Confeti: trocitos que salen disparados y caen */
/* (un lienzo: ui.js lo pinta durante el estallido; antes eran piezas animadas con CSS) */
.confetti{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:4; pointer-events:none; }

/* Ruletas: los iconos pasan rápido y frenan hasta pararse en el premio */
.chest-reels{ display:flex; gap:12px; justify-content:center; align-items:stretch; }
.reel-card{
  position:relative; width:min(172px, 29vw); padding:12px 10px; border-radius:16px;
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  background:rgba(9,16,30,.96); border:2px solid rgba(255,211,90,.35);
  opacity:0; transform:scale(.4) translateY(30px);
}
.reel-card.solo{ width:min(270px, 78vw); padding:16px; }
.chest-screen.abierto .reel-card{ animation:ruletaEntra .45s cubic-bezier(.2,1.5,.35,1) var(--d,0s) forwards; }
@keyframes ruletaEntra{ to{ opacity:1; transform:none; } }
.reel{ width:84px; height:84px; overflow:hidden; position:relative;
  -webkit-mask:linear-gradient(transparent, #000 22%, #000 78%, transparent); mask:linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.reel-card.solo .reel{ width:96px; height:96px; }
.reel-strip{ will-change:transform; }
.reel-strip .ri{ width:84px; height:84px; display:flex; align-items:center; justify-content:center; color:#6f86a3; }
.reel-card.solo .reel-strip .ri{ width:96px; height:96px; }
.reel-strip .card-icon{ width:52px; height:52px; }
.reel-strip .ri.premio{ color:var(--rar, var(--gold)); }
.reel-strip .ri.premio .card-icon{ width:62px; height:62px; filter:drop-shadow(0 0 10px currentColor); }
.reel-info{ opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s; display:flex; flex-direction:column; align-items:center; gap:4px; }
.reel-card.parado{ border-color:var(--rar, var(--gold)); box-shadow:0 0 30px rgba(255,211,90,.3), inset 0 0 22px rgba(255,211,90,.08);
  animation:ruletaPara .4s cubic-bezier(.2,1.6,.4,1) forwards; }
.reel-card.parado .reel-info{ opacity:1; transform:none; }
@keyframes ruletaPara{ 0%{ opacity:1; transform:scale(1); } 40%{ opacity:1; transform:scale(1.1); } 100%{ opacity:1; transform:none; } }
.reel-card.common{ --rar:var(--cyan); } .reel-card.rare{ --rar:var(--violet); }
.reel-card.epic{ --rar:var(--gold); } .reel-card.evolution{ --rar:#fff0b0; }
.reel-name{ font-weight:800; font-size:15px; color:#fff; line-height:1.15; }
.reel-card.solo .reel-name{ font-size:20px; }
.reel-desc{ font-size:12px; color:var(--dim); line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.reel-card.solo .reel-desc{ font-size:13.5px; }

/* Monedas que suman y el aviso para seguir */
.chest-coins #chest-coins-n{ display:inline-block; min-width:2.6ch; text-align:left; }   /* (contar no recoloca nada) */
.chest-coins{ font-family:var(--mono); font-size:22px; font-weight:800; color:var(--gold); display:flex; align-items:center; gap:6px;
  opacity:0; transform:scale(.6); text-shadow:0 0 14px rgba(255,211,90,.6); }
.chest-screen.fin .chest-coins{ animation:ruletaEntra .35s cubic-bezier(.2,1.6,.4,1) forwards; }
.chest-tap{ position:relative; opacity:0; margin:0; }
.chest-screen.fin .chest-tap{ animation:parpadeo 1.4s ease-in-out .3s infinite; opacity:.65; }
@keyframes parpadeo{ 50%{ opacity:.25; } }

@media (max-height:520px){
  .chest-stage{ min-height:120px; }
  .chest-box{ width:120px; height:100px; margin:-50px 0 0 -60px; }
  .reel, .reel-card.solo .reel{ width:72px; height:72px; }
  .reel-strip .ri, .reel-card.solo .reel-strip .ri{ width:72px; height:72px; }
  .reel-strip .card-icon{ width:44px; height:44px; }
  .reel-card{ padding:8px; gap:4px; }
  .reel-desc{ -webkit-line-clamp:2; font-size:11.5px; }
  .chest-wrap{ gap:8px; }
}

/* Cofre doble y cofre de jefe (elige 1 de 3) */
.chest-sub{ margin:-6px 0 0; font-size:13px; font-weight:800; letter-spacing:.3em; color:#fff0b0; opacity:0; }
.chest-screen.abierto .chest-sub{ animation:subEntra .3s ease-out .15s forwards; }
@keyframes subEntra{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.chest-choice{ display:none; margin-top:0; width:min(880px, 94vw); flex-wrap:nowrap; }
/* cofre de jefe: las cartas ya están maquetadas desde que se prepara (invisibles); al abrirse solo
   aparecen (sin maquetar nada en el fotograma de la apertura) */
.chest-screen.jefe .chest-choice{ display:flex; opacity:0; pointer-events:none; }
.card .card-badge{ display:inline-block; margin-top:7px; }
.chest-screen.jefe .chest-reels{ display:none; }
.chest-screen.elige .chest-choice{ opacity:1; pointer-events:auto; }
.chest-screen.elige .chest-choice .card{ animation:cartaEntra .42s cubic-bezier(.2,1.5,.35,1) both; animation-delay:calc(.12s + var(--i, 0) * 90ms); }
.chest-screen.elegido .choice-card{ pointer-events:none; transition:opacity .25s, transform .25s; }
.chest-screen.elegido .chest-choice .choice-card{ animation:none; }
/* (sin quitar la animación de entrada, que se queda en su final, la elegida no crecía ni las otras
   se apagaban: lo vio la prueba de la sección 9) */
.chest-screen.elegido .choice-card:not(.elegida){ opacity:.2; transform:scale(.92); }
.choice-card.elegida{ transform:scale(1.06); border-color:var(--rar); box-shadow:0 0 36px rgba(255,211,90,.35); }
.choice-card.legendary.elegida{ box-shadow:0 0 40px rgba(255,122,224,.45); }
.chest-screen.jefe .chest-title{ color:#fff0b0; }
.chest-screen.leg .chest-rays{ background:repeating-conic-gradient(rgba(255,122,224,.24) 0 6deg, rgba(255,211,90,.14) 6deg 10deg, transparent 10deg 18deg); }
.chest-screen.leg .chest-flash{ background:radial-gradient(circle at center, #fff 0, rgba(255,170,236,.85) 25%, rgba(255,122,224,0) 70%); }
.reel-card.legendary{ --rar:#ff7ae0; }
.reel-card.legendary.parado{ box-shadow:0 0 34px rgba(255,122,224,.4), inset 0 0 22px rgba(255,122,224,.1); }
.chest-screen.jefe .chest-coins{ margin-top:2px; }
.chest-screen.jefe .chest-tap{ display:none; }
@media (max-width:520px){ .chest-choice{ flex-wrap:wrap; } }
@media (max-height:520px){
  .chest-screen.jefe .chest-wrap{ gap:6px; }
  .chest-screen.jefe .chest-title{ font-size:18px; }
}

/* Barra de experiencia llena esperando su turno (no se encadenan pantallas): brilla */
.xp-bar.lista{ border-color:rgba(255,240,176,.8); }
.xp-bar.lista .fill{ animation:xpLista .55s ease-in-out infinite alternate; }
@keyframes xpLista{ from{ opacity:.6; } to{ opacity:1; } }

/* Presentación de jefe: bandas de cine + nombre */
.boss-intro{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; z-index:16; pointer-events:none; }
.bi-bar{ position:absolute; left:0; right:0; height:11vh; background:#000; transform:scaleY(0); }
.bi-top{ top:0; transform-origin:top; } .bi-bottom{ bottom:0; transform-origin:bottom; }
.bi-text{ position:absolute; left:0; right:0; bottom:14vh; text-align:center; opacity:0; }
.bi-title{ font-family:var(--mono); font-size:13px; letter-spacing:.34em; color:#ff8fa0; }
.bi-name{ font-size:34px; font-size:clamp(34px, 7vw, 64px); font-weight:700; letter-spacing:.28em; color:#fff;
          text-shadow:0 0 24px rgba(255,51,85,.9), 0 0 4px #fff; }
.boss-intro.play .bi-bar{ animation:bandas 2.6s ease-in-out forwards; }
.boss-intro.play .bi-text{ animation:nombreJefe 2.6s ease-out forwards; }
@keyframes bandas{ 0%{ transform:scaleY(0); } 15%,80%{ transform:scaleY(1); } 100%{ transform:scaleY(0); } }
@keyframes nombreJefe{ 0%,12%{ opacity:0; transform:translateY(12px); letter-spacing:.6em; }
                       30%,78%{ opacity:1; transform:none; } 100%{ opacity:0; } }

/* Reloj: prórroga (jefe final vivo a los 10 min) y modo sin fin */
#hud-time.overtime{ color:#ff5a6e; animation:parpadeo .9s ease-in-out infinite; }
.endless-chip{ font-family:var(--mono); font-size:10px; font-weight:800; letter-spacing:.2em; color:var(--cyan);
               border:1px solid var(--line); border-radius:99px; padding:1px 8px; margin-top:2px; }


/* =============================================================
   Fase 4: menú con secciones, misiones, racha, códice, récords, unidades
   ============================================================= */
.menu-panel{ width:min(470px, 100%); }
.menu-main{ display:flex; flex-direction:column; gap:10px; width:100%; }
.menu-tiles{ grid-template-columns:repeat(3, 1fr); gap:8px; }
.btn.tile{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-size:12.5px; letter-spacing:.08em; padding:9px 6px; min-height:62px; line-height:1.1; }
.btn.tile .card-icon{ width:22px; height:22px; color:var(--cyan); opacity:.9; }
.btn.tile .t-lbl{ white-space:nowrap; }
.badge{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:99px;
  background:var(--gold); color:#1a1200; font-family:var(--mono); font-size:11.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px rgba(255,209,102,.7);
  animation:latido 1.6s ease-in-out infinite; }
@keyframes latido{ 50%{ transform:scale(1.15); } }

/* Partida diaria: botón secundario con su información */
.btn.daily-btn{ display:flex; align-items:center; gap:12px; text-align:left; padding:10px 14px;
  border-color:rgba(179,136,255,.55); background:linear-gradient(90deg, rgba(179,136,255,.16), rgba(56,232,255,.05)); }
.btn.daily-btn:hover{ border-color:var(--violet); background:linear-gradient(90deg, rgba(179,136,255,.26), rgba(56,232,255,.08)); }
.db-icon .card-icon{ width:30px; height:30px; color:var(--violet); }
.db-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.db-txt b{ font-size:15px; letter-spacing:.12em; }
.db-sub{ font-size:11.5px; font-weight:600; letter-spacing:.03em; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Tarjeta de la racha en el menú */
.streak-card{ -webkit-appearance:none; appearance:none; cursor:pointer; width:100%; display:flex; align-items:center; gap:12px;
  font-family:var(--font); color:var(--ink); text-align:left; padding:9px 12px; border-radius:14px;
  border:1.5px solid rgba(255,209,102,.6); background:linear-gradient(90deg, rgba(255,209,102,.18), rgba(255,209,102,.04));
  box-shadow:0 0 22px rgba(255,209,102,.18); animation:entraAbajo .4s cubic-bezier(.2,1.4,.4,1); }
.streak-card:hover{ background:linear-gradient(90deg, rgba(255,209,102,.28), rgba(255,209,102,.08)); }
.sc-icon .card-icon{ width:28px; height:28px; color:var(--gold); }
.sc-text{ flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.sc-text b{ font-size:13.5px; letter-spacing:.1em; color:var(--gold); }
.sc-dots{ display:flex; gap:4px; }
.sc-dots i{ width:14px; height:5px; border-radius:3px; background:rgba(255,209,102,.2); }
.sc-dots i.on{ background:var(--gold); box-shadow:0 0 6px rgba(255,209,102,.7); }
.sc-dots i.next{ background:rgba(255,209,102,.55); animation:parpadeo 1.2s ease-in-out infinite; }
.streak-card.manana{ cursor:default; background:rgba(9,16,30,.6); }
.streak-card.manana .sc-claim{ opacity:.75; }
.sc-claim{ font-family:var(--mono); font-weight:800; font-size:14px; color:var(--gold); display:flex; align-items:center; gap:5px; white-space:nowrap; }

/* Pestañas (códice y récords) */
.tabs{ display:flex; gap:6px; margin:6px 0 10px; }
.tab{ -webkit-appearance:none; appearance:none; flex:1; cursor:pointer; font-family:var(--font); font-size:12.5px; font-weight:700;
  letter-spacing:.12em; color:var(--dim); background:transparent; border:1.5px solid rgba(123,144,168,.3); border-radius:10px;
  padding:9px 6px; min-height:40px; }
.tab.on{ color:var(--cyan); border-color:var(--cyan); background:rgba(56,232,255,.1); }
.sub-h{ font-size:14px; letter-spacing:.16em; color:var(--gold); margin:16px 0 8px; }

/* Misiones */
.mission .m-bar{ height:7px; border-radius:4px; background:rgba(123,144,168,.22); margin-top:8px; overflow:hidden; }
.mission .m-bar i{ display:block; height:100%; background:linear-gradient(90deg, var(--cyan), var(--green)); border-radius:4px; }
.mission.done .m-bar i{ background:var(--gold); }
.mission.claimed{ opacity:.55; }
.mission .m-prog{ font-family:var(--mono); font-size:12px; color:var(--dim); margin-top:4px; }
.reward{ font-family:var(--mono); font-weight:800; color:var(--gold); display:flex; align-items:center; gap:5px; }
.row .btn.claim{ border-color:var(--gold); color:#fff4d8; background:linear-gradient(180deg, rgba(255,209,102,.3), rgba(255,209,102,.1)); }

/* Racha: los 7 días */
.streak-row{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.sday{ border:1.5px solid rgba(255,209,102,.2); border-radius:10px; padding:8px 2px; text-align:center; font-family:var(--mono);
  font-size:11px; color:var(--dim); display:flex; flex-direction:column; gap:4px; align-items:center; }
.sday b{ font-size:12.5px; color:var(--ink); }
.sday.past{ border-color:rgba(255,209,102,.45); background:rgba(255,209,102,.08); color:var(--gold); }
.sday.today{ border-color:var(--gold); background:rgba(255,209,102,.18); color:var(--gold); box-shadow:0 0 16px rgba(255,209,102,.3); }
.sday .coin-dot{ width:9px; height:9px; }

/* Códice */
.codex-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); gap:8px; }
.cx-item{ -webkit-appearance:none; appearance:none; cursor:pointer; position:relative; font-family:var(--font);
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px 8px; border-radius:12px;
  background:rgba(56,232,255,.05); border:1.5px solid rgba(56,232,255,.16); color:var(--ink); }
.cx-item .card-icon{ width:36px; height:36px; color:var(--c, var(--cyan)); filter:drop-shadow(0 0 5px currentColor); }
.cx-item span{ font-size:10.5px; font-weight:700; letter-spacing:.08em; }
.cx-item.sel{ border-color:var(--c, var(--cyan)); background:rgba(56,232,255,.12); }
.cx-item.unknown .card-icon{ color:#2b3a4f; filter:none; }
.cx-item.unknown span{ color:#44556b; }
.codex-detail{ display:flex; gap:14px; align-items:center; min-height:112px; padding:12px 14px; margin-bottom:10px; border-radius:14px;
  background:rgba(9,16,30,.8); border:1.5px solid rgba(56,232,255,.2); text-align:left; }
.codex-detail .card-icon{ width:64px; height:64px; flex:none; color:var(--c, var(--cyan)); filter:drop-shadow(0 0 10px currentColor); }
.codex-detail.unknown .card-icon{ color:#2b3a4f; filter:none; }
.cd-main{ flex:1; min-width:0; }
.cd-name{ font-weight:800; font-size:17px; letter-spacing:.12em; color:#fff; }
.cd-sub{ font-size:11px; letter-spacing:.14em; color:var(--c, var(--dim)); margin-top:1px; }
.cd-desc{ font-size:12.5px; color:var(--dim); line-height:1.4; margin-top:5px; }
.cd-bars{ display:grid; grid-template-columns:auto 1fr; gap:3px 8px; align-items:center; margin-top:7px; font-size:11px; color:var(--dim); }
.cd-bars i{ display:block; height:5px; border-radius:3px; background:var(--c, var(--cyan)); opacity:.85; }
.cd-facts{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; font-family:var(--mono); font-size:11.5px; color:var(--ink); }
.cd-facts span{ color:var(--dim); }

/* Récords */
.records-body .stats{ display:grid; grid-template-columns:1fr 1fr; column-gap:22px; row-gap:2px; }
.ach{ display:flex; align-items:center; gap:12px; }
.ach .card-icon{ width:30px; height:30px; flex:none; color:var(--gold); }
.ach.locked .card-icon{ color:#34445a; }
.ach.locked .row-name{ color:var(--dim); }

/* Unidades */
.unit .card-icon{ width:44px; height:44px; flex:none; color:var(--cyan); filter:drop-shadow(0 0 6px currentColor); }
.unit.locked .card-icon{ color:#3a4a60; filter:none; }
.unit .u-power{ font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--green); margin-top:2px; }
.unit .u-how{ font-size:11.5px; color:var(--ink); opacity:.8; margin-top:4px; }
.unit .u-need{ font-size:11.5px; color:var(--gold); margin-top:4px; }
.unit.locked{ opacity:1; }
.unit.locked .row-main{ opacity:.8; }
.row-side .btn{ min-width:118px; }

/* Tienda: regalo de monedas con temporizador */
.free-offer{ margin:8px 0 2px; display:flex; flex-direction:column; gap:6px; }

/* Resultados: lo conseguido */
.res-feed{ display:flex; flex-direction:column; gap:6px; width:100%; }
.feed{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:10px; font-size:12.5px; text-align:left;
  border:1px solid rgba(255,209,102,.35); background:rgba(255,209,102,.07); animation:entraAbajo .4s ease-out both; }
.feed .card-icon{ width:20px; height:20px; color:var(--gold); flex:none; }
.feed b{ letter-spacing:.1em; color:var(--gold); font-size:11px; }
.feed .f-txt{ flex:1; min-width:0; }
.feed .reward{ font-size:12px; }
.feed.unit{ border-color:rgba(62,242,160,.45); background:rgba(62,242,160,.08); }
.feed.unit b, .feed.unit .card-icon{ color:var(--green); }
.feed.daily{ border-color:rgba(179,136,255,.5); background:rgba(179,136,255,.1); }
.feed.daily b, .feed.daily .card-icon{ color:var(--violet); }

@media (max-width:420px){
  .btn.tile{ font-size:11px; min-height:58px; letter-spacing:.05em; }
  .streak-row{ gap:4px; } .sday{ font-size:10px; padding:6px 1px; }
  .records-body .stats{ grid-template-columns:1fr; }
  .codex-detail{ flex-direction:column; text-align:center; } .cd-bars{ text-align:left; }
}
@media (max-height:470px){
  .menu-panel{ width:min(620px, 100%); }
  .menu-main{ flex-direction:row; }
  .menu-main .btn{ flex:1 1 0; min-width:0; }
  .btn.daily-btn{ padding:6px 10px; gap:8px; }
  .db-icon .card-icon{ width:24px; height:24px; }
  .db-txt b{ font-size:13px; }
  .menu-tiles{ grid-template-columns:repeat(6, 1fr); gap:6px; }
  .btn.tile{ min-height:52px; font-size:10.5px; padding:6px 3px; letter-spacing:.04em; }
  .btn.tile .card-icon{ width:18px; height:18px; }
  .btn.tile .t-lbl{ white-space:normal; text-align:center; }
  .streak-card{ padding:6px 10px; }
  .codex-detail{ min-height:0; padding:8px 10px; }
  .codex-detail .card-icon{ width:46px; height:46px; }
  .codex-grid{ grid-template-columns:repeat(auto-fill, minmax(66px, 1fr)); gap:6px; }
  .cx-item{ padding:6px 3px; } .cx-item .card-icon{ width:28px; height:28px; }
}

/* Barras de desplazamiento propias: finas y del color del juego (nada de la blanca del sistema) */
.panel, .screen{ scrollbar-width:thin; scrollbar-color:rgba(56,232,255,.35) transparent; }
.panel::-webkit-scrollbar, .screen::-webkit-scrollbar{ width:6px; height:6px; }
.panel::-webkit-scrollbar-track, .screen::-webkit-scrollbar-track{ background:transparent; }
.panel::-webkit-scrollbar-thumb, .screen::-webkit-scrollbar-thumb{ background:rgba(56,232,255,.3); border-radius:99px; }
.panel::-webkit-scrollbar-button, .screen::-webkit-scrollbar-button{ display:none; }
@media (max-height:470px){
  .codex-grid{ grid-template-columns:repeat(10, 1fr); }
  .cx-item span{ font-size:8.5px; letter-spacing:.02em; }
  .codex-detail .cd-bars{ display:none; }
  .row.mission{ padding:7px 10px; }
  .mission .m-bar{ margin-top:5px; }
  .sub-h{ margin:10px 0 6px; }
  .sday{ padding:5px 1px; }
}

@keyframes entraAbajo{ from{ opacity:0; transform:translateY(12px) scale(.96); } }
/* Resultados: estadísticas en dos columnas para dejar sitio a lo conseguido */
.results-panel .stats{ display:grid; grid-template-columns:1fr 1fr; column-gap:18px; row-gap:5px; }
.results-panel .stat{ font-size:13px; }
.res-head, .res-btns{ width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; }
.res-head h2, .res-head p{ margin:0; }

/* Motivos para volver: racha, próximo desbloqueo, tienda y misiones */
.res-goals{ width:100%; display:flex; flex-direction:column; gap:6px; text-align:left; }
.goals-h{ margin:2px 0 0; font-size:12px; letter-spacing:.3em; color:var(--cyan); text-align:center; }
.goal{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:10px; width:100%;
  border:1px solid rgba(56,232,255,.22); background:rgba(9,16,30,.7); color:var(--ink); font-family:var(--font); text-align:left; }
.goal.hidden{ display:none; }
.goal .card-icon{ width:26px; height:26px; flex:none; color:var(--cyan); }
.g-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.g-txt b{ font-size:11.5px; letter-spacing:.12em; color:#fff; }
.g-txt span{ font-size:12px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.g-val{ font-family:var(--mono); font-size:12.5px; font-weight:800; color:var(--gold); display:flex; align-items:center; gap:4px; white-space:nowrap; }
.g-bar{ height:5px; border-radius:3px; background:rgba(123,144,168,.22); overflow:hidden; margin-top:3px; }
.g-bar i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, #38e8ff, #3ef2a0); }
.goal.g-streak{ border-color:rgba(255,209,102,.4); background:linear-gradient(90deg, rgba(255,209,102,.13), rgba(9,16,30,.7)); }
.g-streak .card-icon, .g-streak b{ color:var(--gold); }
.g-dots{ display:flex; gap:4px; margin-top:3px; }
.g-dots i{ width:16px; height:5px; border-radius:3px; background:rgba(255,209,102,.2); }
.g-dots i.on{ background:var(--gold); }
.g-dots i.next{ background:rgba(255,209,102,.55); animation:parpadeo 1.2s ease-in-out infinite; }
/* MAÑANA (tanda del 14-10): regalo del día siguiente de la racha + partida diaria de mañana */
.goal.g-streak{ flex-direction:column; align-items:stretch; gap:6px; border-color:rgba(255,209,102,.55);
  box-shadow:0 0 18px rgba(255,209,102,.12) inset; }
.gt-h{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.gt-h b{ font-size:12.5px; letter-spacing:.24em; color:var(--gold); }
.gt-h span{ font-family:var(--mono); font-size:11px; color:var(--dim); }
.gt-fila{ display:flex; align-items:center; gap:10px; }
.gt-diaria{ border-top:1px solid rgba(255,209,102,.18); padding-top:6px; }
.g-streak .gt-diaria .card-icon, .g-streak .gt-diaria b{ color:var(--cyan); }
.g-txt span.gt-que{ font-size:11.5px; color:var(--green); white-space:normal; }
.g-val.gt-datos{ color:var(--cyan); }
.goal.g-shop{ cursor:pointer; touch-action:manipulation; }
.goal.g-shop.lista{ border-color:rgba(62,242,160,.6); background:linear-gradient(90deg, rgba(62,242,160,.14), rgba(9,16,30,.7)); }
.goal.g-shop.lista b, .goal.g-shop.lista .card-icon{ color:var(--green); }
.goal-missions{ display:flex; flex-direction:column; gap:5px; padding:7px 10px; border-radius:10px; cursor:pointer;
  border:1px solid rgba(179,136,255,.3); background:rgba(9,16,30,.7); }
.gm-h{ font-size:11px; letter-spacing:.14em; color:var(--violet); font-weight:800; }
.gm{ display:grid; grid-template-columns:1fr auto; column-gap:8px; font-size:12px; }
.gm .g-bar{ grid-column:1 / -1; margin-top:2px; height:4px; }
.gm-t{ color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-v{ font-family:var(--mono); color:var(--dim); font-weight:700; }
.gm.done .gm-v{ color:var(--green); }
.gm.done .g-bar i{ background:var(--green); }

/* Pantallas apaisadas: resultados en dos columnas (lo de la partida | lo que viene) */
@media (min-width:760px) and (min-aspect-ratio:5/4){
  .panel.results-panel{ width:min(860px, 100%); display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:"head head" "stats goals" "feed goals" "double goals" "btns goals"; column-gap:22px; row-gap:8px;
    align-items:start; align-content:start; }
  .results-panel > .res-head{ grid-area:head; }
  .results-panel > #res-stats{ grid-area:stats; margin:0; }
  .results-panel > #res-feed{ grid-area:feed; }
  .results-panel > .res-goals{ grid-area:goals; }
  .results-panel > #double-offer{ grid-area:double; }
  .results-panel > .res-btns{ grid-area:btns; }
}
@media (max-height:540px) and (min-width:760px) and (min-aspect-ratio:5/4){
  .panel.results-panel{ row-gap:6px; padding-top:12px; padding-bottom:12px; }
  .results-panel .res-head{ gap:4px; }
  .results-panel .res-head p{ display:none; }
  .results-panel .feed{ padding:5px 9px; }
  .results-panel .res-btns{ gap:6px; }
  .results-panel .res-btns .btn.big{ min-height:44px; padding:9px 12px; font-size:16px; }
  .results-panel .res-btns .btn{ min-height:40px; padding:8px 10px; }
  .results-panel #double-title{ display:none; }
}
@media (max-height:520px){
  .goal{ padding:5px 9px; }
  .goal .card-icon{ width:22px; height:22px; }
  .goal-missions{ padding:5px 9px; gap:3px; }
  .g-txt span{ font-size:11px; }
  .gm{ font-size:11px; }
}

/* Pantallas apaisadas de altura media (907x510, 1077x606, 1216x684...): el menú en
   formato ancho, JUGAR y DIARIA lado a lado y las seis secciones en una fila. */
@media (max-height:720px) and (min-aspect-ratio:13/10){
  .menu-panel{ width:min(640px, 100%); gap:11px; }
  .menu-main{ flex-direction:row; }
  .menu-main .btn{ flex:1 1 0; min-width:0; }
  .menu-tiles{ grid-template-columns:repeat(6, 1fr); gap:7px; }
  .btn.tile{ min-height:58px; font-size:11px; letter-spacing:.05em; padding:7px 3px; }
  .btn.tile .t-lbl{ white-space:normal; text-align:center; }
}
@media (max-height:620px){
  .panel{ padding:18px 18px; }
  .menu-panel{ gap:9px; }
  .logo{ font-size:40px; }
  #menu-sub{ display:none; }
  .panel.wide .list{ gap:7px; margin-top:8px; }
  .row.mission{ padding:8px 11px; }
  .row.mission .card-icon{ width:26px; height:26px; }
  .mission .m-bar{ margin-top:5px; }
  .sub-h{ margin:10px 0 6px; }
  .sday{ padding:5px 1px; }
  .codex-detail{ min-height:0; padding:9px 12px; }
  .codex-detail .card-icon{ width:48px; height:48px; }
  .codex-grid{ grid-template-columns:repeat(10, 1fr); gap:6px; }
  .cx-item{ padding:6px 3px; } .cx-item .card-icon{ width:28px; height:28px; }
  .cx-item span{ font-size:8.5px; letter-spacing:.02em; }
  .wide-btn{ margin-top:10px; }
}
@media (max-height:400px){
  .menu-panel{ gap:6px; }
  .btn.tile{ min-height:46px; }
  .btn.tile .card-icon{ width:16px; height:16px; }
  .btn.big{ min-height:44px; }
  .streak-card{ padding:4px 10px; }
  .panel{ padding:10px 14px; }
}
@media (max-height:470px){
  .mission .m-prog{ display:none; }         /* la barra ya enseña el progreso */
}
@media (max-height:400px){
  .logo{ font-size:24px; }
  .wallet{ padding:3px 12px; font-size:13px; }
  .chip{ min-height:38px; padding:6px 12px; }
}
body.captura #btn-dash, body.captura #stick, body.captura #stick-idle, body.captura #ctrl-zone,
body.captura #tip, body.captura #tut, body.captura #boss-intro{ display:none !important; }   /* (vídeos: la presentación del jefe va con el reloj real y saldría acelerada) */

/* =============================================================
   Primer minuto y móvil (sesión del 30-09-2026)
   ============================================================= */

/* La pantalla de carga se funde y deja ver la partida (o el menú) */
#s-boot{ transition:opacity .4s ease; z-index:25; }
#s-boot.saliendo{ opacity:0; pointer-events:none; }

/* El HUD se maqueta aparte: si cambia un número, no se recalcula toda la página */
#hud{ contain:layout style; }
#tut{ contain:layout style; }

/* Zonas seguras (muescas, esquinas redondeadas, barra de gestos): la app de
   CrazyGames abre el juego a pantalla completa y de borde a borde */
.dash-btn{
  right:max(22px, calc(env(safe-area-inset-right) + 12px));
  bottom:max(24px, calc(env(safe-area-inset-bottom) + 12px));
}
@media (max-height:470px){ .dash-btn{ right:max(14px, calc(env(safe-area-inset-right) + 8px)); bottom:max(14px, calc(env(safe-area-inset-bottom) + 8px)); } }
@media (max-width:560px) and (orientation:portrait){ .dash-btn{ right:max(16px, calc(env(safe-area-inset-right) + 10px)); bottom:max(22px, calc(env(safe-area-inset-bottom) + 12px)); } }

/* Móvil y calidad baja: fuera los efectos de CSS que obligan a repintar cada fotograma
   encima de un lienzo que se mueve (desenfoque de fondo, sombras de filtro) */
body.lowfx .screen{ -webkit-backdrop-filter:none; backdrop-filter:none; }
body.lowfx .card .card-icon, body.lowfx .cx-item .card-icon, body.lowfx .codex-detail .card-icon,
body.lowfx .unit .card-icon, body.lowfx .reel-strip .ri.premio .card-icon, body.lowfx .chest-box{ filter:none; }
body.lowfx .panel{ box-shadow:none; }
body.lowfx .chest-screen.carga .chest-box{ animation:cofreCae .35s cubic-bezier(.3,1.6,.5,1); }
body.lowfx .chest-rays{ width:520px; height:520px; margin:-260px 0 0 -260px; -webkit-mask:none; mask:none; border-radius:50%;
  background:repeating-conic-gradient(rgba(255,211,90,.12) 0 7deg, transparent 7deg 20deg); }
body.lowfx .chest-screen.abierto .chest-rays{ animation:rayosSalen .6s cubic-bezier(.2,1.4,.4,1) forwards; }
/* (calidad baja: el borde no gira; el degradado va quieto en el propio marco, sin la pieza grande) */
body.lowfx .aro i{ display:none; }
body.lowfx .card.legendary .aro{ background:conic-gradient(rgba(255,122,224,.9), rgba(255,209,102,.9), rgba(56,232,255,.9), rgba(179,136,255,.9), rgba(255,122,224,.9)); }
body.lowfx .card.evolution .aro, body.lowfx .reel-card.evolution.parado .aro{
  background:conic-gradient(transparent 0 70%, rgba(255,240,176,.8) 80%, transparent 90%); }
body.lowfx .reel{ -webkit-mask:none; mask:none; }
body.lowfx .reel-card.parado, body.lowfx .choice-card.elegida{ box-shadow:none; }
body.lowfx .card-name, body.lowfx .chest-title{ text-shadow:none; }

/* El botón de acción late mientras el aprendizaje lo pide */
.dash-btn.tut-foco{ animation:tdFoco 1s ease-in-out infinite; }
@keyframes tdFoco{
  0%, 100%{ box-shadow:0 0 22px rgba(56,232,255,.22); border-color:rgba(56,232,255,.5); }
  50%{ box-shadow:0 0 0 10px rgba(56,232,255,.18), 0 0 30px rgba(56,232,255,.6); border-color:#fff; }
}
/* La pantalla de carga es opaca: tapa por completo lo que se prepara debajo */
#s-boot{ background:radial-gradient(ellipse at center, #07101f, #04060f 70%); -webkit-backdrop-filter:none; backdrop-filter:none; }

/* =============================================================
   Aprendizaje jugando y consejos en contexto (sesión del 06-10-2026)
   ============================================================= */

/* ---------- El globo: encima de lo que hay que mirar ----------
   Lo coloca tips.js con transform (sin recalcular la página). Texto grande y legible
   en un móvil pequeño, con fondo propio para leerse sobre cualquier cosa. */
.tip{
  position:absolute; left:0; top:0; z-index:14; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  max-width:84vw; max-width:min(84vw, 360px); padding:9px 16px 10px;
  background:rgba(4,8,16,.82);
  border:1.5px solid rgba(92,246,255,.6); border-radius:14px;
  box-shadow:0 0 18px rgba(56,232,255,.28);
  text-align:center; will-change:transform;
  --fx:50%; --tc:#5cf6ff;
}
.tip.hidden{ display:none; }
.tip.on{ animation:tipIn .26s cubic-bezier(.2,1.5,.4,1); }
@keyframes tipIn{ from{ opacity:0; } }
.tip-t{
  font-size:21px; font-weight:800; letter-spacing:.14em; line-height:1.15; color:#fff;
  text-shadow:0 0 12px var(--tc);
}
.tip-s{ font-size:13px; font-weight:700; letter-spacing:.12em; color:#bfefff; line-height:1.25; }
.tip-keys{ display:flex; align-items:center; gap:6px; justify-content:center; margin-top:3px; }
.tip-keys .key{
  font-style:normal; font-family:var(--mono); text-align:center;
  font-size:13px; font-weight:700; letter-spacing:.06em;
  min-width:30px; padding:5px 8px;
  border:1.5px solid rgba(56,232,255,.55); border-radius:7px;
  background:rgba(56,232,255,.10); box-shadow:0 2px 0 rgba(56,232,255,.25); color:var(--ink);
}
.tip-keys .sep{ color:var(--dim); font-size:13px; margin:0 3px; }
.tip-keys .tip-ico{ width:30px; height:30px; color:var(--cyan); filter:drop-shadow(0 0 6px rgba(56,232,255,.6)); }
.lowfx .tip-keys .tip-ico{ filter:none; }
/* flecha que apunta a la cosa (abajo; arriba si el globo va debajo) */
.tip-arrow{
  position:absolute; left:var(--fx); bottom:-9px; width:16px; height:16px; margin-left:-8px;
  background:rgba(4,8,16,.92); border-right:1.5px solid rgba(92,246,255,.6); border-bottom:1.5px solid rgba(92,246,255,.6);
  transform:rotate(45deg);
}
.tip.abajo .tip-arrow{ bottom:auto; top:-9px; transform:rotate(225deg); }
.tip.oro{ border-color:rgba(255,211,90,.75); box-shadow:0 0 18px rgba(255,211,90,.3); --tc:#ffd35a; }
.tip.oro .tip-arrow{ border-color:rgba(255,211,90,.75); }
.tip.oro .tip-s{ color:#fff0c4; }
.tip.peligro{ border-color:rgba(255,106,90,.75); box-shadow:0 0 18px rgba(255,90,46,.28); --tc:#ff6a5a; }
.tip.peligro .tip-arrow{ border-color:rgba(255,106,90,.75); }
.tip.peligro .tip-s{ color:#ffd9d2; }
.tip.menta{ border-color:rgba(62,242,160,.75); box-shadow:0 0 18px rgba(62,242,160,.3); --tc:#3ef2a0; }
.tip.menta .tip-arrow{ border-color:rgba(62,242,160,.75); }
@media (min-width:900px) and (min-height:560px){ .tip-t{ font-size:23px; } .tip-s{ font-size:14px; } }
@media (max-height:420px){ .tip{ padding:6px 12px 7px; } .tip-t{ font-size:18px; } .tip-s{ font-size:12px; } }
body.lowfx .tip{ box-shadow:none; }
body.lowfx .tip-t{ text-shadow:none; }

/* Teclas que se iluminan una tras otra (PC): la cruz de siempre, W arriba */
.td-teclas{ display:inline-grid; grid-template-columns:repeat(3, auto); gap:4px; }
.td-teclas .key{ animation:tdTecla 1.6s ease-in-out infinite; animation-delay:calc(var(--i) * .4s); }
.td-teclas .key:nth-of-type(1){ grid-column:2; grid-row:1; }
.td-teclas .key:nth-of-type(2){ grid-column:1; grid-row:2; }
.td-teclas .key:nth-of-type(3){ grid-column:2; grid-row:2; }
.td-teclas .key:nth-of-type(4){ grid-column:3; grid-row:2; }
@keyframes tdTecla{
  0%, 20%{ background:rgba(56,232,255,.45); color:#fff; box-shadow:0 0 10px rgba(56,232,255,.7); transform:translateY(2px); }
  30%, 100%{ background:rgba(56,232,255,.10); box-shadow:0 2px 0 rgba(56,232,255,.25); transform:none; }
}

/* ---------- SKIP: arriba a la derecha, debajo del HUD (lejos del pulgar) ---------- */
.tut{
  position:absolute; z-index:15; pointer-events:none;
  top:94px; right:12px;
  top:calc(max(10px, env(safe-area-inset-top)) + 84px); right:max(12px, env(safe-area-inset-right));
}
.tut.hidden{ display:none; }
.tut-skip{
  pointer-events:auto; -webkit-appearance:none; appearance:none; cursor:pointer;
  font-family:var(--font); font-size:13px; font-weight:800; letter-spacing:.16em;
  color:#cfe6f5; background:rgba(4,8,16,.6);
  border:1.5px solid rgba(123,144,168,.45); border-radius:999px;
  padding:8px 16px; min-height:38px; min-width:84px; touch-action:manipulation;
}
.tut-skip:hover, .tut-skip:active{ color:#fff; border-color:var(--line); }

/* ---------- HUD durante el aprendizaje: sin reloj ni bajas (aún no hay partida) ---------- */
body.aprendiendo #hud-center{ opacity:0; }
#hud-center{ transition:opacity .4s ease; }

/* ---------- Franja de los pulgares (móvil vertical) ---------- */
.ctrl-zone{
  display:none;
  position:absolute; left:0; right:0; bottom:0; z-index:9; pointer-events:none;
  height:var(--franja, 0px);
  background:linear-gradient(to bottom, rgba(4,6,15,0), rgba(4,6,15,.5) 40%, rgba(4,6,15,.62));
  border-top:1px solid rgba(56,232,255,.10);
}
body.franja .ctrl-zone{ display:block; }
body.franja .ctrl-zone.hidden, .ctrl-zone.hidden{ display:none; }

/* ---------- Joystick en reposo: dónde va el pulgar ---------- */
.stick-idle{
  position:absolute; z-index:11; pointer-events:none;
  left:var(--sx, 40%); top:var(--sy, 85%);
  width:124px; height:124px; margin:-62px 0 0 -62px;
  opacity:.42; transition:opacity .2s ease;
}
.stick-idle.hidden{ display:none; }
.stick-idle .si-base{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; border-radius:50%;
  border:2px solid rgba(56,232,255,.45); background:rgba(56,232,255,.05); }
.stick-idle .si-knob{ position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%;
  background:radial-gradient(circle at 36% 32%, rgba(62,242,160,.6), rgba(56,232,255,.25));
  border:2px solid rgba(62,242,160,.55); }
.stick-idle .si-dedo{ display:none; position:absolute; left:50%; top:50%; width:34px; height:44px; margin:-6px 0 0 -10px;
  fill:rgba(232,246,255,.95); stroke:rgba(4,6,15,.6); stroke-width:1.5; }
/* En el aprendizaje: bien visible, el pomo da vueltas y un dedo fantasma lo arrastra */
.stick-idle.demo{ opacity:1; }
.stick-idle.demo .si-knob, .stick-idle.demo .si-dedo{ animation:siGira 1.8s linear infinite; }
.stick-idle.demo .si-dedo{ display:block; }
.stick-idle.demo .si-base{ animation:siLate 1.8s ease-in-out infinite; }
@keyframes siGira{
  0%{ transform:translate(0,-30px); } 25%{ transform:translate(30px,0); }
  50%{ transform:translate(0,30px); } 75%{ transform:translate(-30px,0); } 100%{ transform:translate(0,-30px); }
}
@keyframes siLate{ 50%{ box-shadow:0 0 0 8px rgba(56,232,255,.12), 0 0 22px rgba(56,232,255,.35); border-color:rgba(92,246,255,.85); } }
body.lowfx .stick-idle.demo .si-base{ animation:none; border-color:rgba(92,246,255,.85); }

/* ---------- Botón de acción: aparece cuando se enseña (primera partida) ---------- */
.dash-btn.oculto{ opacity:0; pointer-events:none; transform:scale(.6); }
.dash-btn.aparece{ animation:accionSale .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes accionSale{ from{ opacity:0; transform:scale(.4); } }
.dash-btn.aparece.tut-foco{ animation:accionSale .45s cubic-bezier(.2,1.6,.4,1), tdFoco 1s ease-in-out .45s infinite; }
/* Con un panel encima (cartas, cofre, pausa...), el globo y el SKIP no se ven */
body.con-panel .tip, body.con-panel .tut, body.con-panel .stick-idle,
body.muriendo .tip, body.muriendo .tut, body.muriendo .stick-idle{ visibility:hidden; }
/* La primera subida de nivel dice cómo se elige */
#level-sub.pista{ color:#fff; font-size:16px; font-weight:800; letter-spacing:.2em; text-shadow:0 0 10px rgba(182,255,74,.6); }

/* Navegadores antiguos sin min()/max() (Chrome < 79, Safari < 11.1): anchos de respaldo de los
   paneles principales. Solo se aplica en ellos: en los demás no cambia nada. */
@supports not (width: min(1px, 2px)) {
  .panel{ width:100%; max-width:420px; }
  .panel.wide{ max-width:620px; }
  .level-panel{ max-width:880px; }
  .menu-panel{ max-width:500px; }
  .reel-card{ width:29vw; max-width:172px; }
  .chest-choice{ width:94vw; max-width:880px; }
  .boss-wrap{ width:94%; max-width:460px; }
}

/* =============================================================
   Fase B (07-10-2026): ignorar ofertas, menú de la partida, victoria, tienda y unidades
   ============================================================= */

/* ---------- Ignorar la oferta (cartas y cofres) ---------- */
.skip-btn{ margin-top:4px; min-height:42px; padding:8px 26px; font-size:14px; letter-spacing:.16em; }
.skip-btn small, .chest-actions small{ font-family:var(--mono); font-size:10px; opacity:.7; margin-left:6px; letter-spacing:.08em; }
.chest-actions{ display:flex; gap:10px; justify-content:center; position:relative; z-index:3;
  opacity:0; pointer-events:none; transition:opacity .2s ease; }
.chest-actions .btn{ min-width:140px; min-height:48px; font-size:16px; letter-spacing:.14em; }
/* el doble: aceptar o ignorar con los premios a la vista · el de jefe: solo ignorar (la carta es aceptar) */
.chest-screen.doble.fin .chest-actions, .chest-screen.elige .chest-actions{ opacity:1; pointer-events:auto; }
.chest-screen.jefe #chest-take{ display:none; }
.chest-screen.elegido .chest-actions{ opacity:0; pointer-events:none; }
.reel-card.solo .reel-name::after{ content:' ×2'; color:var(--gold); }

/* ---------- Logros: título de cada familia ---------- */
.ach-group{ display:flex; align-items:baseline; justify-content:space-between; margin:14px 4px 2px; padding-bottom:4px;
  border-bottom:1px solid rgba(123,144,168,.22); font-size:12px; font-weight:800; letter-spacing:.18em; color:var(--dim); }
.ach-group:first-child{ margin-top:2px; }
.ach-group i{ font-style:normal; font-family:var(--mono); color:var(--cyan); letter-spacing:.04em; }
.ach-prog{ white-space:nowrap; }

/* ---------- Menú de la partida (pausa) ---------- */
.pause-panel{ display:flex; flex-direction:column; gap:6px; padding:18px 18px 16px; }
.pause-head{ margin-bottom:0; min-height:40px; }
.pause-run{ display:flex; align-items:baseline; gap:10px; font-family:var(--mono); color:var(--dim); font-size:13px; white-space:nowrap; }
.pause-run b{ color:var(--ink); font-size:18px; font-weight:800; }
.pause-run em{ font-style:normal; font-family:var(--font); font-weight:800; font-size:11px; letter-spacing:.14em; color:var(--gold);
  border:1.5px solid rgba(255,209,102,.5); border-radius:999px; padding:3px 8px; }
.pause-body{ min-height:120px; }
/* la ficha de la mejora tocada, fija entre el contenido y los botones */
.pause-detail{ flex:none; }
.pause-detail .pb-hint{ margin:2px 2px 0; }
.pause-detail .pb-detail{ margin-top:0; }
.pause-detail .pb-acts{ flex-direction:row; }
@media (max-width:560px){
  .pause-detail .pb-detail{ flex-wrap:wrap; gap:8px 10px; }
  .pause-detail .pb-acts{ width:100%; }
  .pause-detail .pb-acts .btn{ flex:1 1 0; }
}
.pb-sec{ margin-bottom:8px; text-align:left; }
.pb-sec h4{ font-size:12px; letter-spacing:.18em; color:var(--dim); margin:2px 0 6px; font-weight:800; }
.pb-sec h4 span{ color:var(--cyan); font-family:var(--mono); margin-left:6px; }
.pb-grid{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:7px; }
/* lazo y legendarias en dos mitades que siguen la misma rejilla de 6 */
.pb-pair{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.pb-pair .pb-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
/* recetas: la lista llena el alto del panel (filas iguales, sin hueco abajo) */
.pause-body.evo{ display:flex; flex-direction:column; }
.pause-body.evo .pe-list{ flex:1 0 auto; grid-auto-rows:minmax(56px, 1fr); }
.pb-item{ -webkit-appearance:none; appearance:none; cursor:pointer; font-family:var(--font); position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px 7px; border-radius:12px; min-height:84px;
  background:rgba(56,232,255,.05); border:1.5px solid rgba(56,232,255,.18); color:var(--ink); touch-action:manipulation; }
.pb-item .card-icon{ width:32px; height:32px; color:var(--cyan); filter:drop-shadow(0 0 5px currentColor); }
.pb-item b{ font-size:10.5px; font-weight:700; letter-spacing:.04em; line-height:1.15; text-align:center; }
.pb-item i{ font-style:normal; font-family:var(--mono); font-size:11px; color:var(--green); font-weight:800; }
.pb-item.sel{ border-color:var(--cyan); background:rgba(56,232,255,.14); box-shadow:0 0 14px rgba(56,232,255,.25); }
.pb-item.evo{ border-color:rgba(255,209,102,.6); }
.pb-item.evo .card-icon{ color:#fff0b0; }
.pb-item.leg{ border-color:rgba(255,122,224,.55); }
.pb-item.leg .card-icon{ color:#ff7ae0; }
.pb-item.empty{ cursor:default; justify-content:center; border-style:dashed; border-color:rgba(123,144,168,.22); background:transparent; }
.pb-item.empty b{ color:#445468; letter-spacing:.16em; font-size:10px; }
.pb-hint{ font-size:12px; color:var(--dim); line-height:1.4; margin:4px 2px 6px; text-align:left; }
.pb-detail{ display:flex; align-items:center; gap:12px; padding:10px 12px; margin-top:4px; border-radius:14px;
  background:rgba(9,16,30,.85); border:1.5px solid rgba(56,232,255,.25); text-align:left; }
.pb-detail.confirma{ border-color:rgba(255,93,143,.6); }
.pb-detail > .card-icon{ width:44px; height:44px; flex:none; color:var(--cyan); }
.pb-dmain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pb-dmain b{ font-size:14px; letter-spacing:.06em; }
.pb-dmain b span{ font-family:var(--mono); font-size:12px; color:var(--green); margin-left:6px; }
.pb-dmain small{ font-size:12px; color:var(--dim); line-height:1.35; }
.pb-detail.confirma .pb-dmain small{ color:#ffd0dc; }
.pb-acts{ display:flex; flex-direction:column; gap:6px; flex:none; }
.btn.danger{ border-color:rgba(255,93,143,.8); color:#fff; background:linear-gradient(180deg, rgba(255,93,143,.42), rgba(255,93,143,.18)); }
.btn.danger-ghost{ border-color:rgba(255,93,143,.5); color:#ffb3c6; background:transparent; }
.pb-acts .btn{ min-height:40px; padding:8px 14px; font-size:13px; }
/* pie: RESUME, el botón principal, grande a la derecha; sonido, ajustes y abandonar, discretos */
.pause-foot{ flex:none; display:flex; align-items:stretch; gap:10px; margin-top:4px; padding-top:12px;
  border-top:1px solid rgba(123,144,168,.18); }
.pf-sec{ display:flex; gap:8px; flex:1 1 auto; min-width:0; }
.pf-btn{ flex:1 1 0; min-width:0; min-height:50px; padding:8px 6px; font-size:12px; letter-spacing:.1em; border-radius:12px; }
.pf-btn.on{ color:var(--cyan); border-color:var(--line); }
.pf-btn.quit-btn{ border-color:rgba(255,93,143,.42); color:#ffb3c6; }
.pf-btn.quit-btn:hover{ border-color:var(--pink); color:#fff; }
.pf-resume{ flex:0 0 36%; width:auto; min-height:50px; padding:8px 14px; font-size:17px; letter-spacing:.14em;
  display:flex; align-items:center; justify-content:center; gap:10px; }
.pf-resume small{ font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:0; color:rgba(234,255,246,.7);
  border:1px solid rgba(234,255,246,.35); border-radius:6px; padding:1px 6px; }
@media (max-width:560px){
  .pause-foot{ flex-direction:column; gap:8px; }
  .pf-resume{ order:-1; flex:none; width:100%; min-height:54px; }
  .pf-btn{ min-height:44px; font-size:11px; letter-spacing:.06em; }
  .pb-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .pb-pair{ grid-template-columns:1fr; gap:0; }
  .pb-item.empty{ min-height:46px; }               /* una fila solo de huecos libres ocupa poco */
  .pause-run{ font-size:11.5px; gap:7px; }
  .pause-run b{ font-size:15px; }
}

/* recetas de evolución */
.pe-list{ display:flex; flex-direction:column; gap:6px; }
.pe-row{ display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:12px; text-align:left;
  background:rgba(9,16,30,.6); border:1.5px solid rgba(123,144,168,.2); }
.pe-ico{ display:flex; flex:none; }
.pe-ico .card-icon{ width:28px; height:28px; color:#3a4b62; }
.pe-ico.on .card-icon{ color:var(--cyan); }
.pe-ico.evo .card-icon{ color:#a08a4e; }
.pe-op{ color:var(--dim); font-size:13px; font-weight:800; }
.pe-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; margin-left:4px; }
.pe-txt b{ font-size:13px; letter-spacing:.06em; }
.pe-txt small{ font-size:11px; color:var(--dim); font-family:var(--mono); }
.pe-txt small span{ white-space:nowrap; }      /* "Split Core 0/1" nunca se parte */
.pe-state{ flex:none; font-size:10.5px; font-weight:800; letter-spacing:.12em; padding:5px 8px; border-radius:999px;
  border:1.5px solid currentColor; white-space:nowrap; }
.pe-row.activa{ border-color:rgba(255,209,102,.7); background:rgba(255,209,102,.08); }
.pe-row.activa .pe-ico.evo .card-icon{ color:#fff0b0; filter:drop-shadow(0 0 6px currentColor); }
.pe-row.activa .pe-state{ color:var(--gold); }
.pe-row.lista{ border-color:rgba(62,242,160,.6); }
.pe-row.lista .pe-state{ color:var(--green); }
.pe-row.bloq .pe-state{ color:var(--dim); }
@media (max-width:520px){
  .pe-op{ display:none; }
  .pe-ico .card-icon{ width:24px; height:24px; }
  .pe-state{ font-size:9.5px; padding:4px 6px; letter-spacing:.06em; }
}
/* con 5 pestañas (códice) el texto cabe en un móvil */
.tabs{ flex-wrap:wrap; }
@media (max-width:620px){ .tab{ font-size:11px; letter-spacing:.06em; padding:8px 4px; flex:1 1 30%; } }

/* ---------- Victoria: seguir o terminar ---------- */
.win-panel{ gap:10px; }
.win-panel .stats{ max-width:340px; }
.win-info{ font-size:12.5px; color:var(--dim); line-height:1.45; max-width:380px; }
#btn-win-finish{ min-height:48px; }

/* ---------- Tienda: niveles nuevos y valor actual ---------- */
.pip.ext{ width:9px; border:1px solid rgba(255,209,102,.35); background:transparent; }
.pip.ext.on{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 7px rgba(255,209,102,.5); }
.shop-lv{ font-family:var(--mono); font-size:11.5px; color:var(--dim); margin-left:6px; font-weight:700; }
.sv-now{ color:var(--green); font-family:var(--mono); }
.sv-next{ color:var(--gold); font-family:var(--mono); }
.shop-total{ font-family:var(--mono); color:var(--cyan); margin-left:6px; }

/* ---------- Unidades: datos de la partida diaria ---------- */
.u-need .g-bar{ margin:4px 0 3px; max-width:220px; }
.u-when{ font-size:11px; letter-spacing:.1em; color:var(--dim); }
.u-when.hoy{ color:var(--green); font-weight:800; }
.btn.daily-btn.progreso{ border-color:var(--green); box-shadow:0 0 18px rgba(62,242,160,.25); }
/* el menú de la partida: cabecera, pestañas y pie fijos; el contenido se desplaza por dentro.
   Alto FIJO: al cambiar de pestaña no se mueve nada (antes el panel encogía y RESUME saltaba). */
.panel.pause-panel{ width:100%; max-width:780px; width:min(780px, 100%); overflow:hidden; height:640px; max-height:100%; }
@media (max-width:560px){ .panel.pause-panel{ height:780px; } }   /* en móvil vertical, más alto */
.pause-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding-right:2px; }
.pause-panel > .panel-head, .pause-panel > .tabs, .pause-panel > .pause-foot{ flex:none; }
@media (min-width:700px){ .pe-list{ display:grid; grid-template-columns:1fr 1fr; gap:6px; } }
.pe-row{ padding:6px 8px; }
@media (max-height:520px){
  .pause-panel{ padding:10px 14px 10px; gap:4px; }
  .pause-head{ min-height:30px; }
  .pause-head h2{ font-size:19px; }
  .pause-panel > .tabs{ margin:2px 0 4px; }
  .pause-panel .tab{ min-height:32px; padding:5px 6px; }
  .pb-item{ min-height:64px; padding:5px 4px; gap:2px; }
  .pb-item .card-icon{ width:24px; height:24px; }
  .pb-sec{ margin-bottom:4px; }
  .pb-sec h4{ margin:0 0 4px; }
  .pause-foot{ padding-top:8px; gap:8px; }
  .pf-btn, .pf-resume{ min-height:40px; }
  .pause-detail .pb-hint{ display:none; }
  .pb-detail{ padding:6px 10px; }
  .pb-detail > .card-icon{ width:32px; height:32px; }
  .pb-acts .btn{ min-height:34px; padding:5px 12px; }
}
.level-panel .skip-btn{ width:auto; min-width:170px; align-self:center; }
/* Resultados: JUGAR OTRA VEZ siempre a la vista. La barra de botones se queda pegada abajo del
   panel aunque haya que desplazarse para leer el resto (logros, motivos para volver). */
.results-panel > .res-btns{ position:-webkit-sticky; position:sticky; bottom:-16px; z-index:3;
  padding:10px 0 6px; margin-bottom:-6px;
  background:linear-gradient(to bottom, rgba(9,16,30,0), rgba(9,16,30,.97) 22%); }
@media (min-width:760px) and (min-aspect-ratio:5/4){ .results-panel > .res-btns{ align-self:end; } }
@media (max-height:540px) and (min-width:760px) and (min-aspect-ratio:5/4){ .results-panel > .res-btns{ bottom:-12px; } }
.feed .f-txt{ overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
/* una columna (móvil vertical): la oferta de doblar va justo tras las cifras de la partida, así la
   barra fija de RETRY nunca la tapa (en dos columnas manda grid-template-areas) */
.results-panel > .res-head{ order:0; }
.results-panel > #res-stats{ order:1; }
.results-panel > #double-offer{ order:2; }
.results-panel > #res-feed{ order:3; }
.results-panel > .res-goals{ order:4; }
.results-panel > .res-btns{ order:5; }

/* =============================================================
   Tanda del 14-10: ZERO-DAY (rareza por encima de legendaria) y reroll
   ============================================================= */
/* ZERO-DAY: blanco con separación de color roja y cian (el "glitch" de un exploit). Distinto de la
   legendaria (magenta y dorado): borde que gira más deprisa, nombre con copias desplazadas que
   tiemblan a ratos (solo transform: lo mueve el compositor) y fondo casi negro con líneas de barrido. */
.r-mythic{ color:#ffffff; text-shadow:-1.5px 0 rgba(255,42,109,.85), 1.5px 0 rgba(41,244,255,.85); }
.card.mythic{ --rar:#f4f6ff; border-width:2px; isolation:isolate;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
             linear-gradient(160deg, rgba(255,255,255,.14), rgba(6,7,14,.96) 60%); }
.card.mythic .aro{ display:block; position:absolute; top:-2px; right:-2px; bottom:-2px; left:-2px; inset:-2px;
  border-radius:16px; overflow:hidden; z-index:-1; pointer-events:none; }
.card.mythic .aro i{ background:conic-gradient(#ffffff, #ff2a6d, #ffffff 30%, #29f4ff, #ffffff 60%, #ff2a6d, #ffffff); animation-duration:1.4s; }
.card.mythic .aro b{ background:linear-gradient(160deg, #23252c, #06070e 60%); }
.card.mythic:hover .aro b{ background:linear-gradient(160deg, #2c2f38, #0a0c16 60%); }
.card.mythic .card-name{ color:#fff; text-shadow:-2px 0 rgba(255,42,109,.9), 2px 0 rgba(41,244,255,.9), 0 0 14px rgba(255,255,255,.7);
  animation:mitoTiembla 2.6s steps(1) infinite; }
.card.mythic .card-icon{ color:#fff; }
@keyframes mitoTiembla{ 0%, 86%, 100%{ transform:none; } 88%{ transform:translateX(-2px) skewX(-6deg); } 91%{ transform:translateX(2px); } 94%{ transform:translateX(-1px) skewX(4deg); } }
.choice-card.mythic.elegida{ box-shadow:0 0 44px rgba(255,255,255,.5), -6px 0 30px rgba(255,42,109,.35), 6px 0 30px rgba(41,244,255,.35); }
.chest-screen.myth .chest-title{ color:#fff; text-shadow:-2px 0 rgba(255,42,109,.9), 2px 0 rgba(41,244,255,.9), 0 0 22px rgba(255,255,255,.6); }
.chest-screen.myth .chest-flash{ background:radial-gradient(circle at center, #fff 0, rgba(200,250,255,.85) 25%, rgba(255,42,109,0) 70%); }
.pb-item.myth{ border-color:rgba(244,246,255,.7); box-shadow:inset 0 0 12px rgba(41,244,255,.15); }
.pb-item.myth .card-icon{ color:#fff; }
body.lowfx .card.mythic .aro{ background:conic-gradient(#ffffff, #ff2a6d, #ffffff 30%, #29f4ff, #ffffff 60%, #ff2a6d, #ffffff); }
body.lowfx .card.mythic .card-name{ animation:none; text-shadow:-1.5px 0 rgba(255,42,109,.9), 1.5px 0 rgba(41,244,255,.9); }

/* Reroll: anuncio, monedas y SKIP con la MISMA clase (.offer): mismo tamaño y estilo */
.reroll-row{ width:min(560px, 100%); align-self:center; margin-top:4px; }
.reroll-row .btn.offer{ min-height:44px; font-size:13.5px; letter-spacing:.08em; padding:8px 8px; }
.reroll-row .btn.offer.hidden{ display:none; }
.level-panel .reroll-row .skip-btn{ width:auto; min-width:0; margin-top:0; align-self:auto; padding:8px 8px; }
.chest-actions{ flex-direction:column; align-items:center; gap:8px; }
.chest-actions .reroll-row .btn{ min-width:0; min-height:44px; font-size:13.5px; letter-spacing:.08em; }
.chest-actions .ad-note{ max-width:520px; }
/* cartas nuevas tras un reroll: se dan la vuelta (transform y opacidad) */
.screen.show .card.rebaraja{ animation:rebaraja .34s cubic-bezier(.2,1.3,.4,1) both; animation-delay:calc(var(--i, 0) * 55ms); }
@keyframes rebaraja{ from{ opacity:.2; transform:rotateY(80deg) scale(.94); } to{ opacity:1; transform:none; } }
@media (max-height:520px){
  .reroll-row .btn.offer{ min-height:38px; padding:6px 8px; font-size:12.5px; }
  .chest-actions{ gap:5px; }
}
/* pantallas bajas y anchas (móvil apaisado): TAKE y la fila de reroll en una sola línea */
@media (max-height:440px) and (min-aspect-ratio:3/2){
  .chest-actions{ flex-direction:row; justify-content:center; gap:8px; }
  .chest-actions #chest-take{ min-width:120px; min-height:40px; font-size:14px; }
  .chest-actions .reroll-row{ width:auto; margin-top:0; }
  .chest-actions .reroll-row .btn.offer{ min-width:104px; }
}

/* Unidades (14-10): la escalera de precios por la partida diaria (2 → 4 → 6) */
.u-ladder{ width:100%; display:flex; flex-direction:column; gap:6px; padding:8px 10px; margin-bottom:8px; border-radius:10px;
  border:1px solid rgba(56,232,255,.25); background:rgba(9,16,30,.6); }
.u-ladder > b{ font-size:11.5px; letter-spacing:.16em; color:var(--cyan); }
.ul-pasos{ display:flex; gap:6px; }
.ul-paso{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 4px; border-radius:8px;
  border:1px solid rgba(123,144,168,.3); font-family:var(--mono); font-size:13px; font-weight:800; color:var(--dim); }
.ul-paso small{ font-family:var(--font); font-size:10px; letter-spacing:.12em; font-weight:700; opacity:.8; }
.ul-paso.hecho{ color:var(--green); border-color:rgba(62,242,160,.45); text-decoration:line-through; text-decoration-thickness:1px; }
.ul-paso.actual{ color:var(--gold); border-color:rgba(255,209,102,.6); background:rgba(255,209,102,.08); }
/* (14-10) la línea de la partida diaria cabe entera: progreso, 3:00 y lo que cuestan las siguientes */
.db-sub{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; }