:root {
--primary-color: linear-gradient(135deg, #ff8c00 0%, #ffb347 100%);
--primary-color-hover: linear-gradient(135deg, #ff8c00 0%, #ffffff 100%);
--primary-background-color: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
--secondary-background-color: rgba(255, 255, 255, 0.05);
--xp-border-inclination: skew(-2deg);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scrollbar-color: #2d2d2d #1a1a1a; /* thumb | track */
font-family: "Font Awesome 6 Pro" !important;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #0f0f0f 100%);
border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 50%, #1f1f1f 100%);
border-radius: 999px;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.6);
}
*::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #3a3a3a 0%, #4d4d4d 50%, #2a2a2a 100%);
}
*::-webkit-scrollbar-corner {
background: #1a1a1a;
}
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #0f0f0f 100%);
color: #ffffff;
min-height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
/* === ESTILOS DA TELA DE LOGIN === */
.login-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #0f0f0f 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.login-container {
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
max-width: 400px;
width: 90%;
text-align: center;
}
.login-header h1 {
font-family: 'Cinzel', serif;
font-size: 2.5rem;
margin-bottom: 10px;
background: var(--primary-color);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.login-header p {
color: #cccccc;
margin-bottom: 30px;
font-size: 1.1rem;
}
.login-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #ffffff;
}
.form-group input {
width: 100%;
padding: 12px 16px;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
color: #ffffff;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-group input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.form-group input::placeholder {
color: #888888;
}
.login-btn {
background: var(--primary-color);
color: #1a1a1a;
border: none;
padding: 14px 24px;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
}
.login-btn:active {
transform: translateY(0);
}
.login-error {
background: rgba(244, 67, 54, 0.1);
border: 1px solid #f44336;
color: #f44336;
padding: 12px;
border-radius: 8px;
margin-top: 15px;
font-size: 0.9rem;
}
/* === FIM DOS ESTILOS DA TELA DE LOGIN === */
/* Estilos do cabeçalho do player e logout */
.player-header-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
margin-bottom: 15px;
}
.player-name-section {
flex: 1;
}
.logout-btn {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
margin-left: 20px;
}
.logout-btn:hover {
background: linear-gradient(135deg, #ff5252 0%, #d63031 100%);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.logout-btn:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.container {
max-width: none; /* Remove a limitação de largura */
width: 100%; /* Garante que ocupe toda a largura disponível */
margin: 0 auto;
padding: 20px;
}
/* Ajuste para telas muito grandes - adiciona padding lateral */
@media (min-width: 1400px) {
.container {
padding: 20px 5%; /* Adiciona 5% de padding lateral em telas muito grandes */
}
}
@media (min-width: 1800px) {
.container {
padding: 20px 10%; /* Adiciona 10% de padding lateral em telas ultra-wide */
}
}
/* Header do Jogador */
.player-header {
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.avatar-section {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
}
.avatar-frame {
position: relative;
width: 120px;
height: 120px;
cursor: pointer;
transition: all 0.3s ease;
}
/* .avatar-frame:hover {
transform: scale(1.05);
filter: brightness(1.1);
} */
.avatar-frame img {
width: 100%;
height: 100%;
border-radius: 50%;
border: 4px solid var(--primary-color);
object-fit: cover;
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
transition: all 0.3s ease;
/* Remover o alt text que causa o piscar */
font-size: 0;
text-indent: -9999px;
overflow: hidden;
}
/* .avatar-frame img:hover {
border-color: var(--primary-color);
box-shadow: 0 0 20px rgba(255, 140, 0, 0.4);
} */
.avatar-option::before {
content: attr(data-emoji);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
z-index: 1;
}
.avatar-frame img::before {
content: attr(data-emoji);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 60px;
z-index: 1;
}
/* Avatar Selection Modal */
.avatar-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: none;
}
.avatar-modal-content {
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
margin: 5% auto;
padding: 30px;
border: 2px solid var(--primary-color);
width: 90%;
max-width: 600px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
position: relative;
max-height: 80vh;
overflow-y: auto;
}
.avatar-modal-content h2 {
color: var(--primary-color);
text-align: center;
margin-bottom: 25px;
font-family: 'Cinzel', serif;
font-size: 1.8em;
}
/* Abas do Modal de Avatar */
.avatar-tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 2px solid #4a5568;
}
.avatar-tab {
flex: 1;
padding: 12px 20px;
background: transparent;
border: none;
color: #a0aec0;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
font-weight: 500;
}
.avatar-tab.active {
color: #ff8c00;
border-bottom: 3px solid var(--primary-color);
background: rgba(255, 140, 0, 0.1);
}
.avatar-tab:hover {
color: #ff8c00;
background: rgba(255, 140, 0, 0.05);
}
/* Conteúdo das Abas */
.avatar-tab-content {
position: relative;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
.avatar-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 20px;
margin-bottom: 25px;
}
.avatar-option {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #4a5568;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.avatar-option:hover {
border-color: var(--primary-color);
transform: scale(1.1);
box-shadow: 0 0 15px rgba(255, 140, 0, 0.5);
}
.avatar-option.selected {
border-color: var(--primary-color);
box-shadow: 0 0 20px rgba(255, 140, 0, 0.7);
transform: scale(1.05);
}
/* Grid de Frames */
.frame-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 20px;
margin-bottom: 25px;
}
.frame-option {
width: 120px;
height: 120px;
border-radius: 10px;
border: 3px solid #4a5568;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
background: #2d2d2d;
}
.frame-option img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 8px;
}
.frame-option .frame-name {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #a0aec0;
white-space: nowrap;
background: rgba(0, 0, 0, 0.9);
padding: 4px 8px;
border-radius: 6px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 10;
}
.frame-option:hover {
border-color: #ff8c00;
transform: scale(1.05);
box-shadow: 0 0 20px rgba(255, 140, 0, 0.6);
}
.frame-option:hover .frame-name {
opacity: 1;
}
.frame-option.selected {
border-color: #ffb347;
box-shadow: 0 0 25px rgba(255, 140, 0, 0.8);
transform: scale(1.05);
background-color: rgba(255, 140, 0, 0.1);
}
.frame-option.locked {
position: relative;
cursor: not-allowed !important;
opacity: 0.6;
}
.frame-option.locked:hover {
transform: none !important;
border-color: #666 !important;
}
.lock-icon {
position: absolute;
top: 5px;
right: 5px;
font-size: 20px;
color: #ff6b6b;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
/* Estilo especial para o frame "Sem Frame" */
.frame-option.no-frame {
background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 50%, #1a1a1a 100%) !important;
border-style: dashed;
}
.frame-option.no-frame:hover {
background: linear-gradient(135deg, #4a4a4a 0%, #3d3d3d 50%, #2a2a2a 100%) !important;
}
/* Frame overlay no avatar */
.avatar-frame-overlay {
position: absolute;
top: -15px;
left: -15px;
width: calc(100% + 30px);
height: calc(100% + 30px);
border-radius: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none !important;
z-index: 10 !important;
transition: all 0.3s ease;
/* Garantir que o frame seja renderizado corretamente */
transform: translateZ(0);
}
/* .avatar-frame:hover .avatar-frame-overlay {
filter: brightness(1.1);
} */
.avatar-modal-actions {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 20px;
}
.avatar-modal-actions button {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.cancel-avatar {
background: #4a5568;
color: #ffffff;
border: 2px solid #718096;
}
.cancel-avatar:hover {
background: #718096;
transform: translateY(-2px);
}
.save-avatar {
background: var(--primary-color);
color: #ffffff;
}
.save-avatar:hover {
background: var(--primary-color-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
}
.level-badge {
position: absolute;
bottom: -5px;
right: -5px;
background: linear-gradient(45deg, #ff6b6b, #ffd93d);
color: #000;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 16px;
border: 3px solid #fff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
z-index: 15 !important;
}
.player-info h1 {
font-family: 'Cinzel', serif;
font-size: 2.5em;
margin-bottom: 10px;
background: var(--primary-color);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.title {
display: none; /* Ocultar o elemento antigo */
}
.title-selector {
margin-bottom: 20px;
}
.title-select {
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
border-radius: 10px;
color: #ffffff;
padding: 8px 15px;
font-size: 1.1em;
font-style: italic;
cursor: pointer;
transition: all 0.3s ease;
min-width: 250px;
outline: none;
appearance: none; /* Remove a seta padrão */
-webkit-appearance: none; /* Para Safari */
-moz-appearance: none; /* Para Firefox */
background-image: url('data:image/svg+xml;utf8,'); /* Seta customizada */
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px 8px;
padding-right: 35px; /* Espaço para a seta customizada */
}
.title-select:hover {
box-shadow: 0 0 15px rgba(255, 140, 0, 0.3);
background-image: url('data:image/svg+xml;utf8,'); /* Seta mais clara no hover */
}
.title-select:focus {
box-shadow: 0 0 20px rgba(255, 140, 0, 0.5);
background-image: url('data:image/svg+xml;utf8,'); /* Seta mais clara no focus */
}
.title-select option {
background: #2d2d2d;
color: #ffffff;
padding: 10px;
border: none;
}
.title-unlock-info {
font-size: 0.9em;
color: #a0aec0;
margin-top: 8px;
font-style: italic;
opacity: 0.8;
}
.title-unlock-info.hidden {
display: none;
}
.xp-section {
margin-bottom: 15px;
}
.xp-bar-container {
position: relative;
background: rgba(0, 0, 0, 0.3);
transform: var(--xp-border-inclination);
height: 30px;
width: 300px;
overflow: hidden;
}
.xp-bar {
height: 100%;
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
width: 50%;
transition: width 0.8s ease;
transform: var(--xp-border-inclination);
position: relative;
overflow: hidden;
}
.xp-bar::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
.xp-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
font-size: 14px;
}
.currency {
font-size: 1.3em;
font-weight: bold;
}
.mana-coins {
background: linear-gradient(45deg, #667eea, #764ba2);
padding: 8px 15px;
border-radius: 20px;
}
/* Navegação */
.main-nav {
display: flex;
gap: 10px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.nav-btn {
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
color: white;
border: none;
padding: 15px 25px;
cursor: pointer;
font-weight: bold;
font-size: 16px;
transition: all 0.3s ease;
}
.nav-btn:hover {
background: var(--primary-color-hover);
color: #000;
box-shadow: 0 8px 25px rgba(255, 140, 0, 0.4);
}
.nav-btn.active {
background: var(--primary-color);
color: #000;
}
/* Conteúdo Principal */
.main-content {
padding: 30px;
backdrop-filter: none !important;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Estatísticas */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
padding: 25px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 25px;
text-align: center;
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 150px;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(45, 45, 45, 0.3);
}
.stat-card h3 {
font-size: 1.1em;
margin-bottom: 15px;
color: #e2e8f0;
}
.stat-value {
font-size: 2.5em;
font-weight: bold;
margin-bottom: 10px;
background: linear-gradient(45deg, #ff8c00, #ffb347);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-detail {
color: #a0aec0;
font-size: 0.9em;
}
/* Deck Stats */
.deck-stats {
margin-top: 30px;
}
.deck-stats h3 {
margin-bottom: 20px;
font-family: 'Cinzel', serif;
font-size: 1.5em;
}
.deck-item {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
margin-bottom: 15px;
border-left: 5px solid var(--primary-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.deck-name {
font-weight: bold;
font-size: 1.1em;
}
.deck-winrate {
color: #4ade80;
font-weight: bold;
}
/* Conquistas */
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.achievement-card {
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
padding: 20px;
text-align: center;
border: 2px solid #4a5568;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.achievement-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.achievement-card:hover::before {
left: 100%;
}
.achievement-card.unlocked {
border-color: #ff8c00;
box-shadow: 0 0 20px rgba(255, 140, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
background: linear-gradient(135deg, #3d2d1d 0%, #2a1a0a 100%);
}
.achievement-card.locked {
opacity: 0.6;
filter: grayscale(80%);
}
.achievement-icon {
font-size: 2.5em;
margin-bottom: 12px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
transition: transform 0.3s ease;
}
.achievement-card.unlocked .achievement-icon {
animation: iconPulse 2s infinite;
}
@keyframes iconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.achievement-card:hover .achievement-icon {
transform: scale(1.1);
}
.achievement-info {
position: relative;
z-index: 1;
}
.achievement-name {
font-weight: bold;
margin-bottom: 8px;
font-size: 1.1em;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.achievement-description {
color: #b0b0b0;
font-size: 0.85em;
margin-bottom: 12px;
line-height: 1.3;
}
.achievement-progress {
background: rgba(0, 0, 0, 0.4);
border-radius: 12px;
height: 12px;
overflow: hidden;
margin: 15px 0 10px 0;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
}
.progress-bar {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
transition: width 0.8s ease;
position: relative;
}
/* === Favorite Commanders: partner overlay === */
.favorite-stack {
position: relative;
width: 210px; /* ajuste se seu card for maior/menor */
aspect-ratio: 63 / 88; /* mantém proporção de carta */
margin-inline: auto;
}
.favorite-stack img {
position: absolute;
inset: 0; /* top/right/bottom/left: 0 */
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.favorite-stack .card-back {
z-index: 0;
transform: rotate(-6deg) translate(-12px, 10px);
filter: brightness(.92) saturate(.95);
transition: transform 0.3s ease, z-index 0.3s ease, filter 0.3s ease;
}
.favorite-stack .card-front {
z-index: 1;
transform: translate(0, 0);
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 50%, #4facfe 100%);
background-size: 200% 100%;
border-radius: 12px;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease;
position: relative;
}
.favorite-stack .card-back:hover {
z-index: 2;
transform: rotate(0deg) translate(0px, 0px) scale(1.05);
filter: brightness(1) saturate(1);
}
.favorite-stack .card-front:hover {
transform: translate(0, 0) scale(1.05);
}
.achievement-progress span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.75em;
font-weight: bold;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
z-index: 2;
}
.achievement-progress-bar {
height: 100%;
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
border-radius: 10px;
transition: width 0.5s ease;
}
/* Ranking */
.ranking-section {
text-align: center;
margin-top: 30px;
margin-bottom: 35px;
padding: 25px;
}
.current-rank {
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
padding: 40px;
margin-bottom: 30px;
}
.rank-display {
display: flex;
align-items: center;
justify-content: center;
gap: 36px;
margin-top: 20px;
}
/* Ranking Icon - Preparado para imagens */
.rank-icon {
width: 160px;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
filter: drop-shadow(0 0 15px rgba(255, 140, 0, 0.4));
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
/* Imagem do ranking */
.rank-icon img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 8px;
transition: transform 0.3s ease;
}
/* Fallback para emoji quando não há imagem */
.rank-icon.emoji-fallback {
font-size: 3.5em;
background: linear-gradient(135deg, rgba(255, 140, 0, 0.15), rgba(255, 215, 0, 0.15));
}
/* Efeitos hover */
.rank-icon:hover {
transform: scale(1.05);
filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.6));
}
.rank-icon:hover img {
transform: scale(1.1);
}
/* Estilos específicos por tier */
.rank-icon.bronze {
border-color: #cd7f32;
filter: drop-shadow(0 0 15px rgba(205, 127, 50, 0.4));
}
.rank-icon.prata {
border-color: #c0c0c0;
filter: drop-shadow(0 0 15px rgba(192, 192, 192, 0.4));
}
.rank-icon.ouro {
border-color: #ffd700;
filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.4));
}
.rank-icon.platina {
border-color: #e5e4e2;
filter: drop-shadow(0 0 15px rgba(229, 228, 226, 0.4));
}
.rank-icon.diamante {
border-color: #b9f2ff;
filter: drop-shadow(0 0 15px rgba(185, 242, 255, 0.4));
}
.rank-icon.master {
border-color: #ff6b6b;
filter: drop-shadow(0 0 15px rgba(255, 107, 107, 0.4));
}
.rank-icon.grandmaster {
border-color: #ff8c00;
filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.6));
animation: grandmasterGlow 2s ease-in-out infinite alternate;
}
@keyframes grandmasterGlow {
from {
filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.6));
}
to {
filter: drop-shadow(0 0 30px rgba(255, 140, 0, 0.8));
}
}
/* Indicador de divisão */
.rank-info {
text-align: left;
}
.rank-name {
font-size: 2em;
font-weight: bold;
margin-bottom: 10px;
background: linear-gradient(45deg, #ff8c00, #ffd700);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.rank-points {
color: #a0aec0;
margin-bottom: 10px;
font-size: 1.1em;
}
.rank-xp-info {
color: #4ade80;
margin-bottom: 15px;
font-weight: 500;
}
.rank-progress {
width: 250px;
height: 20px;
background: rgba(0, 0, 0, 0.3);
overflow: hidden;
transform: var(--xp-border-inclination);
}
.rank-bar {
height: 100%;
background: var(--primary-color);
transition: width 0.8s ease;
transform: var(--xp-border-inclination);
position: relative;
}
.rank-system-info {
background: rgba(255, 255, 255, 0.05);
padding: 25px;
border: 1px solid rgba(255, 140, 0, 0.3);
}
.rank-system-info h4 {
color: #ff8c00;
margin-bottom: 20px;
font-family: 'Cinzel', serif;
}
.rank-rules {
display: flex;
flex-direction: column;
gap: 15px;
}
.rule-item {
display: flex;
align-items: center;
gap: 15px;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border-left: 3px solid #ff8c00;
}
.rule-icon {
font-size: 1.2em;
}
/* Missões */
.missions-container h3 {
margin-bottom: 20px;
font-family: 'Cinzel', serif;
font-size: 1.5em;
}
.missions-list {
margin-bottom: 30px;
}
.mission-item {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
margin-bottom: 15px;
border-left: 5px solid #4facfe;
display: flex;
justify-content: space-between;
align-items: center;
}
.mission-item.completed {
border-left-color: #4ade80;
background: rgba(74, 222, 128, 0.1);
}
.mission-info {
flex: 1;
}
.mission-title {
font-weight: bold;
margin-bottom: 5px;
}
.mission-description {
color: #a0aec0;
font-size: 0.9em;
margin-bottom: 10px;
}
.mission-progress {
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
height: 8px;
overflow: hidden;
width: 150px;
}
.mission-progress-bar {
height: 100%;
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
border-radius: 10px;
transition: width 0.5s ease;
}
.mission-reward {
background: linear-gradient(45deg, #ffd700, #ffed4e);
color: #000;
padding: 8px 15px;
border-radius: 20px;
font-weight: bold;
font-size: 0.9em;
}
/* Histórico de Partidas - CSS Melhorado */
.match-history {
max-height: 600px;
overflow-y: auto;
padding: 10px;
}
.match-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
padding: 20px;
border-radius: 12px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.match-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #4a5568;
transition: all 0.3s ease;
}
.match-card.win::before {
background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
box-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
}
.match-card.loss::before {
background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
box-shadow: 0 0 10px rgba(248, 113, 113, 0.3);
}
.match-card:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.2);
}
.match-result {
display: flex;
align-items: center;
gap: 8px;
min-width: 120px;
}
.result-icon {
font-size: 1.5em;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.result-text {
font-weight: bold;
font-size: 1.1em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.match-card.win .result-text {
color: #4ade80;
}
.match-card.loss .result-text {
color: #f87171;
}
.match-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.match-deck {
font-weight: 600;
font-size: 1em;
color: #e2e8f0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
line-height: 1.3;
}
.match-details {
display: flex;
gap: 15px;
color: #a0aec0;
font-size: 0.9em;
flex-wrap: wrap;
}
.match-details span {
background: rgba(255, 255, 255, 0.1);
padding: 4px 8px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
font-weight: 500;
transition: all 0.2s ease;
}
.match-details span:hover {
background: rgba(255, 255, 255, 0.15);
color: #cbd5e0;
}
.no-matches {
text-align: center;
padding: 40px 20px;
color: #a0aec0;
font-size: 1.1em;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
border: 2px dashed rgba(255, 255, 255, 0.1);
}
.match-item {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-left: 5px solid #4a5568;
}
.match-item.win {
border-left-color: #4ade80;
}
.match-item.loss {
border-left-color: #f87171;
}
.match-duration {
color: #a0aec0;
font-size: 0.9em;
}
/* Modal */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: none;
}
.modal.show {
display: flex !important;
align-items: center;
justify-content: center;
}
.modal-content {
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
margin: 0;
padding: 40px;
border-radius: 20px;
width: 90%;
max-width: 500px;
max-height: 90vh;
text-align: center;
border: 3px solid #ff8c00;
position: relative;
animation: modalSlideIn 0.5s ease;
overflow-y: auto;
/* Otimizações de composição */
will-change: transform, opacity;
transform: translateZ(0); /* Force hardware acceleration */
backface-visibility: hidden;
}
@keyframes modalSlideIn {
from {
transform: translateY(-50px) translateZ(0);
opacity: 0;
}
to {
transform: translateY(0) translateZ(0);
opacity: 1;
}
}
/* Media query para dispositivos com performance limitada */
@media (prefers-reduced-motion: reduce) {
.modal {
backdrop-filter: none;
}
.featured-modal {
backdrop-filter: none;
}
.skeleton-item {
animation: none;
background: #e0e0e0;
}
.modal-content,
.featured-modal-content,
.featured-selection-item,
.load-more-featured {
will-change: auto;
transition: none;
}
}
.close {
position: absolute;
right: 20px;
top: 20px;
font-size: 30px;
font-weight: bold;
cursor: pointer;
color: #a0aec0;
}
.close:hover {
color: #fff;
}
.achievement-unlock .achievement-icon {
font-size: 5em;
margin-bottom: 20px;
animation: bounce 1s ease;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
.achievement-unlock h2 {
font-family: 'Cinzel', serif;
margin-bottom: 20px;
font-size: 2em;
}
.achievement-unlock .achievement-name {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 15px;
color: #ff8c00;
}
.achievement-unlock .achievement-description {
margin-bottom: 20px;
color: #a0aec0;
}
.xp-reward {
background: linear-gradient(45deg, #ff8c00, #ffa500, #ff8c00);
background-size: 200% 100%;
color: #000;
padding: 8px 16px;
border-radius: 20px;
font-weight: bold;
font-size: 0.9em;
display: inline-block;
margin-top: 10px;
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 8px rgba(255, 140, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
animation: xpGlow 3s infinite;
position: relative;
overflow: hidden;
}
.xp-reward::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s ease;
}
.achievement-card.unlocked .xp-reward:hover::before {
left: 100%;
}
@keyframes xpGlow {
0%, 100% {
box-shadow: 0 4px 8px rgba(255, 140, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
background-position: 0% 50%;
}
50% {
box-shadow: 0 4px 12px rgba(255, 140, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
background-position: 100% 50%;
}
}
.achievement-card.unlocked .xp-reward {
background: linear-gradient(45deg, #32cd32, #00ff00, #32cd32);
background-size: 200% 100%;
animation: xpGlowUnlocked 2s infinite;
}
@keyframes xpGlowUnlocked {
0%, 100% {
box-shadow: 0 4px 8px rgba(50, 205, 50, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
background-position: 0% 50%;
}
50% {
box-shadow: 0 4px 12px rgba(50, 205, 50, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
background-position: 100% 50%;
}
}
/* Conquistas em Destaque - Display Premium */
.featured-achievements-section {
margin-bottom: 2rem;
padding: 2rem;
background: linear-gradient(135deg,
#ffd700 0%,
#ffed4e 25%,
#ffc107 50%,
#ffed4e 75%,
#ffd700 100%
);
border-radius: 20px;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.2);
color: #1a1a1a;
position: relative;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.4);
}
/* Efeito de brilho animado */
.featured-achievements-section::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4) 40%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.4) 60%,
transparent
);
transform: skewX(-20deg);
animation: premiumShine 3s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
/* Padrão decorativo de fundo */
.featured-achievements-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
@keyframes premiumShine {
0% {
left: -100%;
}
50% {
left: 100%;
}
100% {
left: 100%;
}
}
.featured-achievements-section h3 {
margin: 0 0 2rem 0;
text-align: center;
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(135deg, #8b4513, #654321, #8b4513);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 10px rgba(139, 69, 19, 0.5);
position: relative;
z-index: 2;
letter-spacing: 1px;
}
.featured-achievements-section h3::before {
margin-right: 0.5rem;
-webkit-text-fill-color: #8b4513;
}
.featured-achievements-section h3::after {
margin-left: 0.5rem;
-webkit-text-fill-color: #8b4513;
}
.featured-achievements-grid {
display: flex;
gap: 1.2rem;
margin-bottom: 1.5rem;
justify-content: center;
flex-wrap: wrap;
padding: 1rem;
position: relative;
z-index: 2;
}
.featured-achievement-card {
background: linear-gradient(145deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0.02) 100%
);
border-radius: 20px;
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 215, 0, 0.2);
width: 180px;
height: 240px;
flex-shrink: 0;
position: relative;
overflow: hidden;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.featured-achievement-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
transparent 30%,
rgba(255, 215, 0, 0.1) 50%,
transparent 70%
);
opacity: 0;
transition: opacity 0.4s ease;
}
.featured-achievement-card:hover::before {
opacity: 1;
}
.featured-achievement-card:hover {
background: linear-gradient(145deg,
rgba(255, 215, 0, 0.15) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 215, 0, 0.05) 100%
);
transform: translateY(-8px) scale(1.05);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.4),
0 0 20px rgba(255, 215, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border-color: rgba(255, 215, 0, 0.4);
}
.featured-achievement-card.locked {
opacity: 0.4;
cursor: default;
filter: grayscale(70%);
background: linear-gradient(145deg,
rgba(100, 100, 100, 0.1) 0%,
rgba(80, 80, 80, 0.05) 100%
);
}
.featured-achievement-card.locked:hover {
transform: none;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.featured-achievement-card .achievement-icon {
font-size: 3rem;
margin-bottom: 0.8rem;
text-shadow:
0 0 10px rgba(255, 215, 0, 0.5),
0 2px 4px rgba(0, 0, 0, 0.3);
z-index: 1;
position: relative;
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
}
.featured-achievement-card .achievement-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 1;
position: relative;
width: 100%;
}
.featured-achievement-card .achievement-info h4 {
margin: 0 0 0.5rem 0;
font-size: 1rem;
font-weight: 700;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
line-height: 1.3;
}
.featured-achievement-card .achievement-info p {
margin: 0 0 0.8rem 0;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.4;
flex: 1;
}
.featured-achievement-card .achievement-progress {
display: none;
}
.featured-achievement-card .progress-bar {
background: rgba(255, 255, 255, 0.2);
border-radius: 8px;
height: 8px;
overflow: hidden;
margin: 0.1rem 0 0.4rem 0;
width: 100%;
}
.featured-achievement-card .progress-fill {
background: linear-gradient(90deg, #4ade80, #22c55e);
height: 100%;
border-radius: 8px;
transition: width 0.3s ease;
min-width: 2px;
}
.featured-achievement-card .progress-text {
font-size: 0.7rem;
opacity: 0.9;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.featured-achievement-card .achievement-category {
font-size: 0.7rem;
color: var(--primary-color);
margin-top: 0.3rem;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
padding: 0.2rem 0.6rem;
border-radius: 12px;
display: inline-block;
border: 1px solid var(--primary-color);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.manage-featured-btn {
display: block;
margin: 0 auto;
padding: 0.8rem 1.5rem;
background: linear-gradient(135deg, rgba(139, 69, 19, 0.9), rgba(101, 67, 33, 0.8));
color: #ffffff;
border: 2px solid rgba(139, 69, 19, 0.8);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
z-index: 2;
backdrop-filter: blur(10px);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.manage-featured-btn:hover {
background: linear-gradient(135deg, rgba(139, 69, 19, 1), rgba(101, 67, 33, 0.9));
border-color: rgba(139, 69, 19, 1);
transform: translateY(-2px);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.4),
0 0 20px rgba(139, 69, 19, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
color: #ffffff;
}
.no-featured {
text-align: center;
padding: 2rem;
opacity: 0.8;
font-style: italic;
}
/* Modal de Conquistas em Destaque */
.featured-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: none;
}
.featured-modal-content {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 2% auto;
padding: 30px;
border-radius: 20px;
width: 90%;
max-width: 1000px;
height: 90vh;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
color: white;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
/* Otimizações de composição */
will-change: transform, opacity, scroll-position;
transform: translateZ(0); /* Force hardware acceleration */
backface-visibility: hidden;
contain: layout style paint; /* CSS containment para isolamento */
}
.featured-modal-content h2 {
margin-top: 0;
text-align: center;
font-size: 1.8em;
margin-bottom: 10px;
flex-shrink: 0;
}
.featured-modal-content p {
text-align: center;
margin-bottom: 20px;
opacity: 0.9;
flex-shrink: 0;
}
/* Controles do Modal de Conquistas em Destaque */
.featured-modal-controls {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 20px;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.featured-modal-filters {
display: flex;
align-items: center;
gap: 10px;
}
/* Label dos Filtros - Cores Melhoradas */
.featured-modal-filters label {
font-weight: 600;
color: #ffffff;
white-space: nowrap;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.featured-modal-search {
flex: 1;
max-width: 300px;
}
/* Campo de Pesquisa do Modal - Cores Melhoradas */
.featured-modal-search .achievement-search-input {
width: 100%;
padding: 12px 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 25px;
background: rgba(255, 255, 255, 0.15);
color: white;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.featured-modal-search .achievement-search-input:focus {
outline: none;
border-color: #ff8c00;
background: rgba(255, 140, 0, 0.1);
box-shadow: 0 0 20px rgba(255, 140, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.featured-modal-search .achievement-search-input::placeholder {
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
}
.featured-modal-search .achievement-search-input:hover {
border-color: rgba(255, 140, 0, 0.6);
background: rgba(255, 255, 255, 0.2);
}
.featured-selection-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 15px 8px;
margin-bottom: 30px;
overflow-y: auto;
padding: 20px;
flex: 1;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
/* Otimizações de scroll */
will-change: scroll-position;
transform: translateZ(0);
-webkit-overflow-scrolling: touch; /* Smooth scrolling no iOS */
}
.featured-achievement-option {
background: rgba(255, 255, 255, 0.1);
border: 2px solid transparent;
padding: 20px 15px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
min-height: 180px;
max-width: 220px;
text-align: center;
aspect-ratio: 3/4;
justify-content: space-between;
}
.featured-achievement-option:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.featured-achievement-option.selected {
border-color: #ffd700;
background: rgba(255, 215, 0, 0.2);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.featured-achievement-option input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #ffd700;
flex-shrink: 0;
}
.featured-achievement-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex: 1;
justify-content: center;
}
.featured-achievement-info h4 {
margin: 0;
font-size: 1.1em;
font-weight: 600;
text-align: center;
line-height: 1.3;
}
.featured-achievement-info p {
margin: 0;
font-size: 0.85em;
opacity: 0.8;
text-align: center;
line-height: 1.2;
}
.featured-modal-actions {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
flex-shrink: 0;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.cancel-featured, .save-featured {
padding: 15px 30px;
border: none;
border-radius: 25px;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
min-width: 120px;
}
.cancel-featured {
background: #ff6b6b;
color: white;
}
.cancel-featured:hover {
background: #ff5252;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(255, 107, 107, 0.3);
}
.save-featured {
background: #4ecdc4;
color: white;
}
.save-featured:hover {
background: #26a69a;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(78, 205, 196, 0.3);
}
.close {
position: absolute;
right: 25px;
top: 25px;
font-size: 32px;
font-weight: bold;
cursor: pointer;
color: white;
opacity: 0.7;
transition: all 0.3s ease;
z-index: 10;
}
.close:hover {
opacity: 1;
transform: scale(1.1);
}
/* Scrollbar personalizada para o grid */
.featured-selection-grid::-webkit-scrollbar {
width: 8px;
}
.featured-selection-grid::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.featured-selection-grid::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 4px;
}
.featured-selection-grid::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
/* Controles de Achievements */
.achievements-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
gap: 1rem;
flex-wrap: wrap;
}
.achievements-filters {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Filtros de Categoria - Cores Melhoradas */
.category-filter {
padding: 0.5rem;
border: 2px solid #4a5568;
border-radius: 8px;
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
color: #ffffff;
min-width: 180px;
font-weight: 500;
transition: all 0.3s ease;
}
.category-filter:focus {
outline: none;
border-color: #ff8c00;
background: linear-gradient(135deg, #3d2d1d 0%, #2a1a0a 100%);
box-shadow: 0 0 15px rgba(255, 140, 0, 0.3);
}
.category-filter:hover {
border-color: #ff8c00;
background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%);
}
.achievements-search {
flex: 1;
max-width: 300px;
}
/* Campo de Pesquisa Geral - Cores Melhoradas */
.achievement-search-input {
width: 100%;
padding: 12px 16px;
border: 2px solid #4a5568;
border-radius: 25px;
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
color: #ffffff;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.3s ease;
}
.achievement-search-input:focus {
outline: none;
border-color: #ff8c00;
background: linear-gradient(135deg, #3d2d1d 0%, #2a1a0a 100%);
box-shadow: 0 0 15px rgba(255, 140, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.achievement-search-input::placeholder {
color: #a0aec0;
font-weight: 400;
}
.achievement-search-input:hover {
border-color: #ff8c00;
background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%);
}
/* Container de Achievements */
.achievements-container {
margin-bottom: 1.5rem;
}
.no-achievements {
text-align: center;
padding: 3rem;
color: var(--text-secondary);
font-style: italic;
}
/* Opções dos Selects - Cores Melhoradas */
.category-filter option {
background: #2d2d2d;
color: #ffffff;
padding: 10px;
border: none;
font-weight: 500;
}
.category-filter option:hover,
.category-filter option:checked {
background: linear-gradient(135deg, #ff8c00 0%, #ffb347 100%);
color: #000000;
font-weight: bold;
}
/* Estados de Validação */
.category-filter:invalid {
border-color: #f87171;
background: linear-gradient(135deg, rgba(248, 113, 113, 0.1) 0%, #2d2d2d 100%);
}
.achievement-search-input:invalid {
border-color: #f87171;
}
/* Estados Desabilitados */
.category-filter:disabled,
.achievement-search-input:disabled {
opacity: 0.6;
cursor: not-allowed;
background: rgba(45, 45, 45, 0.5);
border-color: #4a5568;
}
/* Paginação - Design Minimalista */
.pagination-controls {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
border: 1px solid #4a5568;
margin: 1.5rem 0;
}
.pagination-btn {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
color: #ffffff;
border: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
font-size: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* Setas minimalistas usando CSS */
.pagination-btn::before {
content: '';
width: 12px;
height: 12px;
border: 2px solid currentColor;
border-bottom: none;
border-right: none;
transform: rotate(-45deg);
transition: all 0.3s ease;
}
.pagination-btn:last-child::before {
transform: rotate(135deg);
}
.pagination-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #ff8c00 0%, #ffb347 100%);
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 20px rgba(255, 140, 0, 0.3);
}
.pagination-btn:hover:not(:disabled)::before {
transform: rotate(-45deg) scale(1.1);
}
.pagination-btn:last-child:hover:not(:disabled)::before {
transform: rotate(135deg) scale(1.1);
}
.pagination-btn:active:not(:disabled) {
transform: translateY(0) scale(0.95);
transition: all 0.1s ease;
}
.pagination-btn:disabled {
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
cursor: not-allowed;
opacity: 0.4;
transform: none;
box-shadow: none;
}
.pagination-btn:disabled::before {
opacity: 0.5;
}
/* Informações da paginação */
.pagination-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.05);
padding: 1rem 1.5rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.pagination-info span:first-child {
font-weight: 600;
font-size: 1.1rem;
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.pagination-info span:last-child {
font-size: 0.85rem;
color: #a0aec0;
opacity: 0.8;
}
/* Efeito de ripple nos botões */
/* Paginação do Histórico */
#matchHistoryPagination {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 1.5rem 0;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
border: 1px solid #4a5568;
border-radius: 12px;
}
#historyPrevBtn, #historyNextBtn {
display: flex;
align-items: center;
justify-content: center;
min-width: 120px;
padding: 10px 16px;
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
color: #ffffff;
border: none;
border-radius: 999px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
#historyPrevBtn:hover:not(:disabled), #historyNextBtn:hover:not(:disabled) {
background: linear-gradient(135deg, #ff8c00 0%, #ffb347 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 140, 0, 0.3);
}
#historyPrevBtn:disabled, #historyNextBtn:disabled {
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
cursor: not-allowed;
opacity: 0.5;
box-shadow: none;
}
#historyPageInfo {
font-weight: 600;
color: #ffffff;
padding: 8px 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.pagination-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease;
}
.pagination-btn:active:not(:disabled)::after {
width: 60px;
height: 60px;
}
/* Achievement Cards Melhorados */
.achievement-card {
position: relative;
}
.achievement-meta {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0.5rem;
gap: 0.3rem;
}
.category-badge {
background: var(--primary-color);
color: white;
padding: 0.2rem 0.5rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
}
/* Modal de Gerenciamento de Destaques */
.featured-management-modal {
max-width: 900px;
max-height: 85vh;
width: 95%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.featured-management-modal h2 {
margin-bottom: 1rem;
color: #ff8c00;
text-align: center;
}
.featured-management-modal p {
margin-bottom: 1.5rem;
text-align: center;
color: #a0aec0;
}
.featured-selection-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 15px 8px;
margin-bottom: 30px;
overflow-y: auto;
padding: 20px;
flex: 1;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
}
/* Scrollbar customizada para o grid */
.featured-selection-grid::-webkit-scrollbar {
width: 8px;
}
.featured-selection-grid::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.featured-selection-grid::-webkit-scrollbar-thumb {
background: #ff8c00;
border-radius: 4px;
}
.featured-selection-grid::-webkit-scrollbar-thumb:hover {
background: #ffaa33;
}
.featured-selection-item {
background: rgba(255, 255, 255, 0.1);
border: 2px solid transparent;
padding: 15px 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
height: 180px;
width: 160px;
flex-shrink: 0;
text-align: center;
/* Otimizações de hover/animação */
will-change: transform, background-color, border-color;
transform: translateZ(0);
}
.featured-selection-item:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.featured-selection-item.selected {
border-color: #ffd700;
background: rgba(255, 215, 0, 0.25);
box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
}
.featured-selection-item.selected::before {
content: '✓';
position: absolute;
top: 8px;
right: 8px;
background: #ffd700;
color: #000;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
.selection-checkbox {
display: none;
}
.achievement-preview {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex: 1;
justify-content: center;
}
.achievement-preview .achievement-icon {
font-size: 2.8em;
margin-bottom: 8px;
}
.achievement-preview .achievement-name {
font-size: 1em;
font-weight: 600;
text-align: center;
line-height: 1.3;
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.achievement-preview .category-badge {
font-size: 0.8em;
opacity: 0.8;
background: rgba(255, 255, 255, 0.2);
padding: 4px 8px;
border-radius: 8px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.modal-actions {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
flex-shrink: 0;
}
.save-btn, .cancel-btn {
padding: 0.5rem 1rem;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.save-btn {
background: var(--success-color);
color: white;
}
.save-btn:hover {
background: var(--success-hover);
}
.cancel-btn {
background: var(--border-color);
color: var(--text-color);
}
.cancel-btn:hover {
background: var(--text-secondary);
color: white;
}
/* Responsividade */
/* Responsividade */
@media (max-width: 1200px) {
.featured-achievement-card {
width: 140px;
height: 200px;
padding: 0.8rem;
}
.featured-achievement-card .achievement-icon {
font-size: 2.2rem;
}
.featured-achievement-card .achievement-info h4 {
font-size: 0.85rem;
}
}
/* Responsividade para os controles do modal */
@media (max-width: 768px) {
.featured-modal-controls {
flex-direction: column;
align-items: stretch;
gap: 15px;
}
.featured-modal-search {
max-width: none;
}
.featured-modal-filters {
justify-content: center;
}
.modal {
backdrop-filter: none;
}
.featured-modal {
backdrop-filter: none;
}
.featured-modal-content {
contain: layout style; /* Menos containment no mobile */
}
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
.match-form {
grid-template-columns: 1fr;
gap: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-group.full-width {
margin-bottom: 30px;
}
.mulligans-container,
.turn1-container,
.landdrop-container,
.commander-removed-container {
padding: 20px;
margin-bottom: 25px;
}
.mulligan-input-group,
.turn1-input-group,
.landdrop-input-group,
.commander-removed-input-group {
grid-template-columns: 1fr;
gap: 15px;
padding: 18px;
margin-bottom: 15px;
}
.avatar-section {
flex-direction: column;
text-align: center;
gap: 20px;
}
.player-info h1 {
font-size: 2em;
}
.xp-bar-container {
width: 100%;
max-width: 300px;
}
.stats-grid {
grid-template-columns: 1fr;
}
.rank-display {
flex-direction: column;
gap: 30px;
}
.rank-info {
text-align: center;
}
.rank-progress {
width: 200px;
}
.history-filters {
flex-direction: column;
}
.history-filters {
flex-direction: column;
gap: 10px;
}
.match-card {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 15px;
}
.match-result {
min-width: auto;
width: 100%;
justify-content: center;
}
.match-details {
justify-content: center;
width: 100%;
}
.match-deck {
text-align: center;
width: 100%;
}
.match-item {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.achievements-controls {
flex-direction: column;
align-items: stretch;
}
.achievements-search {
max-width: none;
}
.featured-achievements-grid {
gap: 0.6rem;
}
.featured-achievement-card {
width: 120px;
height: 180px;
padding: 0.7rem;
}
.featured-achievement-card .achievement-icon {
font-size: 2rem;
}
.featured-achievement-card .achievement-info h4 {
font-size: 0.8rem;
}
.featured-achievement-card .achievement-info p {
font-size: 0.65rem;
}
.pagination-controls {
flex-direction: column;
gap: 1.5rem;
padding: 1.5rem 1rem;
}
.pagination-btn {
width: 44px;
height: 44px;
}
.pagination-btn::before {
width: 10px;
height: 10px;
}
.pagination-info {
order: -1;
padding: 0.8rem 1.2rem;
}
.featured-selection-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 15px;
padding: 10px;
}
.featured-selection-item {
min-height: 160px;
padding: 15px 10px;
}
.achievement-preview .achievement-icon {
font-size: 2em;
}
.achievement-preview .achievement-name {
font-size: 1em;
}
/* Responsividade para o modal */
.modal-content {
width: 95%;
padding: 30px;
max-height: 85vh;
}
.featured-management-modal {
width: 98%;
max-height: 80vh;
padding: 20px;
}
}
/* Adicionar ao final do arquivo CSS */
/* Formulário de Cadastro de Partida */
.match-registration {
margin: 20px 20px;
background: rgba(255, 255, 255, 0.05);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.register-btn {
width: 100%;
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
color: white;
border: none;
padding: 20px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.register-btn:hover {
background: linear-gradient(135deg, #ff8c00 0%, #ffffff 100%);
color: #000;
box-shadow: 0 8px 25px rgba(255, 140, 0, 0.4);
}
.register-btn.active {
background: linear-gradient(135deg, #ff8c00 0%, #ffb347 100%);
color: #000;
border-color: #ff6b6b;
}
.match-form {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, padding 0.5s ease;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: none !important;
display: block;
margin-bottom: 40px;
}
.match-form.expanded {
max-height: none;
height: auto;
padding: 30px;
overflow: visible;
}
.match-form h3 {
font-family: 'Cinzel', serif;
font-size: 1.8em;
margin-bottom: 25px;
text-align: center;
background: linear-gradient(45deg, #ff8c00, #ffb347);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 25px; /* Aumentado de padrão para 25px */
}
.form-group.full-width {
grid-column: 1 / -1;
margin-bottom: 45px; /* Aumentado para campos de largura total */
}
/* Espaçamento específico para seções importantes */
.form-group:has(label[for="winner"]),
.form-group:has(label[for="gameCard"]),
.form-group:has(label[for="archenemy"]) {
margin-bottom: 35px;
padding-top: 15px;
border-top: 1px solid rgba(255, 140, 0, 0.2);
}
/* Separação visual entre seções do formulário */
.form-group:has(label[for="winner"])::before {
content: "";
position: absolute;
top: -15px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, rgba(255, 140, 0, 0.4) 20%, rgba(255, 140, 0, 0.8) 50%, rgba(255, 140, 0, 0.4) 80%, transparent 100%);
margin-bottom: 20px;
}
.form-group textarea {
min-height: 120px;
resize: vertical;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 15px 18px;
border: 2px solid #4a5568;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 16px;
transition: all 0.3s ease;
margin-bottom: 8px; /* Espaçamento entre campos */
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #ff8c00;
box-shadow: 0 0 15px rgba(255, 140, 0, 0.3);
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #a0aec0;
}
/* Card Search Container */
.card-search-container {
position: relative;
}
.card-preview {
margin-top: 10px;
padding: 10px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
border: 2px solid #4a5568;
min-height: 60px;
display: none;
align-items: center;
gap: 15px;
}
.card-preview.show {
display: flex;
}
.card-preview img {
width: 50px;
height: 70px;
border-radius: 5px;
border: 1px solid #ff8c00;
object-fit: cover;
}
.card-info {
flex: 1;
}
.card-name {
font-weight: bold;
color: #ff8c00;
margin-bottom: 5px;
}
.card-details {
color: #a0aec0;
font-size: 0.9em;
}
/* Finishing Cards */
.finishing-cards-container {
display: flex;
flex-direction: column;
gap: 15px;
}
.card-input-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.card-input-group > div:first-child {
display: flex;
align-items: center;
gap: 10px;
}
.finishing-card-input {
flex: 1;
padding: 12px 15px;
border: 2px solid #4a5568;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 16px;
}
.add-card-btn {
background: linear-gradient(45deg, #2d2d2d, #1a1a1a);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
align-self: flex-start;
}
.add-card-btn:hover {
background: linear-gradient(45deg, #ff8c00, #ffffff);
color: #000;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4);
}
.remove-card-btn {
background: #ef4444;
color: white;
border: none;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
}
.remove-card-btn:hover {
background: #dc2626;
transform: scale(1.05);
}
/* Botões de ação do formulário */
.form-actions {
display: flex;
gap: 15px;
justify-content: flex-end;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
}
.cancel-btn, .save-btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
}
.cancel-btn {
background: #f56565;
color: white;
}
.cancel-btn:hover {
background: #e53e3e;
transform: translateY(-2px);
}
.save-btn {
background: #48bb78;
color: white;
}
.save-btn:hover {
background: #38a169;
transform: translateY(-2px);
}
/* Loading State */
.loading {
opacity: 0.6;
pointer-events: none;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #ff8c00;
border-top: 2px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsividade */
@media (max-width: 768px) {
.form-grid {
grid-template-columns: 1fr;
}
.form-actions {
flex-direction: column;
}
.cancel-btn,
.save-btn {
width: 100%;
}
}
/* Notificações */
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 20px;
border-radius: 8px;
color: white;
font-weight: 500;
z-index: 1000;
animation: slideIn 0.3s ease-out;
}
.notification.success {
background: linear-gradient(135deg, #4CAF50, #45a049);
}
.notification.error {
background: linear-gradient(135deg, #f44336, #da190b);
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
.notification-content {
display: flex;
align-items: center;
gap: 10px;
}
.notification-icon {
font-size: 18px;
}
.notification-text {
font-weight: 500;
}
/* Melhorias para seleção de cartas */
.cards-container {
display: flex;
flex-direction: row;
gap: 12px;
max-height: 300px;
overflow-x: auto;
overflow-y: hidden;
padding: 8px 0;
white-space: nowrap;
}
.card-result {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
min-width: 200px;
flex-shrink: 0;
text-align: left;
}
.card-result:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.card-result img {
width: 50px;
height: 70px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
margin-right: 10px;
margin-bottom: 0;
}
.card-info {
margin-left: 0;
flex: 1;
min-width: 0;
width: auto;
}
.card-name {
font-weight: bold;
color: #e2e8f0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.9em;
line-height: 1.2;
margin-bottom: 4px;
}
.card-details {
font-size: 0.75em;
color: #a0aec0;
line-height: 1.3;
white-space: normal;
}
/* Estilo para a mensagem de instrução */
.click-hint {
color: #4facfe;
font-size: 0.85em;
margin-top: 15px;
text-align: center;
padding: 8px 12px;
background: rgba(79, 172, 254, 0.1);
border: 1px solid rgba(79, 172, 254, 0.3);
border-radius: 6px;
font-weight: 500;
}
.cards-container::-webkit-scrollbar {
height: 6px;
}
.cards-container::-webkit-scrollbar-track {
background: #2d3748;
border-radius: 3px;
}
.cards-container::-webkit-scrollbar-thumb {
background: #4a5568;
border-radius: 3px;
}
.cards-container::-webkit-scrollbar-thumb:hover {
background: #718096;
}
.card-result.selected {
border-color: #10b981;
background-color: rgba(16, 185, 129, 0.1);
}
@keyframes pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* Feedback visual para input selecionado */
input.selected {
border-color: #10b981 !important;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
/* Melhorias para dropdowns/selects */
.form-group select,
.history-filters select {
padding: 12px 40px 12px 15px;
border: 2px solid #4a5568;
border-radius: 10px;
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
color: white;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;charset=US-ASCII,');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.form-group select:hover,
.history-filters select:hover {
border-color: #ff8c00;
background: linear-gradient(135deg, #ff8c00 0%, #ffffff 100%);
color: #000;
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4);
}
.form-group select:focus,
.history-filters select:focus {
outline: none;
border-color: #ff8c00;
background: linear-gradient(135deg, #ff8c00 0%, #ffffff 100%);
color: #000;
box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.3), 0 4px 15px rgba(255, 140, 0, 0.2);
transform: translateY(-1px);
}
/* Estilo para as opções do dropdown */
.form-group select option,
.history-filters select option {
background: #2d2d2d;
color: white;
padding: 10px;
border: none;
font-weight: 500;
}
.form-group select option:hover,
.history-filters select option:hover {
background: linear-gradient(135deg, #ff8c00 0%, #ffffff 100%);
color: #000;
}
.form-group select option:checked,
.history-filters select option:checked {
background: linear-gradient(135deg, #ff8c00 0%, #ffffff 100%);
color: #000;
font-weight: bold;
}
/* Estilo especial para dropdowns obrigatórios */
.form-group select[required]:invalid {
border-color: #f87171;
background: linear-gradient(135deg, rgba(248, 113, 113, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
}
.form-group select[required]:invalid:focus {
border-color: #f87171;
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.3);
}
/* Animação para quando o dropdown é selecionado */
.form-group select:valid {
border-color: #4ade80;
background: linear-gradient(135deg, rgba(74, 222, 128, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
}
/* Estilo para dropdowns desabilitados */
.form-group select:disabled,
.history-filters select:disabled {
opacity: 0.6;
cursor: not-allowed;
background: rgba(255, 255, 255, 0.05);
border-color: #2d3748;
}
/* Filtros do Histórico */
.history-filters {
display: flex;
gap: 15px;
margin-bottom: 20px;
padding: 15px;
flex-wrap: wrap;
align-items: center;
}
.history-filters::before {
content: "🔍 Filtros:";
font-weight: bold;
color: #ff8c00;
font-size: 16px;
}
.history-filters select {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 10px 15px;
font-size: 0.9em;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
min-width: 150px;
flex: 1;
max-width: 250px;
}
.history-filters select:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
}
.history-filters select:focus {
outline: none;
border-color: #ff8c00;
box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
}
.history-filters select option {
background: #2d3748;
color: white;
padding: 8px;
}
/* Efeito de loading para dropdowns */
.form-group select.loading {
background-image: url('data:image/svg+xml;charset=US-ASCII,');
background-size: 16px;
background-position: right 12px center;
}
/* Animação de entrada para novas partidas */
@keyframes slideInFromTop {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.match-card.new-match {
animation: slideInFromTop 0.5s ease-out;
}
/* Scrollbar personalizada para o histórico */
.match-history::-webkit-scrollbar {
width: 8px;
}
.match-history::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.match-history::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 4px;
transition: background 0.3s ease;
}
.match-history::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
/* Responsividade para dropdowns */
@media (max-width: 768px) {
.history-filters {
flex-direction: column;
align-items: stretch;
}
.history-filters::before {
text-align: center;
margin-bottom: 10px;
}
.history-filters select {
min-width: 100%;
max-width: 100%;
font-size: 16px; /* Evita zoom no iOS */
}
}
/* Auto-preenchimento de jogadores */
.auto-fill-section {
background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(80, 200, 120, 0.1));
border: 2px solid rgba(74, 144, 226, 0.3);
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
}
.auto-fill-container {
display: flex;
gap: 15px;
align-items: center;
margin-bottom: 10px;
}
#playersAutoFill {
flex: 1;
padding: 12px 16px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 14px;
transition: all 0.3s ease;
}
#playersAutoFill:focus {
border-color: #4a90e2;
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
outline: none;
}
#playersAutoFill::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.auto-fill-btn {
padding: 12px 20px;
background: linear-gradient(135deg, #4a90e2, #50c878);
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.auto-fill-btn:hover {
background: linear-gradient(135deg, #357abd, #45b86b);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}
.auto-fill-help {
color: rgba(255, 255, 255, 0.7);
font-style: italic;
display: block;
margin-top: 8px;
}
/* Correção para o placeholder dos selects */
.form-group select option[value=""],
.form-group select option:first-child {
background: #2d2d2d !important;
color: #a0aec0 !important;
font-style: italic;
}
/* Garantir que todos os selects tenham o fundo escuro */
.form-group select,
.mulligan-player,
.turn1-player,
.landdrop-player,
.commander-removed-player,
.turn1-play,
.landdrop-missed {
background: rgba(255, 255, 255, 0.1) !important;
color: white !important;
}
/* Estilo específico para options vazias (placeholder) */
.form-group select option[value=""]:not(:checked) {
background: #2d2d2d !important;
color: #a0aec0 !important;
font-style: italic;
}
/* Garantir que as options normais mantenham o estilo correto */
.form-group select option:not([value=""]) {
background: #2d2d2d !important;
color: white !important;
font-style: normal;
}
/* Efeito especial para dropdown com foco */
.form-group select:focus {
animation: dropdownPulse 0.3s ease;
}
@keyframes dropdownPulse {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
/* Estilo para labels dos dropdowns */
.form-group label {
font-weight: 600;
margin-bottom: 12px;
color: #e2e8f0;
font-size: 16px;
display: block;
align-items: center;
gap: 8px;
}
/* Indicador visual para campos obrigatórios */
.form-group label[for*="required"]::after,
.form-group select[required] + label::after {
content: "*";
color: #f87171;
font-weight: bold;
margin-left: 4px;
}
/* Player Selection Styles */
.player-selection {
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.player-selector-container {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.player-selector-container label {
color: #ffffff;
font-weight: 500;
font-size: 16px;
white-space: nowrap;
}
.player-selector {
flex: 1;
min-width: 200px;
padding: 12px 40px 12px 15px;
border: 2px solid #4a5568;
border-radius: 10px;
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
color: white;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;charset=US-ASCII,');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.player-selector:hover {
border-color: #ff8c00;
background: linear-gradient(135deg, #ff8c00 0%, #ffffff 100%);
color: #000;
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4);
}
.player-selector:focus {
outline: none;
border-color: #ff8c00;
background: linear-gradient(135deg, #ff8c00 0%, #ffffff 100%);
color: #000;
box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.3), 0 4px 15px rgba(255, 140, 0, 0.2);
transform: translateY(-1px);
}
/* Estilo para as opções do seletor de jogadores */
.player-selector option {
background: #2d2d2d;
color: white;
padding: 10px;
border: none;
font-weight: 500;
}
.player-selector option:hover {
background: linear-gradient(135deg, #ff8c00 0%, #ffffff 100%);
color: #000;
}
.player-selector option:checked {
background: linear-gradient(135deg, #ff8c00 0%, #ffffff 100%);
color: #000;
font-weight: bold;
}
.add-player-btn {
padding: 12px 20px;
background: linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%);
color: #ffffff;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.add-player-btn:hover {
background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
}
/* New Player Modal */
.new-player-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: none;
overflow-y: auto;
padding: 20px 0;
}
.new-player-content {
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
margin: 20px auto;
padding: 25px;
border: 2px solid #ff8c00;
width: 90%;
max-width: 450px;
max-height: calc(100vh - 40px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
position: relative;
overflow-y: auto;
border-radius: 12px;
}
.new-player-content h2 {
color: #ff8c00;
text-align: center;
margin-bottom: 25px;
font-family: 'Cinzel', serif;
}
.new-player-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.new-player-form .form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.new-player-form label {
color: #ffffff;
font-weight: 500;
}
.new-player-form input {
padding: 10px 14px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid #4a5568;
border-radius: 8px;
color: #ffffff;
font-size: 15px;
transition: all 0.3s ease;
}
.new-player-form input:focus {
outline: none;
border-color: #ff8c00;
box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
}
.new-player-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 15px;
}
.new-player-actions button {
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.cancel-new-player {
background: #1a1a1a;
color: #a0aec0;
border: 2px solid #4a5568;
}
.cancel-new-player:hover {
background: #4a5568;
color: #ffffff;
}
.create-player {
background: linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%);
color: #ffffff;
}
.create-player:hover {
background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
}
/* Ranking Players Styles */
.ranking-players {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin-top: 15px;
}
.ranking-position {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 15px;
border: 2px solid #4a5568;
transition: all 0.3s ease;
}
.ranking-position:hover {
border-color: #ff8c00;
background: rgba(255, 140, 0, 0.1);
}
.ranking-position label {
display: block;
font-weight: bold;
margin-bottom: 8px;
color: #ffffff;
font-size: 1.1em;
}
.ranking-position select {
width: 100%;
padding: 10px;
border: 2px solid #4a5568;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 16px;
transition: all 0.3s ease;
}
.ranking-position select:focus {
outline: none;
border-color: #ff8c00;
box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
}
.ranking-position select option {
background: #2d2d2d;
color: white;
padding: 10px;
}
/* Comandantes Container */
.commanders-container {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 15px;
}
.commanders-section {
margin-top: 30px;
margin-bottom: 35px;
padding: 25px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 140, 0, 0.03) 100%);
border: 1px solid rgba(255, 140, 0, 0.2);
}
.commander-entry {
background: rgba(255, 255, 255, 0.05);
border: 2px solid #4a5568;
border-radius: 10px;
padding: 15px;
position: relative;
}
.commander-input-group {
display: grid;
grid-template-columns: 2fr 2fr 1.5fr 1fr;
grid-template-rows: auto auto;
gap: 15px;
align-items: start;
}
.commander-theme {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 12px;
color: white;
font-size: 14px;
transition: all 0.3s ease;
cursor: pointer;
}
.commander-theme:focus {
outline: none;
border-color: #ff8c00;
box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.2);
background: rgba(255, 255, 255, 0.15);
}
.commander-theme option {
background: #2d2d2d;
color: white;
padding: 8px;
}
.commander-theme option:hover {
background: #ff8c00;
color: #000;
}
.commander-theme::placeholder {
color: #a0aec0;
font-style: italic;
}
.commander-partner {
padding: 12px 16px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid #4a5568;
border-radius: 8px;
color: #ffffff;
font-size: 16px;
transition: all 0.3s ease;
}
.commander-partner:focus {
outline: none;
border-color: #ff8c00;
box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
}
.commander-partner::placeholder {
color: #a0aec0;
font-style: italic;
}
.partner-preview {
grid-column: span 2;
margin-top: 10px;
}
.card-preview {
grid-column: span 2;
}
.commander-input {
padding: 12px 16px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid #4a5568;
border-radius: 8px;
color: #ffffff;
font-size: 16px;
transition: all 0.3s ease;
}
.commander-input:focus {
outline: none;
border-color: #ff8c00;
box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
}
.commander-player {
padding: 12px 16px;
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
border: 2px solid #4a5568;
border-radius: 8px;
color: #ffffff;
font-size: 16px;
transition: all 0.3s ease;
cursor: pointer;
}
.commander-player:focus {
outline: none;
border-color: #ff8c00;
box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
}
.add-commander-btn {
padding: 12px 20px;
background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
color: #ffffff;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 10px;
}
.add-commander-btn:hover {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.add-commander-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.remove-commander-btn {
position: absolute;
top: 10px;
right: 10px;
background: #ef4444;
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.remove-commander-btn:hover {
background: #dc2626;
transform: scale(1.1);
}
.commander-info {
color: #a0aec0;
font-style: italic;
}
.commander-info small {
display: flex;
align-items: center;
gap: 8px;
}
/* Estatísticas por Comandante */
.commander-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
margin-bottom: 10px;
border-left: 4px solid #ff8c00;
transition: all 0.3s ease;
}
.commander-item:hover {
background: rgba(255, 140, 0, 0.1);
transform: translateX(5px);
}
.commander-name {
font-weight: bold;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.commander-name::before {
font-size: 1.2em;
}
.commander-winrate {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
}
.winrate-percentage {
font-size: 1.2em;
font-weight: bold;
color: #4ade80;
}
.winrate-details {
font-size: 0.9em;
color: #a0aec0;
}
/* === MELHORIAS PARA CAMPOS MULTI-JOGADOR === */
/* Containers principais com melhor separação */
.mulligans-container,
.turn1-container,
.landdrop-container,
.commander-removed-container {
border: 2px solid #4a5568;
border-radius: 16px;
padding: 25px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 140, 0, 0.05) 100%);
margin-bottom: 35px;
backdrop-filter: none !important;
position: relative;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.mulligans-container:hover,
.turn1-container:hover,
.landdrop-container:hover,
.commander-removed-container:hover {
border-color: #ff8c00;
box-shadow: 0 12px 40px rgba(255, 140, 0, 0.2);
transform: translateY(-2px);
}
/* Separador visual entre seções */
.mulligans-container::after,
.turn1-container::after,
.landdrop-container::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, transparent 0%, #ff8c00 50%, transparent 100%);
border-radius: 2px;
}
/* Grupos de entrada melhorados */
.mulligan-input-group,
.turn1-input-group,
.landdrop-input-group,
.commander-removed-input-group {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
align-items: center;
margin-bottom: 20px;
padding: 22px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 140, 0, 0.08) 100%);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.mulligan-input-group::before,
.turn1-input-group::before,
.landdrop-input-group::before,
.commander-removed-input-group::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #ff8c00 0%, #ffb347 100%);
transition: all 0.3s ease;
}
.mulligan-input-group:hover,
.turn1-input-group:hover,
.landdrop-input-group:hover,
.commander-removed-input-group:hover {
background: linear-gradient(135deg, rgba(255, 140, 0, 0.15) 0%, rgba(255, 179, 71, 0.1) 100%);
border-color: #ff8c00;
transform: translateX(5px);
box-shadow: 0 8px 25px rgba(255, 140, 0, 0.2);
}
.mulligan-input-group:hover::before,
.turn1-input-group:hover::before,
.landdrop-input-group:hover::before,
.commander-removed-input-group:hover::before {
width: 6px;
background: linear-gradient(180deg, #ffb347 0%, #ff8c00 100%);
}
/* Seletores de jogador melhorados */
.mulligan-player,
.turn1-player,
.landdrop-player,
.commander-removed-player {
padding: 12px 16px;
border: 2px solid #4a5568;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 16px;
transition: all 0.3s ease;
cursor: pointer;
}
.mulligan-player:focus,
.turn1-player:focus,
.landdrop-player:focus,
.commander-removed-player:focus {
outline: none;
border-color: #ff8c00;
box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
}
/* Campos de entrada melhorados */
.mulligan-count,
.turn1-play,
.landdrop-missed,
.commander-removed-count {
padding: 12px 16px;
border: 2px solid #4a5568;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 16px;
transition: all 0.3s ease;
}
.mulligan-count:focus,
.turn1-play:focus,
.landdrop-missed:focus,
.commander-removed-count:focus {
outline: none;
border-color: #ff8c00;
box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
}
.mulligan-count::placeholder,
.turn1-play::placeholder,
.landdrop-missed::placeholder,
.commander-removed-count::placeholder {
color: #a0aec0;
}
/* Botões de adicionar melhorados */
.add-mulligan-btn,
.add-turn1-btn,
.add-landdrop-btn,
.add-commander-removed-btn {
background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
color: #ffffff;
border: none;
padding: 16px 28px;
border-radius: 12px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
margin-bottom: 20px;
margin-top: 15px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
width: 100%;
}
.add-mulligan-btn::before,
.add-turn1-btn::before,
.add-landdrop-btn::before,
.add-commander-removed-btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
transition: all 0.5s ease;
}
.add-mulligan-btn:hover::before,
.add-turn1-btn:hover::before,
.add-landdrop-btn:hover::before,
.add-commander-removed-btn:hover::before {
left: 100%;
}
.add-mulligan-btn:hover,
.add-turn1-btn:hover,
.add-landdrop-btn:hover,
.add-commander-removed-btn:hover {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
}
.add-mulligan-btn:disabled,
.add-turn1-btn:disabled,
.add-landdrop-btn:disabled,
.add-commander-removed-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Espaçamento entre seções principais */
.form-group.full-width {
margin-bottom: 40px;
position: relative;
}
.form-group.full-width:not(:last-child)::after {
content: "";
position: absolute;
bottom: -22px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, rgba(255, 140, 0, 0.3) 20%, rgba(255, 140, 0, 0.6) 50%, rgba(255, 140, 0, 0.3) 80%, transparent 100%);
}
/* Labels dos campos multi-jogador */
.form-group.full-width > label {
display: block;
margin-bottom: 15px;
font-size: 18px;
font-weight: 600;
color: #ff8c00;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Botões de remover */
.remove-mulligan-btn,
.remove-turn1-btn,
.remove-landdrop-btn,
.remove-commander-removed-btn {
background: #ef4444;
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
margin-left: 10px;
}
.remove-mulligan-btn:hover,
.remove-turn1-btn:hover,
.remove-landdrop-btn:hover,
.remove-commander-removed-btn:hover {
background: #dc2626;
transform: scale(1.1);
}
/* Modal de Detalhes da Partida */
.match-details-content {
max-width: 800px;
max-height: 85vh;
overflow-y: auto;
padding: 30px;
margin: 5vh auto;
}
.match-details-header {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid rgba(255, 140, 0, 0.3);
}
.match-details-header h2 {
color: #ff8c00;
font-family: 'Cinzel', serif;
margin: 0;
}
.match-result-badge {
padding: 12px 24px;
border-radius: 25px;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
}
.match-result-badge.win {
background: linear-gradient(45deg, #4ade80, #22c55e);
color: white;
box-shadow: 0 4px 15px rgba(74, 222, 128, 0.4);
}
.match-result-badge.loss {
background: linear-gradient(45deg, #f87171, #ef4444);
color: white;
box-shadow: 0 4px 15px rgba(248, 113, 113, 0.4);
}
.match-details-body {
display: flex;
flex-direction: column;
gap: 25px;
}
.details-section {
background: rgba(255, 255, 255, 0.05);
padding: 20px;
border-radius: 12px;
border-left: 4px solid #ff8c00;
}
.details-section h3 {
color: #ff8c00;
margin: 0 0 15px 0;
font-size: 1.2em;
font-weight: 600;
}
.details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.detail-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
border: 1px solid rgba(255, 140, 0, 0.2);
}
.detail-label {
font-weight: 600;
color: #e2e8f0;
}
.detail-value {
color: #ff8c00;
font-weight: 500;
}
.commanders-list,
.ranking-list,
.mulligans-list,
.turn1-list,
.landdrop-list,
.commander-removed-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.commander-item,
.ranking-item,
.player-stat-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
border: 1px solid rgba(255, 140, 0, 0.2);
}
.commander-item .commander-name {
font-weight: 600;
color: #4ade80;
}
.commander-item .player-name {
color: #a0aec0;
font-size: 0.9em;
}
.ranking-item.first {
border-left: 4px solid #ffd700;
background: rgba(255, 215, 0, 0.1);
}
.ranking-item.second {
border-left: 4px solid #c0c0c0;
background: rgba(192, 192, 192, 0.1);
}
.ranking-item.third {
border-left: 4px solid #cd7f32;
background: rgba(205, 127, 50, 0.1);
}
.ranking-item.fourth {
border-left: 4px solid #4a5568;
background: rgba(74, 85, 104, 0.1);
}
.player-stat-item .stat-value {
font-weight: 600;
}
.player-stat-item .stat-value.positive {
color: #4ade80;
}
.player-stat-item .stat-value.negative {
color: #f87171;
}
.player-stat-item .stat-value.neutral {
color: #a0aec0;
}
.game-card-display {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
border: 1px solid rgba(255, 140, 0, 0.2);
}
.game-card-display img {
width: 240px;
height: 336px;
border-radius: 8px;
object-fit: cover;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
margin-bottom: 15px;
}
.game-card-owner {
background: linear-gradient(135deg, #ff8c00 0%, #ffb347 100%);
color: #1a1a1a;
padding: 8px 16px;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
text-align: center;
box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3);
border: 1px solid rgba(255, 140, 0, 0.4);
min-width: 120px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.game-card-owner::before {
content: "👤";
font-size: 1rem;
}
.finishing-cards-display {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.card-display-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
border: 1px solid rgba(255, 140, 0, 0.2);
}
.card-display-item img {
width: 40px;
height: 56px;
border-radius: 4px;
object-fit: cover;
}
.card-display-item .card-name {
font-weight: 600;
color: #4ade80;
}
.archenemy-display,
.observations-display {
padding: 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
border: 1px solid rgba(255, 140, 0, 0.2);
color: #e2e8f0;
line-height: 1.5;
}
.empty-section {
color: #a0aec0;
font-style: italic;
text-align: center;
padding: 20px;
}
/* Top Comandantes Section */
.top-commanders-section {
margin-top: 2rem;
padding: 2rem 2rem 1rem 2rem;
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.top-commanders-section h3 {
color: #f7fafc;
margin-bottom: 1.5rem;
font-size: 1.4rem;
text-align: center;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.top-commanders-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(317px, 1fr));
gap: 2rem;
justify-items: center;
}
.top-commander-card {
padding: 1.73rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
width: 100%;
max-width: 360px;
min-height: 403px;
}
.commander-image {
position: relative;
z-index: 2;
margin-bottom: 0.8rem;
}
.commander-image img {
width: 208px;
height: 290px;
border-radius: 12px;
object-fit: cover;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
transition: all 0.3s ease;
filter: brightness(1.1) contrast(1.1);
}
/* Hover geral no commander-image */
.commander-image:hover img {
transform: scale(1.03);
box-shadow: 0 8px 20px rgba(255, 140, 0, 0.4);
filter: brightness(1.1) contrast(1.05);
}
/* Hover específico para 1º lugar - Ouro */
.top-commander-card:nth-child(1) .commander-image:hover img {
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
filter: brightness(1.15) contrast(1.05) drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
}
/* Hover específico para 2º lugar - Prata */
.top-commander-card:nth-child(2) .commander-image:hover img {
box-shadow: 0 8px 20px rgba(192, 192, 192, 0.5);
filter: brightness(1.15) contrast(1.05) drop-shadow(0 0 8px rgba(192, 192, 192, 0.3));
}
/* Hover específico para 3º lugar - Bronze */
.top-commander-card:nth-child(3) .commander-image:hover img {
box-shadow: 0 8px 20px rgba(205, 127, 50, 0.5);
filter: brightness(1.15) contrast(1.05) drop-shadow(0 0 8px rgba(205, 127, 50, 0.3));
}
/* Efeitos de hover para placeholders */
.top-commander-card.placeholder-card:nth-child(1) .commander-image:hover img {
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.3);
opacity: 0.8;
filter: grayscale(0.2) drop-shadow(0 0 6px rgba(255, 215, 0, 0.2));
}
.top-commander-card.placeholder-card:nth-child(2) .commander-image:hover img {
box-shadow: 0 8px 20px rgba(192, 192, 192, 0.3);
opacity: 0.8;
filter: grayscale(0.2) drop-shadow(0 0 6px rgba(192, 192, 192, 0.2));
}
.top-commander-card.placeholder-card:nth-child(3) .commander-image:hover img {
box-shadow: 0 8px 20px rgba(205, 127, 50, 0.3);
opacity: 0.8;
filter: grayscale(0.2) drop-shadow(0 0 6px rgba(205, 127, 50, 0.2));
}
.commander-info {
position: relative;
z-index: 2;
width: 100%;
margin-bottom: 0.6rem;
}
.commander-info .commander-name {
color: #f7fafc;
font-weight: bold;
font-size: 0.85rem;
margin-bottom: 0.3rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
line-height: 1.2;
}
.commander-info .commander-theme {
color: #ff8c00;
font-size: 0.85rem;
font-weight: 500;
line-height: 1.1;
margin-bottom: 0.4rem;
margin-top: 0.4rem;
}
.commander-stats {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
margin-top: auto;
}
.commander-stats .winrate {
color: #68d391;
font-weight: bold;
font-size: 1.3rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.commander-stats .usage {
color: #cbd5e0;
font-size: 0.85rem;
font-weight: 500;
}
.no-commanders {
text-align: center;
color: #a0aec0;
padding: 3rem;
font-style: italic;
font-size: 1.1rem;
grid-column: 1 / -1;
}
/* Estilo para placeholders dos comandantes */
.top-commander-card.placeholder-card {
opacity: 0.6;
}
.top-commander-card.placeholder-card .commander-image img {
opacity: 0.7;
filter: grayscale(0.3);
}
.top-commander-card.placeholder-card .commander-info .commander-name {
color: #a0aec0;
font-style: italic;
}
.top-commander-card.placeholder-card .commander-info .commander-theme {
color: #718096;
font-style: italic;
}
.top-commander-card.placeholder-card .commander-stats .winrate {
color: #718096;
}
.top-commander-card.placeholder-card .commander-stats .usage {
color: #718096;
}
.top-commander-card.placeholder-card::before {
display: none;
}
@media (max-width: 768px) {
.auto-fill-container {
flex-direction: column;
align-items: stretch;
}
.auto-fill-btn {
width: 100%;
}
.player-selector-container {
flex-direction: column;
align-items: stretch;
}
.player-selector-container label {
text-align: center;
}
.add-player-btn {
width: 100%;
}
.avatar-grid {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 15px;
}
.avatar-option {
width: 80px;
height: 80px;
}
.avatar-modal-content {
margin: 10% auto;
padding: 20px;
}
.ranking-players {
grid-template-columns: 1fr;
}
.commander-input-group {
grid-template-columns: 1fr;
}
.commander-item {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.commander-winrate {
align-items: flex-start;
}
.mulligan-input-group,
.turn1-input-group,
.landdrop-input-group,
.commander-removed-input-group {
grid-template-columns: 1fr;
gap: 10px;
}
.mulligans-container::before,
.turn1-container::before,
.landdrop-container::before,
.commander-removed-container::before {
font-size: 12px;
padding: 6px 12px;
left: 10px;
}
/* Responsividade para o modal de detalhes */
.match-details-content {
margin: 2vh auto;
padding: 20px;
max-height: 90vh;
width: 95%;
}
.match-details-header {
flex-direction: column;
gap: 15px;
text-align: center;
}
.match-result-badge {
font-size: 16px;
padding: 10px 20px;
}
.details-grid {
grid-template-columns: 1fr;
}
.detail-item {
flex-direction: column;
gap: 5px;
text-align: center;
}
.top-commanders-grid {
grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
gap: 1.5rem;
}
.top-commander-card {
max-width: none;
min-height: 374px;
padding: 1.44rem;
}
.commander-image img {
width: 173px;
height: 242px;
}
.commander-info .commander-name {
font-size: 0.8rem;
white-space: normal;
text-align: center;
}
.commander-info .commander-theme {
white-space: normal;
text-align: center;
margin-bottom: 0.5rem;
}
}
@media (max-width: 480px) {
.featured-achievement-card {
width: 100px;
height: 160px;
padding: 0.6rem;
}
.featured-achievement-card .achievement-icon {
font-size: 1.8rem;
}
.featured-achievement-card .achievement-info h4 {
font-size: 0.75rem;
}
.pagination-btn {
width: 40px;
height: 40px;
}
.pagination-btn::before {
width: 8px;
height: 8px;
}
.modal-content {
width: 98%;
padding: 20px;
max-height: 90vh;
}
.featured-management-modal {
width: 99%;
max-height: 85vh;
padding: 15px;
}
}
/* Estilos para achievements especiais com senha */
.special-achievement-section {
margin-top: 2rem;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.password-input-container {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
.password-input-container label {
color: white;
font-weight: 600;
text-align: center;
font-size: 1.1rem;
}
.password-input {
padding: 0.8rem 1rem;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 1rem;
text-align: center;
width: 250px;
transition: all 0.3s ease;
}
.password-input:focus {
outline: none;
border-color: #4CAF50;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}
.password-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.unlock-special-btn {
padding: 0.8rem 2rem;
background: linear-gradient(135deg, #4CAF50, #45a049);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
.unlock-special-btn:hover {
background: linear-gradient(135deg, #45a049, #4CAF50);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}
.unlock-special-btn:active {
transform: translateY(0);
}
.password-error {
background: rgba(244, 67, 54, 0.2);
color: #ff6b6b;
padding: 0.8rem;
border-radius: 8px;
border: 1px solid rgba(244, 67, 54, 0.3);
text-align: center;
font-weight: 500;
margin-top: 1rem;
}
.password-success {
background: rgba(76, 175, 80, 0.2);
color: #4CAF50;
padding: 0.8rem;
border-radius: 8px;
border: 1px solid rgba(76, 175, 80, 0.3);
text-align: center;
font-weight: 500;
margin-top: 1rem;
}
/* Skeleton loading para modal de conquistas */
.loading-skeleton {
display: flex;
flex-wrap: wrap;
gap: 15px 8px;
justify-content: flex-start;
align-items: flex-start;
}
.skeleton-item {
width: 160px;
height: 180px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 12px;
flex-shrink: 0;
/* Otimizações de animação */
will-change: background-position;
transform: translateZ(0);
}
/* Estilos para data de desbloqueio do achievement */
.achievement-unlock-date {
background: rgba(255, 140, 0, 0.15);
color: #ff8c00;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9em;
font-weight: 600;
text-align: center;
margin: 15px 0;
border: 1px solid rgba(255, 140, 0, 0.3);
box-shadow: 0 2px 8px rgba(255, 140, 0, 0.2);
display: inline-block;
width: 100%;
box-sizing: border-box;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.achievement-unlock-date:hover {
background: rgba(255, 140, 0, 0.25);
box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
transform: translateY(-1px);
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Botão carregar mais */
.load-more-featured {
width: 100%;
padding: 12px 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 15px;
/* Otimizações de hover */
will-change: transform, box-shadow;
transform: translateZ(0);
}
.load-more-featured:hover {
transform: translateY(-2px) translateZ(0);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.load-more-featured:active {
transform: translateY(0) translateZ(0);
}
/* Estilos para comandantes removidos na aba Geral */
.commander-removal-card {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 1rem;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.commander-removal-card:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.commander-removal-image {
position: relative;
margin-bottom: 0.8rem;
}
.commander-removal-image img {
width: 83px; /* 60% menor que 208px */
height: 116px; /* 60% menor que 290px */
border-radius: 8px;
object-fit: cover;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
filter: brightness(1.1) contrast(1.1);
}
.commander-removal-image:hover img {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(255, 140, 0, 0.4);
filter: brightness(1.15) contrast(1.05);
}
.commander-removal-info {
text-align: center;
width: 100%;
}
.commander-removal-info h4 {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #ffffff;
line-height: 1.2;
}
.commander-removal-info .removal-count {
font-size: 0.8rem;
color: #ff8c00;
font-weight: 600;
margin-bottom: 0.3rem;
}
.commander-removal-info .theme {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 0.3rem;
}
.commander-removal-info .matches-played {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
}
#commandersRemovalGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
padding: 1rem;
}
/* Estilos para maestria de comandantes na aba Maestria */
.commander-mastery-section {
width: 100%;
margin-bottom: 2rem;
}
.commander-mastery-section h3 {
color: #ffffff;
font-size: 1.5rem;
margin-bottom: 0.5rem;
text-align: center;
}
.mastery-description {
text-align: center;
margin-bottom: 1.5rem;
}
.mastery-description p {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
margin: 0;
}
#commanderMasteryGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.2rem;
padding: 1rem;
}
.commander-mastery-card {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
border-radius: 15px;
padding: 1.2rem;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
}
.commander-mastery-card:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
border-color: rgba(255, 140, 0, 0.3);
}
.commander-mastery-image {
position: relative;
margin-bottom: 1rem;
}
.commander-mastery-image img {
width: 90px;
height: 125px;
border-radius: 10px;
object-fit: cover;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
transition: all 0.3s ease;
filter: brightness(1.1) contrast(1.1);
}
.commander-mastery-image:hover img {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(255, 140, 0, 0.5);
filter: brightness(1.2) contrast(1.05);
}
.commander-mastery-info {
text-align: center;
width: 100%;
}
.commander-mastery-info h4 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 1rem;
color: #ffffff;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.mastery-stats {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.stat-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.3rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-item:last-child {
border-bottom: none;
}
.stat-label {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
.stat-value {
font-size: 0.85rem;
font-weight: 600;
color: #ffffff;
}
.winrate-high {
color: #4ade80 !important;
text-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}
.winrate-medium {
color: #fbbf24 !important;
text-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}
.winrate-low {
color: #f87171 !important;
text-shadow: 0 0 8px rgba(248, 113, 113, 0.3);
}
.empty-commanders, .error-message {
text-align: center;
padding: 2rem;
color: rgba(255, 255, 255, 0.7);
font-style: italic;
}
/* Commander Mastery Modal */
/* Estilos da paginação de maestria */
.mastery-pagination-controls {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.pagination-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
color: var(--text-color);
font-size: 14px;
}
.total-items {
color: var(--text-secondary);
font-size: 12px;
}
.pagination-buttons {
display: flex;
gap: 8px;
align-items: center;
}
.pagination-btn {
padding: 8px 12px;
border: 1px solid var(--border-color);
background: var(--card-bg);
color: var(--text-color);
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
min-width: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.pagination-btn:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
transform: translateY(-1px);
}
.pagination-btn.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
font-weight: bold;
}
.pagination-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.pagination-btn:disabled:hover {
background: var(--card-bg);
color: var(--text-color);
border-color: var(--border-color);
transform: none;
}
.page-number {
font-weight: 500;
}
/* Responsividade da paginação */
@media (max-width: 768px) {
.pagination-buttons {
gap: 4px;
}
.pagination-btn {
padding: 6px 8px;
font-size: 12px;
min-width: 32px;
}
.pagination-info {
font-size: 12px;
}
.total-items {
font-size: 11px;
}
}
/* Estilos do modal de maestria */
.commander-mastery-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
backdrop-filter: blur(5px);
}
.mastery-modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--primary-background-color);
border-radius: 15px;
padding: 2rem;
max-width: 800px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.mastery-modal-header {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--primary-color);
text-align: center;
}
.mastery-stats-section{
margin: 10px 0 10px 0;
}
#masteryCommanderImage {
width: 60%;
height: 60%;
border-radius: 20px;
object-fit: cover;
margin: 0 auto;
display: block;
}
#masteryCommanderName{
text-align: center;
margin: 10px 0 10px 0;
}
.mastery-commander-info h2 {
color: var(--primary-color);
margin: 0;
font-size: 1.8rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.mastery-commander-info p {
color: rgba(255, 255, 255, 0.8);
margin: 0.5rem 0 0 0;
font-size: 1rem;
}
.mastery-close {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
color: var(--primary-color);
font-size: 2rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.3s ease;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.mastery-close:hover {
background: rgba(255, 215, 0, 0.2);
transform: scale(1.1);
}
.mastery-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.mastery-stat-card {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--primary-color);
border-radius: 10px;
padding: 1rem;
text-align: center;
transition: all 0.3s ease;
}
.mastery-stat-card:hover {
background: rgba(255, 255, 255, 0.15);
border-color: #ffd700;
transform: translateY(-2px);
}
.mastery-stat-label {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.mastery-stat-value {
color: var(--primary-color);
font-size: 1.5rem;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.mastery-tiers-section {
margin-top: 2rem;
}
.mastery-tiers-section h3 {
color: var(--primary-color);
margin-bottom: 1rem;
text-align: center;
font-size: 1.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.current-tier-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
border: 1px solid rgba(255, 215, 0, 0.3);
}
.current-tier-info span {
color: var(--primary-color);
font-weight: bold;
}
.tier-progress-text {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.tier-progress-container {
position: relative;
margin: 2rem 0;
}
.tier-progress-line {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
position: relative;
margin-bottom: 2rem;
}
.tier-progress-fill {
height: 100%;
background: var(--primary-color);
border-radius: 3px;
transition: width 0.5s ease;
width: 25%;
}
.tier-markers {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
}
.tier-marker {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
position: relative;
}
.tier-circle {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
border: 3px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
.tier-circle.spark {
border-color: var(--primary-color);
background: rgba(255, 215, 0, 0.2);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}
.tier-circle.ember {
border-color: #ff6b35;
background: rgba(255, 107, 53, 0.2);
}
.tier-circle.lord {
border-color: #9b59b6;
background: rgba(155, 89, 182, 0.2);
}
.tier-circle.titan {
border-color: #e74c3c;
background: rgba(231, 76, 60, 0.2);
}
.tier-circle.unlocked {
box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
transform: scale(1.1);
}
.tier-icon {
font-size: 1.5rem;
color: var(--primary-color);
}
.tier-label {
color: var(--primary-color);
font-weight: bold;
margin-bottom: 0.3rem;
font-size: 1rem;
}
.tier-requirement {
color: rgba(255, 255, 255, 0.7);
font-size: 0.8rem;
text-align: center;
line-height: 1.2;
max-width: 120px;
}
@keyframes tierUnlock {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1.1); }
}
.tier-circle.just-unlocked {
animation: tierUnlock 0.8s ease-in-out;
}
.tier-marker.locked .tier-circle {
opacity: 0.4;
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
}
.tier-marker.locked .tier-icon {
color: rgba(255, 255, 255, 0.3);
}
.tier-marker.locked .tier-label {
color: rgba(255, 255, 255, 0.5);
}
.tier-marker.locked .tier-requirement {
color: rgba(255, 255, 255, 0.4);
}