html{
background:#355e3b;
}

body{
background:#355e3b;

margin:0;
padding:0;

min-height:100vh;
}
img{
-webkit-touch-callout:none; /* evita men� guardar imagen iPhone */
-webkit-user-drag:none;
user-select:none;
-webkit-user-select:none;
-webkit-tap-highlight-color:transparent;
}

body{
-webkit-touch-callout:none;
}

*
{
    margin: 0;
    padding: 0;
}
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
    margin: 0;
    padding: 0;
    color : #fff;
}
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    touch-action: none; 
}
canvas
{
    position: absolute;
    z-index: 0;
}
.Nombre,.text{
font-family: "Luckiest Guy" !important;
    font-style: italic !important;
}
@font-face {
                        font-family: "Luckiest Guy";
                        font-style: normal;
                        font-weight: 400;
                        src: local("Luckiest Guy Regular"), local("LuckiestGuy-Regular"), url(https://fonts.gstatic.com/s/luckiestguy/v10/_gP_1RrxsjcxVyin9l9n_j2hTd52.woff2) format("woff2");
                        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#splash_screen
{
    height: 100vh;
    width: 100vw;
    /*background: url('imgs/css/bg.png');*/
    background-position: center;
    background-size: cover;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    /*display: none;*/
    z-index: 99;
}
#loader{
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:20px;
    background:#000;
    z-index:100;
}
#loader img{
    width:400px;
    max-width:80%;
    height:auto;
    display:block;
}
.loader-spinner{
    width:50px;
    height:50px;
    border:5px solid rgba(255,255,255,.2);
    border-top:5px solid #2f6620;
    border-radius:50%;
    animation:spin .8s linear infinite;
}
.loader-text{
    color:#fff;
    font-size:18px;
    font-weight:bold;
	font-family: 'Fredoka', sans-serif;
}
#section
{
    height: 25%;
    width: 30%;
    position: absolute;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

#gPlay,#restart,#inicio,#music_on,#music_off,#chat,#records,#subir,#login, #versus
{
    height: 105px;
    width: 90px;
    margin: 0 0px 0 0px; /* 0 5px 0 2px; */
}
#music_off
{
    display: none;
}
h2
{
    position: absolute;
    top: 20%;
    font-size: 25pt;
    font-weight: bold;
}

#score, #score_final {
    position: fixed;
    top: 10px;
    right: 15px;

    z-index: 20;

    display: flex;
    align-items: center;
    gap: 6px;

    padding: 6px 12px;

    background: rgba(0,0,0,0.5);
    border-radius: 10px;

    font-size: 18pt;
    color: #fff;
    font-family: 'PT Sans Narrow', sans-serif;
}

#msg_n_enemigo {
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
	flex-direction: column; 
    align-items: center;
    height: 200px;
    width: 100%;
    color: #f12d2d;
    font-family: "Luckiest Guy", cursive;
    font-style: italic;
    animation-name: slideUpFadeOut;
    animation-duration: 2s;
    animation-delay: 4s;
}
#guardar_score
{
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    text-align: center;
    font-size: 26pt;
    color: #fff;
    font-family: 'PT Sans Narrow', sans-serif;


}
#regresar,#regresar_go,#regresar_subirscore_splash,#regresar_login
{
  height: 100px;
  width: 100px;
  margin: 0px;
  position: absolute;
  left: 20px;
  top: 20px;
  
}
#go,#records_splash,#subirscore_splash,#recuperar_cuenta_splash,#login_splash
{
    height: 100vh;
    width: 100vw;
    position: absolute;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.9);
    display: none;
}

