@charset "UTF-8";

@import url(nprogress.css);

body, html, .all { margin: 0; padding: 0; } body, a, a:active, a:visited, a:link { font-family: Arial; font-size: 13px; text-decoration: none; } a, a:active, a:visited, a:link { cursor: pointer; font-weight: bold; } p { margin: 0; padding: 0; } .pddInner { padding: 0 20px; } hr { width: 100%; height: 2px; padding: 0; margin: 20px auto; border: 0; background: transparent url('../imgs/separator.png') no-repeat center top; } h1 { display: block; font-weight: normal; padding: 0; width: 80%; margin: 24px auto 16px; } h1 a { float: right; display: block; } h2 { text-shadow: 1px 1px 0 rgba(255,255,255,0.3); font-weight: normal; padding: 0; margin: 30px 0 20px 20px;; } .faceIndex { overflow: hidden; min-height: 200px; background: transparent; margin: 15px auto; border-radius: 8px; } p.cbold { font-weight: bold; text-align: center; width: 100%; padding: 10px 0; text-transform: uppercase; } .rmsg { display: table; width: 360px; margin: 0 auto 20px auto; padding: 10px; background: #108c00; border-radius: 5px; text-align: center; color: #fff; font-size: 14px; } .rmsg.error { background-color: #b30000 !important; } .rmsg.warn { background-color: #fffca1 !important; color: #000 !important; } #alerta { visibility: hidden; position: fixed; display: table; z-index: 1001; margin: 0 auto; padding: 25px 30px; color: #5a5a5a; font-size: 15px; background: #f7f7f7; border-radius: 6px; } #alerta .ok { display: table; width: 100%; } #alerta .ok > div { font-size: 12px; font-weight: bold; cursor: pointer; display: table; float: right; margin: 15px 0 0 0; padding: 5px 0; text-align: center; width: 60px; text-transform: uppercase; color: #fff; background: #ac0f0f; border: 1px solid #ac0f0f; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset; border-radius: 4px; } #alerta .ok > div:hover { background: #d21818; border-color: #d21818; } #alerta .ok.sucesso > div { background: #0dbb00; border: 1px solid #0dbb00; } #alerta .ok.sucesso > div:hover { background: #0a8c00; border: 1px solid #0a8c00; } #backblack { height: 100%; width: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.8; z-index: 1000; } input.default.sucesso { background: #0dbb00 !important; border-color: #0dbb00 !important; color: #fff !important; }
body, html, .all { min-width: 960px; }
body { background: url('../imgs/bg-top.jpg') no-repeat center top; background-color: #08080a;}
a, a:active, a:visited, a:link { color: #ebebeb; }
a:hover { color: #ff9f38; }
a:active { color: #c75e38; }

section {color: #fff; }

article a.default, a.default, span.default, input.default, .rankings_options > div a { transition: background-color 0.4s, border-color 0.4s; cursor: pointer; display: block; text-align: center; font-weight: bold; font-size: 12px; text-transform: uppercase; padding: 6px 0 5px 0; width: 178px; margin: 0 0 1px; border-radius: 3px; box-shadow: 0px 1px 0px rgba(255,255,255,0.2) inset; font-family: Tahoma; } article .ucp a.default, .ucp a.default, .ucp span.default, .ucp input.default { padding: 9px 0 10px 0; } article a.default:active, a.default:active, input.default:active, span.default:active { opacity: 0.7; } a.default.dbig, input.default.dbig { font-size: 16px; padding: 12px 35px 13px 35px;}
article a.default, a.default, span.default, input.default, .rankings_options > div a { background: #1f1f1f; background: -moz-linear-gradient(top, #404040 0%, #1f1f1f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404040), color-stop(100%,#1f1f1f)); border: 1px solid #1f1f1f; color: rgba(255,255,255,0.8) !important; }
article a.default:hover, a.default:hover, input.default:hover, span.default:hover, .rankings_options > div a:hover { background: #6c6c6c; border-color: #6c6c6c; color: #fff !important; }

.all { width: 960px; position: relative; display: table; margin: 0 auto; padding-top: 489px; }

h1 { font-family: Arial; font-size: 29px; color: #fff; }
h1 a { font-family: Arial !important; font-size: 15px !important; padding: 17px 0 0; }
h2 { font-family: Arial; font-size: 23px; color: #fff; }

.langs { z-index: 2; position: absolute; width: 140px; height: 34px; } .langs .bg { opacity: 0.3; width: 138px; height: 34px; border-radius: 4px; } .langs .links { position: absolute; left: 4px; top: 4px; display: table; } .langs a { float: left; display: block; width: 42px; height: 26px; margin: 0 2px 0 0; background: transparent url('../imgs/langs.png') no-repeat; } .langs a.en { background-position: 0 0; border-radius: 3px 0 0 3px; } .langs a.pt { background-position: -44px 0; } .langs a.es { background-position: -88px 0; border-radius: 0 3px 3px 0; } .langs a.en:hover { background-position: 0 -28px; } .langs a.pt:hover { background-position: -44px -28px; } .langs a.es:hover { background-position: -88px -28px; } .langs a:active { opacity: 0.6; }
.langs { top: 40px; right: 56px; }
.langs .bg { background: #000; }

section { display: table; position: relative; width: 960px; padding: 36px 25px 60px 25px; box-sizing: border-box; background: #060f1a; border-radius: 10px; box-shadow: 0 0 15px rgba(255,255,255,0.05); border-bottom: 2px solid rgba(255,255,255,0.2); }

nav { position: absolute; left: 0; top: -84px; z-index: 3; width: 960px; height: 84px; line-height: 49px; padding: 35px 0 0 0; display: table; background: transparent url('../imgs/menu.png') no-repeat; }
nav div { display: table; margin: 0 auto; }
nav a { float: left; display: table; padding: 0 12px; font-family: Calibri, Arial !important; font-size: 16px !important; font-weight: bold; text-transform: uppercase; color: #fff !important; text-shadow: 1px 1px 2px #000; background: transparent; transition: background 0.4s, text-shadow 0.4s; }
nav a:hover { text-shadow: 0 0 10px #fff; background: rgba(255,255,255,0.1); }
nav a:active { text-shadow: 0 0 10px #000; background: #000; }

footer { font-size: 14px; height: 110px; line-height: 110px; width: 1000px; box-sizing: border-box; margin: 0 auto; text-align: center; position: relative; font-weight: bold; } footer a.atualstudio { position: absolute; opacity: 0.3; display: block; width: 120px; height: 18px; background: transparent url('../imgs/nm/atualstudio.png'); } footer a.atualstudio:hover { opacity: 1; }
footer { color: #fff; }
footer a.atualstudio { top: 43px; right: 64px; }

article { position: relative; float: left; width: 630px; padding: 4px 10px 0 20px; }

aside { width: 260px; display:table; float:left; }

aside .box { width: 260px; display:table; margin: 0 0 23px 0;}

aside .box .title { font-family: Calibri, Arial; font-size: 18px; font-weight: bold; text-transform: uppercase; border-bottom: 4px solid #3d5c7d; position: relative; z-index: 2; width: 260px; height: 22px; margin: 0px 0 15px 0; }
aside .box .ctt { padding: 0 0px; }

.title2 { font-family: Calibri, Arial; font-size: 18px; font-weight: bold; text-transform: uppercase; border-bottom: 0px solid #3d5c7d; position: relative; z-index: 2; width: 580px; height: 22px; margin: 0px 0 15px 0; }


.box.support a:hover { opacity: 0.7; }
.box.support a:active { opacity: 1; }



/* ===============================
   MODAL DE PREMIAÇÕES MU GAME EASY
   =============================== */

.premiacoes-container {
  text-align: center;
  margin-top: 35px;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 6px rgba(59,130,246,0.25); }
  50% { box-shadow: 0 0 12px rgba(59,130,246,0.35); }
  100% { box-shadow: 0 0 6px rgba(59,130,246,0.25); }
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(-2px); opacity: 1; }
}

.premiacoes-botao {
  position: relative;
  background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6);
  background-size: 200% 200%;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  animation: gradientMove 5s ease infinite, pulseGlow 3s infinite;
  transition: all 0.3s ease-in-out;
  font-size: 13px;
}

.premiacoes-botao:hover {
  transform: scale(1.02);
}

.premiacoes-icone-canto {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 14px;
  opacity: 0.8;
  animation: floatIcon 4s ease-in-out infinite;
  text-shadow: 0 0 3px rgba(96,165,250,0.6);
}

/* MODAL VISUAL */
#rewardsModal .header {
  color: #60a5fa;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 18px;
}

#rewardsModal .content {
  background: linear-gradient(180deg, #0b1121 0%, #111c3a 100%);
  color: #cce2ff;
  border-top: 1px solid #3b82f6;
  padding: 20px;
  border-radius: 0 0 10px 10px;
}

#rewardsModal ul {
  list-style: none;
  padding: 0;
  line-height: 1.7;
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
}

#rewardsModal li {
  padding: 2px 0;
}

#rewardsModal h3 {
  color: #93c5fd;
  text-align: center;
  margin-top: 10px;
}

#rewardsModal .actions {
  background: #0b1121;
  text-align: center;
  padding: 12px;
}

#rewardsModal .ui.button {
  background: #3b82f6 !important;
  color: #fff !important;
  font-weight: bold;
}



.boxshop6 {
    /* definimos a cor de fundo do box */
    background-color: #262626;

    /* definimos o quão arredondado irá ficar nosso box */
    border-radius: 10px 20px 30px;
	border-style: solid; 
	border-color: #4b5157; 
	border-width: 1px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 15px;
	width: 100%;
	font-size: 14px;
}



/* ============================
   SHOP GOLD - LAYOUT HORIZONTAL
   ============================ */

.shop-title {
  color: #facc15;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  margin: 25px 0 30px;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.4);
}

.shop-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Box do item */
.boxshop {
  background: linear-gradient(180deg, #0b0d14 0%, #1a2235 100%);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
  transition: all 0.25s ease-in-out;
}
.boxshop:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 215, 0, 0.45);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.25);
}

/* Estrutura interna */
.shop-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* Imagem */
.shop-thumb img {
  width: 130px;
  border-radius: 10px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
  transition: transform 0.25s ease;
}
.shop-thumb img:hover {
  transform: scale(1.05);
}

/* Informações */
.shop-info h3 {
  color: #ffec9f;
  font-size: 19px;
  font-weight: bold;
  margin-bottom: 4px;
}
.shop-info p {
  color: #dbeafe;
  font-size: 14px;
  margin-bottom: 8px;
}
.shop-info ul {
  color: #cbd5e1;
  font-size: 13.5px;
  line-height: 1.6;
  margin-left: 20px;
}

/* ============================
   SHOP GOLD - VISUAL REFINADO
   ============================ */

/* Layout do preço e botão */
.shop-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Preço */
.shop-price {
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.45);
  color: #facc15;
  font-weight: bold;
  font-size: 15px;
  border-radius: 8px;
  padding: 6px 12px;
  text-shadow: 0 0 6px rgba(250, 204, 21, 0.4);
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.15) inset;
}

/* Botão moderno */
.shop-button {
  background: linear-gradient(90deg, #facc15, #fbbf24, #facc15);
  color: #111 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 22px !important;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(250, 204, 21, 0.4);
  transition: all 0.25s ease-in-out;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.shop-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75px;
  width: 50px;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-25deg);
  transition: left 0.5s ease;
}
.shop-button:hover::after {
  left: 130%;
}
.shop-button:hover {
  transform: scale(1.06);
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.6);
  background: linear-gradient(90deg, #fde047, #facc15, #fde047);
}

/* ===== SHOP GOLD - VARIANTES DE COR ===== */

.theme--bk { --accent:#3b82f6; --accent-2:#1d4ed8; }
.theme--sm { --accent:#8b5cf6; --accent-2:#6d28d9; }
.theme--elf { --accent:#22c55e; --accent-2:#16a34a; }
.theme--mg { --accent:#f59e0b; --accent-2:#d97706; }
.theme--dl { --accent:#06b6d4; --accent-2:#0ea5b7; }
.theme--asas { --accent:#ffd700; --accent-2:#b8860b; }
.theme--escudos { --accent:#9e9e9e; --accent-2:#616161; }
.theme--swords { --accent:#42a5f5; --accent-2:#1e88e5; }
.theme--axe { --accent:#8e24aa; --accent-2:#5e35b1; }
.theme--staff { --accent:#7b1fa2; --accent-2:#4a148c; }
.theme--spear { --accent:#00695c; --accent-2:#004d40; }
.theme--arcos { --accent:#26a69a; --accent-2:#00897b; }
.theme--rings { --accent:#facc15; --accent-2:#eab308; }
.theme--pendant { --accent:#ec407a; --accent-2:#ad1457; }
.theme--scepter { --accent:#1565c0; --accent-2:#0d47a1; }

/* Cores aplicadas no botão e preço conforme tema */
[class*="theme--"] .shop-price {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,0,0,0.3);
  text-shadow: 0 0 6px color-mix(in oklab, var(--accent) 60%, transparent);
}
[class*="theme--"] .shop-button {
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
  color: #fff !important;
  box-shadow: 0 0 15px color-mix(in oklab, var(--accent) 60%, transparent);
}
[class*="theme--"] .shop-button:hover {
  box-shadow: 0 0 25px color-mix(in oklab, var(--accent) 80%, white);
}



.boxshop4 {
    /* definimos a cor de fundo do box */
    background-color: #10232f;

    /* definimos o quão arredondado irá ficar nosso box */
    border-radius: 10px 20px 30px;
	border-color: #45a5aa; 
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 15px;
	width: 100%;
	font-size: 14px;
	border-width: 1px;
	border-style: solid; 
	font-size: 14px;
}

.boxshop7 {
    /* definimos a cor de fundo do box */
    background-color: #281313;

    /* definimos o quão arredondado irá ficar nosso box */
    border-radius: 10px 20px 30px;
	border-color: #d9949a; 
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 15px;
	width: 100%;
	font-size: 14px;
	border-width: 1px;
	border-style: solid; 
	font-size: 14px;
}


.boxshop3 {
    /* definimos a cor de fundo do box */
    background-color: #23201e;

    /* definimos o quão arredondado irá ficar nosso box */
    border-radius: 10px 20px 30px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 15px;
	width: 100%;
	font-size: 14px;
}

.boxshopcash {
    /* definimos a cor de fundo do box */
    background-color: #2a1c0e;

    /* definimos o quão arredondado irá ficar nosso box */
    border-radius: 10px 20px 30px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 15px;
	width: 100%;
	font-size: 14px;
}

#rank1 {
	width: 250px;
	float: left;
	
}

#rank2 {
	width: 590px;
	float: right;
	margin-left: 10px;
	
}


#rank-site {
	padding: 0px 20px;
	margin-bottom: 20px;
	float: left;
	width: 920px;
}

/* ==== Correção para tamanho de fonte dos links ==== */
.ui.black.message a,
.ui.button.blue,
.boxshop a,
.boxshop3 a,
.boxshop4 a,
.boxshopcash a {
  font-size: 18px !important;
  line-height: 1.6;
  font-weight: bold;
}

.ui.black.message a:hover,
.boxshop a:hover {
  color: #ffcc66 !important;
  text-decoration: underline;
}


.shop-btn {
  display: block !important;
  width: 100% !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  border-radius: 8px !important;
  padding: 12px 0 !important;
  transition: all 0.3s ease-in-out;
}
.shop-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 12px rgba(59,130,246,0.4);
}