@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lato:wght@400;700&display=swap');

/* ======================================== */
/*              VARIABILI GLOBALI           */
/* ======================================== */
 :root {
  --font-title: 'MedievalSharp', cursive;
  --font-body: 'IM Fell English', serif;
  --color-parchment: #f5eecf;
  --color-wood: #6f4f28;
  --color-dark-wood: #3a2a15;
  --color-text: #3d3222;
  --color-stone: #c2b280;
  --color-stone-dark: #8b6d3b;
}

/* ======================================== */
/*              STILI GENERALI              */
/* ======================================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--color-dark-wood);
  /* Puoi usare una texture di sfondo per un effetto migliore */
  /* background-image: url('path/to/your/wood-texture.png'); */
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h2 {
  font-family: var(--font-title);
  color: var(--color-dark-wood);
  font-size: 2em;
  margin-top: 0;
  text-align: center;
}

/* ======================================== */
/*           HEADER, FOOTER & NAV           */
/* ======================================== */
header,
footer {
  background-color: var(--color-wood);
  color: var(--color-parchment);
  padding: 0.2em 1em; /* Ridotto ulteriormente il padding verticale per un footer più compatto */
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  border-bottom: 4px solid var(--color-dark-wood);
  z-index: 10;
}

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

.logo-link {
  text-decoration: none;
  color: inherit;
}

.logo {
  font-family: var(--font-title);
  font-size: 1.5em;
}

.top-icons span {
  margin-left: 15px;
  cursor: pointer;
}

/* Stile per il contatore di monete */
#city-coin-counter {
  font-family: var(--font-title);
  color: var(--color-parchment);
  font-size: 1.2em;
  margin-right: 15px; /* Aggiunge spazio a destra */
}

.footer-content {
  /* Stile di base per mobile (centrato) */
  text-align: center;
}

.footer-info p {
  /* Rimuove il margine di default dei paragrafi per un allineamento migliore */
  margin: 0.2em 0;
}

footer p {
  margin: 0.3em 0;
}

footer a {
  color: var(--color-parchment);
  text-decoration: underline;
}

/* Stile per desktop: dati distribuiti sulla larghezza */
@media (min-width: 769px) {
  .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Rimuovendo max-width e margin, il contenuto si estenderà per tutta la larghezza del footer */
    flex-wrap: nowrap; /* Impedisce agli elementi di andare a capo */
  }

  .footer-info {
    text-align: left; /* Allinea il testo a sinistra su desktop */
  }

  .footer-info p {
    margin: 0; /* Rimuove il margine verticale in modalità flex */
  }

}

.social-icons {
  margin: 10px 0;
}

.social-icons a {
  color: var(--color-parchment);
  font-size: 1.5rem; /* Dimensione delle icone */
  margin: 0 15px; /* Spazio tra le icone */
  text-decoration: none;
  transition: color 0.3s, transform 0.3s;
  display: inline-block; /* Necessario per applicare 'transform' */
}

.social-icons a:hover {
  color: var(--color-stone); /* Cambia colore al passaggio del mouse */
  transform: scale(1.2); /* Ingrandisce leggermente l'icona */
}


.container {
  display: flex;
  flex: 1; /* Fa in modo che il container occupi lo spazio rimanente */
}

/* ======================================== */
/*              AREA DELLA MAPPA            */
/* ======================================== */
.map-area {
  flex: 1;
  background-color: var(--color-parchment);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.city-map {
  position: relative;
  width: 100%;
  height: 100%;
  border: 3px dashed var(--color-wood);
  overflow: hidden;
}

/* Pulsanti di azione flottanti sulla mappa */
.floating-actions {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.floating-actions button {
  width: 50px;
  height: 50px;
  border-radius: 50%; /* Pulsanti circolari */
  border: 2px solid var(--color-dark-wood);
  background-color: var(--color-wood);
  color: var(--color-parchment);
  font-size: 1.5rem; /* Dimensione dell'icona/emoji */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: all 0.2s ease-in-out;
}

.floating-actions button:hover {
  transform: scale(1.1);
  background-color: var(--color-stone-dark);
}

.floating-actions button:disabled {
  filter: grayscale(1); /* Decolora lo sfondo e l'emoji */
  opacity: 0.5; /* Rende tutto semi-trasparente */
  cursor: not-allowed;
  transform: none; /* Annulla l'effetto di ingrandimento al passaggio del mouse */
}


#transform-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  transition: transform 0.1s linear;
}

#map-background-image {
  position: absolute;
  left: 200px; /* Aggiunta unità 'px' */
  top: 50px;  /* Aggiunta unità 'px' */
  z-index: -1;
}