/*###################################### Style Textos ######################################*/
.texto-principal {
    font-family: 'Fredoka', sans-serif;
    font-weight: 900;
    font-size: 34px;

    background: linear-gradient(
        to top,
        #FF7A00 0%,
        #FFA800 45%,
        #FFF6C2 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* sombra MUY suave (solo profundidad ligera) */
    text-shadow:
        0 2px 3px rgba(0,0,0,0.25);
}

.texto-secundario {
    font-family: 'Fredoka', sans-serif;
    font-weight: 800;
    font-size: 20px;

    background: linear-gradient(
        to top,
        #0050B3 0%,
        #009DFF 50%,
        #EAF9FF 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:
        0 2px 3px rgba(0,0,0,0.25);
}

.texto-extra {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 15px;

    color: #ffffff;

    text-shadow:
        0 2px 4px rgba(0,0,0,0.4);
}
.texto-reloj-ranking {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 15px;

    color: #1D7A0C;

    text-shadow:
        0 2px 4px rgba(0,0,0,0.4);
}

.texto-principal::after,
.texto-secundario::after {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 40%;

 

    pointer-events: none;
}

.tip{
    font-family: 'Fredoka', sans-serif;
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    
    white-space: nowrap;
    font-size: 15px;
    font-weight: bold;
    color: #f3d937;
    
    background: rgba(0,0,0,0.6);
    padding: 10px 18px;
    border-radius: 10px;
}

.texto-error {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 15px;

    color: #ff3b3b;

    text-shadow:
        0 2px 0 #5a0000,
        0 3px 6px rgba(0,0,0,0.4);
}
.texto-verde {
	font-family: 'Fredoka', sans-serif;
    color: #4CAF50;

    text-shadow:
        0 1px 0 #2e7d32,
        0 2px 4px rgba(0,0,0,0.3);
}
.texto-naranja {
	font-family: 'Fredoka', sans-serif;
    color: #c57e00;

    text-shadow:
        0 2px 0 #8B4A00,
        0 4px 8px rgba(0,0,0,0.5),
        0 0 10px rgba(255,195,0,0.8);
}

/*###################################### FIN Style Textos ######################################*/

.Logo
{
  height: 200px;
  position: relative;
  top: -230px;
}

.info{
	position: fixed;
    top: 0px;     
    right: 10px;   
    height: 85px;
	width: 70px;
    z-index: 1000;
	cursor: pointer;
}
.account {
    position: fixed;
    top: 0px;
    left: 10px; /* izquierda */
    height: 85px;
    width: 70px;
    z-index: 1000;
    cursor: pointer;
}

/*###################################### Style Modals ######################################*/
.modal {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
box-sizing:border-box;
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);

  justify-content: center;
  align-items: center;
	
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal.active {
  display: flex;
  opacity: 1;
}

.modal_content {
  background-image: url('imgs/index/fondo_modals.png');
  background-size: cover;
  background-position: center;
  width: 400px;
  height: 300px;
  max-width: 90%;
  padding: 175px 20px;
  border-radius: 15px;
  text-align: center;
  position: relative;
  flex-direction: column;
  align-items: center;
  animation: modalPop 0.3s ease;
  margin-top:auto;
  margin-bottom:auto;
}
@keyframes modalPop {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal_title {
	margin-bottom: 20px;
    text-align: center;
    padding: 5px 0px;
    font-weight: bold;
}

.modal input {
  width: 85%;
  padding: 12px;
  margin: 8px 0;

  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.1);

  background: rgba(0,0,0,0.6);
  color: white;

  outline: none;
  transition: 0.3s;
}

.modal input:focus {
  border: 2px solid #FFD36B;
  box-shadow: 0 0 10px #FF8C00;
}
/*.modal button {
  width: 85%;
  padding: 12px;
  margin-top: 12px;
  margin-bottom: 15px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(45deg, #FFD36B, #FF8C00);
  color: #4a2500;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.4);
  box-shadow:
    0 4px 0 #7A3E00,
    0 6px 10px rgba(0,0,0,0.4);
  transition: all 0.2s ease;
}*/

.boton_principal {
  width: 85%;
  padding: 12px;
  margin-top: 12px;
  margin-bottom: 15px;

  border: none;
  border-radius: 10px;

  background: linear-gradient(45deg, #FFD36B, #FF8C00);
  color: #4a2500;

  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 16px;

  cursor: pointer;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.4);

  box-shadow:
    0 4px 0 #7A3E00,
    0 6px 10px rgba(0,0,0,0.4);

  transition: all 0.2s ease;
}


/*.modal button:hover {
  transform: scale(1.05);
  box-shadow:
    0 4px 0 #7A3E00,
    0 0 12px rgba(255,140,0,0.8);
}*/
.modal button:active {
  transform: translateY(2px);
}
.modal_account button {
  width: auto;
  min-width: 200px;
  padding: 12px 20px;
}
.modal_account input {
  width: 100%;
  max-width: 260px;
}
.close {
  position: absolute;
  top: 35px;
  right: 15px;

  font-size: 24px;
  color: rgba(255,255,255,0.7);

  cursor: pointer;
  transition: 0.2s;
}

.close:hover {
  color: #FF8C00;
  transform: scale(1.2);
}
/*###################################### FIN Style Modals ######################################*/

/*###################################### Style Coins, Gems ######################################*/
.CoinsGems {
    height: 40px;
}
.top-left-ui {
    position: fixed;
    top: 20px;
    left: auto;

    display: flex;
    align-items: center;
    gap: 10px;

    z-index: 1000;
}

/* c�psula base */
.capsula {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    color: white;
    /*font-weight: bold;*/
	font-family: 'Fredoka', sans-serif;
}

/* icono */
.capsula img {
    height: 25px;
}

/* coins (izquierda del account) */
.coins {
    left: 120px;
}

/* gems (a lado de coins) */
.gems {
    left: 220px;
}
/*###################################### FIN style Coins, Gems ######################################*/

/*###################################### Style RANKING ######################################*/

/* CONTENEDOR */
.ranking-table {
    width: 100%;
    max-width: 350px;
    margin: auto;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* HEADER */
.ranking-header {
    display: grid;
    grid-template-columns: 50px 1fr 80px;

    font-weight: bold;
    text-align: center;

    color: #FFD36B;
}

/* FILAS */
.ranking-row {
    display: grid;
    grid-template-columns: 50px 1fr 80px;

    align-items: center;
    text-align: center;

    padding: 8px;
    border-radius: 10px;

    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);

    transition: 0.2s;
}

/* HOVER */
.ranking-row:hover {
    transform: scale(1.03);
}

/* COLUMNAS */
.rank-num {
    font-weight: bold;
}

.rank-user {
    text-align: left;
}

.rank-score {
    font-
	weight: bold;
}
.rank-name {
    display: flex;
    align-items: center;
    gap: 5px;
	font-weight: bold;
}

.rank-user {
    display: flex;
    align-items: center;
}

.username {
    margin-left: 5px;
}
/*###################################### FIN Style RANKING ######################################*/

/*###################################### Style BTN MODAL PARTIDA PERDIDA ######################################*/

.gameover-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.gameover-buttons img {
    height: 100px;
    width: 140px;
    cursor: pointer;
    transition: 0.2s;
}

.gameover-buttons img:hover {
    transform: scale(1.1);
}

.gameover-buttons img:active {
    transform: scale(0.95);
}

/*###################################### FIN Style BTN MODAL PARTIDA PERDIDA ######################################*/

#btn_loader {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid white;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-left: 8px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/*###################################### Style RANKING ######################################*/
.top1 {
    color: gold;
    font-weight: bold;
}

.top2 {
    color: silver;
}

.top3 {
    color: #cd7f32;
}
.tabs-ranking {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.tabs-ranking button {
    padding: 8px 15px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(45deg, #FFD36B, #FF8C00);
    color: #4a2500;
    cursor: pointer;
    transition: 0.2s;
    font-weight: bold;
}

/* Hover (opcional, leve efecto) */
.tabs-ranking button:hover {
    filter: brightness(0.95);
}

/* BOTON ACTIVO (oscurecido) */
.tabs-ranking button.active {
    background: linear-gradient(45deg, #e6b84f, #cc7000);
    color: #4a2500;
}
.profile-tab.active{
    background: linear-gradient(45deg, #e6b84f, #cc7000);
    color:#4a2500;
}
.rank-premio {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-weight: bold;
}

.rank-premio img {
    width: 18px;
    height: 18px;
}
/* SOLO TABLA SEMANAL */
.ranking-semanal .ranking-header,
.ranking-semanal .ranking-row {
    display: grid;
    grid-template-columns: 30px 1fr 100px 70px;
    align-items: center;
    text-align: center;
}


/* CONTENER ESTILOS DEL USUARIO */
.ranking-semanal .rank-user {
    display: flex;
    align-items: center;

    max-width: 100%;
    overflow: hidden;
}

/* evitar que el estilo rompa el layout */
.ranking-semanal .rank-name {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
}

/* nombre normal */
.username {
    margin-left: 5px;
}

/* MUY IMPORTANTE */
.ranking-semanal .rank-name span {
    max-width: 100%;
    display: inline-block;
}

/* score bien centrado */
.ranking-semanal .rank-score {
    text-align: center;
    font-weight: bold;
}

/* premio fijo a la derecha */
.ranking-semanal .rank-premio {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}
/*###################################### FIN Style RANKING ######################################*/
/*###################################### Style IMG RANGOS ######################################*/
.badge-rol {
    width: 20px;
    height: 20px;
    /*margin-left: 6px;*/
    vertical-align: middle;
}
/*###################################### FIN Style IMG RANGOS ######################################*/

/*###################################### Style Btn regresar ######################################*/
#close_store, #close_records, #close_account, #close_login, #close_change_pass, #close_settings, #close_btn_b_estilo, #close_btn_c_coins, #close_modal_temas, #close_confirm_tema, #close_btn_potenciadores, #close_confirm_booster, #close_buygems, #btn_close_gems_success, #close_versus, #close_game_settings, #close_stripe_modal, #close_transactions{
    all: unset; /* resetea TODOS los estilos heredados */

    position:absolute;
    bottom:-25px;
    left:50%;
    transform:translateX(-50%);

    cursor:pointer;
    z-index:1000;
    display:block;
}

#close_store img, #close_records img, #close_account img, #close_login img, #close_change_pass img, #close_settings img, #close_btn_b_estilo img, #close_btn_c_coins img, #close_modal_temas img, #close_confirm_tema img, #close_btn_potenciadores img, #close_confirm_booster img, #close_buygems img, #btn_close_gems_success img, #close_versus img, #close_game_settings img, #close_stripe_modal img, #close_transactions img{
    display:block;
    width:65px;
    height:auto;
    pointer-events:none;
}

#close_store:active, #close_records:active, #close_account:active, #close_login:active, #close_change_pass:active, #close_settings:active, #close_btn_b_estilo:active, #close_btn_c_coins:active, #close_modal_temas:active, #close_confirm_tema:active, #close_btn_potenciadores:active, #close_confirm_booster:active, #close_buygems:active, #btn_close_gems_success:active, #close_versus:active, #close_game_settings:active, #close_stripe_modal:active, #close_transactions:active{
transform:translateX(-50%) translateY(3px) scale(.94);
}

#btn_cerrar_alerta{
top: 10px;
}
#btn_cerrar_alerta:disabled{
    background: linear-gradient(
        180deg,
        #9c9c9c 0%,
        #727272 100%
    ) !important;

    color: #dcdcdc;
    cursor: not-allowed;

    box-shadow:
        0 4px 0 #555,
        0 6px 12px rgba(0,0,0,.30);

    filter: grayscale(100%);
}

/*###################################### FIN Style Btn regresar ######################################*/

/*###################################### Style Texto 2 modals ######################################*/
.texto_2_modals {
margin-top:-75px;
text-align:center;
font-family:'Fredoka', sans-serif;
font-weight:700;
font-size:13px;
line-height:1.15;
letter-spacing:.4px;
color:#48310f;
text-shadow:
0 1px 0 #f4d28b,
0 2px 2px rgba(0,0,0,.08);
}

/*###################################### FIN Style Texto 2 modals ######################################*/
/* =========================
UTILIDADES
========================= */

.hidden{
display:none;
}



/* =========================
BOTON REGRESAR
========================= */

.store-back{
position:absolute;
bottom:-25px;
left:50%;
transform:translateX(-50%);
cursor:pointer;
border:none;
background:none;
padding:0;
z-index:5;
}

.store-back img{
width:65px;
display:block;
}


/* =========================
VIP BANNER
========================= */

.vip-banner{
background:#2f2208;
color:#ffd469;
padding:14px;
border-radius:18px;
display:flex;
justify-content:space-between;
align-items:center;
}

.vip-btn{
background:#d79b2a;
padding:10px 16px;
border-radius:10px;
font-weight:bold;
}


/* =========================
SUBMENU ITEMS
========================= */

.style-item,
.theme-card{
background:rgba(255,255,255,.45);
padding:14px;
border-radius:14px;
text-align:center;
}

.price{
margin:10px 0;
font-weight:bold;
color:#7a510e;
}

.style-shop-img{
width: 40px;
}





/* =========================
CARD ESTILOS
========================= */
/* CARD usando PNG */

.estilos-card{
width:170px;
height:160px;

position:relative;
overflow:hidden;
padding:18px 14px;

display:flex;
flex-direction:column;
justify-content:flex-start;
gap:6px;
align-items:center;
}

.estilos-bg {
    position: absolute;
    top: 0px;
    left: 10px;
    width: 90%;
    height: 90%;
    display: block;
    object-fit: fill;
    z-index: 0;
}

.estilos-overlay{
position:relative;
z-index:2;
}

/* TITULO */
.estilos-card h2{
font-family: 'Fredoka', sans-serif;
position: unset;
margin-top:-12px; /* s�belo */
margin-bottom:0;

font-size:27px;

background:linear-gradient(
#ffe59a,
#d28a00
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}


/* subtitulo */
.shop-subtitle{
font-family: 'Fredoka', sans-serif;
margin-top:8px;

font-size:11px;
line-height:1.2;

font-weight:700;
text-align:center;

color:#f9ddb1;
}




/* boton */
.shop-btn{

margin-top:12px;

border:none;
cursor:pointer;

padding:8px 20px;

font-size:16px;
font-weight:800;

color:#fff;

border-radius:13px;

background:linear-gradient(
#f3c43b,
#ca8106
);

box-shadow:0 4px 0 #8b5200;
white-space:nowrap;
}

.shop-btn:active{
transform:translateY(2px);
box-shadow:0 2px 0 #8b5200;
}



/*################### MONEDAS CARD */
/* GRID NUEVO PERFECTO */
.store-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding: 10px;
}

/* TODAS LAS CARDS IGUALES */
.store-card {
    width: 100%;
    aspect-ratio: 1 / 1;

    border-radius: 10px;
    overflow: hidden;

    cursor: pointer;
    transition: transform 0.2s ease;
}

/* IMAGEN DENTRO */
.store-card img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}

