/* 🎨 STYLE.CSS - POKEDEX FINALE PERFETTO (Senza Luoghi) */
:root {
/* ✅ MODIFICA: Colore di sfondo Light (Tema Chiaro) impostato su Rosso/Arancio Pokédex */
--bg-light: linear-gradient(135deg, #E83F3F, #ff6b6b); /* Rosso/Arancio Pokédex */
--bg-dark: linear-gradient(135deg, #232526, #414345);
--text-light: #fff;
--text-dark: #222;
--card-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
--transition: all 0.3s ease;
--max-stat: 255; /* Statistica massima Pokémon */
}
#missingImgText {
color: #666;
font-style: italic;
font-size: 0.85em;
margin-top: 10px;
font-weight: 500;
}
/* Assicurati che body.dark gestisca il colore se usi il tema scuro */
body.dark #missingImgText {
color: #aaa;
}
/* Fix Minigiochi Dark Mode */
body.dark .game-container {
background-color: #333; /* Sfondo scuro per il box del gioco */
color: #fff; /* Testo bianco */
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); /* Ombra chiara */
}
body.dark .game-question {
color: #fff;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--bg-light);
color: var(--text-dark);
margin: 0;
padding: 0;
transition: var(--transition);
}
body.dark {
background: var(--bg-dark);
color: var(--text-light);
}
/* ========================================================================= */
/* --- HEADER MINIGIOCHI & MAPPA: DESKTOP VS MOBILE DEFINITIVO ------------- */
/* ========================================================================= */
header:not(.main-header) {
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
background: inherit !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 16px 20px !important;
}
body.dark header:not(.main-header) {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
}
/* --- SU COMPUTER (DESKTOP): POKEBALL ATTACCATA AL NOME AL CENTRO --- */
@media (min-width: 601px) {
header:not(.main-header) {
display: flex !important;
align-items: center !important;
justify-content: center !important; /* Tutto il gruppo perfettamente centrato */
gap: 12px !important;
height: auto !important;
}
/* Poké Ball attaccata al nome */
header:not(.main-header) #pokeballIcon,
header:not(.main-header) .home-link img,
header:not(.main-header) a:has(#pokeballIcon) {
position: static !important;
transform: none !important;
width: 34px !important;
height: 34px !important;
margin: 0 !important;
vertical-align: middle !important;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.25));
cursor: pointer;
flex-shrink: 0;
}
/* Titolo del gioco */
header:not(.main-header) h1 {
font-size: 1.85em !important;
margin: 0 !important;
padding: 0 !important;
color: #fff !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}
/* Trofeo classifica a fianco */
header:not(.main-header) .leaderboard-toggle-btn,
header:not(.main-header) button[onclick*="Leaderboard"] {
position: static !important;
transform: none !important;
margin-left: 8px !important;
flex-shrink: 0;
cursor: pointer;
}
}
/* --- SOLO DA TELEFONO (MOBILE < 600px): POKEBALL FISSA A SX, NOME IN MEZZO, TROFEO A DX --- */
@media (max-width: 600px) {
header:not(.main-header) {
position: sticky !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important; /* Pokéball a sx, Nome centro, Trofeo a dx */
padding: 10px 14px !important;
height: 56px !important;
}
/* Poké Ball fissa a sinistra come tasto indietro */
header:not(.main-header) #pokeballIcon,
header:not(.main-header) .home-link img,
header:not(.main-header) a:has(#pokeballIcon) {
position: static !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
flex: 0 0 28px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
cursor: pointer;
}
/* Titolo centrato e calibrato per non toccare i bottoni laterali */
header:not(.main-header) h1 {
font-size: 1.15em !important;
margin: 0 !important;
padding: 0 4px !important;
flex: 1 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
line-height: 1.1 !important;
color: #fff !important;
}
/* Trofeo fisso a destra */
header:not(.main-header) .leaderboard-toggle-btn,
header:not(.main-header) button[onclick*="Leaderboard"] {
position: static !important;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
flex: 0 0 32px !important;
font-size: 1.1em !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
}
/* ========================================================= */
/* --- HEADER MINIGIOCHI & MAPPA (ORIGINALE E STABILE) ------- */
/* ========================================================= */
header:not(.main-header) {
text-align: center;
padding: 20px;
position: sticky;
top: 0;
z-index: 5;
background: inherit;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
display: block;
height: auto;
}
body.dark header:not(.main-header) {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
header:not(.main-header) h1 {
font-size: 2em;
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
line-height: 1.2;
}
header:not(.main-header) #pokeballIcon {
width: 35px;
height: 35px;
position: static;
transform: none;
margin: 0;
vertical-align: middle;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
cursor: pointer;
}
body.dark header:not(.main-header) #pokeballIcon {
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}
.header-trophy-btn {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.4);
font-size: 0.8em;
cursor: pointer;
margin-left: 15px;
vertical-align: middle;
padding: 8px;
border-radius: 50%;
width: 50px;
height: 50px;
display: inline-flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease;
}
.header-trophy-btn:hover {
transform: scale(1.1) rotate(5deg);
border-color: gold;
background: rgba(255, 255, 255, 0.4);
}
/* --- MEDIA QUERY MOBILE UNIFICATA PER TUTTI I MINIGIOCHI --- */
@media (max-width: 600px) {
header:not(.main-header) {
position: relative !important;
height: 60px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 0 !important;
width: 100% !important;
overflow: hidden !important;
}
header:not(.main-header) h1 {
margin: 0 !important;
width: 100% !important;
padding-left: 50px !important;
padding-right: 50px !important;
box-sizing: border-box !important;
text-align: center !important;
font-size: 1.1em !important;
line-height: 60px !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
header:not(.main-header) #pokeballIcon {
display: block !important;
position: absolute !important;
left: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
z-index: 10;
}
.header-trophy-btn {
position: absolute !important;
right: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
font-size: 0 !important;
margin: 0 !important;
}
.header-trophy-btn::before {
content: '🏆';
font-size: 18px !important;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -52%) !important;
}
}
/* ========================================================================= */
/* --- 2. HEADER HOME (main-header: Compatibile al 100% con Safari iOS) ---- */
/* ========================================================================= */
header.main-header {
position: -webkit-sticky !important; /* Compatibilità Safari prefisso */
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
background: #E83F3F !important; /* Sfondo solido e definito: risolve il bug di Safari con inherit */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
padding: 10px 16px !important;
width: 100% !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 60px !important;
}
body.dark header.main-header {
background: #232526 !important; /* Sfondo scuro solido in Dark Mode per Safari */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
.header-content {
max-width: 1200px;
margin: 0 auto;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
}
/* Hamburger a sinistra */
.hamburger-menu {
flex: 0 0 40px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
position: relative !important;
}
.hamburger-btn {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
padding: 0 !important;
border-radius: 50% !important;
font-size: 1.15em !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.2) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
cursor: pointer !important;
position: relative !important;
}
.notification-dot {
position: absolute;
top: 1px;
right: 1px;
width: 9px;
height: 9px;
background-color: #ffcc33;
border: 2px solid #222;
border-radius: 50%;
box-shadow: 0 0 6px #ffcc33;
animation: pulse-dot 1.8s infinite;
pointer-events: none;
}
/* Brand al centro */
.header-brand {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 0 6px !important;
overflow: hidden !important;
}
.header-brand h1 {
font-size: 1.5em !important;
font-weight: 700 !important;
color: #fff !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
line-height: 1 !important;
}
.header-brand #pokeballIcon {
width: 28px !important;
height: 28px !important;
margin-right: 6px !important;
flex-shrink: 0 !important;
vertical-align: middle !important;
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.25));
}
/* Profilo a destra */
.header-profile-slot {
flex: 0 0 40px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
#authBtn,
#authBtn.auth-icon-btn {
position: static !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 50% !important;
background-color: #ffffff !important;
border: 2px solid rgba(255, 255, 255, 0.6) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
cursor: pointer !important;
overflow: hidden !important;
flex-shrink: 0 !important;
}
#navAvatar {
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block !important;
}
/* ========================================================= */
/* --- 3. CONTROLLI POKÉDEX (HOME: Spaziature Naturali) ---- */
/* ========================================================= */
.pokedex-controls-section {
max-width: 1200px;
margin: 16px auto 10px auto !important; /* Distacco equilibrato dall'header */
padding: 0 16px !important;
box-sizing: border-box;
}
.controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px !important;
margin-bottom: 12px !important;
}
.pokedex-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px !important;
padding: 20px 16px !important;
max-width: 1200px;
margin: auto;
}
/* ========================================================= */
/* --- 4. RESPONSIVE MOBILE (< 600px - iPhone 390px) ------- */
/* ========================================================= */
@media (max-width: 600px) {
/* Home Mobile */
header.main-header {
padding: 8px 12px !important;
}
.header-brand h1 {
font-size: 1.35em !important;
}
.header-brand #pokeballIcon {
width: 26px !important;
height: 26px !important;
margin-right: 6px !important;
}
.hamburger-menu,
.header-profile-slot {
flex: 0 0 36px;
}
.hamburger-btn {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
font-size: 1.1em !important;
}
#authBtn,
#authBtn.auth-icon-btn {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
}
.pokedex-controls-section {
margin: 12px auto 8px auto !important;
padding: 0 10px !important;
}
.controls {
gap: 8px !important;
margin-bottom: 8px !important;
}
.pokedex-grid {
grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
gap: 10px !important;
padding: 10px 8px !important;
}
/* Minigiochi Mobile: Pokéball a sx, Titolo in centro, Trofeo a dx su 1 sola riga */
header:not(.main-header) {
padding: 8px 10px !important;
gap: 8px !important;
min-height: 52px !important;
}
header:not(.main-header) #pokeballIcon,
header:not(.main-header) .home-link img,
header:not(.main-header) a:has(#pokeballIcon) {
width: 24px !important;
height: 24px !important;
flex: 0 0 24px !important;
}
header:not(.main-header) h1 {
font-size: 1.08em !important; /* Entra perfettamente "Indovina il Pokémon!" senza andare a capo */
padding: 0 4px !important;
}
header:not(.main-header) .leaderboard-toggle-btn,
header:not(.main-header) button[onclick*="Leaderboard"] {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
flex: 0 0 28px !important;
font-size: 1em !important;
}
}
.controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 15px;
}
/* 🟢 MODIFICA: Aggiunto a.button per applicare lo stile dei pulsanti ai link */
input[type="text"], select, button, a.button {
padding: 8px 12px;
border-radius: 20px;
border: 1px solid #ccc;
font-size: 1em;
cursor: pointer;
background: #fff;
color: var(--text-dark);
transition: var(--transition);
text-decoration: none; /* Rimuove sottolineatura per i link */
display: inline-block; /* Permette l'applicazione di padding e margini */
text-align: center; /* Centra il testo all'interno del pulsante */
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
/* 🟢 MODIFICA: Aggiunto body.dark a.button */
body.dark input[type="text"], body.dark select, body.dark button, body.dark a.button {
background: #555;
color: var(--text-light);
border-color: #777;
}
button:hover {
opacity: 0.8;
}
/* ========================================================================= */
/* --- FILTRI TIPI DEFINITIVI: 1 RIGA PERFETTA SU PC, SLIDER SU SMARTPHONE --- */
/* ========================================================================= */
.type-filters {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important; /* Forza categoricamente tutti i tipi su 1 sola riga */
align-items: center !important;
justify-content: center !important; /* Centrato su desktop */
gap: 4px !important; /* Gap compatto per non sforare mai su schermi laptop/PC */
width: 100% !important;
max-width: 1200px !important;
margin: 10px auto 0 auto !important;
padding: 4px 6px !important;
box-sizing: border-box !important;
overflow-x: visible !important; /* Niente barre di scorrimento su computer */
}
/* SINGOLO BOTTONE TIPO (Ottimizzato al millimetro per 18 elementi) */
.type-filters button {
flex: 1 1 auto !important; /* Si distribuiscono uniformemente per riempire la larghezza */
min-width: 0 !important; /* Permette ai bottoni di adattarsi allo spazio disponibile */
max-width: 68px !important; /* Evita che diventino troppo larghi */
padding: 5px 3px !important; /* Padding compatto ed equilibrato */
border: 1.5px solid transparent !important;
border-radius: 12px !important;
color: #fff !important;
font-weight: 600 !important;
font-size: 0.72rem !important; /* Dimensione nitida e proporzionata */
line-height: 1.1 !important;
text-align: center !important;
white-space: nowrap !important;
cursor: pointer !important;
opacity: 0.75;
transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease !important;
box-sizing: border-box !important;
}
.type-filters button:hover {
opacity: 1 !important;
transform: translateY(-2px);
}
.type-filters button.selected {
opacity: 1 !important;
border-color: #fff !important;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.75) !important;
transform: scale(1.06);
}
/* --- SMARTPHONE E TABLET PICCOLI: SLIDER TOUCH FLUIDO (Invariato) --- */
@media (max-width: 900px) {
.type-filters {
justify-content: flex-start !important; /* Allinea a sinistra per lo scorrimento touch */
overflow-x: auto !important; /* Riattiva lo slider orizzontale */
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 8px 12px !important;
gap: 8px !important;
}
.type-filters::-webkit-scrollbar {
display: none;
}
.type-filters button {
flex: 0 0 auto !important;
max-width: none !important;
font-size: 0.8rem !important;
padding: 6px 12px !important;
scroll-snap-align: start;
}
}
.count-display {
text-align: center;
padding: 10px;
font-weight: bold;
font-size: 1.1em;
margin-top: 10px;
color: var(--text-light)
}
/* --- POKEDEX GRID --- */
.pokedex-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: auto;
}
.card {
background: #f7f7f7;
border-radius: 15px;
padding: 15px;
text-align: center;
box-shadow: var(--card-shadow);
transition: var(--transition);
cursor: pointer;
position: relative;
overflow: hidden;
}
body.dark .card {
background: #333;
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.30);
}
.card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.card img {
width: 100px;
height: 100px;
margin: 10px 0;
image-rendering: pixelated;
transition: var(--transition);
}
.card h3 {
margin: 5px 0 10px;
font-size: 1.2em;
}
.pokemon-id {
position: absolute;
top: 10px;
right: 15px;
font-weight: 600;
color: #777;
font-size: 0.9em;
}
body.dark .pokemon-id {
color: #bbb;
}
.card .type {
display: inline-block;
padding: 3px 8px;
border-radius: 10px;
color: white;
font-size: 0.8em;
font-weight: bold;
margin: 2px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
position: relative;
}
/* Tooltip per l'efficacia (visibile solo al mouse hover) */
.card .type .tooltip-text {
visibility: hidden;
width: 250px;
background-color: var(--text-dark);
color: var(--text-light);
text-align: left;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 10;
bottom: 100%;
left: 50%;
margin-left: -125px; /* Centra il tooltip */
opacity: 0;
transition: opacity 0.3s;
font-weight: normal;
white-space: pre-wrap;
box-shadow: var(--card-shadow);
text-shadow: none;
}
.card .type:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
/* Leggendario Badge e Animazione */
.card.legendary {
border: 3px solid gold;
box-shadow: 0 0 10px 2px gold;
}
/* --- MODAL STYLES --- */
/* STILE BASE (Desktop) */
.modal-title-row {
display: flex;
align-items: center; /* Allineamento verticale al centro */
justify-content: center; /* Desktop: tutto centrato */
gap: 10px; /* Spazio tra stella e nome */
width: 100%;
}
.modal-title-row h2 {
margin: 0;
line-height: 1.1;
}
/* STILE MOBILE (Schermi piccoli) */
@media (max-width: 600px) {
.modal-title-row {
gap: 0; /* Rimuoviamo il gap standard per usare le percentuali precise */
}
/* 1. La Stella prende il 25% (1/4) */
.modal-title-row .fav-btn-modal {
flex: 0 0 25%; /* Larghezza fissa 25% */
max-width: 25%;
display: flex;
justify-content: center; /* Centra la stella nel suo box */
margin: 0;
font-size: 2.5rem; /* Stella bella grossa su mobile */
}
/* 2. Il Nome prende il 75% (3/4) */
.modal-title-row h2 {
flex: 0 0 75%; /* Larghezza fissa 75% */
max-width: 75%;
text-align: left; /* Testo allineato a sinistra (vicino alla stella) */
font-size: 1.8em; /* Font leggermente ridotto per nomi lunghi */
overflow-wrap: break-word; /* Evita che nomi lunghi escano fuori */
}
}
.fav-btn-modal {
background: none !important;
border: none !important;
font-size: 2rem; /* Grande e visibile */
cursor: pointer;
color: #ccc; /* Colore spento di base */
line-height: 1;
padding: 0;
margin-bottom: 5px; /* Allineamento ottico col testo */
transition: transform 0.2s, color 0.2s, text-shadow 0.2s;
}
.fav-btn-modal:hover {
transform: scale(1.15);
color: #ddd;
}
/* Quando è attivo (Preferito) */
.fav-btn-modal.active {
color: #FFD700; /* Oro */
text-shadow: 0 0 10px rgba(255, 215, 0, 0.6); /* Bagliore */
}
/* Animazione pulsazione */
.fav-btn-modal.animating {
animation: star-pulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Adattamento Dark Mode */
body.dark .fav-btn-modal {
color: #555;
}
body.dark .fav-btn-modal:hover {
color: #777;
}
body.dark .fav-btn-modal.active {
color: #FFD700;
}
.modal {
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
padding-top: 60px;
transition: opacity 0.3s, visibility 0.3s;
}
/* --- STILE UNIFICATO PER LE ETICHETTE TIPO (Erba, Fuoco, ecc.) --- */
/* Questa regola si applica ovunque ci sia la classe .type */
.type {
display: inline-block;
padding: 4px 10px; /* Un po' più di spazio interno */
border-radius: 15px; /* Bordi ben arrotondati */
color: white !important; /* FORZA il testo bianco ovunque */
font-weight: bold;
font-size: 0.85em;
margin: 2px; /* Spazio tra le etichette */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Ombra leggera sul testo */
box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Ombra esterna per dare profondità */
white-space: nowrap; /* Evita che il testo vada a capo */
line-height: 1.2; /* Altezza di linea bilanciata */
}
.modal.hidden {
opacity: 0;
visibility: hidden;
}
.modal-content {
background-color: #fff; /* Bianco solido per un miglior contrasto in tema chiaro */
margin: 5% auto;
padding: 20px;
border-radius: 15px;
width: 90%;
max-width: 900px;
box-shadow: var(--card-shadow);
position: relative;
transition: var(--transition);
}
body.dark .modal-content {
background-color: #333;
}
.close-button {
color: var(--text-dark);
float: right;
font-size: 40px;
font-weight: bold;
transition: var(--transition);
}
body.dark .close-button {
color: var(--text-light);
}
.close-button:hover,
.close-button:focus {
color: #f00;
text-decoration: none;
cursor: pointer;
}
.modal-header {
display: flex;
flex-direction: row; /* Forza la disposizione orizzontale */
flex-wrap: nowrap; /* Impedisce che il testo scenda sotto l'immagine su desktop */
align-items: center; /* Allinea verticalmente al centro (o usa flex-start per allineare in alto) */
}
.modal-header-text {
flex-grow: 1; /* Occupa tutto lo spazio rimanente a destra */
text-align: left; /* Allinea il testo a sinistra */
min-width: 0; /* Fix per evitare overflow di testo su flexbox */
}
/* Opzionale: Rimuovi i bordi dalla descrizione se vuoi un look più pulito a lato */
.description-text {
font-style: italic;
padding: 10px 0;
margin: 10px 0;
border-top: 1px solid rgba(0,0,0,0.1); /* Bordo più leggero */
border-bottom: 1px solid rgba(0,0,0,0.1); /* Bordo più leggero */
font-size: 0.95em;
line-height: 1.5;
text-align: left; /* Forza allineamento a sinistra per la descrizione */
color: var(--text-dark);
}
body.dark .modal-header {
border-color: #555;
}
.modal-img-container {
text-align: center;
position: relative;
padding: inherit; /* Mantiene il padding del contenitore */
border-radius: 10px;
flex-shrink: 0;
padding-right: 4%; /* Spazio tra immagine e testo */
padding-left: 4%; /* Spazio tra immagine e testo */
}
.modal-img-container img {
width: 150px;
height: 150px;
image-rendering: pixelated;
}
.modal-img-controls {
display: flex;
flex-direction: column; /* Mette i bottoni sopra e la select sotto */
align-items: center;
margin-top: 10px;
width: 100%;
}
/* Stile specifico per la Select (Dropdown delle forme) */
#formSelector {
width: 95%; /* Quasi tutta la larghezza */
max-width: 300px; /* Ma non esageratamente larga su PC */
margin-top: 5px; /* Un po' di spazio dai bottoni */
text-align: center;
border: 2px solid #ddd;
}
.cry-button {
background: #ffffff;
color: #222222;
padding: 8px 10px;
margin: 0 0 5px;
font-size: 16px;
cursor: pointer;
}
#modalId {
position: absolute;
top: 5px;
left: 10px;
font-size: 1.2em;
font-weight: bold;
color: #555;
}
body.dark #modalId {
color: #aaa;
}
.modal-header-text h2 {
font-size: 2.5em;
margin: 0;
}
.modal-header-text p {
margin: 5px 0;
}
/* DESCRIZIONE */
.description-text {
font-style: italic;
padding: 10px 0;
margin: 10px 0;
border-top: 1px solid var(--text-dark);
border-bottom: 1px solid var(--text-dark);
font-size: 0.95em;
line-height: 1.4;
text-align: justify;
color: var(--text-dark);
}
body.dark .description-text {
border-top: 1px solid var(--text-light);
border-bottom: 1px solid var(--text-light);
color: var(--text-light);
}
/* --- STATISTICHE e RADAR --- */
.stat-section h3, .weakness-section h3, .ability-section h3, .moves-section h3, .evolution-section h3 {
border-bottom: 2px solid #ccc;
padding-bottom: 5px;
color: #F08030;
}
body.dark .stat-section h3, body.dark .weakness-section h3, body.dark .ability-section h3, body.dark .moves-section h3, body.dark .evolution-section h3 {
border-color: #555;
color: #ffcc33;
}
.stats-container {
display: flex;
gap: 30px;
align-items: center;
}
#modalStats {
flex-grow: 1;
max-width: 50%;
}
#modalStats p {
display: flex;
justify-content: space-between;
align-items: center;
margin: 5px 0;
font-size: 1em;
}
.stat-bar {
flex-grow: 1;
height: 10px;
background: #ccc;
border-radius: 5px;
margin-left: 10px;
overflow: hidden;
}
body.dark .stat-bar {
background: #555;
}
.stat-fill {
height: 100%;
transition: width 1s ease-out;
}
/* BST Bar */
.bst-bar {
height: 15px;
margin-bottom: 10px;
}
.bst-bar .stat-fill {
border-radius: 5px;
}
/* Radar Chart */
/* style.css: Nuove regole per le etichette HTML */
.radar-chart-container {
/* Manteniamo le dimensioni e le proprietà di flex, ma aggiungiamo 'position: relative' */
width: 220px;
height: 220px;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
position: relative; /* FONDAMENTALE per posizionare i .radar-labels-overlay */
right: -6%; /* Centra il grafico */
}
.radar-svg {
width: 95%;
height: 95%;
position: absolute; /* Per sovrapporsi al contenitore */
left: 50%;
top: 50%;
transform: translate(-35%, -50%); /* Centra l'SVG perfettamente */
}
/* Nuovo contenitore per le etichette in sovraimpressione */
.radar-labels-overlay {
position: absolute;
width: 100%;
height: 100%;
left: 50%; /* Punto di riferimento orizzontale (uguale a SVG) */
top: 50%; /* Punto di riferimento verticale (uguale a SVG) */
pointer-events: none;
/* MODIFICA FONDAMENTALE: Traslazione IDENTICA all'SVG */
transform: translate(-35%, -50%);
}
/* Stile per ogni singola etichetta HTML */
.radar-label-item {
position: absolute; /* Posizionamento assoluto all'interno di .radar-labels-overlay */
font-size: 10px; /* Possiamo aumentarlo un po' di più qui */
font-weight: bold; /* Per renderlo più leggibile */
color: var(--text-dark); /* Usa la variabile del tuo tema */
white-space: nowrap; /* Evita che il testo vada a capo */
/* 'transform: translate' viene gestito direttamente in JS per un posizionamento più fine */
}
.radar-base {
fill: none;
stroke: #aaa;
stroke-width: 1;
}
body.dark .radar-base {
stroke: #777;
}
.radar-data {
fill: rgba(240, 128, 48, 0.4); /* Arancione Pokémon (F08030) */
stroke: #F08030;
stroke-width: 2;
transition: all 1s ease-out;
}
.radar-label {
font-size: 8px; /* MODIFICA: Aumentato da 5px per migliorare la leggibilità */
fill: var(--text-dark);
}
body.dark .radar-label {
fill: var(--text-light);
}
/* --- DEBOLEZZE --- */
.weakness-section strong {
display: block;
margin-top: 10px;
margin-bottom: 5px;
}
.weakness-container {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 10px;
}
.weakness-container .type {
padding: 4px 10px;
border-radius: 15px;
color: white;
font-size: 0.9em;
font-weight: bold;
display: flex;
align-items: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
.multiplier {
margin-left: 5px;
background: rgba(0, 0, 0, 0.2);
padding: 2px 5px;
border-radius: 10px;
font-size: 0.9em;
}
/* --- ABILITÀ --- */
.ability-item {
margin-bottom: 15px;
padding: 10px;
border-left: 5px solid #6890F0;
background: rgba(104, 144, 240, 0.1);
border-radius: 5px;
}
body.dark .ability-item {
border-left-color: #A0C0E0;
background: rgba(160, 192, 224, 0.1);
}
.ability-item h4 {
margin: 0 0 5px;
font-size: 1.1em;
display: flex;
align-items: center;
}
.ability-hidden {
background: #C03028;
color: white;
padding: 2px 6px;
border-radius: 10px;
font-size: 0.7em;
font-weight: normal;
margin-left: 10px;
}
/* --- MOSSE (Tabella Compatta con Scroll) --- */
/* --- HEADER MOSSE CON SELETTORE --- */
.moves-header-row {
display: flex;
justify-content: space-between; /* Titolo a sx, Select a dx */
align-items: center;
border-bottom: 2px solid #ccc;
padding-bottom: 5px;
margin-bottom: 10px;
}
body.dark .moves-header-row {
border-color: #555;
}
/* Rimuoviamo il bordo dal vecchio h3 perché ora c'è il container */
.moves-section h3 {
border-bottom: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
margin-top: 0;
}
/* Stile del selettore generazioni */
#moveGenSelector {
padding: 4px 8px;
font-size: 0.85em;
border-radius: 8px;
border: 1px solid #aaa;
background-color: #f9f9f9;
cursor: pointer;
max-width: 180px; /* Non troppo largo su mobile */
}
body.dark #moveGenSelector {
background-color: #444;
color: #fff;
border-color: #666;
}
/* 1. Contenitore: Definisce l'area scorrevole */
#modalMoves {
max-height: 250px; /* Altezza massima fissa (la tabella non supererà mai questa altezza) */
overflow-y: auto; /* Aggiunge lo scroll verticale se serve */
border: 1px solid #ddd; /* Bordo sottile attorno all'area */
border-radius: 8px; /* Angoli arrotondati */
margin-top: 10px;
background-color: #fff; /* Sfondo bianco per coprire il contenuto sotto */
}
/* 2. Tabella: Testo più piccolo */
#modalMoves table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 0.75em; /* Testo molto più piccolo (era 0.9em) */
}
/* 3. Celle: Meno spazio interno (Padding ridotto) */
#modalMoves th, #modalMoves td {
padding: 6px 8px; /* Spazio ridotto: 6px sopra/sotto, 8px lati (era 10px) */
border-bottom: 1px solid #eee;
}
/* 4. Intestazione "Sticky": Resta ferma in alto mentre scorri */
#modalMoves th {
position: sticky; /* Fissa l'intestazione */
top: 0;
background-color: #f4f4f4; /* Colore di sfondo intestazione */
z-index: 2; /* Sta sopra al contenuto che scorre */
font-weight: 700;
box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Piccola ombra per staccarla */
}
/* --- Supporto DARK MODE --- */
body.dark #modalMoves {
background-color: #333;
border-color: #555;
}
body.dark #modalMoves th,
body.dark #modalMoves td {
border-bottom: 1px solid #555;
}
body.dark #modalMoves th {
background-color: #444; /* Intestazione scura */
color: var(--text-light);
}
/* --- EVOLUZIONE --- */
/* --- STILE AGGIUNTIVO PER L'EVOLUZIONE STABILE (Livello) --- */
/* --- EVOLUZIONE (Aggiunta per la struttura semplice del JS) --- */
.evo-stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 8px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
background-color: #f7f7f7;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
width: 100px;
border: 1px solid #ddd;
flex-shrink: 0;
}
body.dark .evo-stage {
background-color: #444;
border-color: #555;
}
.evo-stage:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.evo-stage img {
width: 60px;
height: 60px;
}
.evo-stage p {
margin: 0;
font-size: 0.9em;
text-align: center;
}
.evo-arrow {
font-size: 2em;
color: #F08030;
margin: 0 5px;
}
/* La sezione evolution-chain deve essere un flex-wrap per i rami */
.evolution-chain {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 15px;
padding: 10px 0;
}
/* Contenitore per le evoluzioni successive (i rami multipli) */
.evolution-branch-container {
display: flex;
flex-direction: column;
gap: 10px;
padding-left: 20px;
/* Linea verticale per rappresentare la struttura ad albero */
border-left: 2px solid #ddd;
}
body.dark .evolution-branch-container {
border-color: #555;
}
/* Stile per un intero step (freccia + Pokémon) */
.evolution-step-and-branch {
display: flex;
align-items: center; /* Allinea freccia e Pokémon */
gap: 10px;
}
/* Stile per la freccia e la condizione di evoluzione */
.evolution-branch {
display: flex;
align-items: center;
margin: 0;
flex-shrink: 0; /* Impedisce alla freccia di rimpicciolirsi */
}
/* CLASSE PRINCIPALE: L'etichetta del Livello/Condizione */
.evolution-condition {
font-size: 0.8em;
font-weight: 500;
color: var(--text-dark);
background-color: #f0f0f0;
padding: 3px 8px;
border-radius: 5px;
border: 1px solid #ddd;
white-space: nowrap;
}
body.dark .evolution-condition {
color: var(--text-light);
background-color: #3b3b3b;
border-color: #555;
}
.evolution-condition .arrow {
margin-right: 5px;
font-weight: 900;
font-size: 1.2em;
color: #F08030; /* Colore Pokéball */
}
/* Stile per la Card Pokémon nella Catena */
.evolution-pokemon-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 8px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
background-color: #fff;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
width: 120px; /* Larghezza fissa */
border: 1px solid #ddd;
flex-shrink: 0;
text-align: center;
}
/* ... (altri stili per .evolution-pokemon-card:hover, .evolution-img-wrapper, ecc.) ... */
/* --- LOADER E TRANSITION --- */
#loadingOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--text-dark);
z-index: 200;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
transition: opacity 1s ease-out;
}
#loadingOverlay.hidden {
opacity: 0;
visibility: hidden;
}
#loadingOverlay.loaded {
animation: pokeball-open 1s forwards;
}
/* --------------------------------- */
/* Overlay di Caricamento (Loader Minimalista) */
/* --------------------------------- */
#loadingOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8); /* Sfondo più scuro per eleganza */
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
/* Spinner Minimalista */
.pokeball-loader {
width: 60px;
height: 60px;
border: 8px solid rgba(255, 255, 255, 0.3); /* Base semitrasparente */
border-top: 8px solid #E83F3F; /* La parte animata, Rosso Pokédex */
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ⚠️ Rimuovi tutti i vecchi stili per .pokeball-top, .pokeball-bottom e .pokeball-center */
/* Il codice HTML in index.html funziona ancora con questa modifica CSS. */
/* 💫 TRANSITION POKEBALL */
#pokeballTransition {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
z-index: 150;
display: none;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.4s ease-out;
}
#pokeballTransition.active {
display: flex;
opacity: 1;
}
.pokeball-anim {
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(to bottom, #ff3838 50%, #fff 50%);
border: 8px solid #333;
position: relative;
box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);
animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(+2px, 0, 0); }
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(+4px, 0, 0); }
}
.pokeball-center-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
border: 5px solid #333;
z-index: 10;
box-shadow: 0 0 0 8px #fff;
transition: all 0.5s;
}
#pokeballTransition.open .pokeball-anim {
background: none; /* Rimuove lo sfondo per mostrare l'apertura */
}
#pokeballTransition.open .pokeball-center-circle {
box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0); /* Animazione di apertura */
opacity: 0;
}
/* 🟢 NUOVO STILE: Per il link "Indovina il Pokémon" (da usare con la classe .game-link) */
.game-link {
margin-right: 10px; /* Spaziatura a destra per separarlo dall'input */
}
/* --- NUOVO STILE MODALE MINIGIOCHI --- */
.minigames-content {
text-align: center;
max-width: 800px; /* Più larga per far stare le card */
}
.minigames-header h2 {
color: #E83F3F;
margin-bottom: 5px;
}
.minigames-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 25px;
padding: 10px;
}
/* Stile delle Card dei Giochi */
.minigame-card {
background: #f8f9fa;
border: 2px solid #e0e0e0;
border-radius: 15px;
padding: 20px;
text-decoration: none;
color: var(--text-dark);
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.minigame-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
border-color: #E83F3F;
background: #fff;
}
.minigame-icon {
font-size: 3em;
margin-bottom: 10px;
}
.minigame-card h3 {
margin: 5px 0;
font-size: 1.1em;
}
.minigame-card p {
font-size: 0.85em;
color: #666;
margin: 0;
}
/* Adattamento Dark Mode */
body.dark .minigame-card {
background: #444;
border-color: #555;
color: var(--text-light);
}
body.dark .minigame-card:hover {
background: #555;
border-color: #ffcc33; /* Giallo elettrico in dark mode */
}
body.dark .minigame-card p {
color: #aaa;
}
/* --- NUOVO STILE EVOLUZIONI AD ALBERO (PER EEVEE) --- */
/* Contenitore principale flessibile */
.evolution-tree {
display: flex;
align-items: center; /* Centra verticalmente Eevee rispetto alle evoluzioni */
justify-content: center;
gap: 20px;
width: 100%;
overflow-x: auto;
padding: 10px;
}
/* --- SISTEMA EVOLUTIVO UNIVERSALE (Fix Lineare vs Ramificato) --- */
/* Contenitore principale */
.evolution-flex-container {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
width: 100%;
overflow-x: auto;
}
/* Una riga orizzontale (usata per catene lineari come Bulbasaur) */
.evo-row {
display: flex;
align-items: center;
gap: 10px; /* Spazio tra Card e Freccia */
}
/* Una colonna verticale (usata SOLO per i bivi come Gloom) */
.evo-col {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px; /* Spazio verticale tra i rami */
position: relative;
margin-left: 10px;
/* Linea decorativa per raggruppare i rami */
border-left: 2px solid #ccc;
padding-left: 10px;
border-radius: 4px 0 0 4px;
}
body.dark .evo-col {
border-color: #555;
}
/* Wrapper per la freccia e le condizioni */
.evo-arrow-wrapper {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 5px;
min-width: 60px;
}
.evo-arrow-icon {
font-size: 1.5em;
color: #E83F3F;
font-weight: bold;
}
.evo-condition-badge {
font-size: 0.7em;
background: #f4f4f4;
padding: 2px 6px;
border-radius: 8px;
border: 1px solid #ddd;
color: #555;
text-align: center;
margin-bottom: 2px;
max-width: 90px;
white-space: normal;
line-height: 1.1;
}
body.dark .evo-condition-badge {
background: #333;
border-color: #555;
color: #eee;
}
/* Card Pokemon */
.evo-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #eee;
border-radius: 10px;
padding: 10px;
width: 100px;
height: 110px; /* Altezza fissa per allineamento */
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
cursor: pointer;
transition: transform 0.2s;
position: relative;
z-index: 2;
}
.evo-card:hover {
transform: translateY(-3px);
border-color: #E83F3F;
}
.evo-card img {
width: 60px;
height: 60px;
object-fit: contain;
}
.evo-card span {
font-size: 0.8em;
font-weight: bold;
margin-top: 5px;
text-align: center;
}
body.dark .evo-card {
background: #333;
border-color: #555;
}
.evo-card.current {
border: 2px solid #E83F3F;
background: rgba(232, 63, 63, 0.05);
}
/* --- EEVEE GALAXY (Versione Statica ed Espansa) --- */
.eevee-container {
position: relative;
width: 800px; /* AUMENTATO: Da 700 a 800px */
height: 800px;
margin: 20px auto;
border-radius: 50%;
}
/* Centro (Eevee) - STILE RETTANGOLARE FISSO */
.eevee-center {
position: absolute;
top: 50%;
left: 50%;
/* Usa solo translate per centrarlo, NIENTE scale */
transform: translate(-50%, -50%) !important;
z-index: 20;
/* Stile identico alle altre card */
border-radius: 15px !important; /* Rettangolo arrotondato, non cerchio */
width: 100px !important; /* Stessa larghezza delle altre */
background: #fff;
/* Alone rosso statico (senza pulsazioni) */
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25) !important;
/* BLOCCA QUALSIASI ANIMAZIONE */
transition: none !important;
animation: none !important;
}
/* BLOCCA L'EFFETTO HOVER SUL CENTRO */
/* Questo impedisce che si muova quando ci passi sopra */
.eevee-center:hover {
transform: translate(-50%, -50%) !important; /* Forza la posizione fissa */
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25) !important; /* Mantiene l'ombra fissa */
}
/* Raggi (Linee interne) */
.eevee-spoke {
position: absolute;
top: 50%;
left: 50%;
height: 2px;
background-color: #ccc;
transform-origin: 0 50%;
z-index: 1;
pointer-events: none;
}
/* Linee Esterne (Perimetro) */
.eevee-outer-line {
position: absolute;
height: 2px;
background-color: #ccc;
transform-origin: 0 50%;
z-index: 1;
pointer-events: none;
}
body.dark .eevee-spoke,
body.dark .eevee-outer-line {
background-color: #666;
}
/* TESTO CONDIZIONI */
.eevee-condition-text {
position: absolute;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 5px 10px;
border-radius: 8px;
font-size: 0.8em; /* Un filo più grande per leggibilità */
font-weight: bold;
color: #555;
border: 1px solid #ddd;
z-index: 15;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
max-width: 140px;
line-height: 1.2;
}
body.dark .eevee-condition-text {
background-color: #333;
color: #eee;
border-color: #555;
}
/* Card Evoluzioni (Pianeti) */
.eevee-planet {
position: absolute;
transform: translate(-50%, -50%);
z-index: 10;
width: 110px !important; /* Leggermente più grandi */
background: #fff;
transition: none !important; /* BLOCCA animazioni globali */
animation: none !important;
}
/* ⛔️ BLOCCO HOVER: Sovrascrive l'effetto "salto" globale delle card */
.eevee-planet:hover {
transform: translate(-50%, -50%) !important; /* Rimane fermo */
box-shadow: var(--card-shadow) !important; /* Mantiene l'ombra base */
}
body.dark .eevee-planet {
background: #333;
}
/* --- BOTTONI AFFIANCATI NEL MODALE (Mappa + Verso) --- */
.modal-actions {
display: flex;
flex-direction: row; /* Forza l'allineamento orizzontale */
justify-content: center; /* Li centra */
gap: 10px; /* Spazio tra i due tasti */
width: 100%;
margin-top: 5px;
box-sizing: border-box;
}
/* Stile comune per i due tasti dentro questo gruppo */
.modal-actions button {
flex: 1; /* Si dividono lo spazio al 50% ciascuno */
max-width: 180px; /* Evita che diventino troppo larghi su PC */
margin: 0 !important; /* Rimuove vecchi margini che disturbano */
display: flex;
align-items: center;
justify-content: center;
height: 40px; /* Altezza uniforme */
white-space: nowrap; /* Evita che il testo vada a capo male */
}
/* Mobile fix specifico (per sicurezza) */
@media (max-width: 768px) {
.modal-actions {
padding: 0; /* Rimuove padding extra su mobile se serve */
}
}
/* Su mobile, se ci sono troppe evoluzioni, riduciamo un po' */
@media (max-width: 768px) {
.evolution-tree {
flex-direction: column; /* Su mobile torna verticale se preferisci, o lascia row con scroll */
align-items: flex-start;
}
.tree-branches {
border-left: none;
padding-left: 0;
margin-top: 10px;
width: 100%;
}
.tree-branch-item::before {
display: none;
}
.tree-branch-item {
flex-direction: row;
justify-content: flex-start;
width: 100%;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
}
/* Specifica per rendere il box login più stretto rispetto al dettaglio Pokemon */
.auth-content {
max-width: 400px !important;
padding: 30px;
text-align: center;
}
/* TABS (Accedi / Registrati in alto) */
.auth-tabs {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 25px;
border-bottom: 2px solid #eee;
}
.auth-tab {
background: none;
border: none;
border-bottom: 3px solid transparent;
font-size: 1.1em;
font-weight: bold;
color: #888;
padding: 10px 20px;
cursor: pointer;
border-radius: 0; /* Rimuove lo stile a pillola standard */
}
.auth-tab.active {
color: #E83F3F;
border-bottom-color: #E83F3F;
}
body.dark .auth-tab.active {
color: #ff6b6b;
border-bottom-color: #ff6b6b;
}
/* INPUT GROUPS */
.input-group-auth {
margin-bottom: 15px;
text-align: left;
}
.input-group-auth label {
display: block;
font-size: 0.9em;
margin-bottom: 5px;
font-weight: 600;
color: var(--text-dark);
}
.input-group-auth input {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
box-sizing: border-box;
font-size: 1em;
background: #fff;
color: #333;
}
.input-group-auth input:focus {
border-color: #E83F3F;
outline: none;
}
/* BOTTONI FULL WIDTH */
.full-width {
width: 100%;
margin-top: 10px;
background-color: #E83F3F !important;
color: white !important;
font-size: 1.1em;
padding: 12px;
border: none;
}
.full-width:hover {
background-color: #d63030;
opacity: 1;
}
/* VISIBILITÀ FORM */
.auth-form.hidden {
display: none;
}
.auth-footer {
font-size: 0.9em;
margin-top: 15px;
color: #666;
}
.auth-footer a {
color: #E83F3F;
text-decoration: none;
font-weight: bold;
}
/* DARK MODE FIXES */
body.dark .auth-content {
background-color: #333;
}
body.dark .auth-tabs {
border-bottom-color: #555;
}
body.dark .input-group-auth label {
color: var(--text-light);
}
body.dark .input-group-auth input {
background: #444;
border-color: #555;
color: white;
}
body.dark .auth-footer {
color: #aaa;
}
body.dark .auth-footer a {
color: #ff6b6b;
}
/* --- TASTO LOGIN (ICONA IN ALTO A DESTRA) --- */
/* Assicuriamo che l'header sia il punto di riferimento */
header {
position: sticky; /* Era già sticky, ma va bene */
/* position: relative; <-- Se togli sticky, serve relative */
}
#authBtn.auth-icon-btn {
top: 15px; /* Distanza dall'alto */
right: 20px; /* Distanza da destra */
width: 45px; /* Larghezza fissa */
height: 45px; /* Altezza fissa */
border-radius: 50%; /* Perfettamente rotondo */
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff; /* Sfondo bianco */
color: #E83F3F; /* Icona Rossa */
border: 2px solid rgba(0,0,0,0.1);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
z-index: 20; /* Sta sopra a tutto */
}
#authBtn.auth-icon-btn svg {
width: 28px;
height: 28px;
}
#authBtn.auth-icon-btn:hover {
transform: scale(1.1); /* Si ingrandisce un po' al passaggio */
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
background-color: #fff;
}
/* Adattamento Dark Mode */
body.dark #authBtn.auth-icon-btn {
background-color: #444 !important;
color: #fff !important;
border-color: #666 !important;
}
/* Mobile Fix: Se lo schermo è molto piccolo, spostiamolo un po' o riduciamolo */
@media (max-width: 400px) {
#authBtn.auth-icon-btn {
width: 35px;
height: 35px;
top: 10px;
right: 10px;
}
#authBtn.auth-icon-btn svg {
width: 20px;
height: 20px;
}
}
/* --- MODALE PROFILO (STILE DARK / PIXEL) --- */
/* Contenitore più compatto e scuro */
.profile-content {
background-color: #1a1a1a !important; /* Sfondo scuro come nello screen */
color: #fff;
max-width: 450px;
border: 2px solid #444;
border-radius: 10px;
padding: 20px;
}
/* Layout Orizzontale (Avatar a Sx, Resto a Dx) */
.profile-layout {
display: flex;
align-items: center;
gap: 20px;
justify-content: center;
}
/* Sezione Avatar */
.profile-avatar-section {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.2s;
}
.profile-avatar-section:hover {
transform: scale(1.05);
}
#userAvatar {
width: 96px; /* Dimensione sprite standard */
height: 96px;
image-rendering: pixelated; /* Fondamentale per la pixel art */
object-fit: contain;
}
.avatar-hint {
font-size: 0.7em;
color: #888;
margin-top: 5px;
}
/* Sezione Info (Nome + Bottoni) */
.profile-info-section {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
#userNameDisplay {
font-size: 1.8em;
margin: 0 0 15px 0;
text-shadow: 1px 1px 0px #000;
font-family: 'Verdana', sans-serif; /* Font più tecnico */
text-align: center;
}
/* Contenitore Bottoni */
.profile-buttons {
display: flex;
gap: 10px;
}
/* Stile Bottoni "Showdown" Style */
.profile-action-btn {
background: linear-gradient(to bottom, #4a4a4a, #2a2a2a);
border: 1px solid #000;
color: #ddd;
padding: 6px 12px;
font-size: 0.9em;
border-radius: 4px;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 5px rgba(0,0,0,0.5);
transition: all 0.2s;
text-align: center;
}
.profile-action-btn:hover {
background: linear-gradient(to bottom, #5a5a5a, #3a3a3a);
color: #fff;
}
.profile-action-btn.logout:hover {
background: linear-gradient(to bottom, #8a2a2a, #5a0000); /* Rosso scuro all'hover per logout */
border-color: #f00;
}
/* Mobile Responsive */
@media (max-width: 480px) {
.profile-layout {
flex-direction: column;
text-align: center;
}
#userNameDisplay {
text-align: center;
}
.profile-buttons {
justify-content: center;
}
}
/* --- NUOVO STILE PROFILO (Orizzontale & Pulito) --- */
/* 1. Contenitore Superiore (Avatar + Nome) */
.profile-layout-new {
display: flex;
flex-direction: column; /* Impila verticalmente: Immagine sopra, Nome sotto */
align-items: center; /* Centra tutto orizzontalmente */
justify-content: center;
gap: 15px;
text-align: center; /* Testo centrato */
padding: 10px;
}
/* 2. Avatar */
#userAvatar {
width: 120px !important;
height: 120px !important;
object-fit: contain;
cursor: pointer;
transition: transform 0.2s;
margin: 0 auto; /* Centratura extra */
}
/* 3. Sezione Info (Nome e Bottoni) */
.profile-info-side {
display: flex;
flex-direction: column;
align-items: center; /* Centra i bottoni e il nome */
width: 100%;
}
/* 4. Nome Utente */
#userNameDisplay {
color: #E83F3F !important;
font-size: 2em;
margin: 0 0 10px 0; /* Spazio sotto il nome */
font-family: 'Poppins', sans-serif;
}
/* 5. Bottoni (Centrati) */
.profile-actions-new {
display: flex;
justify-content: center; /* Centra i bottoni */
gap: 10px;
flex-wrap: wrap;
}
.profile-actions-new button {
margin: 0 !important; /* Rimuove margini extra */
font-size: 0.9em;
padding: 8px 12px;
}
/* --- STILE MODIFICA NOME INLINE --- */
#profileEditMode {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
#editNameInput {
padding: 10px;
font-size: 1.2em;
border: 2px solid #ccc;
border-radius: 8px;
width: 100%;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
font-weight: bold;
color: #333;
}
#editNameInput:focus {
border-color: #E83F3F; /* Rosso Pokédex */
outline: none;
}
/* Adattamento Dark Mode */
body.dark #editNameInput {
background-color: #444;
color: white;
border-color: #666;
}
body.dark #editNameInput:focus {
border-color: #ff6b6b;
}
/* Nasconde eventuali residui della vecchia scritta "clicca per cambiare" se presenti */
.edit-hint {
display: none !important;
}
/* --- ADATTAMENTO MOBILE (PERFETTO) --- */
@media (max-width: 600px) {
/* 1. Il contenitore diventa verticale */
.profile-layout-new {
flex-direction: column; /* Impila gli elementi */
text-align: center; /* Centra il testo */
gap: 15px; /* Riduce lo spazio tra avatar e nome */
padding: 20px 10px;
}
/* 2. Lato info occupa tutta la larghezza */
.profile-info-side {
width: 100%;
align-items: center;
}
/* 3. Avatar leggermente più piccolo per non occupare tutto lo schermo */
#userAvatar {
width: 100px !important;
height: 100px !important;
margin-bottom: 5px;
}
/* 4. Nome leggermente ridotto per evitare che vada a capo male */
#userNameDisplay {
font-size: 1.6em;
margin-bottom: 10px;
}
/* 5. Bottoni: Diventano grandi e impilati (più facili da toccare col dito) */
.profile-actions-new {
flex-direction: column; /* Bottoni uno sotto l'altro */
width: 100%; /* Larghezza piena */
gap: 10px;
}
.profile-actions-new button {
width: 100%; /* Il bottone riempie tutto lo spazio orizzontale */
padding: 12px; /* Più "cicciotti" per il touch */
font-size: 1em;
justify-content: center;
}
}
@media (max-width: 600px) {
/* 1. Lasciamo un po' più di spazio verticale al modale */
#profileModal .modal-content {
padding: 10px 10px !important;
margin: 2vh auto !important;
max-height: 96vh !important;
box-sizing: border-box !important;
}
/* 2. Riduciamo leggermente gli spazi sopra per dare priorità ai preferiti */
.profile-layout-new {
gap: 4px !important;
padding: 0 !important;
}
#userAvatar {
width: 70px !important;
height: 70px !important;
}
#userNameDisplay {
font-size: 1.2em !important;
}
/* Mettere i bottoni profilo affiancati sulla stessa linea su mobile */
.profile-actions-new {
flex-direction: row !important;
width: 100% !important;
gap: 8px !important;
}
.profile-actions-new button {
width: auto !important;
padding: 6px 8px !important;
font-size: 0.85em !important;
}
/* 3. Sezione Preferiti: portiamo l'altezza a 250px così la griglia 2x2 entra comodamente per intero */
.profile-favorites-section {
margin-top: 6px !important;
padding-top: 6px !important;
}
.profile-favorites-section h3 {
margin-bottom: 4px !important;
font-size: 0.9em !important;
}
.fav-scroll-container {
grid-template-columns: repeat(2, 1fr) !important;
max-height: 250px !important;
overflow-y: auto !important;
gap: 6px !important;
padding-bottom: 5px !important;
}
.fav-mini-card {
padding: 4px !important;
aspect-ratio: 1 / 1.02 !important;
}
}
/* Classe per nascondere elementi */
.hidden {
display: none !important;
}
/* Pulsante Chiudi (X) */
.close-btn {
position: absolute;
top: 10px; right: 15px;
font-size: 24px;
cursor: pointer;
font-weight: bold;
}
/* Avatar */
#userAvatar {
width: 80px;
height: 80px;
cursor: pointer;
border: 2px solid #ddd;
border-radius: 50%;
transition: transform 0.2s;
}
#userAvatar:hover {
transform: scale(1.1);
border-color: #ffcc00; /* Giallo Pokemon */
}
/* Griglia Selezione Avatar */
.avatar-grid {
display: grid;
/* Usa auto-fill invece di 4 colonne fisse, così si adatta meglio */
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 10px;
max-height: 300px;
overflow-y: auto;
margin-top: 15px;
padding: 5px; /* Spazio interno per non tagliare le ombre */
}
.avatar-option {
width: 100%;
max-width: 80px; /* ✅ AGGIUNTO: Impedisce che diventino giganti */
height: auto; /* Mantiene le proporzioni */
cursor: pointer;
border-radius: 5px;
margin: 0 auto; /* Centra l'immagine nella sua cella */
image-rendering: pixelated; /* Mantiene la nitidezza retro */
}
.avatar-option:hover {
background-color: #f0f0f0;
}
/* --- MOBILE RESPONSIVE (Versione Galassia Mini) --- */
@media (max-width: 850px) {
/* Il contenitore mantiene la sua struttura interna ma viene "zoomato indietro" */
.eevee-container {
/* Calcolo: 380px (mobile) / 800px (desktop) = ~0.47 */
transform: scale(0.45);
transform-origin: top center; /* Scala partendo dall'alto */
/* Fix per centrare dopo lo scale */
margin: 0 auto;
/* Lo scale lascia spazio vuoto sotto, lo rimuoviamo con margine negativo */
margin-bottom: -450px;
/* Assicuriamoci che non venga tagliato a sinistra */
left: 0;
right: 0;
}
/* Ingrandiamo un po' i testi perché non diventino illeggibili rimpicciolendo */
.eevee-condition-text {
font-size: 1.8em !important; /* Molto più grande per compensare lo zoom out */
padding: 5px 15px;
border-width: 2px;
font-weight: 900;
}
/* Ingrandiamo un po' le card dei Pokemon per compensare */
.eevee-planet, .eevee-center {
box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
/* Aumentiamo leggermente il font dentro le card */
.eevee-planet span, .eevee-center span {
font-size: 1.2em;
font-weight: bold;
}
}
@media (max-width: 600px) {
/* ✅ CORREZIONE 1: Riduciamo il padding dell'header per farlo più compatto */
header {
padding: 10px;
position: relative;
}
.controls {
/* Permette ai pulsanti di stare affiancati e avvolgersi */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px; /* Aggiungi un piccolo gap tra gli elementi per mobile */
margin-bottom: 5px;
align-items: center;
}
/* ✅ ATTIVAZIONE DEL DIVISORE SOLO SU MOBILE */
.controls .break {
display: block; /* Rendiamo visibile l'elemento */
flex-basis: 100%; /* Forza l'andata a capo */
}
input[type="text"], select, button, a.button {
/* ✅ NUOVE REGOLE: Controlli principali più snelli, leggibili e dinamici */
flex-shrink: 1;
flex-grow: 1;
box-sizing: border-box;
margin-bottom: 5px;
padding: 8px 10px;
font-size: 1em;
}
/* Trova o aggiungi questa sezione nel CSS */
@media (max-width: 600px) {
.modal-header-text h2 {
/* 8vw = grandezza basata sulla larghezza schermo.
1.5rem = dimensione minima (non diventerà mai più piccolo di così).
2.5rem = dimensione massima (non diventerà mai più grande di così).
*/
font-size: clamp(1.5rem, 8vw, 2.5rem) !important;
line-height: 1.2;
margin: 10px 0;
word-wrap: break-word; /* Forza il testo ad andare a capo se necessario */
hyphens: auto; /* Opzionale: aggiunge il trattino se taglia una parola */
}
/* Sistemiamo anche la riga che contiene Stella + Nome per dare più respiro */
.modal-title-row {
align-items: center;
text-align: center;
gap: 5px;
}
}
@media (max-width: 600px) {
/* CONTENITORE FILTRI TIPI - VERSIONE SLIDER CORRETTA */
.type-filters {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory;
gap: 10px;
/* Assicurati che non ci siano allineamenti che centrano il contenuto inizialmente */
justify-content: flex-start !important;
padding-top: 10px !important;
padding-left: 10px !important;
padding-right: 10px !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
/* SINGOLO BOTTONE TIPO - FONT AUMENTATO */
.type-filters button {
/* Manteniamo il calcolo per vederne 4, ma aumentiamo il font */
flex: 0 0 calc((100% - 40px) / 4) !important;
min-width: calc((100% - 40px) / 4) !important;
scroll-snap-align: start;
/* AUMENTO FONT: Da 0.65rem a 0.8rem per maggiore chiarezza */
font-size: 0.8rem !important;
font-weight: 700 !important; /* Testo più marcato */
text-transform: capitalize;
border-radius: 12px;
display: flex !important;
justify-content: center;
align-items: center;
white-space: nowrap;
box-sizing: border-box !important;
}
}
.pokedex-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* Modale */
.modal-content {
width: 85 vw; /* Usa il 85% della larghezza viewport */
margin: 20px auto;
padding: 10px;
}
.modal-header {
flex-direction: column; /* Su mobile torna verticale */
text-align: center;
}
.modal-header-text {
text-align: center; /* Su mobile centra il testo */
width: 100%;
}
.description-text {
text-align: justify; /* Su mobile giustificato o center */
}
.modal-img-container {
width: 100%;
}
.modal-img-container img {
width: 120px;
height: 120px;
}
#modalStats {
max-width: 100%;
order: 2; /* Sposta le barre sotto il grafico su mobile */
}
.stats-container {
flex-direction: column;
align-items: center;
gap: 15px;
}
.radar-chart-container {
width: 200px;
height: 200px;
order: 1;
left: -10%; /* Centra il grafico */
}
/* Evoluzione (Verticale) */
.evolution-chain {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.evolution-step-and-branch {
flex-direction: column;
align-items: flex-start;
}
.evolution-branch-container {
flex-direction: column;
margin-left: 15px;
border-left: 2px solid #ccc;
padding-left: 10px;
}
body.dark .evolution-branch-container {
border-color: #555;
}
.evolution-wrapper {
flex-direction: row;
align-items: center;
gap: 10px;
}
.evolution-arrow {
flex-direction: column;
align-items: flex-start;
}
.arrow-icon {
display: none; /* Nasconde l'icona freccia a lato */
}
.evolution-requirement-arrow {
max-width: none;
white-space: normal;
text-align: left;
}
/* --- FIX TABELLA MOSSE SU MOBILE --- */
#modalMoves {
max-height: 40vh; /* Invece di pixel fissi, usa il 40% dell'altezza dello schermo */
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* Rende lo scroll fluido su iPhone */
margin-bottom: 20px; /* Spazio extra sotto per sicurezza */
padding-bottom: 20px; /* Padding interno per non tagliare l'ultima riga */
}
/* Assicuriamoci che la tabella interna non sia troppo larga */
#modalMoves table {
width: 100%;
min-width: 0; /* Evita che forzi la larghezza */
}
/* 3. Riduci il padding delle celle per guadagnare spazio */
#modalMoves th, #modalMoves td {
padding: 8px 4px; /* Meno spazio laterale */
white-space: nowrap; /* Evita che il testo vada a capo bruscamente */
}
/* 1. CENTRA LA CATENA EVOLUTIVA (Verticale) */
.evolution-chain {
flex-direction: column; /* Dispone in colonna */
align-items: center; /* <--- QUESTO è il comando che centra le foto */
width: 100%; /* Assicura che usi tutto lo spazio per potersi centrare */
}
/* 2. CENTRA FRECCE E TESTO LIVELLO */
.evo-arrow-container {
display: flex;
flex-direction: column;
align-items: center; /* Centra la freccia e la scritta "Liv. X" */
width: 100%;
}
/* 3. CENTRA IMMAGINE PRINCIPALE E BOTTONI */
.modal-img-container {
display: flex; /* Attiva Flexbox */
flex-direction: column;
align-items: center; /* Centra l'immagine, i toggle e i bottoni */
width: 100%;
}
.evo-arrow {
transform: rotate(90deg);
display: inline-block; /* Necessario per applicare la rotazione */
margin: 5px 0; /* Un po' di spazio sopra e sotto */
}
/* Aggiungi questo alla fine del tuo style.css */
@media (max-width: 600px) {
/* Trasforma la griglia da 1 colonna a 2 colonne */
.minigames-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px; /* Riduce lo spazio tra le carte */
}
/* Riduci lo spazio interno delle carte */
.minigame-card {
padding: 15px 10px; /* Meno padding verticale e orizzontale */
display: flex;
flex-direction: column;
justify-content: center;
}
/* Rimpicciolisci un po' l'icona */
.minigame-icon {
font-size: 2rem; /* Era probabilmente più grande */
margin-bottom: 5px;
}
/* Riduci il testo del titolo */
.minigame-card h3 {
font-size: 1rem;
margin-bottom: 2px;
}
/* Riduci o nascondi la descrizione su mobile */
.minigame-card p {
font-size: 0.75rem;
line-height: 1.2;
margin-top: 0;
}
}
}
/* Stili per l'immagine da indovinare */
#pokemonImage {
width: 250px;
height: 250px;
margin: 20px auto;
display: block;
/* Effetto principale: immagine scura e sfocata */
filter: brightness(0) blur(20px);
transition: filter 1s ease-in-out;
image-rendering: pixelated; /* Mantiene un aspetto pulito anche da sfocato */
}
/* Stile per mostrare l'immagine dopo la vittoria */
#pokemonImage.revealed {
filter: brightness(1) blur(0);
}
/* Centra e stilizza l'interfaccia di gioco */
.game-container {
max-width: 600px;
margin: 40px auto;
padding: 20px;
background-color: var(--bg-card, #fff); /* Usa la variabile CSS di default o un fallback */
border-radius: 15px;
box-shadow: var(--card-shadow);
text-align: center;
}
/* Stile per l'input e il messaggio */
#guessInput {
padding: 10px;
width: 70%;
max-width: 300px;
margin-right: 10px;
border-radius: 8px;
border: 2px solid #ccc;
font-size: 1.1em;
}
.game-controls {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.game-controls button {
height: 100%;
}
/* Stile per distanziare il pulsante "Mi Arrendo" */
#giveUpButton {
margin-top: 15px; /* Aggiunge 15px di spazio sopra il pulsante */
}
#message {
margin-top: 20px;
font-weight: bold;
min-height: 25px; /* Spazio per il messaggio */
}
#hint {
margin-top: 15px;
color: #e83f3f; /* Rosso Pokédex */
font-style: italic;
min-height: 20px; /* Spazio per l'indizio */
}
/* Stili AGGIUNTI per il gioco "Indovina il Pokémon" */
/* Stili per il pulsante secondario (Arrenditi) */
.secondary-button {
background-color: #888; /* Grigio scuro */
border: 2px solid #555;
color: #fff;
margin-left: 10px;
padding: 10px 15px; /* Coerenza con il pulsante principale */
border-radius: 10px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: var(--transition);
margin-top: 15px; /* Spazio sopra il pulsante */
}
#
.secondary-button:hover {
background-color: #666;
border-color: #444;
}
body.dark .secondary-button {
background-color: #555;
border-color: #777;
}
body.dark .secondary-button:hover {
background-color: #777;
}
/* Stili per l'elemento select nella pagina Indovina */
#generationSelect {
padding: 8px;
border-radius: 8px;
border: 2px solid #ccc;
font-size: 1em;
cursor: pointer;
/* Usa le variabili definite in :root */
background-color: var(--bg-card, #f0f0f0);
color: var(--text-dark, #222);
}
body.dark #generationSelect {
background-color: #444;
border-color: #666;
color: var(--text-light, #fff);
}
/* Assicura che l'elemento select sia ben stilizzato come un pulsante */
.game-link {
/* Stili generali del pulsante, già presenti */
padding: 10px 15px;
border-radius: 10px;
font-weight: 600;
text-decoration: none;
transition: var(--transition);
}
/* Stile specifico per il SELECT, se necessario */
#gameSelector {
/* Assicura che sia ben visibile e coerente con il tema */
cursor: pointer;
/* Aggiungi qui stili specifici se il `select` ha bisogno di padding diversi dal `button` */
-webkit-appearance: none; /* Rimuove lo stile predefinito di alcuni browser */
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px; /* Spazio per l'icona della freccia */
}
/* Assicurati che lo stile del cursore sia coerente */
#gameSelector:hover {
filter: brightness(1.1);
}
/* --- STILI PER LA PAGINA MAPPA (mappa.html) --- */
.map-container-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #fff;
border-radius: 15px;
box-shadow: var(--card-shadow);
transition: var(--transition);
}
body.dark .map-container-wrapper {
background: #333;
color: var(--text-light);
}
.search-bar-map {
display: flex;
justify-content: center;
align-items: flex-end; /* Allinea i bottoni in basso */
gap: 15px;
margin-bottom: 20px;
flex-wrap: wrap;
padding: 15px;
background: rgba(0,0,0,0.03);
border-radius: 10px;
}
.input-group {
display: flex;
flex-direction: column;
gap: 5px;
text-align: left;
}
.input-group label {
font-weight: bold;
font-size: 0.9em;
margin-left: 5px;
}
.search-btn {
background-color: #E83F3F; /* Rosso Pokedex */
color: white !important;
font-weight: bold;
border: none;
}
.search-btn:hover {
background-color: #c92a2a;
}
/* Stile BASE (per Kanto, Johto, Hoenn, Sinnoh, Unima, Kalos, Alola) */
#gameMap {
height: 70vh; /* Altezza standard comoda (circa 70% dello schermo) */
width: 100%;
min-height: 500px;
background: #aaddff;
border: 4px solid #333;
border-radius: 12px;
z-index: 1;
position: relative;
}
/* Stile SPECIALE (solo per Galar e Paldea) */
#gameMap.tall-map {
height: 175vh;
width: 100%;
min-height: 500px;
background: #aaddff;
border: 4px solid #333;
border-radius: 12px;
z-index: 1;
position: relative;
}
.results-box {
margin-top: 20px;
padding: 15px;
text-align: center;
font-size: 1.1em;
border-top: 1px solid #ccc;
min-height: 50px;
}
/* Stile Popup Mappa Leaflet */
.leaflet-popup-content-wrapper {
border-radius: 10px;
text-align: center;
}
.leaflet-popup-content b {
color: #E83F3F;
font-size: 1.1em;
}
/* --- AGGIUNTA STILI AUTOCOMPLETE --- */
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
top: 100%;
left: 0;
right: 0;
max-height: 200px;
overflow-y: auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
color: #333;
}
.autocomplete-items div:hover,
.autocomplete-active { /* Unificato per gestione frecce e mouse */
background-color: #E83F3F !important;
color: #ffffff !important;
}
/* Tema scuro per l'autocomplete */
body.dark .autocomplete-items div {
background-color: #444;
color: var(--text-light);
border-color: #666;
}
body.dark .autocomplete-items div:hover {
background-color: #555;
}
/* --- Stile per le Icone Pokémon sulla Mappa --- */
.pokemon-marker-icon {
filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));
object-fit: contain;
/* Aggiungiamo width e height alla transizione per l'effetto zoom morbido */
transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.pokemon-marker-icon:hover {
transform: scale(1.15);
z-index: 1000 !important;
}
.autocomplete-container {
position: relative;
width: 100%;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 10000 !important; /* Questo la porta SOPRA la mappa */
top: 100%;
left: 0;
right: 0;
max-height: 200px;
overflow-y: auto;
background-color: white; /* Sfondo bianco obbligatorio */
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
color: black;
font-weight: bold;
}
/* --- FIX CLASSI DI UTILITÀ --- */
/* Questa classe è obbligatoria per nascondere input e messaggi */
.hidden {
display: none !important;
}
/* Rimuove padding e bordi se il messaggio è vuoto (toglie la barra rossa vuota) */
.result-message:empty {
display: none !important;
padding: 0 !important;
margin: 0 !important;
}
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
/* Media Query per Mappa Mobile */
@media (max-width: 768px) {
#gameMap {
height: 400px;
}
.search-bar-map {
flex-direction: column;
align-items: stretch;
}
.search-btn {
margin-top: 10px;
}
}
/* --- MOBILE RESPONSIVE DEFINITIVO (Fix Tyrogue & Bivi) --- */
@media (max-width: 768px) {
/* 1. Contenitore principale verticale */
.evolution-flex-container {
flex-direction: column;
align-items: center;
width: 100%;
overflow-x: hidden;
padding: 5px; /* Un po' di padding laterale di sicurezza */
box-sizing: border-box;
}
/* 2. Righe standard (lineari) verticali */
.evo-row {
flex-direction: column;
width: 100%;
align-items: center;
gap: 5px;
}
/* 3. Frecce in basso */
.evo-arrow-icon {
transform: rotate(90deg);
display: inline-block;
margin: 5px 0;
font-size: 1.8em;
color: #E83F3F;
}
.evo-arrow-wrapper {
margin: 5px 0;
flex-direction: column;
}
/* --- FIX CRUCIALE PER I BIVI (Tyrogue, Gloom) --- */
.evo-col {
display: flex;
flex-direction: row; /* Mette i figli in orizzontale */
flex-wrap: wrap !important; /* <--- FONDAMENTALE: Va a capo se non c'è spazio! */
justify-content: center; /* Centra gli elementi (anche quello che va a capo) */
align-items: flex-start;
gap: 5px; /* Gap ridotto per salvare spazio */
width: 100%;
margin-top: 10px;
padding: 0;
border: none;
}
/* Gestione del singolo blocco "Freccia + Pokemon" dentro il bivio */
.evo-col .evo-row {
flex-direction: column;
width: auto; /* Non prende il 100%, ma solo lo spazio che serve */
margin-bottom: 15px; /* Spazio verticale se l'elemento va a capo */
flex-shrink: 0; /* Impedisce di schiacciarsi troppo */
}
/* 4. Card più compatte su mobile */
.evo-card {
width: 90px; /* Larghezza fissa contenuta */
height: auto;
min-height: 100px;
padding: 5px; /* Meno padding interno */
}
.evo-card img {
width: 50px; /* Immagine leggermente ridotta */
height: 50px;
}
.evo-condition-badge {
font-size: 0.65em; /* Testo condizioni più piccolo */
max-width: 85px;
}
}
/* --- MOBILE RESPONSIVE (Versione Galassia Mini) --- */
@media (max-width: 768px) {
.eevee-container {
/* 1. CENTRATURA PERFETTA */
/* Il container è 800px. Per centrarlo su schermi piccoli: */
position: relative;
left: 50%; /* Sposta il bordo sinistro al centro dello schermo */
margin-left: -400px; /* Tira indietro di metà larghezza (800/2) per centrare matematicamente */
/* 2. RIDUZIONE DIMENSIONI */
transform: scale(0.44); /* Zoom indietro (puoi scendere a 0.38 se esce ancora) */
transform-origin: top center; /* Punto di ancoraggio dello zoom */
/* 3. GESTIONE SPAZIO VERTICALE */
margin-bottom: -450px; /* Rimuove lo spazio vuoto creato dallo zoom-out */
}
/* TESTO CONDIZIONI (Pietra Tuono, ecc.) */
.eevee-condition-text {
font-size: 0.9em !important; /* Molto più piccolo (era 1.8em) */
padding: 3px 6px; /* Meno padding */
border-width: 1px; /* Bordo più sottile */
font-weight: 700;
min-width: 60px; /* Larghezza minima per evitare schiacciamenti */
white-space: normal; /* Permette al testo di andare a capo */
line-height: 1.1;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* Aggiustiamo anche leggermente le card dei Pokémon (Pianeti) */
.eevee-planet, .eevee-center {
width: 90px !important; /* Leggermente più piccoli */
height: auto !important;
padding: 5px !important;
}
.eevee-planet span, .eevee-center span {
font-size: 0.9em !important; /* Nome del Pokémon più piccolo */
}
.eevee-planet img, .eevee-center img {
width: 50px !important; /* Immagini Pokémon ridimensionate */
height: 50px !important;
}
}
/* --- MODALE AUTENTICAZIONE (Login/Register) --- */
/* --- MESSAGGI AUTH (No Popup) --- */
.auth-message {
padding: 12px;
margin-bottom: 15px;
border-radius: 8px;
font-size: 0.9em;
text-align: center;
font-weight: 600;
}
.auth-message.hidden {
display: none;
}
/* Stile Errore */
.auth-message.error {
background-color: #fff1f0;
border: 1px solid #ffa39e;
color: #cf1322;
}
/* Stile Successo */
.auth-message.success {
background-color: #f6ffed;
border: 1px solid #b7eb8f;
color: #389e0d;
}
/* --- FOOTER CONTACT US --- */
.site-footer {
background-color: #222; /* Grigio scuro elegante */
color: #fff;
padding: 40px 20px 20px;
border-top: 5px solid #E83F3F; /* Bordo rosso Pokédex */
font-family: 'Poppins', sans-serif;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 30px;
}
.footer-section {
flex: 1;
min-width: 250px; /* Evita che si schiaccino troppo */
}
.footer-section h3 {
color: #E83F3F; /* Titoli in rosso */
margin-bottom: 15px;
font-size: 1.2em;
position: relative;
display: inline-block;
}
/* Lineetta decorativa sotto i titoli */
.footer-section h3::after {
content: '';
display: block;
width: 40px;
height: 2px;
background: #fff;
margin-top: 5px;
}
.footer-section p {
font-size: 0.9em;
line-height: 1.6;
color: #ccc;
}
/* Lista Link */
.footer-section ul {
list-style: none;
padding: 0;
}
.footer-section ul li {
margin-bottom: 10px;
}
.footer-section ul li a {
color: #ddd;
text-decoration: none;
transition: color 0.3s;
font-size: 0.95em;
}
.footer-section ul li a:hover {
color: #E83F3F;
padding-left: 5px; /* Piccolo effetto movimento */
}
/* --- NUOVO STILE ICONE SOCIAL FOOTER --- */
.social-icons-container {
display: flex;
gap: 20px; /* Spazio tra le icone */
flex-wrap: wrap;
margin-top: 15px;
}
.icon-link {
text-decoration: none;
display: inline-block;
transition: transform 0.3s ease; /* Animazione salto */
}
/* Stile dell'icona vera e propria (il tag ) */
.icon-link i {
font-size: 1.8rem; /* Grandezza icona */
/* Colore bianco con opacità (trasparente come chiesto) */
color: rgba(255, 255, 255, 0.6);
transition: all 0.3s ease; /* Animazione colore */
}
/* HOVER: Quando passi sopra col mouse */
.icon-link:hover i {
color: #E83F3F; /* Diventa rosso Pokédex */
text-shadow: 0 0 15px rgba(232, 63, 63, 0.6); /* Leggero effetto bagliore */
opacity: 1;
}
.icon-link:hover {
transform: translateY(-5px); /* Leggero saltello verso l'alto */
}
/* Footer Bottom (Copyright) */
.footer-bottom {
text-align: center;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #444;
font-size: 0.8em;
color: #888;
}
/* --- ADATTAMENTO MOBILE --- */
@media (max-width: 768px) {
.footer-container {
flex-direction: column;
text-align: center;
}
.footer-section h3::after {
margin: 5px auto; /* Centra la lineetta */
}
.social-icons-container {
justify-content: center;
}
.footer-section ul li a:hover {
padding-left: 0; /* Rimuove movimento su mobile */
}
}
/* --- STILE PREFERITI (STELLINA) --- */
/* 1. FONDAMENTALE: La card deve essere il "recinto" */
.card {
/* Questo dice: "Tutto ciò che è assoluto qui dentro, si posiziona rispetto a ME, non alla pagina intera" */
position: relative;
/* Assicura che la card stessa non abbia uno z-index strano che la fa saltare fuori */
z-index: 0;
}
/* 2. Stile del bottone stella */
.fav-btn {
position: absolute;
top: 8px;
left: 8px;
background: none !important;
border: none !important;
box-shadow: none !important; /* Rimuove ombre che creano l'effetto alone */
outline: none !important;
font-size: 26px;
cursor: pointer;
color: rgba(200, 200, 200, 0.8);
/* --- 🔥 CORREZIONE MOBILE --- */
/* Resetta le dimensioni forzate dai pulsanti generali */
min-width: 0 !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
display: inline-block !important;
/* --------------------------- */
z-index: 2;
transition: transform 0.2s, color 0.2s, text-shadow 0.2s;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
line-height: 1; /* Assicura che l'altezza della riga non sposti l'icona */
}
/* Hover: si ingrandisce leggermente e diventa più bianca */
.fav-btn:hover {
transform: scale(1.15);
}
/* Quando è ATTIVO (Preferito) */
.fav-btn.active {
color: #FFD700; /* Oro Pieno */
/* Aggiunge un bagliore dorato */
text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}
/* Animazione click "Pulsazione" */
.fav-btn.animating {
animation: star-pulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fav-btn-modal, .fav-mini-card .fav-btn {
background: transparent !important;
border: none !important;
}
@keyframes star-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.4); }
100% { transform: scale(1); }
}
/* --- GRIGLIA SQUADRA (4 PER RIGA) --- */
.profile-favorites-section {
margin-top: 20px;
padding-top: 20px;
border-top: 2px solid #eee; /* Linea separatrice */
width: 100%;
}
.profile-favorites-section h3 {
text-align: center;
color: #555;
margin-bottom: 20px;
font-size: 1.2em;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* FIX: Colore Bianco/Rosso in Dark Mode per uniformità */
body.dark .profile-favorites-section h3 {
color: #fff !important; /* O #E83F3F se vuoi che sia identico a "Profilo Allenatore" */
}
/* GRIGLIA CHE SI ADATTA */
.fav-scroll-container {
display: grid;
/* PC: 4 colonne fisse */
grid-template-columns: repeat(4, 1fr);
gap: 10px;
/* Altezza massima prima di scrollare verticalmente */
max-height: 320px;
overflow-y: auto; /* Abilita lo scroll verticale se serve */
overflow-x: hidden; /* Blocca scroll orizzontale */
padding: 5px;
justify-items: center;
/* 🔥 NASCONDI BARRA DI SCORRIMENTO (Firefox) */
scrollbar-width: none;
-ms-overflow-style: none; /* IE and Edge */
}
/* 🔥 NASCONDI BARRA DI SCORRIMENTO (Chrome, Safari, Opera) */
.fav-scroll-container::-webkit-scrollbar {
display: none;
}
/* --- MEDIA QUERY PER MOBILE (3 o 2 colonne) --- */
@media (max-width: 500px) {
.fav-scroll-container {
/* Mobile: 3 colonne invece di 4 per non schiacciarli */
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 360px) {
.fav-scroll-container {
/* Schermi piccolissimi: 2 colonne */
grid-template-columns: repeat(2, 1fr);
}
}
/* Stile Mini Card (Resta quasi uguale, assicuriamoci che sia flessibile) */
.fav-mini-card {
width: 100%; /* Si adatta alla colonna della griglia */
max-width: 100px; /* Non diventa gigante */
aspect-ratio: 1 / 1.1; /* Mantiene una proporzione rettangolare carina */
background: #f8f9fa;
border-radius: 12px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 2px solid transparent;
transition: all 0.2s;
}
.fav-mini-card:hover {
transform: translateY(-3px);
border-color: #E83F3F;
background: #fff;
box-shadow: 0 5px 15px rgba(232, 63, 63, 0.2);
}
.fav-mini-card img {
width: 60%;
height: 60%;
object-fit: contain;
margin-bottom: 5px;
}
.fav-mini-card span {
font-size: 0.8em;
font-weight: bold;
color: #333;
text-align: center;
line-height: 1.2;
}
/* Effetto Leggendario per Mini-Card */
.fav-mini-card.legendary {
border: 2px solid gold !important;
animation: mini-legendary-glow 2s infinite;
}
@keyframes mini-legendary-glow {
0% { box-shadow: 0 0 5px gold; }
50% { box-shadow: 0 0 12px gold; }
100% { box-shadow: 0 0 5px gold; }
}
.no-fav-msg {
width: 100%;
text-align: center;
color: #777;
font-style: italic;
font-size: 0.9em;
}
/* FIX: Mini-card in Dark Mode */
body.dark .fav-mini-card {
background: #333; /* Stesso colore delle card normali in dark mode */
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.30);
}
/* Fix colore testo nomi Pokémon nelle mini-card */
body.dark .fav-mini-card span {
color: #fff;
}
/* Effetto Hover in Dark Mode */
body.dark .fav-mini-card:hover {
background: #444;
border-color: #E83F3F;
}
/* --- FIX FINALE PROFILO IN MEMORY --- */
/* Assicura che il modale usi lo stile standard (scuro in dark mode) */
#profileModal.modal {
display: flex !important; /* Usa Flexbox per centrare */
justify-content: center;
align-items: center;
padding-top: 0; /* Rimuove il padding top standard dei modali */
}
/* Rendi il pulsante di chiusura identico a quello standard */
.close-profile-game {
position: absolute;
top: 15px;
right: 20px;
font-size: 40px;
font-weight: bold;
color: var(--text-dark);
cursor: pointer;
line-height: 0.8;
z-index: 20;
transition: color 0.3s;
}
body.dark .close-profile-game {
color: var(--text-light); /* X bianca in dark mode */
}
.close-profile-game:hover {
color: #E83F3F;
}
/* 🔥 FIX SOVRAPPOSIZIONE PROFILO */
#profileModal {
z-index: 20000 !important; /* Superiore a classifica (1001) e tutto il resto */
}
/* Assicuriamo che anche l'overlay scuro sia sopra */
#profileModal.modal-overlay {
z-index: 20000 !important;
}
/* ================================================== */
/* === STILI DEDICATI GCC & TRACKER MASTER SET === */
/* ================================================== */
.masterset-container {
max-width: 1200px;
margin: 15px auto;
padding: 12px 20px;
background: #fff;
border-radius: 12px;
box-shadow: var(--card-shadow);
box-sizing: border-box;
}
body.dark .masterset-container {
background: #333;
}
.masterset-info {
display: flex;
justify-content: space-between;
font-weight: 600;
margin-bottom: 8px;
font-size: 0.95em;
}
.masterset-bar-bg {
width: 100%;
height: 12px;
background: #e0e0e0;
border-radius: 6px;
overflow: hidden;
}
body.dark .masterset-bar-bg {
background: #555;
}
.masterset-bar-fill {
height: 100%;
background: linear-gradient(90deg, #E83F3F, #ff8052);
transition: width 0.4s ease;
border-radius: 6px;
}
/* Card GCC */
.tcg-card {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 12px;
position: relative;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tcg-card.tcg-owned {
border: 2px solid #2ecc71;
box-shadow: 0 0 10px rgba(46, 204, 113, 0.35);
}
.tcg-header-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 8px;
}
.tcg-badge-num {
font-size: 0.8em;
font-weight: 700;
color: #777;
}
body.dark .tcg-badge-num {
color: #bbb;
}
/* Bottone di Spunta / Raccoglitore */
.tcg-collect-btn {
background: none !important;
border: none !important;
font-size: 1.3em;
padding: 0 !important;
cursor: pointer;
color: #bbb;
transition: transform 0.2s, color 0.2s;
display: inline-flex;
align-items: center;
}
.tcg-collect-btn:hover {
transform: scale(1.15);
color: #888;
}
.tcg-collect-btn.active {
color: #2ecc71 !important;
}
/* Immagine Card */
.tcg-img-wrapper {
width: 100%;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.tcg-card img {
width: 100%;
max-width: 160px;
height: auto;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
/* Placeholder quando manca l'immagine */
.tcg-missing-img {
width: 150px;
height: 210px;
background: rgba(0, 0, 0, 0.05);
border: 2px dashed #bbb;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
body.dark .tcg-missing-img {
background: rgba(255, 255, 255, 0.05);
border-color: #666;
}
.tcg-missing-img .missing-pokeball-icon {
width: 45px;
height: 45px;
opacity: 0.5;
margin-bottom: 8px;
box-shadow: none;
}
.tcg-missing-img span {
font-size: 0.75em;
color: #888;
font-style: italic;
line-height: 1.2;
}
.tcg-title {
font-size: 0.95em;
margin: 10px 0 2px;
}
.tcg-set-name {
font-size: 0.75em;
color: #888;
}
/* Modale Card */
.tcg-modal-layout {
display: flex;
flex-wrap: wrap;
gap: 25px;
justify-content: center;
align-items: center;
text-align: left;
}
.tcg-modal-img-col {
flex-shrink: 0;
}
.tcg-modal-card-img {
max-width: 260px;
height: auto;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.tcg-modal-info-col {
flex: 1;
min-width: 260px;
}
.tcg-modal-attack {
background: rgba(0, 0, 0, 0.04);
padding: 10px;
border-radius: 8px;
margin-bottom: 8px;
}
body.dark .tcg-modal-attack {
background: rgba(255, 255, 255, 0.06);
}
/* =========================================================================
STILI DEFINITIVI GCC (HEADER, MODALI E CARD)
======================================================================== */
/* --- 1. HEADER E NAVIGAZIONE --- */
header {
position: relative !important;
height: auto !important;
min-height: 60px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
padding: 12px 15px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.header-top-row {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
position: relative;
margin-bottom: 12px;
text-align: center;
}
.gcc-title-inline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
font-size: 1.5rem;
margin: 0 auto;
white-space: nowrap;
}
.pokeball-home-link {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.pokeball-home-link img {
width: 36px;
height: 36px;
cursor: pointer;
display: block;
}
.gcc-brand-text {
margin: 0 auto;
}
/* --- 2. CONTROLLI E MASTERSET (SPAZIATURA LATERALE) --- */
.gcc-controls-bar {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0 15px !important;
box-sizing: border-box !important;
margin-top: 10px !important;
margin-bottom: 15px !important;
gap: 10px !important;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.gcc-controls-bar .button {
flex: 1;
min-width: 130px;
box-sizing: border-box;
}
.masterset-container {
margin-left: 15px !important;
margin-right: 15px !important;
max-width: calc(100% - 30px) !important;
box-sizing: border-box !important;
}
/* --- 3. MODALI DI RICERCA (AMPI E LEGGIBILI) --- */
.gcc-popup-search {
max-width: 550px !important;
width: 90% !important;
box-sizing: border-box;
text-align: left;
}
.modal-input-full {
width: 100%;
padding: 12px;
font-size: 1.1em;
border-radius: 8px;
border: 1px solid #ccc;
margin-top: 15px;
box-sizing: border-box;
}
.search-suggestions-list {
max-height: 300px;
overflow-y: auto;
margin-top: 12px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.suggestion-item {
padding: 12px 14px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 1.05em;
transition: background 0.2s;
}
.suggestion-item:hover {
background-color: rgba(232, 63, 63, 0.25);
color: #fff;
}
.modal-hint {
font-size: 0.85em;
color: #777;
margin-top: 10px;
font-style: italic;
}
/* --- 4. GRIGLIA CARTE E PALLINO DI POSSESSO --- */
.card {
overflow: visible !important;
}
.tcg-card {
padding: 12px 14px !important;
}
/* --- POSIZIONAMENTO PERFETTO: CHECKBOX A SX, NUMERO A DX --- */
.tcg-header-row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
margin-bottom: 8px !important;
padding: 0 2px !important;
box-sizing: border-box !important;
}
.tcg-collect-btn {
font-size: 1.3em;
padding: 0;
background: none;
border: none;
cursor: pointer;
order: 1; /* Forza la checkbox sul lato sinistro */
}
.tcg-badge-num {
font-size: 0.85em;
font-weight: 700;
color: #777;
order: 2; /* Forza il numero sul lato destro */
}
body.dark .tcg-badge-num {
color: #ccc;
}
.tcg-collect-btn {
font-size: 1.4em;
padding: 4px;
background: none;
border: none;
cursor: pointer;
order: 1;
}
.tcg-badge-num {
font-size: 0.85em;
font-weight: 700;
color: #777;
order: 2;
}
body.dark .tcg-badge-num {
color: #ccc;
}
/* --- 5. MODALE DETTAGLIO CARTA (COMPATTO, CHECKBOX A SX, NOME A DX) --- */
.gcc-detail-modal-content {
max-width: 400px !important;
width: 88% !important;
padding: 15px 20px !important;
box-sizing: border-box;
}
.tcg-modal-layout-fixed {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
}
.tcg-modal-top-row {
display: flex;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
border-bottom: 2px solid #E83F3F;
padding-bottom: 8px;
gap: 10px;
}
.tcg-modal-pokemon-name {
margin: 0;
color: #E83F3F;
font-size: 1.4rem;
text-align: center;
flex-grow: 1.5;
order: 2;
}
@media (max-width: 600px) {
.tcg-modal-pokemon-name {
margin: 0;
color: #E83F3F;
font-size: 1.4rem;
text-align: start;
flex-grow: 1.5;
order: 2;
}
}
.tcg-modal-top-row .tcg-collect-btn {
order: 1;
}
.tcg-modal-img-col {
text-align: center;
width: 100%;
}
.tcg-modal-card-img {
max-width: 180px !important;
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.tcg-modal-info-col {
width: 100%;
font-size: 0.9em;
line-height: 1.35;
}
/* --- STILE PULSANTE CARDMARKET NEL MODALE --- */
.cardmarket-link-btn {
transition: background-color 0.2s, transform 0.2s !important;
}
.cardmarket-link-btn:hover {
background-color: #002244 !important;
transform: translateY(-2px);
}
/* --- MENU A TENDINA HAMBURGER --- */
.hamburger-menu {
position: relative;
display: inline-block;
}
.hamburger-btn {
font-size: 1.1em;
padding: 8px 14px !important;
border-radius: 20px !important;
}
.hamburger-dropdown {
position: absolute;
top: 115%;
left: 0;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
z-index: 1000;
display: flex;
flex-direction: column;
min-width: 170px;
overflow: hidden;
padding: 5px;
}
body.dark .hamburger-dropdown {
background-color: #333;
border-color: #555;
}
.hamburger-dropdown .dropdown-item {
padding: 10px 15px;
text-align: left;
background: none;
border: none;
color: var(--text-dark);
text-decoration: none;
font-size: 0.95em;
cursor: pointer;
transition: background 0.2s;
width: 100%;
box-sizing: border-box;
border-radius: 8px !important;
}
body.dark .hamburger-dropdown .dropdown-item {
color: var(--text-light);
}
.hamburger-dropdown .dropdown-item:hover {
background-color: rgba(232, 63, 63, 0.15);
color: #E83F3F;
}
/* --- TASTO SHINY COMPATTO (SOLO STELLINE) --- */
.shiny-icon-btn {
font-size: 1.1em;
padding: 8px 12px !important;
border-radius: 20px !important;
}
/* --- SPAZIATURA E COERENZA BOTTONI HEADER & MODALE --- */
.controls {
gap: 5px !important; /* Ripristina lo spazio corretto tra i controlli in alto */
}
/* Uniforma forma e stile dei pulsanti principali (escludendo i bottoni dei tipi elementali) */
.controls > button:not(.type-filters button),
.controls > a.button,
.modal-actions button,
.modal-actions a.button,
.modal-actions-top button {
border-radius: 20px !important;
font-family: 'Poppins', sans-serif !important;
box-sizing: border-box !important;
}
/* Stile specifico pulito per i bottoni nel modale del Pokémon */
.modal-actions {
display: flex;
flex-direction: row;
justify-content: center;
gap: 10px;
width: 100%;
margin-top: 8px;
}
.modal-actions button, .modal-actions a.button {
flex: 1;
height: 40px;
margin: 0 !important;
border-radius: 20px !important;
}
.masterset-link-button {
background-color: #003366 !important;
color: #fff !important;
border: none !important;
}
.masterset-link-button:hover {
background-color: #002244 !important;
}
/* --- CORREZIONE FONT MENU HAMBURGER --- */
.hamburger-dropdown .dropdown-item {
font-family: 'Poppins', sans-serif !important;
}
/* --- DISPOSIZIONE TASTI MODALE POKÉMON --- */
.modal-top-row-controls {
display: flex;
gap: 8px;
justify-content: center;
width: 100%;
margin-bottom: 8px;
}
.modal-top-row-controls button {
flex: 1;
padding: 8px 10px !important;
}
/* Tasto Shiny a sola stellina compatto */
.shiny-star-btn {
max-width: 50px !important;
flex: 0 0 50px !important;
}
/* Tasto Verso con sola emoji */
.cry-emoji-btn {
max-width: 50px !important;
flex: 0 0 50px !important;
}
/* Rendi il tasto GCC identico agli altri (rimuove il blu scuro) */
.masterset-link-button {
background-color: #fff !important;
color: var(--text-dark) !important;
border: 1px solid #ccc !important;
}
body.dark .masterset-link-button {
background-color: #444 !important;
color: var(--text-light) !important;
border-color: #666 !important;
}
.masterset-link-button:hover {
opacity: 0.85 !important;
transform: translateY(-1px);
}
/* --- 1. FONT POPPINS UNIVERSALE --- */
button, select, a.button, .type, .dropdown-item, input[type="text"] {
font-family: 'Poppins', sans-serif !important;
}
/* --- 2. RIPRISTINO MODALE ORIGINALE (SFONDO SOLIDO E LAYOUT A DUE COLONNE) --- */
.modal-content {
background-color: #2b2b2b !important; /* Sfondo scuro solido e coprente coerente con il tema */
color: #fff !important;
opacity: 1 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
border-radius: 15px;
max-width: 900px !important;
width: 90% !important;
box-sizing: border-box;
}
body:not(.dark) .modal-content {
background-color: #fff !important; /* Sfondo bianco solido in tema chiaro */
color: #222 !important;
}
/* Layout Desktop Originale (Immagine a sinistra, Testi a destra) */
.modal-header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 20px !important;
text-align: left !important;
}
.modal-img-container {
flex: 0 0 280px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding-right: 20px;
}
.modal-header-text {
flex: 1 !important;
text-align: left !important;
}
.modal-title-row {
justify-content: flex-start !important;
}
/* Controlli superiori del modale allineati (Shiny, Verso, Vista Dinamica) */
.modal-top-row-controls {
display: flex;
gap: 6px;
justify-content: center;
width: 100%;
margin-bottom: 6px;
}
.shiny-star-btn, .cry-emoji-btn {
max-width: 45px !important;
flex: 0 0 45px !important;
padding: 8px 0 !important;
}
.modal-top-row-controls button {
flex: 1;
padding: 8px 10px !important;
border-radius: 20px !important;
}
/* Bottoni inferiori (Mappa e GCC) uniformati */
.modal-bottom-row-controls {
display: flex;
gap: 10px;
width: 100%;
margin-top: 8px;
}
.modal-bottom-row-controls button, .modal-bottom-row-controls a.button {
flex: 1;
height: 40px;
border-radius: 20px !important;
background-color: #fff !important;
color: var(--text-dark) !important;
border: 1px solid #ccc !important;
}
body.dark .modal-bottom-row-controls button, body.dark .modal-bottom-row-controls a.button {
background-color: #444 !important;
color: var(--text-light) !important;
border-color: #666 !important;
}
/* Adattamento Mobile (Smartphone) */
@media (max-width: 768px) {
.modal-header {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.modal-img-container {
width: 100% !important;
flex: unset !important;
padding-right: 0;
}
.modal-header-text {
width: 100% !important;
text-align: center !important;
}
.modal-title-row {
justify-content: center !important;
}
}
/* --- STILI MENU A TENDINA CUSTOM --- */
.custom-dropdown {
position: relative;
display: inline-block;
}
.custom-dropdown-btn {
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 8px 14px !important;
border-radius: 20px !important;
font-family: 'Poppins', sans-serif !important;
font-size: 1em !important;
cursor: pointer !important;
background: #fff !important;
color: var(--text-dark) !important;
border: 1px solid #ccc !important;
box-sizing: border-box !important;
transition: var(--transition) !important;
}
body.dark .custom-dropdown-btn {
background: #444 !important;
color: var(--text-light) !important;
border-color: #666 !important;
}
.custom-dropdown-menu {
position: absolute;
top: 115%;
left: 0;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 12px !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
z-index: 1000;
flex-direction: column;
min-width: 220px;
overflow: hidden;
padding: 5px;
box-sizing: border-box;
}
body.dark .custom-dropdown-menu {
background-color: #333;
border-color: #555;
}
.custom-dropdown-menu .dropdown-item {
padding: 10px 15px;
text-align: left;
background: none;
border: none;
color: var(--text-dark);
text-decoration: none;
font-size: 0.95em;
font-family: 'Poppins', sans-serif !important;
cursor: pointer;
transition: background 0.2s;
width: 100%;
box-sizing: border-box;
border-radius: 8px !important;
margin: 2px 0 !important;
}
body.dark .custom-dropdown-menu .dropdown-item {
color: var(--text-light);
}
.custom-dropdown-menu .dropdown-item:hover {
background-color: rgba(232, 63, 63, 0.15) !important;
color: #E83F3F !important;
}
.custom-dropdown-menu .dropdown-item.active {
font-weight: bold;
color: #E83F3F;
}
/* --- LARGHEZZA ESTESA PER I MENU A TENDINA CUSTOM --- */
.custom-dropdown-menu {
min-width: 280px !important; /* Aumenta lo spazio orizzontale per far stare tutto su un'unica riga */
white-space: nowrap !important; /* Impedisce al testo di andare a capo */
}
.custom-dropdown-menu .dropdown-item {
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 600px) {
/* I contenitori dei menu custom si espandono per occupare tutta la larghezza su mobile */
.custom-dropdown {
display: block !important;
width: 100% !important;
}
/* I bottoni interni si allungano coprendo l'intera barra */
.custom-dropdown-btn {
width: 100% !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
/* Anche i menu a tendina aperti si adattano alla larghezza dello schermo dello smartphone */
.custom-dropdown-menu {
width: 100% !important;
min-width: unset !important;
left: 0 !important;
box-sizing: border-box !important;
}
}
/* --- TENDINA MOSSE SCORREVOLE E COERENTE --- */
#movesMenu.custom-dropdown-menu {
max-height: 220px !important; /* Altezza massima prima di attivare lo scroll */
overflow-y: auto !important; /* Attiva lo scroll verticale solo dentro la tendina */
scrollbar-width: thin;
}
#movesMenu.custom-dropdown-menu::-webkit-scrollbar {
width: 6px;
}
#movesMenu.custom-dropdown-menu::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.2);
border-radius: 3px;
}
/* --- CORREZIONE DEFINITIVA TENDINA MOSSE E LAYOUT MOBILE --- */
/* --- STILE PERFETTO E SLIM PER IL SELETTORE MOSSE --- */
#movesBtn {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
width: auto !important; /* Si adatta al testo senza schiacciarsi */
min-width: 180px !important; /* Abbastanza largo da non andare a capo subito */
max-width: 240px !important;
padding: 8px 14px !important; /* Altezza e padding coerenti con gli altri bottoni */
font-size: 0.85em !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
#movesBtn span {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Menu a tendina delle mosse: ampio, leggibile e con spaziatura corretta tra le righe */
#movesMenu.custom-dropdown-menu {
min-width: 260px !important;
max-height: 240px !important;
overflow-y: auto !important;
white-space: nowrap !important; /* Impedisce al testo di spezzarsi in verticale */
}
#movesMenu .dropdown-item {
font-size: 0.9em !important;
line-height: 1.4 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
@media (max-width: 600px) {
#movesBtn {
min-width: 160px !important;
max-width: 190px !important;
padding: 6px 10px !important;
font-size: 0.8em !important;
}
}
/* 3. Intestazione mosse sempre sulla stessa linea anche da smartphone */
@media (max-width: 600px) {
.moves-header-row {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
gap: 8px !important;
}
.moves-header-row h3 {
font-size: 0.95em !important;
white-space: nowrap !important;
}
/* Impedisce al menu delle mosse di uscire dallo schermo su mobile */
#movesMenu.custom-dropdown-menu {
right: 0 !important;
left: auto !important;
min-width: 210px !important;
max-width: 240px !important;
}
}
/* --- OTTIMIZZAZIONE SCROLL E DIMENSIONI MINIGIOCHI MOBILE --- */
@media (max-width: 600px) {
#minigamesModal .minigames-content {
max-height: 85vh !important; /* Non supera mai l'altezza dello schermo */
overflow-y: auto !important; /* Attiva lo scroll se lo schermo è corto */
padding: 14px 10px !important; /* Meno spazio vuoto sopra e sotto */
width: 90vw !important;
box-sizing: border-box !important;
}
#minigamesModal .minigames-header h2 {
font-size: 1.3rem !important;
margin-bottom: 2px !important;
}
#minigamesModal .minigames-header p {
font-size: 0.8rem !important;
margin-bottom: 8px !important;
}
#minigamesModal .minigames-grid {
gap: 8px !important; /* Spazio compatto tra le card */
margin-top: 5px !important;
padding: 2px !important;
}
#minigamesModal .minigame-card {
padding: 8px 6px !important; /* Rende ogni card più bassa */
min-height: 95px !important;
border-radius: 12px !important;
}
#minigamesModal .minigame-icon {
font-size: 1.6rem !important; /* Icona proporzionata */
margin-bottom: 2px !important;
}
#minigamesModal .minigame-card h3 {
font-size: 0.85rem !important;
margin-bottom: 1px !important;
}
#minigamesModal .minigame-card p {
font-size: 0.7rem !important;
line-height: 1.1 !important;
}
}
/* ========================================================= */
/* --- FIX DEFINITIVO PROFILO ALLENATORE (DESKTOP & MOBILE) --- */
/* ========================================================= */
/* Contenitore Modale Centrato e Scorrevole */
#profileModal.modal {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 20px 10px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#profileModal .modal-content,
.profile-container {
max-width: 480px !important; /* Dimensione ideale ed elegante su PC */
width: 92% !important;
max-height: 90vh !important; /* Non esce MAI dallo schermo */
overflow-y: auto !important; /* Scorrimento interno pulito */
overflow-x: hidden !important;
position: relative !important;
padding: 24px 20px !important;
border-radius: 16px !important;
box-sizing: border-box !important;
scrollbar-width: thin !important;
}
/* Pulsante di Chiusura "X" FISSO e sempre visibile in alto a destra */
#closeProfileModal.close-btn,
#profileModal .close-btn {
position: sticky !important;
top: 0 !important;
float: right !important;
margin-top: -10px !important;
margin-right: -5px !important;
font-size: 28px !important;
line-height: 1 !important;
color: #aaa !important;
cursor: pointer !important;
z-index: 100 !important;
transition: color 0.2s ease, transform 0.2s ease !important;
}
#closeProfileModal.close-btn:hover {
color: #E83F3F !important;
transform: scale(1.15) !important;
}
/* Sezione Preferiti: altezza bilanciata */
.fav-scroll-container {
max-height: 220px !important;
overflow-y: auto !important;
}
/* --- SEZIONE TOP 3 CARTE GCC (PROPORZIONATE E CHIARE) --- */
.profile-cards-section {
margin-top: 18px !important;
padding-top: 14px !important;
border-top: 1px solid #444 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.profile-cards-section h3 {
text-align: center !important;
color: #ffcc33 !important;
margin: 0 0 12px 0 !important;
font-size: 1.05em !important;
font-weight: 700 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
/* Griglia Top 3: 3 colonne esatte che riempiono armoniosamente il box */
#profileTopCardsContainer,
.tcg-profile-scroll-row {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
width: 100% !important;
max-width: 420px !important;
margin: 0 auto !important;
padding: 4px 0 !important;
box-sizing: border-box !important;
}
/* Singola carta: bella grande, definita e leggibile */
.tcg-profile-card {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
flex: none !important;
background: #2b2b2b !important;
border: 1px solid #48484a !important;
border-radius: 12px !important;
padding: 6px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: space-between !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
box-sizing: border-box !important;
cursor: pointer !important;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.tcg-profile-card:hover {
transform: translateY(-4px) !important;
border-color: #ffcc33 !important;
box-shadow: 0 6px 16px rgba(255, 204, 51, 0.25) !important;
}
.tcg-profile-card img {
width: 100% !important;
height: auto !important;
aspect-ratio: 2.5 / 3.5 !important;
border-radius: 8px !important;
object-fit: contain !important;
display: block !important;
}
/* Badge Prezzo verde evidente */
.tcg-profile-price {
margin-top: 6px !important;
font-weight: 800 !important;
font-size: 0.82em !important;
color: #4ade80 !important;
background: rgba(34, 197, 94, 0.2) !important;
padding: 4px 6px !important;
border-radius: 6px !important;
white-space: nowrap !important;
text-align: center !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Mobile */
@media (max-width: 600px) {
#profileModal .modal-content {
max-height: 92vh !important;
padding: 16px 12px !important;
}
#profileTopCardsContainer,
.tcg-profile-scroll-row {
gap: 8px !important;
}
.tcg-profile-price {
font-size: 0.72em !important;
padding: 3px 4px !important;
}
}
/* --- FIX GRIGLIA PREFERITI PROFILO (PC: 3 COLONNE PERFETTE) --- */
.fav-scroll-container {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important; /* 3 colonne esatte su PC */
gap: 12px !important;
width: 100% !important;
max-width: 420px !important;
margin: 0 auto !important;
padding: 6px 4px !important;
box-sizing: border-box !important;
overflow-x: hidden !important; /* Blocca qualsiasi fuoriuscita a destra */
overflow-y: auto !important;
}
.fav-mini-card {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Su smartphone mantiene le 2 colonne compatte */
@media (max-width: 600px) {
.fav-scroll-container {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
}
/* --- BACHECA TROFEI GCC NEL PROFILO --- */
.tcg-trophy-card {
border: 2px solid transparent !important;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.tcg-trophy-card:hover {
transform: translateY(-3px) !important;
border-color: #ffcc33 !important;
box-shadow: 0 6px 16px rgba(255, 204, 51, 0.3) !important;
}
/* Stile selezione nel modale di scelta */
.tcg-selectable-card {
position: relative;
cursor: pointer;
border-radius: 10px;
overflow: hidden;
border: 2px solid transparent;
transition: all 0.2s ease;
background: #3a3a3c;
padding: 4px;
}
.tcg-selectable-card img {
width: 100%;
height: auto;
aspect-ratio: 2.5 / 3.5;
object-fit: contain;
border-radius: 6px;
display: block;
}
.tcg-selectable-card.selected {
border-color: #ffcc33 !important;
box-shadow: 0 0 12px rgba(255, 204, 51, 0.6) !important;
transform: scale(0.96);
}
.tcg-selectable-card.selected::after {
content: "✓";
position: absolute;
top: 6px;
right: 6px;
background: #ffcc33;
color: #000;
width: 22px;
height: 22px;
border-radius: 50%;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
/* --- HEADER E PULSANTE MODIFICA COMPATTO PER LA BACHECA --- */
.tcg-bacheca-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
margin-bottom: 8px !important;
}
.tcg-bacheca-header h3 {
margin: 0 !important;
font-size: 1em !important;
color: #ffcc33 !important;
font-weight: 700 !important;
}
/* Pulsante compatto a pillola (non ruba spazio su smartphone) */
.tcg-edit-badge-btn {
background: #3a3a3c !important;
color: #fff !important;
border: 1px solid #555 !important;
border-radius: 12px !important;
padding: 3px 10px !important;
font-size: 0.72em !important;
font-weight: 600 !important;
cursor: pointer !important;
white-space: nowrap !important;
line-height: 1.2 !important;
height: auto !important;
min-height: 0 !important;
transition: all 0.2s ease !important;
}
.tcg-edit-badge-btn:hover {
background: #ffcc33 !important;
color: #111 !important;
border-color: #ffcc33 !important;
}
/* Messaggio quando non ci sono carte selezionate */
.tcg-no-cards-msg {
grid-column: 1 / -1 !important;
width: 100% !important;
text-align: center !important;
color: #8e8e93 !important;
font-size: 0.85em !important;
padding: 16px 8px !important;
margin: 0 !important;
}
/* --- MEDIA QUERY BOTTONE MODIFICA SU SMARTPHONE --- */
@media (max-width: 600px) {
.tcg-bacheca-header {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 10px !important;
width: 100% !important;
}
.tcg-bacheca-header h3 {
font-size: 0.9em !important;
margin: 0 !important;
}
/* Reset radicale del bottone su mobile */
#editTcgShowcaseBtn,
.tcg-edit-badge-btn {
width: auto !important;
min-width: 0 !important;
max-width: fit-content !important;
flex: none !important;
padding: 3px 8px !important;
font-size: 0.68em !important;
font-weight: 600 !important;
line-height: 1 !important;
height: 24px !important;
border-radius: 12px !important;
background: #3a3a3c !important;
border: 1px solid #555 !important;
color: #fff !important;
box-shadow: none !important;
}
}
/* --- TOAST NOTIFICA IN-APP INTEGRATO --- */
.tcg-toast-notification {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: rgba(30, 30, 30, 0.95);
color: #ffcc33;
border: 1px solid #ffcc33;
padding: 10px 18px;
border-radius: 25px;
font-size: 0.85em;
font-weight: 600;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
z-index: 50000;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
white-space: nowrap;
display: flex;
align-items: center;
gap: 8px;
}
.tcg-toast-notification.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ======================================================== */
/* --- BADGE VERSIONE E MODALE PATCH NOTES (STILE RETRO) --- */
/* ======================================================== */
/* Badge versione nell'header */
.version-badge {
display: inline-block;
background: rgba(255, 204, 51, 0.2);
color: #ffcc33;
border: 1px solid #ffcc33;
font-size: 0.55em;
font-weight: 800;
padding: 2px 7px;
border-radius: 12px;
cursor: pointer;
vertical-align: middle;
margin-left: 6px;
transition: all 0.2s ease;
letter-spacing: 0.5px;
}
.version-badge:hover {
background: #ffcc33;
color: #111;
transform: scale(1.08);
box-shadow: 0 0 10px rgba(255, 204, 51, 0.5);
}
/* Finestra modale Patch Notes */
.patch-notes-modal-content {
background-color: #1f1f23 !important;
color: #f4f4f5 !important;
max-width: 580px !important;
width: 90% !important;
max-height: 85vh !important;
margin: 5vh auto !important;
border-radius: 16px !important;
border: 2px solid #3f3f46 !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.patch-notes-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background-color: #27272a;
border-bottom: 2px solid #E83F3F;
}
.patch-notes-header h2 {
margin: 0;
font-size: 1.3em;
color: #ffcc33;
font-weight: 800;
letter-spacing: 1px;
}
.patch-notes-subtitle {
margin: 2px 0 0 0;
font-size: 0.78em;
color: #a1a1aa;
}
.patch-notes-close-btn {
background: none;
border: none;
color: #a1a1aa;
font-size: 1.8em;
line-height: 1;
cursor: pointer;
padding: 0;
transition: color 0.2s;
}
.patch-notes-close-btn:hover {
color: #ef4444;
}
/* Corpo scorrevole */
.patch-notes-body {
padding: 16px 22px;
overflow-y: auto;
flex: 1;
text-align: left;
line-height: 1.5;
}
.patch-release-header {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid #3f3f46;
padding-bottom: 6px;
margin-bottom: 14px;
}
.patch-release-header h3 {
margin: 0;
font-size: 1.05em;
color: #fff;
font-weight: 700;
}
.patch-date {
font-size: 0.75em;
color: #71717a;
font-weight: 600;
}
.patch-section {
margin-bottom: 16px;
}
.patch-section h4 {
margin: 0 0 6px 0;
font-size: 0.85em;
color: #ffcc33;
letter-spacing: 0.5px;
}
.patch-section ul {
margin: 0;
padding-left: 18px;
}
.patch-section ul li {
font-size: 0.82em;
color: #d4d4d8;
margin-bottom: 6px;
}
.patch-notes-footer {
padding: 12px 20px;
background-color: #27272a;
border-top: 1px solid #3f3f46;
display: flex;
justify-content: center;
}
.patch-notes-confirm-btn {
width: 100% !important;
max-width: 250px !important;
background-color: #E83F3F !important;
color: #fff !important;
padding: 9px 18px !important;
font-weight: 700 !important;
font-size: 0.88em !important;
border-radius: 25px !important;
border: none !important;
cursor: pointer !important;
}
.patch-notes-confirm-btn:hover {
background-color: #d63030 !important;
}
/* ========================================================= */
/* --- SELEZIONE AVATAR: SENZA RIQUADRI E SENZA INDIETRO ---- */
/* ========================================================= */
.avatar-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
gap: 12px !important;
max-height: 65vh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
margin-top: 10px !important;
padding: 10px !important;
box-sizing: border-box !important;
background: transparent !important; /* Rimuove lo sfondo scuro della griglia */
border-radius: 0 !important;
}
/* Rimuove completamente qualsiasi box o riquadro attorno al personaggio */
.avatar-item-wrapper {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: transform 0.2s ease !important;
}
.avatar-item-wrapper:hover {
transform: scale(1.15) !important; /* Leggero ingrandimento pulito senza sfondi */
background: transparent !important;
}
.avatar-option {
width: 64px !important;
height: 64px !important;
max-width: 100% !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto !important;
image-rendering: pixelated !important;
background: transparent !important;
}