/* Cambia il cursore quando si passa sopra un'area cliccabile della mappa immagine */
area[data-building-name] {
  cursor: pointer;
}

/* Stile per l'evidenziazione delle aree cliccabili */
.clickable-area-highlight {
  position: absolute;
  background-color: rgba(255, 255, 0, 0.3); /* Giallo semitrasparente */
  border: 2px solid rgba(255, 230, 0, 0.7); /* Bordo giallo più opaco */
  border-radius: 5px;
  pointer-events: none; /* FONDAMENTALE: permette ai click di "passare attraverso" il div e raggiungere l'area sottostante */
  transition: background-color 0.3s;
}

/* Nasconde i riquadri gialli se l'opzione sviluppatore è disattivata */
.hide-highlights .clickable-area-highlight {
  display: none;
}

#map-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: rgba(111, 79, 40, 0.85); /* var(--color-wood) con trasparenza */
  padding: 15px;
  border-radius: 12px;
  border: 2px solid var(--color-parchment);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#map-controls button {
  width: 50px;
  height: 50px;
  border: 2px solid var(--color-parchment);
  background-color: var(--color-stone-dark);
  color: white;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s, transform 0.1s, box-shadow 0.1s;
}

#map-controls button:hover {
  background-color: #a08255; /* Un po' più chiaro di --color-stone-dark */
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

#map-controls button:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

#map-controls .placeholder {
  visibility: hidden;
}

/* ======================================== */
/*           STILI FINESTRE MODALI          */
/* ======================================== */
.modal {
  position: fixed;
  z-index: 1100; /* Aumentato per essere sopra l'header mobile (che ha z-index 1001) */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  /* Aggiunte per centrare e permettere lo scroll */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
}

.modal.modal--is-open {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  position: relative; /* Necessario per posizionare il tag del costo */
  background-color: var(--color-parchment);
  color: var(--color-text);
  margin: auto; /* Rimosso il margine superiore percentuale, ora centrato da flex */
  padding: 20px;
  border: 8px solid var(--color-wood);
  width: 90%;
  max-width: 800px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transform: translateY(-20px);
  transition: transform 0.3s ease-in-out;
  /* Aggiunte per lo scroll su contenuti lunghi */
  max-height: 100vh; /* Altezza massima del 90% della finestra */
  overflow-y: auto; /* Abilita lo scroll verticale se il contenuto eccede */
}