/* EFECTO HOVER */
.store-card:active,.store-vip:active {
    transform: scale(0.95);
}

/* VIP ABAJO */
.store-vip {
    width: 100%;
    max-width: 360px;
    margin: -5px auto 0;
	transition: transform 0.2s ease;
}

.store-vip img {
    width: 50%;
    border-radius: 15px;
    cursor: pointer;
}

.store-coins-text {
    width: 100%;
    max-width: 360px;
    margin: -5px auto 0;
	transition: transform 0.2s ease;
}

.store-coins-text img {
    width: 100%;
    border-radius: 15px;
    cursor: pointer;
	padding-bottom: 10px;
}
.store-gems-text {
    width: 100%;
    max-width: 360px;
    margin: -5px auto 0;
	transition: transform 0.2s ease;
}
.store-gems-text img {
    width: 90%;
    border-radius: 15px;
    cursor: pointer;
	padding-bottom: 3px;
}

.btn-back{
    all: unset;

    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);

    cursor: pointer;
    z-index: 1000;
    display: block;
}

.btn-back img{
    display: block;
    width: 65px;
    height: auto;
    pointer-events: none;
	transition: transform 0.1s ease;
}

/* animaci�n */
.btn-back:active img{
    transform: scale(0.92);
}

/* evitar que modal lo rompa */
.modal button.btn-back{
    all: unset;
}


