/* ===================== AGES OF SASSARI ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #12222e; }
body { font-family: Georgia, "Times New Roman", serif; color: #ece5d3; }

#gioco { position: absolute; inset: 0; display: block; cursor: crosshair; }

/* ---------- caricamento ---------- */
#loading {
  position: absolute; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #1e3442 0%, #101f28 70%);
}
.ldTitolo { font-size: 42px; color: #e8c93b; letter-spacing: 2px; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.ldSotto { font-size: 17px; color: #cfc4a8; font-style: italic; margin-top: 4px; }
.ldTesto { margin-top: 26px; color: #9fb3a8; font-size: 14px; animation: respiro 1.6s ease-in-out infinite; }
@keyframes respiro { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }

/* ---------- HUD superiore ---------- */
#hudTop {
  position: absolute; top: 0; left: 0; right: 0; height: 48px;
  display: flex; align-items: center; gap: 18px; padding: 0 16px;
  background: linear-gradient(180deg, rgba(22,28,24,0.96), rgba(16,22,18,0.82));
  border-bottom: 1px solid rgba(240,210,120,0.35);
  box-shadow: 0 3px 14px rgba(0,0,0,0.35);
  z-index: 5; font-size: 15px;
}
#res .rrr { margin-right: 14px; color: #f0e8d0; }
#res .rrr i { font-style: normal; margin-right: 2px; }
#res .r-grano i { color: #e8c93b; }
#res .r-legno i { color: #b98a55; }
#res .r-pietra i { color: #b8bcc0; }
#res .r-cera i { color: #f2e3b0; text-shadow: 0 0 6px rgba(255,220,130,0.55); }
#popBox, #etaBox { color: #cfc4a8; white-space: nowrap; }
#popBox b, #etaBox b { color: #f0e8d0; }
#concBox { flex: 0 0 190px; }
#concLabel { font-size: 12px; color: #cfc4a8; letter-spacing: 1px; }
#concTrack { height: 8px; background: rgba(255,255,255,0.12); border-radius: 4px; overflow: hidden; margin-top: 2px; }
#concBar { height: 100%; width: 60%; background: #7ad98a; transition: width .4s, background .4s; box-shadow: 0 0 8px rgba(122,217,138,0.7); border-radius: 4px; }
#anno { font-style: italic; color: #e8c93b; }
#hudTop .spacer { flex: 1; }

/* ---------- bottoni ---------- */
.btn {
  display: inline-block; margin: 3px 4px 3px 0; padding: 6px 10px;
  background: #2c3a33; color: #ece5d3; border: 1px solid rgba(240,210,120,0.35);
  border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 13px;
  text-align: left;
}
.btn:hover { background: #3a4c42; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.35); }
.btn { transition: background .15s, transform .12s, box-shadow .15s; }
.btn.oro { background: #6d5423; border-color: #e8c93b; }
.btn.oro:hover { background: #8a6c2e; }
.btn.disab { opacity: 0.45; cursor: not-allowed; }
.btn.mini { padding: 4px 8px; }
.btn.grande { font-size: 16px; padding: 10px 18px; margin-top: 12px; }
.btn .costo, .costo { color: #e8c93b; font-size: 12px; margin-left: 6px; }
.btn.pulse { animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(232,201,59,0.7);} 50% { box-shadow: 0 0 0 8px rgba(232,201,59,0);} }

/* ---------- pannello selezione (basso sinistra) ---------- */
#selPanel {
  position: absolute; left: 10px; bottom: 10px; width: 340px; max-height: 46vh;
  overflow-y: auto; padding: 11px 13px;
  background: linear-gradient(180deg, rgba(24,30,26,0.94), rgba(16,21,18,0.96));
  border: 1px solid rgba(240,210,120,0.4); border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  z-index: 5; font-size: 13px;
}
.selTitolo { font-size: 16px; color: #e8c93b; margin-bottom: 4px; }
.selDesc { color: #cfc4a8; margin-bottom: 6px; line-height: 1.35; }
.selInfo { color: #ece5d3; margin: 4px 0; }
.selInfo.peste { color: #e87a7a; }
.dim { color: #9a9078; }
.buildGrid { display: flex; flex-wrap: wrap; margin-top: 6px; }
.buildGrid .btn.build { flex: 1 1 46%; }

/* ---------- minimappa (basso destra) ---------- */
#miniBox {
  position: absolute; right: 10px; bottom: 10px; z-index: 5;
  border: 2px solid rgba(240,210,120,0.5); border-radius: 6px; overflow: hidden;
  background: #0d1a24;
  box-shadow: 0 6px 22px rgba(0,0,0,0.5);
}
#minimappa { display: block; width: 240px; height: 180px; cursor: pointer; }

/* ---------- missioni (alto destra) ---------- */
#missioni {
  position: absolute; right: 10px; top: 58px; width: 300px;
  background: linear-gradient(180deg, rgba(24,30,26,0.92), rgba(16,21,18,0.94));
  border: 1px solid rgba(240,210,120,0.4); border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 10px 12px; z-index: 5; font-size: 13px;
}
#missioni b { color: #e8c93b; }
.missione { margin: 5px 0; color: #cfc4a8; line-height: 1.3; }
.missione.fatta { color: #7ad98a; }

/* ---------- log (sinistra) ---------- */
#log {
  position: absolute; left: 10px; top: 56px; width: 360px; max-height: 34vh;
  overflow-y: auto; z-index: 4; font-size: 13px; pointer-events: none;
}
.logRiga {
  background: rgba(18,24,20,0.82); border-left: 3px solid #5a6a5f;
  margin-bottom: 4px; padding: 5px 9px; border-radius: 0 4px 4px 0;
  color: #d8cfba; line-height: 1.3; pointer-events: auto;
}
.logRiga.ok { border-left-color: #7ad98a; }
.logRiga.warn { border-left-color: #e8a848; color: #e8ceA0; }
.logRiga.crisi { border-left-color: #e05a5a; color: #f0d0c8; }
.logRiga.evento { border-left-color: #e8c93b; color: #f0e6c0; }
.logRiga.festa { border-left-color: #b08ad0; color: #e0d0f0; }

/* ---------- banner peste ---------- */
#pesteBanner {
  position: absolute; top: 46px; left: 0; right: 0; text-align: center;
  background: rgba(120,20,20,0.85); color: #f0d0c8; padding: 4px;
  font-size: 14px; letter-spacing: 1px; z-index: 5; display: none;
}

/* ---------- modali ---------- */
#modal {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(6,10,8,0.7); z-index: 20;
}
.modalBox {
  width: min(620px, 92vw); max-height: 84vh; overflow-y: auto;
  background: #1c2620; border: 1px solid #e8c93b; border-radius: 8px;
  padding: 22px 26px; box-shadow: 0 12px 60px rgba(0,0,0,0.6);
  font-size: 14px; line-height: 1.45;
}
.modalBox h2 { color: #e8c93b; margin-bottom: 6px; font-size: 24px; }
.modalBox h3 { color: #e8c93b; margin: 12px 0 6px; }
.modalBox h3.sotto { margin-top: -4px; color: #cfc4a8; font-style: italic; font-weight: normal; }
.modalBox p { margin: 8px 0; color: #d8cfba; }
.modalBox ul.comandi { margin: 8px 0 8px 20px; color: #cfc4a8; }
.modalBox .vittoria { color: #7ad98a; }
.modalBox .sconfitta { color: #e87a7a; }
.scelte { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.btn.scelta { padding: 9px 12px; }
.btn.scelta b { display: block; }
.btn.scelta .effetto { color: #b8ac8e; font-size: 12px; }

/* ---------- il cerchio riparativo ---------- */
.fiducia {
  font-size: 12.5px; color: #cfc4a8; margin: -2px 0 6px;
  padding: 4px 8px; background: rgba(240,210,120,0.07);
  border-left: 3px solid rgba(240,210,120,0.5); border-radius: 3px;
}
.voce {
  margin: 7px 0; padding: 6px 10px; color: #e6ddc6; font-style: italic;
  background: rgba(255,255,255,0.045); border-left: 3px solid #8a6aa8; border-radius: 3px;
}
.bisogno {
  margin: 10px 0 2px; padding: 7px 10px; color: #f0e6c0;
  background: rgba(232,201,59,0.10); border: 1px solid rgba(232,201,59,0.4); border-radius: 4px;
}
.bisogno.muto { color: #b8ac8e; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.15); font-style: italic; }
.btn.scelta.risponde { border-color: #7ad98a; box-shadow: 0 0 8px rgba(122,217,138,0.25); }
.btn.scelta.risponde b { color: #a8e8b2; }

/* patti e ferite nel pannello missioni */
.pattiTitolo { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(240,210,120,0.25); color: #e8c93b; font-weight: bold; }
.patto { margin: 6px 0; color: #d8cfba; font-size: 12.5px; line-height: 1.35; }
.patto .btn.mini { margin-top: 3px; }
.feriteAvviso {
  margin-top: 8px; padding: 6px 8px; font-size: 12.5px; color: #e8b0a8;
  background: rgba(200,80,70,0.12); border-left: 3px solid #c05050; border-radius: 3px;
}

/* ---------- gremi ---------- */
.gremioGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.gremioBtn {
  background: #2c3a33; border: 1px solid rgba(240,210,120,0.3); border-radius: 4px;
  color: #ece5d3; padding: 7px 9px; cursor: pointer; text-align: left; font-family: inherit; font-size: 12.5px;
}
.gremioBtn:hover { background: #3a4c42; }
.gremioBtn.disab { opacity: 0.4; cursor: default; }
.gremioBtn b { display: inline; }
.gremioBonus { display: block; color: #b8ac8e; font-size: 11.5px; margin-top: 2px; }
.bandiera {
  display: inline-block; width: 14px; height: 10px; margin-right: 6px;
  border: 1px solid rgba(0,0,0,0.5); vertical-align: middle;
}
.codex p { margin: 6px 0; }
.codexGremi p { font-size: 13px; }

/* ---------- bottone codice ---------- */
#codexBtn { white-space: nowrap; }

/* scrollbar sobria */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #3a4c42; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- etichette dei luoghi (overlay 3D) ---------- */
#labels3d {
  position: fixed; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 2;
}
.lbl3d {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  pointer-events: none; will-change: transform, opacity;
  font-family: Georgia, 'Palatino Linotype', serif;
  color: #f2ead2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.55);
}
.lbl3d.citta { font-size: 13px; font-variant: small-caps; letter-spacing: 1px; }
.lbl3d.citta::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #f2ead2; margin-right: 5px; vertical-align: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.lbl3d.geo { font-size: 12px; font-style: italic; color: #e8e2cc; }
.lbl3d.regione {
  font-size: 15px; text-transform: uppercase; letter-spacing: 5px;
  color: #efe6c8; opacity: 0.8;
}
.lbl3d.mare { font-size: 13px; font-style: italic; letter-spacing: 2.5px; color: #b8d8e8; }
.lbl3d.sito { font-size: 12px; color: #f0d489; }
.lbl3d.campo { font-size: 12.5px; color: #fdf6e0; }
.lbl3d.campo .fid {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 5px; background: #9a9a9a;
  box-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* --- slot di salvataggio e stato pausa --- */
.slots { margin: 10px 0; }
.slotRow { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.slotRow > b { min-width: 150px; }
.slotDesc { flex: 1; font-size: 13px; }
.slotBtns { display: flex; gap: 6px; }
.btn.attivo { background: #7a5c38; }
.btn:disabled { opacity: 0.4; cursor: default; }

/* --- notifiche toast --- */
#toasts { position: fixed; top: 54px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; cursor: pointer; max-width: 520px; padding: 8px 14px; border-radius: 8px; font-size: 13px; color: #f2ecd9; background: rgba(30, 40, 36, 0.94); border-left: 4px solid #8fb98f; box-shadow: 0 4px 16px rgba(0,0,0,0.4); animation: toastIn .25s ease; }
.toast.crisi { border-left-color: #e04040; }
.toast.warn { border-left-color: #e8c93b; }
.toast.evento { border-left-color: #8fd0ff; }
.toast.festa { border-left-color: #e8a0e0; }
.toast.via { opacity: 0; transition: opacity .4s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; } }

/* --- tutorial contestuale --- */
#tutBox { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 10px; max-width: 560px; padding: 10px 16px; border-radius: 10px; background: rgba(40, 52, 46, 0.96); border: 1px solid #6b8f6b; color: #f2ecd9; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
#tutBox button { background: none; border: none; color: #c9c2ab; cursor: pointer; font-size: 14px; }
#tutBox button:hover { color: #fff; }

/* --- grafico statistiche --- */
.grafico { width: 100%; max-width: 480px; display: block; margin: 10px auto; }

/* --- terzo ciclo: secondari, opzioni, accessibilita' --- */
.missione.sec { opacity: 0.85; font-style: italic; }
.optRiga { display: block; margin: 4px 0; cursor: pointer; }
body.testoGrande #log, body.testoGrande #missioni, body.testoGrande #selPanel, body.testoGrande .toast, body.testoGrande #tutBox { font-size: 15px; }
body.daltonico .toast.crisi { border-left-color: #e07b28; }
body.daltonico .toast.warn { border-left-color: #4aa8e0; }
body.daltonico #concBar { filter: hue-rotate(40deg); }

/* --- touch / schermi piccoli --- */
@media (pointer: coarse) {
  .btn { min-height: 38px; padding: 8px 12px; }
  .btn.mini { min-height: 30px; }
  #hudTop { flex-wrap: wrap; row-gap: 4px; }
  #log { max-height: 18vh; }
}
@media (max-width: 900px) {
  #missioni { max-width: 42vw; font-size: 12px; }
  #selPanel { font-size: 12px; }
  .toast { max-width: 80vw; }
}

/* ==================== MOBILE / TOUCH ==================== */
#gioco { touch-action: none; }
body { overscroll-behavior: none; }
#hudTop, #missioni, #selPanel, #log, .toast, #tutBox { -webkit-user-select: none; user-select: none; }

/* annulla costruzione (il touch non ha Esc) */
#buildCancel { display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: 118px; z-index: 40; background: #6a3a34; border-color: #e08a7a; }

/* suggerimento orientamento */
#ruotaHint { display: none; }

/* pannello missioni richiudibile (il titolo fa da maniglia) */
#missioni b.mTitolo { cursor: pointer; display: block; }
#missioni.chiuso > *:not(b.mTitolo) { display: none; }

@media (pointer: coarse), (max-width: 720px) {
  #hudTop { height: auto; min-height: 40px; gap: 8px; padding: 2px 8px; padding-top: max(2px, env(safe-area-inset-top)); font-size: 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #hudTop::-webkit-scrollbar { display: none; }
  #hudTop .btn { padding: 5px 9px; min-height: 32px; white-space: nowrap; }
  #res { display: flex; flex-wrap: nowrap; align-items: center; }
  #res .rrr { margin-right: 8px; white-space: nowrap; }
  #popBox { white-space: nowrap; }
  #concBox { min-width: 90px; }
  #concTrack { width: 90px; }
  #etaBox { white-space: nowrap; }
  #log { top: 56px; max-height: 12vh; font-size: 11px; max-width: 56vw; opacity: 0.92; }
  #missioni { top: 56px; max-width: 44vw; font-size: 11px; padding: 6px 8px; max-height: 40vh; overflow-y: auto; }
  #selPanel { left: 0; right: 0; bottom: 0; max-width: none; border-radius: 10px 10px 0 0; font-size: 12px; padding-bottom: max(6px, env(safe-area-inset-bottom)); max-height: 34vh; overflow-y: auto; }
  #miniBox { bottom: auto; top: calc(56px + 12vh + 8px); left: 6px; right: auto; transform: scale(0.8); transform-origin: top left; }
  #tutBox { bottom: auto; top: 64px; max-width: 86vw; font-size: 12px; }
  #toasts { top: 56px; }
  .toast { font-size: 12px; }
  #buildCancel { bottom: calc(34vh + 12px); }
  .modalBox { padding: 14px 14px; font-size: 13px; max-height: 88vh; width: min(620px, 96vw); }
  .modalBox h2 { font-size: 19px; }
  .btn.scelta { min-height: 44px; }
}
@media (pointer: coarse) and (orientation: portrait) {
  #ruotaHint { display: block; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 70; background: rgba(28, 36, 30, 0.95); border: 1px solid #e8c93b; color: #f0e8d0; padding: 10px 16px; border-radius: 10px; font-size: 14px; pointer-events: none; animation: toastIn .3s ease; }
  #missioni { max-width: 60vw; }
}