.modal-cost-tag {
  position: absolute;
  top: 15px;
  right: 45px; /* Lascia spazio per il pulsante di chiusura */
  background-color: var(--color-stone-dark);
  color: var(--color-parchment);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: bold;
  border: 1px solid var(--color-dark-wood);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.modal.modal--is-open .modal-content {
  transform: translateY(0);
}

.close-button,
.close-generic-button {
  color: var(--color-stone-dark);
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
}

.close-button:hover, .close-button:focus,
.close-generic-button:hover, .close-generic-button:focus {
  color: var(--color-dark-wood);
  text-decoration: none;
}

.modal-content ul li[data-png-name] {
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.modal-content ul li[data-png-name]:hover {
  background-color: rgba(139, 109, 59, 0.2); /* var(--color-stone-dark) con trasparenza */
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 5px;
  border-bottom: 1px solid rgba(111, 79, 40, 0.2);
}

.setting-item:last-of-type {
  border-bottom: none;
}

.setting-item label {
  font-weight: bold;
  color: var(--color-text);
}

.modal-button {
  padding: 8px 12px;
  font-family: var(--font-body);
  font-weight: bold;
  background-color: var(--color-stone-dark);
  color: var(--color-parchment);
  border: 1px solid var(--color-dark-wood);
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.building-list-container {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

.building-list-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(111, 79, 40, 0.2); /* var(--color-wood) con trasparenza */
}

.building-list-item:last-child {
  border-bottom: none;
}

.building-list-item__image {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}

.building-list-item__details h4,
.building-list-item__details p {
  margin: 0;
}

.building-list-item__details h4 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.building-list-item__benefit {
  margin-top: 8px;
  font-size: 0.9em;
  color: var(--color-wood);
  font-style: italic;
}

.building-list-item__cost {
  font-size: 0.8em;
  font-family: var(--font-body);
  font-weight: normal;
  background-color: var(--color-stone-dark);
  color: var(--color-parchment);
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap; /* Impedisce al costo di andare a capo */
}

.modal-divider {
    border: 0;
    border-top: 1px solid rgba(111, 79, 40, 0.3);
    margin: 20px 0;
}

.modal-footer-info {
    display: none; /* Nascosto di default (su desktop) */
    font-size: 0.8em;
    text-align: center;
    color: var(--color-stone-dark);
    line-height: 1.5;
}

.modal-footer-info p {
    margin: 0.2em 0;
}

.modal-footer-info a {
    color: var(--color-wood);
    font-weight: bold;
}

/* Stile per un'immagine che deve riempire la modale */
.modal-full-image {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ======================================== */
/*              HOME PAGE                   */
/* ======================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.home-content {
    padding: 2em;
    max-width: 900px;
    margin: 2em auto;
    background-color: var(--color-parchment);
    border: 8px solid var(--color-wood);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: fadeIn 1s ease-out forwards;
}

.home-content h1 {
    font-family: var(--font-title);
    text-align: center;
    color: var(--color-dark-wood);
    font-size: 2.5em;
}

.photo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    margin: 2em 0;
}

.photo-gallery img {
    width: 100%;
    max-width: 250px;
    height: auto;
    border: 4px solid var(--color-wood);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.home-links {
    text-align: center;
    margin-top: 2em;
}

.home-links a {
    display: inline-block;
    margin: 0.5em;
    padding: 1em 2em;
    font-family: var(--font-title);
    font-size: 1.2em;
    text-decoration: none;
    color: var(--color-parchment);
    background-color: var(--color-stone-dark);
    border: 2px solid var(--color-dark-wood);
    border-radius: 8px;
    transition: all 0.2s;
}

.home-links a:hover {
    background-color: var(--color-wood);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.header-actions a {
    font-family: var(--font-title);
    color: var(--color-parchment);
    text-decoration: none;
    font-size: 1.2em;
    padding: 0.5em 1em;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.2s;
    white-space: nowrap; /* Impedisce al testo di andare a capo */
}

.header-actions a:hover {
    border-color: var(--color-parchment);
    background-color: rgba(245, 238, 207, 0.1); /* parchment with alpha */
}

/* Stile per header su mobile per evitare sovrapposizioni (applicato a tutte le pagine) */
@media (max-width: 768px) {

}

/* ======================================== */
/*      RESPONSIVE & MOBILE STYLES          */
/* ======================================== */

@media (max-width: 768px) {
    /* Header e Footer su mobile */
    footer {
      /* Non nascondiamo più l'intero footer, ma solo alcune parti */
      padding: 0.5em 0; /* Ridotto il padding verticale per un footer più compatto */
    }

    /* Nascondiamo tutti i paragrafi nel footer su mobile */
    .footer-content p {
        display: none;
    }

    /* Forza la visualizzazione del paragrafo con il Codice Fiscale su mobile */
    .footer-content p.footer-info-mobile {
        display: block;
        font-size: 0.85em; /* Leggermente ridotto per adattarsi meglio agli schermi piccoli */
    }

    header {
        padding: 5px 10px; /* Ridotto padding verticale per un header più compatto */
        position: relative;
        z-index: 1001;
        font-size: 1.1rem; /* Imposta una dimensione base per le icone */
    }

    header .logo {
      font-size: 1.1rem; /* Ridotta la dimensione del logo per coerenza */
    }

    .header-actions a {
        font-size: 1em; /* Riduci la dimensione del font del pulsante */
        padding: 0.3em 0.6em; /* Riduci il padding del pulsante */
    }

    .modal-footer-info {
        display: block; /* Mostra le info del footer nel modale solo su mobile */
    }
}

/* ======================================== */
/*           ELEMENTI ANIMATI               */
/* ======================================== */

#bouncing-beer {
    position: fixed; /* Si posiziona rispetto alla finestra del browser */
    top: 0;
    left: 0;
    z-index: 1000; /* Sopra la mappa, ma sotto le finestre modali (z-index: 1100) */
    width: 80px; /* Dimensione dell'immagine */
    height: auto;
    opacity: 0.5; /* Leggera trasparenza per non disturbare troppo */
    cursor: pointer; /* Cambia il cursore in una mano per indicare che è cliccabile */
}

/* ======================================== */
/*           STILE POSTER WALL (GDR PARTY)  */
/* ======================================== */

.poster-wall {
    padding: 2em;
    background-image: url('data/bg.webp'); /* Usa lo sfondo della mappa come texture muro */
    background-size: cover;
    min-height: 80vh;
}

.wall-header {
    text-align: center;
    background: rgba(245, 238, 207, 0.9);
    padding: 10px;
    border: 4px solid var(--color-wood);
    border-radius: 10px;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.poster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.poster-frame {
    background-color: var(--color-parchment);
    border: 12px solid var(--color-wood);
    border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%236f4f28"/><rect x="10" y="10" width="80" height="80" fill="%23f5eecf"/></svg>') 12;
    padding: 20px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
    text-align: center;
    position: relative;
}

.poster-frame:hover {
    transform: scale(1.05) rotate(1deg);
    box-shadow: 10px 10px 25px rgba(0,0,0,0.7);
    background-color: #fffdec;
}

.sold-out-package {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sold-out-badge {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin: 0 auto;
}

.poster-title {
    font-family: var(--font-title);
    color: var(--color-dark-wood);
    font-size: 1.5em;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--color-wood);
}

.poster-synopsis-short {
    font-style: italic;
    font-size: 1.1em;
}

.poster-btn {
    margin-top: 15px;
    background: var(--color-stone-dark);
    color: var(--color-parchment);
    border: none;
    padding: 5px 10px;
    font-family: var(--font-title);
    cursor: pointer;
    border-radius: 4px;
}

/* ======================================== */
/*      STILE PANNELLO DI GESTIONE          */
/* ======================================== */

.management-page {
    font-family: 'Lato', sans-serif;
    background-color: #1a1a1a;
    color: #e0e0e0;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

.management-page .container {
    max-width: 900px;
    margin: auto;
    background: #2a2a2a;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #444;
    display: block; /* Override flex del container globale */
}

.management-page h1, 
.management-page h2, 
.management-page h3 {
    font-family: 'Cinzel', serif;
    color: var(--color-stone);
    font-weight: 700;
    text-align: left;
}

.management-page h1 {
    text-align: center;
    border-bottom: 1px solid var(--color-stone);
    padding-bottom: 15px;
}

.management-page .building-card {
    border: 1px solid #444;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #333;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.management-page .building-card h3 {
    margin: 0;
    cursor: pointer;
    padding: 10px 0;
    position: relative;
    user-select: none;
}

.management-page .building-card h3::after {
    content: '−';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    color: var(--color-stone-dark);
}

.management-page .building-card.collapsed .collapsible-content {
    display: none;
}

.management-page .collapsible-content {
    padding-top: 15px;
    border-top: 1px solid #444;
    margin-top: 10px;
}

.management-page .building-card.collapsed h3::after {
    content: '+';
}

.management-page label {
    display: block;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 5px;
}

.management-page input[type="text"], 
.management-page input[type="number"], 
.management-page textarea {
    width: calc(100% - 20px);
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #444;
    font-size: 1em;
    background-color: #2a2a2a;
    color: #e0e0e0;
    font-family: 'Lato', sans-serif;
}

.management-page .btn {
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    margin-right: 10px;
    margin-top: 10px;
}

.management-page .btn-save { background-color: var(--color-stone); color: #1a1a1a; }
.management-page .btn-delete { background-color: #c73e3e; color: white; }
.management-page .btn-add { background-color: #3ba525; color: white; display: block; margin: 20px 0; }

.management-page .tab-menu {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 2px solid #444;
    padding-bottom: 10px;
}

.management-page .tab-btn {
    background: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #444;
    padding: 10px 20px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    border-radius: 5px 5px 0 0;
}

.management-page .tab-btn.active {
    background: var(--color-stone);
    color: #1a1a1a;
    border-color: var(--color-stone);
}

.management-page .toolbar {
    padding: 15px;
    background: #2a2a2a;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid #444;
}

.hidden {
    display: none !important;
}