/* scrollbar bonito */
.estilos-scroll::-webkit-scrollbar{
    width: 6px;
}

.estilos-scroll::-webkit-scrollbar-thumb{
    background: #c89b3c;
    border-radius: 10px;
}
.store-list{
	flex:1; 
    display:flex;
    flex-direction:column;
    gap:15px;
    max-height:65vh;
    overflow-y:auto;
    padding-right:10px;
}

/* CARD */
.style-card{
    display:flex;
	position:relative;
    align-items:center;
    flex:0 0 auto;
    background:linear-gradient(180deg,#5a3b1f,#64421d);
    border-radius:12px;
    padding:0px 3px;
    box-shadow:0 3px 8px rgba(0,0,0,0.4);
	justify-content:space-between;
    margin-bottom:10px;
}

/* INFO */
.style-info{
    flex:1;
    text-align:left;
    margin-left:12px;
}

.style-desc{
    color:#d3b683;
    font-size:10px;
	font-family: 'Fredoka', sans-serif;
}

.style-price{
    margin-top:3px;
	margin-bottom: 5px;
    font-size:12px;
    color:#fff;
	font-family: 'Fredoka', sans-serif;

}

/* BOT�N */
.style-action{
    display:flex;
    flex-direction:column;   /* CLAVE */
    justify-content:flex-end; /* ahora s� baja */
    align-items:center;
    height: 95%;             /* CLAVE */
	padding-bottom: 20px;
}

/* BOT�N COMPRAR */
.btn-comprar{
    background: linear-gradient(180deg, #92a02f, #1f611a);
    border:none;
    padding:10px 10px;
	margin-right: 5px;
	margin-bottom: -20px;
    border-radius:8px;
    color:#fff;
    font-weight:bold;
    font-size:10px;
    cursor:pointer;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3),
        0 3px 6px rgba(0,0,0,0.4);
    transition:0.2s;
}

.btn-comprar:active{
    transform:scale(0.95);
}

.btn-cancelar-compra{

    background:linear-gradient(180deg,#8d98a6,#5d6672);
    border:none;
    padding:10px;
    margin-right:5px;
    margin-bottom:-20px;
    border-radius:8px;
    color:#fff;
    font-weight:bold;
    font-size:10px;
    cursor:pointer;

    box-shadow:
        inset 0 -2px 0 rgba(0,0,0,.35),
        0 3px 6px rgba(0,0,0,.35);

    transition:.2s;
}

.btn-cancelar-compra:hover{
    filter:brightness(1.08);
}

.btn-cancelar-compra:active{
    transform:scale(.95);
}

/* BOT�N COMPRADO */
.btn-comprado{
    border:none;
    border-radius:8px;
	margin-bottom: -20px;
	background:#777;
    padding:10px 10px;
	margin-right: 5px;
    color:#fff;
    font-weight:bold;
    font-size:10px;
    cursor:pointer;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3),
        0 3px 6px rgba(0,0,0,0.4);
    transition:0.2s;
}

/* CONTENEDOR PRINCIPAL */
.store-list{
	flex:1; 
    display:flex;
    flex-direction:column; /* clave */
    gap:10px;
	overflow-y:auto;
}

/* SCROLL */
.estilos-scroll{
    display:block !important;
    width:100%;
    height:445px;
    overflow-y:auto;
    overflow-x:hidden;
    padding:5px 10px 90px 10px;
    box-sizing:border-box;
}
/* LAYOUT GENERAL */
.store-layout{
    display:flex;
    width:100%;
    height:100%;
	/*min-height:95vh;*/
}

/* IZQUIERDA */
.store-left{
    width:60%;
    display:flex;
    flex-direction:column;
	height:100%;
	overflow:hidden;
}

/* FONDO SOLO IZQUIERDA */
.tienda-fondo{
	flex:1;  
    background-image:url(imgs/index/fondo_tienda.png);
    background-size:100% 100%;
    background-position:center;
    border-radius:12px;
}

/* DERECHA */
.store-right{
    width:35%;
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* ICONO */
.style-icon img{
    width:35px;
	height:55px;
    object-fit:contain;
}


.style-name{
    font-weight:bold;
    font-size:15px;
	font-family: 'Fredoka', sans-serif;
}

/* DERECHA CAJAS */
.preview-box,
.recommended-box{
    background:rgba(0,0,0,0.35);
    border-radius:12px;
    padding:10px;
}

/* TITULOS */
.preview-title,
.recommended-title{
    font-weight:bold;
    margin-bottom:6px;
    color:#ffd36b;
}

/* PREVIEW */
.preview-card{
    background:linear-gradient(180deg,#5a3b1f,#3b2613);
    border-radius:10px;
    padding:10px;
    text-align:center;
}

.preview-name{
    font-size:18px;
    font-weight:bold;
}

.preview-desc{
    font-size:11px;
    color:#ddd;
}

/* RECOMENDADO */
.recommended-card{
    background:linear-gradient(180deg,#5a3b1f,#3b2613);
    border-radius:10px;
    padding:10px;
    text-align:center;
}

.recommended-name{
    font-size:16px;
    font-weight:bold;
}

.recommended-desc{
    font-size:11px;
    color:#ddd;
}

.recommended-price{
    margin:5px 0;
    color:#00cfff;
}
.modal-submenu-estilos{
	    padding: 10px;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: auto;
    max-width: 900px;
	height: 80vh;
    border-radius: 15px;
    text-align: center;
    position: relative;
    flex-direction: column;
    align-items: center;
    animation: modalPop 0.3s ease;
}
.icon-moneda-tienda{
    width:14px;
    vertical-align:middle;
    margin-right:4px;
}

/* SCROLL PERSONALIZADO */
.estilos-scroll::-webkit-scrollbar{
    width:8px;
}

.estilos-scroll::-webkit-scrollbar-track{
    background:rgba(255,255,255,.08);
    border-radius:10px;
}

.estilos-scroll::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.35);
    border-radius:10px;
}

.estilos-scroll::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.55);
}
#contenedor_estilos::-webkit-scrollbar{
    width:8px;
}

