@import url("https://db.onlinewebfonts.com/c/2d6cbf09dd8de35e87023982d4501027?family=Upheaval+TT+-BRK-");
@font-face {
    font-family: "Upheaval TT -BRK-";
    src: url("https://db.onlinewebfonts.com/t/2d6cbf09dd8de35e87023982d4501027.eot");
    src: url("https://db.onlinewebfonts.com/t/2d6cbf09dd8de35e87023982d4501027.eot?#iefix") format("embedded-opentype"),
         url("https://db.onlinewebfonts.com/t/2d6cbf09dd8de35e87023982d4501027.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/2d6cbf09dd8de35e87023982d4501027.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/2d6cbf09dd8de35e87023982d4501027.ttf") format("truetype"),
         url("https://db.onlinewebfonts.com/t/2d6cbf09dd8de35e87023982d4501027.svg#Upheaval TT -BRK-") format("svg");
}

/* Estilos principales: conservar look & feel y evitar conflictos con el tema */
:root{
  --neon-cyan:#00ffd9;
  --neon-green:#63ff7f;
}

/* <--- CAMBIOS AQUÍ ---> */
.prestamito-wrapper html, .prestamito-wrapper body { height:100% }
.prestamito-wrapper {
  color:#e7f6ff;
  height: 100%; /* Asegurar que el wrapper ocupe todo */
}
body {
  background:#030316 url("https://www.instacredit.com/wp-content/uploads/2025/09/FondoLog.gif") center/cover fixed no-repeat;
  text-rendering:optimizeLegibility;
  font-family:"Barlow",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  
  /* Forzar altura completa y sin scroll */
  height: 100vh;
  height: 100dvh; /* Altura dinámica de la ventana */
  overflow: hidden;
}
/* <--- FIN DE CAMBIOS ---> */


.font-upheaval{ font-family:"Upheaval TT -BRK-","Barlow",sans-serif; letter-spacing:.02em }

.card-neon{
  border-radius:24px;
  border:6px solid #00FF4B;
  background:rgba(0,11,131,.35);
  box-shadow:2px 2px 50px 0 #00EAE4;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ring-neon{
  box-shadow:0 0 10px rgba(0,255,217,.8),0 0 24px rgba(0,255,217,.6),0 0 48px rgba(0,196,255,.4);
}
.glow-soft{ text-shadow:0 0 10px rgba(153,255,255,.9),0 0 22px rgba(0,196,255,.8),0 0 36px rgba(0,255,140,.7) }

.btn-img{
  display:inline-block; background-size:contain; background-repeat:no-repeat; background-position:center;
  width:260px; height:64px; border:none; cursor:pointer;
  transition:transform .08s ease, filter .18s ease;
  filter: drop-shadow(0 0 6px rgba(0,255,217,.55));
}
.btn-img:hover{
  transform: translateY(-1px);
  filter: drop-shadow(0 0 10px rgba(0,255,217,.9)) drop-shadow(0 0 22px rgba(0,255,120,.8)) brightness(1.07);
}
.btn-img:active{ transform:translateY(0) scale(.99) }
@media (max-width:640px){
  .btn-img{ width:220px;height:56px }
}

.screen{ display:none }
/* <--- CAMBIO AQUÍ ---> */
.screen.active{ 
  display: flex; /* Cambiado de 'block' a 'flex' */
  height: 100%;   /* Forzar a que la pantalla activa ocupe el 100% del wrapper */
}
/* <--- FIN DE CAMBIO ---> */