#contenedor_estilos::-webkit-scrollbar-track{
    background:rgba(255,255,255,.08);
    border-radius:10px;
}

#contenedor_estilos::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.35);
    border-radius:10px;
}
#store_styles .back-main2{
    position:absolute;
    bottom:-25px;
    left:50%;
    transform:translateX(-50%);
    z-index:20;
	justify-content:flex-start !important;
    align-items:center !important;
}
.buy-style-box{
text-align:center;
}

.buy-style-img{

width:190px;

object-fit:contain;

margin-bottom:25px;

filter:
drop-shadow(0 0 25px rgba(255,255,255,.35));

animation:
floatStyle 3s ease-in-out infinite;
}
/* =========================
MODAL BUY STYLE
========================= */

.modal-buy-style{

width:520px !important;
height:860px !important;

max-width:none !important;
max-height:none !important;

padding:0 !important;

display:flex !important;
flex-direction:column;
align-items:center;

position:relative;

background-size:100% 100%;
background-position:center;
background-repeat:no-repeat;

overflow:hidden;
}

.buy-style-top{

position:absolute;

top:25px;
left:0;

width:100%;

display:flex;
justify-content:center;
align-items:center;

z-index:5;
}

.buy-style-title{

font-family:'Fredoka', sans-serif;

font-size:56px;
font-weight:900;

color:#ffbf2f;

text-shadow:
0 3px 0 #7a3c00,
0 6px 14px rgba(0,0,0,.35);

letter-spacing:1px;
}
.buy-style-center{

display:flex;
flex-direction:column;
align-items:center;

width:100%;
}

/* =========================
MONEDAS
========================= */

.player-currency{
display:flex;
gap:8px;
}

.currency-box{
display:flex;
align-items:center;
gap:5px;

padding:6px 10px;

border-radius:12px;

background:rgba(0,0,0,.35);

backdrop-filter:blur(4px);

font-family:'Fredoka', sans-serif;
font-weight:bold;
font-size:13px;

color:#fff;
}

.currency-box img{
width:18px;
height:18px;
}

/* =========================
CONTENIDO
========================= */

.buy-style-box{
display:flex;
flex-direction:column;
align-items:center;

width:100%;
}

.buy-style-img{
width:200px;

object-fit:contain;
margin-bottom:0px;

filter:
drop-shadow(0 0 15px rgba(255,255,255,.25));

animation:
floatStyle 3s ease-in-out infinite;
}

@keyframes floatStyle{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-8px);
}
100%{
transform:translateY(0px);
}
}

/* =========================
NOMBRE
========================= */

.buy-style-name{

font-size:25px;
font-weight:900;

margin-bottom:12px;

text-align:center;
}

/* =========================
DESCRIPCI�N
========================= */

.buy-style-desc{

max-width:320px;

font-size:10px;
line-height:1.45;

color:#5f4b25;

text-align:center;

margin-bottom:15px;

font-family:'Fredoka', sans-serif;
}

/* =========================
PRECIO
========================= */

.buy-style-price{
font-family: 'Fredoka', sans-serif;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
font-size:30px;
margin-bottom:15px;
color:#fff;
text-shadow:
0 3px 8px rgba(0,0,0,.35);
}

.buy-style-price img{
width:42px;
height:42px;
}

.buy-style-price img{
width:24px;
height:24px;
}

.old-price{

    color:#8a8a8a;

    text-decoration:line-through;

    text-decoration-thickness:2px;

    text-decoration-color:#8a8a8a;

    font-weight:600;

    opacity:.85;

}
.style-offer{

    position:absolute;

    top:-2px;

    right:-5px;

    width:45px;

    height:auto;

    z-index:10;

    pointer-events:none;

}
.theme-offer{

    position:absolute;

    top:39px;

    right:-7px;

    width:75px;

    height:auto;

    z-index:20;

    pointer-events:none;

}
.potenciadores-offer{

    position:absolute;

    top:62px;

    right:-7px;

    width:75px;

    height:auto;

    z-index:20;

    pointer-events:none;

}
.gems-offer{

    position:absolute;

    top:-1px;

    right:-7px;

    width:75px;

    height:auto;

    z-index:20;

    pointer-events:none;

}
/* =========================
RARITY
========================= */

.buy-style-rarity{

padding:10px 22px;

border-radius:999px;

font-size:10px;
font-weight:bold;

margin-bottom:20px;

background:
linear-gradient(
45deg,
#ffbf00,
#ff7300
);

color:#fff;

box-shadow:
0 0 18px rgba(255,160,0,.45);
}

/* =========================
BOTONES
========================= */

.btn-buy-style{
margin-left: 10px;
padding:20px;
border:none;
border-radius:22px;
background:
linear-gradient(
180deg,
#ffd75e,
#e58b00
);
box-shadow:
0 6px 0 #8f5100,
0 12px 25px rgba(0,0,0,.35);
font-family:'Fredoka', sans-serif;
font-size:15px;
font-weight:900;
color:#5a3200;
cursor:pointer;
transition:.15s;
}

.btn-buy-style:active{

transform:translateY(4px);

box-shadow:
0 2px 0 #8f5100;
}


/* =========================
UNLOCK
========================= */

.unlock-title{
font-family: 'Fredoka', sans-serif;
font-size:28px;
font-weight:800;

margin-bottom:15px;

color:#1f611a;

text-shadow:
0 0 15px rgba(255,200,0,.45);
}

.unlock-buttons{
flex-direction:column;
gap:10px;

width:100%;
align-items:center;
}
/* =========================
BOTON COMPRANDO
========================= */

.btn-buy-style.btn-loading{

background:
linear-gradient(
180deg,
#8f8f8f,
#5e5e5e
) !important;

box-shadow:
0 6px 0 #3a3a3a,
0 10px 18px rgba(0,0,0,.25) !important;

cursor:not-allowed;

opacity:.9;

pointer-events:none;

transform:scale(.98);
}

.btn-buy-style:disabled{
pointer-events:none;
}
.badge.bg-purple{
    background:#7c3aed !important;
    color:white !important;
}

/* =========================================
RAREZAS TIENDA
========================================= */

.buy-style-rarity{

    margin-top:10px;

    padding:7px 18px;

    border-radius:999px;

    font-size:14px;
    font-weight:bold;

    letter-spacing:2px;

    text-transform:uppercase;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:140px;

    box-shadow:
    0 4px 12px rgba(0,0,0,.25);

}


/* COMUN */

.rarity-comun{

    background:
    linear-gradient(
        180deg,
        #9ca3af,
        #6b7280
    );

    color:white;

}


/* RARO */

.rarity-raro{

    background:
    linear-gradient(
        180deg,
        #3b82f6,
        #2563eb
    );

    color:white;

}


/* EPICO */

.rarity-epico{

    background:
    linear-gradient(
        180deg,
        #8b5cf6,
        #7c3aed
    );

    color:white;

    box-shadow:
    0 0 15px rgba(124,58,237,.45);

}


/* LEGENDARIO */

.rarity-legendario{

    background:
    linear-gradient(
        180deg,
        #fbbf24,
        #f59e0b
    );

    color:white;

    box-shadow:
    0 0 15px rgba(245,158,11,.45);

}


/* MITICO */

.rarity-mitico{

    background:
    linear-gradient(
        180deg,
        #ef4444,
        #dc2626
    );

    color:white;

    box-shadow:
    0 0 15px rgba(220,38,38,.45);

}


/* VIP */

.rarity-vip{

    background:
    linear-gradient(
        180deg,
        #111827,
        #000000
    );

    border:1px solid #ffd54a;

    color:#ffd54a;

    box-shadow:
    0 0 15px rgba(255,213,74,.45);

}
.shop-full-image{
width:100%;
max-width:380px;
display:block;
margin:auto;
border-radius:20px;
}
/* =========================
IDCOINS NUEVO LAYOUT
========================= */

.coins-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

width:100%;

max-width:340px;

margin:0 auto;

padding:5px 8px 10px 8px;

overflow-y:auto;

max-height:500px;

box-sizing:border-box;
}

.coin-pack{

cursor:pointer;

transition:transform .18s ease;
}

.coin-pack:active{

transform:scale(.96);
}

.coin-pack-img{

width:100%;
height: 125px;
display:block;

border-radius:8px;
}
#payment-element{

width:100%;

max-width:320px;

margin:0 auto;

background:rgba(255,255,255,0.95);

padding:10px;

border-radius:14px;

box-sizing:border-box;
}

.StripeElement{

padding:8px !important;

font-size:14px !important;
}
.loader-btn{

width:18px;
height:18px;

border:3px solid #fff;
border-top:3px solid transparent;

border-radius:50%;

display:inline-block;

animation:spin .8s linear infinite;

margin-right:8px;
vertical-align:middle;
}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}
/* =========================================
PROFILE NUEVO
========================================= */

/*.profile-modal{

display:flex;
flex-direction:column;
align-items:center;

overflow:hidden;
}*/