.thin-scroll::-webkit-scrollbar{ width:10px }
.thin-scroll::-webkit-scrollbar-track{ background:#0b1033;border-radius:14px }
.thin-scroll::-webkit-scrollbar-thumb{ background:#8a90d9;border-radius:14px }
.thin-scroll::-webkit-scrollbar-thumb:hover{ background:#b1b7ff }

.character-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.character-cell{
  border:3px solid rgba(120,130,255,.35);
  background:#2a2470;
  border-radius:16px;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  cursor:pointer;
  box-shadow: inset 0 0 12px rgba(0,0,0,.25);
  position: relative;
}
.character-cell:hover{
  transform:translateY(-2px) scale(1.03);
  border-color:#9dc2ff;
  box-shadow:0 0 20px rgba(96,165,250,.5);
}
.character-cell.selected{
  border-color:#58ffba;
  box-shadow:0 0 0 3px rgba(88,255,186,.45) inset, 0 0 26px rgba(88,255,186,.8), 0 0 48px rgba(0,255,190,.5);
  background:#352a86;
}

.preview-wrap{
  border-radius:18px;
  padding:10px;
  background:rgba(0,0,0,.15);
  border:2px solid rgba(0,255,217,.35);
  box-shadow: inset 0 0 28px rgba(0,255,217,.15), 0 0 28px rgba(0,255,217,.2);
}
.preview-stage{
  height:230px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#28ff6b 0%, #48ffb2 45%, #32ffe0 100%);
  box-shadow: inset 0 0 18px rgba(255,255,255,.35), 0 0 30px rgba(50,255,200,.45);
  border: 3px solid rgba(255,255,255,.25);
}

#phaser-container, #phaser-container-switch{ width:156px;height:156px }
#phaser-container canvas, #phaser-container-switch canvas{ image-rendering:pixelated }

.heading-bar{ position:relative; padding-top:8px; margin-top:6px }
.heading-bar:after{
  content:""; display:block; height:3px; width:220px; margin:10px auto 0;
  background:linear-gradient(90deg,transparent,var(--neon-cyan),var(--neon-green),transparent);
  filter:drop-shadow(0 0 6px rgba(0,255,217,.9));
}

.nav-rail{ position:relative; min-height:64px }
.nav-left{ position:absolute; left:0; top:0 }
.nav-right{ position:absolute; right:0; top:0 }
@media (max-width:640px){ .nav-rail{ min-height:56px } }

/* Badges de bloqueo */
.character-cell .lock-badge{
  position:absolute; right:8px; top:8px; background:#1f1b4d; color:#ffe;
  padding:2px 8px; border-radius:999px; border:1px solid #7dd3fc; font-size:12px;
}


/* Popups mejorados */
.prestamito-overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:1rem; z-index: 999999;
  background: radial-gradient(1200px 800px at 50% 50%, rgba(0,255,217,.08), rgba(3,3,22,.85));
  backdrop-filter: blur(2px);
}
.prestamito-overlay.active{ display:flex }
.prestamito-modal{
  width:min(92vw,560px);
  border-radius:22px; background: rgba(8, 12, 56, .96); border: 3px solid #39fac7;
  box-shadow: 0 0 40px rgba(0,255,217,.35), inset 0 0 24px rgba(0,255,217,.08);
  color: #e7f6ff; padding: 22px 22px 18px;
}
.prestamito-modal h4{ font-family:"Upheaval TT -BRK-"; font-size:26px; letter-spacing:.02em; margin:0 0 8px; color:#6aff7a; text-shadow:0 0 10px rgba(153,255,255,.9) }
.prestamito-modal p{ margin:0 0 14px; color:#cce9ff }
.prestamito-actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:8px }
.prestamito-btn{
  appearance:none; border:none; padding:12px 18px; border-radius:14px; cursor:pointer; font-weight:700; letter-spacing:.02em;
  filter: drop-shadow(0 0 6px rgba(0,255,217,.55)); transition: transform .08s ease, filter .18s ease;
}
.prestamito-btn:active{ transform:translateY(0) scale(.99) }
.prestamito-btn:hover{ filter: drop-shadow(0 0 10px rgba(0,255,217,.9)) drop-shadow(0 0 22px rgba(0,255,120,.8)) brightness(1.07); }
.prestamito-btn.primary{ background:linear-gradient(90deg,#18ffe6,#6aff7a); color:#031421 }
.prestamito-btn.secondary{ background:#1a1e4d; color:#e7f6ff; border:1px solid #64e7ff }
.prestamito-modal.error{ border-color:#ff6a6a; box-shadow:0 0 40px rgba(255,106,106,.3), inset 0 0 24px rgba(255,106,106,.08) }
.prestamito-modal.error h4{ color:#ff9b9b }

/* * ---- CÓDIGO AÑADIDO PARA SILUETAS ---- 
 */

/* 1. Aplica el filtro de silueta al div del sprite */
.character-cell .is-silueta {
  filter: brightness(0) opacity(0.5);
  transition: filter 0.2s ease;
}

/* 2. (Opcional) Hace la silueta un poco más visible en hover */
.character-cell.is-locked:hover .is-silueta {
  filter: brightness(0) opacity(0.65);
}

/* 3. (Opcional) Deshabilita el efecto "pop" en la celda bloqueada */
.character-cell.is-locked:hover {
  transform: none;
  border-color: rgba(120, 130, 255, 0.35); /* Restaura el borde normal */
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.25); /* Restaura la sombra normal */
}