.profile-header{

width:100%;

display:flex;

align-items:center;

margin-top:-60px;
}

.profile-avatar-img{
height:95px;
padding-left: 30px;

}

.profile-user-info{

flex:1;
text-align:left;
}

.profile-username{

font-size:26px;
font-family:'Fredoka', sans-serif;
font-weight:900;

color:#3b2105;
}

.profile-email{

font-size:12px;

color:#6d4d2d;

margin-top:3px;
}

.profile-level-box{

display:flex;
align-items:center;

gap:10px;

margin-top:12px;
}

.profile-xp-bar{

width:120px;

height:14px;

background:#3a2b17;

border-radius:20px;

overflow:hidden;

position:relative;
}

.profile-xp-fill{

height:100%;

background:linear-gradient(
90deg,
#6dff4b,
#26b526
);

border-radius:20px;

transition:width .3s ease;
}

.profile-xp-text{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%, -50%);

font-size:9px;

font-weight:bold;

color:white;

font-family:'Fredoka', sans-serif;

pointer-events:none;
}

.profile-stats{
    margin-top:20px;
    width:85%;
	margin:5px auto 0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    box-sizing:border-box;
	font-family: 'Fredoka', sans-serif;
}

.profile-stat{

background:rgba(255,255,255,.25);

border-radius:14px;

padding:10px 5px;

display:flex;
flex-direction:column;
align-items:center;

text-align:center;
}

.profile-stat img{

/*width:28px;*/
height:28px;

margin-bottom:4px;
}

.profile-stat span{

font-size:10px;
color:#6b4c22;
}

.profile-stat strong{

font-size:18px;
color:#2f1c08;
}

.profile-tabs{

    display: flex;
    gap: 10px;
    width: 80%;
    padding-left: 40px;

}

.profile-tab{

flex:1;
}

.profile-section{

width:100%;

flex:1;

overflow-y:auto;
}

.profile-styles-grid{

display:grid;

grid-template-columns:repeat(4, 1fr);

gap:8px;

width:85%;

max-height:130px;

overflow-y:auto;

padding:5px;

margin:0 auto;
}

.profile-style-card{

position:relative;

padding:6px;

border-radius:10px;

background:rgba(0,0,0,.20);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

cursor:pointer;

transition:.15s;
}

.profile-style-card:active{

transform:scale(.95);
}

.profile-buttons{

width:100%;

display:flex;
flex-direction:column;

margin-top:15px;
}
/* =========================================
BOTON AJUSTES PERFIL
========================================= */

.profile-header{

position:relative;
}

.profile-settings-btn{

position:absolute;

top:-5px;
right: 30px;

background:none;
border:none;

padding:0;

cursor:pointer;

z-index:20;
}

.profile-settings-btn:active{

transform:scale(.92);
}

.profile-settings-icon{

width:52px;
height:52px;

object-fit:contain;

filter:drop-shadow(
0 3px 4px rgba(0,0,0,.35)
);
}
.settings-grid{

flex-direction:column;

gap:14px;

width:100%;
}
/* =========================================
TRANSACCIONES
========================================= */

.transactions-container{

margin-left: 30px;
width: 85%;


display:flex;

flex-direction:column;

gap:12px;

margin-top:20px;

overflow-y:auto;

padding-right:5px;
}

.transaction-card{

background:rgba(0,0,0,.18);

border-radius:14px;

padding:14px;

display:flex;

justify-content:space-between;

align-items:center;

font-family:'Fredoka', sans-serif;

color:#000;
}
.profile-level{

position:relative;

width:58px;
height:58px;

display:flex;

align-items:center;
justify-content:center;

flex-shrink:0;
}

.profile-level-bg{

position:absolute;

width:100%;
height:100%;

object-fit:contain;

left:1;
top:0;
}

.profile-level-text{

position:relative;

z-index:2;

font-family:'Fredoka',sans-serif;

font-size:22px;

font-weight:900;

color:white;

text-shadow:
0 2px 0 #000,
0 0 8px rgba(0,0,0,.5);
}

.style-preview{

font-size:11px;

font-weight:bold;

margin-bottom:4px;

text-align:center;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

width:100%;
}



.style-title{

font-size:9px;

color:white;

text-align:center;

line-height:1.1;
}

.style-check{

position:absolute;

right:3px;
bottom:3px;

width:16px;
height:16px;

font-size:10px;

border-radius:50%;

background:#1ec84b;

display:flex;

align-items:center;
justify-content:center;

color:white;
}

.profile-no-styles{

grid-column:span 4;

text-align:center;

padding:20px;
}

.profile-no-styles-title{

font-size:20px;

font-weight:bold;

color:white;

margin-bottom:10px;
}

.profile-no-styles-text{

font-size:14px;

color:#eee;
}
.profile-styles-grid::-webkit-scrollbar{

width:6px;
}

.profile-styles-grid::-webkit-scrollbar-thumb{

background:#b98a3f;

border-radius:10px;
}

.play-container{

position:relative;

display:inline-block;

}

.evento_p_xp_c, .evento_p_xp, .evento_p_c, .evento_p, .evento_xp_c, .evento_xp, .evento_c{
position:absolute;
left:50%;
transform:translateX(-50%);
top:100%;
margin-top:-40px;
width:125px;
z-index:10;

} 

.evento_p_xp{
top:98%;
}
.evento_p{
top:99%;
}
.evento_xp_c{
top:95%;
}
.evento_xp{
top:96%;
}
.evento_c{
top:94%;
}

#evento_timer{

position:absolute;

left:63%;

transform:translateX(-50%);

top:101%;

z-index:20;

font-family:'Fredoka',sans-serif;

font-size:10px;

font-weight:bold;

color:#fff;

white-space:nowrap;

width:max-content;

pointer-events:none;

}
#evento_x2{

position:absolute;

top:10px;

left:50%;

transform:translateX(-50%);

display:none;

z-index:999;

padding:6px 12px;

border-radius:12px;

background:rgba(0,0,0,.6);

color:#ffd700;

font-size:10px;

font-weight:bold;

font-family:'Fredoka',sans-serif;

text-shadow:
2px 2px 0 #000;

pointer-events:none;

animation:eventoPulse 1.5s infinite;

}

@keyframes eventoPulse{

0%{
transform:translateX(-50%) scale(1);
}

50%{
transform:translateX(-50%) scale(1.08);
}

100%{
transform:translateX(-50%) scale(1);
}

}

.resumen-separador{
    width: 80%;
    height: 2px;
    margin: 12px auto;
    background: linear-gradient(
        to right,
        transparent,
        #602502,
        transparent
    );
}
.badge-rol-ranking{
    width:20px;
    height:20px;
    margin-right:4px;
    vertical-align:middle;
}

.themes-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
padding: 10px;
width:90%;
max-height:470px;
overflow-y:auto;
overflow-x:hidden;
margin: 0 auto;
box-sizing:border-box;
}

/* Scroll igual al de estilos */

.themes-grid::-webkit-scrollbar{
    width:8px;
}

.themes-grid::-webkit-scrollbar-track{
    background:rgba(255,255,255,.08);
    border-radius:10px;
}

.themes-grid::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.35);
    border-radius:10px;
}

.themes-grid::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.55);
}

.theme-shop-card{
position:relative;
background:
linear-gradient(
180deg,
#3e2715,
#26170d
);

border-radius:14px;

padding:10px;

text-align:center;

box-shadow:
0 4px 10px rgba(0,0,0,.35);
}

.theme-title{

font-family:'Fredoka',sans-serif;

font-size:18px;
font-weight:700;

color:#ffd36b;

margin-bottom:8px;
}

.theme-preview{

width:100%;

object-fit:cover;

border-radius:10px;
}

.theme-buy,
.theme-owned,
.theme-equipped{

margin-top:10px;

width:100%;

border:none;

border-radius:10px;

padding:10px;

font-family:'Fredoka',sans-serif;

font-weight:bold;

color:#fff;
}

.theme-buy{

background:
linear-gradient(
180deg,
#3489ff,
#1652a8
);

display:flex;

justify-content:center;

align-items:center;

gap:6px;
}

.theme-buy img{

width:18px;
height:18px;
}

.theme-owned{

background:
linear-gradient(
180deg,
#3ca83c,
#226622
);
}

.theme-equipped{

background:#777;
}

.setting-row{

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 12px;

font-family:'Fredoka',sans-serif;

font-size:18px;

color:white;

border-bottom:1px solid rgba(255,255,255,.15);

}

.switch{

position:relative;

display:inline-block;

width:60px;

height:34px;

}

.switch input{

display:none;

}

.slider{

position:absolute;

cursor:pointer;

top:0;
left:0;
right:0;
bottom:0;

background:#888;

transition:.3s;

border-radius:34px;

}

.slider:before{

position:absolute;

content:"";

height:26px;

width:26px;

left:4px;

bottom:4px;

background:white;

transition:.3s;

border-radius:50%;

}

.switch input:checked + .slider{

background:#43d854;

}

.switch input:checked + .slider:before{

transform:translateX(26px);

}
/*=====================================
Luciérnagas
=====================================*/

#CanvasEfectos{

    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:2;

}

/*=============================
luciernagas
=============================*/
.firefly{

    position:absolute;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#fff8a5;

    box-shadow:
    0 0 6px #fff176,
    0 0 15px #ffee58,
    0 0 25px #ffd54f;

    opacity:.2;

}
/*=============================
Brasas
=============================*/

.ember{

    position:absolute;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#ff9800;

    box-shadow:
    0 0 8px #ff9800,
    0 0 18px #ff5722,
    0 0 30px #ff3d00;

    pointer-events:none;

}

/*=============================
Nieve
=============================*/

.snow{

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:white;

    box-shadow:
    0 0 6px rgba(255,255,255,.8);

    opacity:.9;

    pointer-events:none;

}

.profile-avatar{

display:flex;
justify-content:center;
align-items:center;
width:125px;
height:140px;
padding-left: 15px;
position:relative;
}

.profile-avatar-ring{

position:relative;

width:90px;
height:90px;

display:flex;
justify-content:center;
align-items:center;

border-radius:50%;
}

.profile-avatar-img{

width:65px;
height:65px;

border-radius:50%;

padding:0;

background:white;

position:relative;

z-index:2;
}

.profile-level-circle{

position:absolute;

bottom:-8px;

left:50%;

transform:translateX(-50%);

width:42px;
height:42px;

border-radius:50%;

background:

linear-gradient(
180deg,
#ffd95f,
#ff9800
);

display:flex;
justify-content:center;
align-items:center;

font-family:'Fredoka',sans-serif;

font-size:20px;
font-weight:bold;

color:white;

box-shadow:

0 0 8px rgba(0,0,0,.4);

z-index:5;
}

.profile-ranked-box{

display:flex;

align-items:center;

gap:15px;

margin-top:12px;

width:100%;

}

.profile-ranked-left{

display:flex;

align-items:center;

justify-content:center;

}
.profile-ranked-right{

display:flex;

flex-direction:column;

justify-content:center;

align-items:flex-start;

}

.profile-ranked-img{

width:35px;

height:auto;

display:block;

}
.profile-ranked-name{

font-family:'Fredoka',sans-serif;

font-size:20px;

font-weight:bold;

color:#3b2105;

line-height:1.1;

}

.profile-ranked-lp{

font-family:'Fredoka',sans-serif;

font-size:16px;

font-weight:bold;

color:#6b4c22;

margin-top:4px;

}
.misiones{
    position: fixed;
    top: 80%;
    right: 10px;
    height: 85px;
    width: 70px;
    z-index: 1000;
    cursor: pointer;
}