/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --navy: #1a3a5c;
  --navy-scuro: #0f2540;
  --oro: #c8860a;
  --oro-light: #f5e6c8;
  --carta: #f5f0e8;
  --carta-scura: #ede8de;
  --post-bg: #faf7f0;
  --inchiostro: #2c1e0f;
  --muted: #8b7355;
  --rosso: #c0392b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--carta); color: var(--inchiostro); font-family: 'Lora', serif; min-height: 100vh; }
h1,h2,h3 { font-family: 'Playfair Display', serif; }

/* Top header */
.top-header { background: var(--navy); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.header-title-main { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; }
.header-title-sub { font-size: 0.72rem; opacity: 0.8; font-style: italic; }

/* Bottom nav */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 62px; background: var(--navy); display: flex; border-top: 3px solid var(--oro); z-index: 100; }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: rgba(255,255,255,0.6); font-size: 0.52rem; font-weight: 600; gap: 1px; }
.nav-item.active, .nav-item:hover { color: var(--oro); }
.nav-item .nav-icon { font-size: 1.15rem; line-height: 1; }

/* Feed / cards */
.feed { max-width: 640px; margin: 0 auto; padding: 12px 8px 80px; display: flex; flex-direction: column; gap: 10px; }
.post-card { background: var(--post-bg); border-left: 4px solid var(--navy); border-radius: 4px 12px 12px 4px; padding: 12px; box-shadow: 2px 2px 10px rgba(26,58,92,0.08); }

/* Spinner */
.spinner { width: 36px; height: 36px; border: 4px solid var(--oro-light); border-top-color: var(--oro); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Tabs */
.tabs { display: flex; overflow-x: auto; background: var(--navy); gap: 0; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-btn { flex: 1; min-width: 56px; padding: 10px 4px; background: none; border: none; color: rgba(255,255,255,0.6); font-size: 0.65rem; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.tab-btn.active { color: var(--oro); border-bottom-color: var(--oro); }
.tab-panel { display: none; padding: 16px 12px 80px; }
.tab-panel.active { display: block; }

/* Grid naufraghi */
.grid-naufraghi { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; max-width: 640px; margin: 0 auto; }
@media(min-width:500px){ .grid-naufraghi { grid-template-columns: 1fr 1fr 1fr; } }
.card-naufrago { background: var(--post-bg); text-decoration: none; color: var(--inchiostro); display: flex; flex-direction: column; overflow: hidden; border-radius: 6px; }
.card-foto { width: 100%; aspect-ratio: 1/1; overflow: hidden; background: var(--oro-light); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.card-foto img { width:100%; height:100%; object-fit: cover; object-position: top center; }
.card-info { padding: 8px 10px 10px; border-top: 3px solid var(--navy); }
.card-nome { font-family: 'Playfair Display', serif; font-size: 0.88rem; font-weight: 700; color: var(--navy); }
.card-ruolo { font-size: 0.7rem; color: var(--oro); font-style: italic; margin-top: 2px; }

/* Profilo header */
.profilo-header { background: var(--navy); color: #fff; padding: 24px 16px 16px; text-align: center; }
.profilo-avatar { width: 90px; height: 90px; border-radius: 50%; border: 4px solid var(--oro); object-fit: cover; margin: 0 auto 10px; display: block; background: var(--oro-light); }
.profilo-nome { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; }
.profilo-soprannome { font-style: italic; font-size: 0.9rem; opacity: 0.85; margin-top: 3px; }
.profilo-pronomi { font-size: 0.72rem; opacity: 0.65; margin-top: 2px; }

/* Forms */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 9px 12px; border: 1.5px solid #c8b89a; border-radius: 8px;
  font-family: 'Lora', serif; font-size: 0.9rem; background: var(--post-bg); color: var(--inchiostro);
  outline: none; transition: border-color 0.15s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--navy); }
.form-group textarea { min-height: 80px; resize: vertical; }

/* Buttons */
.btn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-family: 'Lora', serif; font-weight: 600; font-size: 0.9rem; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-oro { background: var(--oro); color: #fff; }
.btn-sm { padding: 6px 14px; font-size: 0.8rem; }

/* Stars rating */
.star-rating { display: flex; gap: 4px; }
.star { font-size: 1.4rem; cursor: pointer; opacity: 0.3; transition: opacity 0.1s; }
.star.active { opacity: 1; }

/* Media grid */
.media-grid { display: grid; gap: 4px; margin-top: 8px; }
.media-grid.c1 { grid-template-columns: 1fr; }
.media-grid.c2 { grid-template-columns: 1fr 1fr; }
.media-grid.c3 { grid-template-columns: 1fr 1fr 1fr; }
.media-item img, .media-item video { width: 100%; border-radius: 6px; }
.media-item audio { width: 100%; }

/* Modal */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:200; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal-box { background: var(--carta); border: 2px dashed var(--oro); border-radius: 12px; padding: 20px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; }
.modal-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--navy); margin-bottom: 14px; }

/* Isola zone */
.isola-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.zona-card { background: var(--post-bg); border: 2px solid var(--carta-scura); border-radius: 10px; padding: 14px; text-align: center; cursor: pointer; transition: all 0.2s; }
.zona-card.conquistata { border-color: var(--oro); background: var(--oro-light); }
.zona-icon { font-size: 2rem; display: block; margin-bottom: 6px; }
.zona-nome { font-size: 0.75rem; font-weight: 600; color: var(--navy); }

/* Classifica */
.podio { display: flex; justify-content: center; align-items: flex-end; gap: 12px; padding: 20px; }
.podio-slot { text-align: center; }
.podio-slot .medaglia { font-size: 2rem; display: block; }
.podio-slot .podio-nome { font-size: 0.75rem; font-weight: 600; margin-top: 4px; }
.podio-slot .podio-punti { font-size: 0.8rem; color: var(--oro); }
.classifica-row { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--post-bg); border-radius: 8px; margin-bottom: 6px; }
.classifica-bar { height: 6px; background: var(--oro); border-radius: 3px; transition: width 0.5s; }
.classifica-bar-bg { flex: 1; background: var(--carta-scura); border-radius: 3px; overflow: hidden; }

/* Emoji picker */
.emoji-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.emoji-option { font-size: 1.6rem; cursor: pointer; opacity: 0.4; transition: all 0.15s; border: 2px solid transparent; border-radius: 8px; padding: 4px; }
.emoji-option.selected { opacity: 1; border-color: var(--oro); background: var(--oro-light); }

/* Reaction buttons */
.reaction-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.reaction-btn { background: var(--carta-scura); border: 1px solid #c8b89a; border-radius: 20px; padding: 3px 10px; cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; gap: 3px; }
.reaction-btn.mine { background: var(--oro-light); border-color: var(--oro); }

/* Empty state */
.empty-msg { text-align: center; color: var(--muted); font-style: italic; padding: 40px 20px; }

/* FAB */
.fab { position: fixed; bottom: 80px; right: 20px; width: 52px; height: 52px; background: var(--oro); color: #fff; border: none; border-radius: 50%; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 12px rgba(200,134,10,0.4); z-index: 90; }

/* Bottiglia form */
.bottiglia-form { background: var(--post-bg); border: 2px dashed var(--oro); border-radius: 12px; padding: 16px; margin: 12px; }
.msg-card { background: var(--post-bg); border-left: 4px solid var(--oro); border-radius: 4px 10px 10px 4px; padding: 12px; margin-bottom: 8px; }

/* Animazioni homepage */
@keyframes ruota-bussola { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes dondola-timone { 0%,100%{transform:rotate(-15deg)} 50%{transform:rotate(15deg)} }
.bussola { animation: ruota-bussola 4s linear infinite; font-size: 3rem; display: inline-block; }
.timone { animation: dondola-timone 2s ease-in-out infinite; font-size: 2.5rem; display: inline-block; }

/* Hero card nav */
.hero-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; max-width: 500px; margin: 0 auto; }
.hero-card { background: var(--post-bg); border: 2px solid var(--carta-scura); border-radius: 12px; padding: 18px 12px; text-align: center; text-decoration: none; color: var(--inchiostro); transition: all 0.2s; }
.hero-card:hover { border-color: var(--oro); background: var(--oro-light); }
.hero-card .hc-icon { font-size: 2rem; display: block; margin-bottom: 6px; }
.hero-card .hc-label { font-family: 'Playfair Display', serif; font-size: 0.88rem; font-weight: 700; color: var(--navy); }
.hero-card .hc-sub { font-size: 0.7rem; color: var(--muted); margin-top: 3px; }

/* Post header */
.post-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.post-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--oro-light); border: 2px solid var(--navy); flex-shrink: 0; }
.post-meta { flex: 1; }
.post-author { font-weight: 600; font-size: 0.85rem; color: var(--navy); }
.post-time { font-size: 0.7rem; color: var(--muted); }
.post-text { font-size: 0.9rem; line-height: 1.6; margin-bottom: 6px; white-space: pre-wrap; }
.post-actions { display: flex; gap: 8px; margin-top: 8px; }
.comment-form { display: flex; gap: 6px; margin-top: 8px; }
.comment-form input { flex: 1; padding: 7px 10px; border: 1.5px solid #c8b89a; border-radius: 8px; font-family: 'Lora', serif; font-size: 0.85rem; background: var(--post-bg); }
.comments-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.comment-item { background: var(--carta-scura); border-radius: 8px; padding: 8px 10px; font-size: 0.82rem; }
.comment-author { font-weight: 600; color: var(--navy); }

/* Diario fields */
.campo-diario { margin-bottom: 18px; }
.campo-diario label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; font-family: 'Playfair Display', serif; }
.campo-diario input, .campo-diario textarea {
  width: 100%; padding: 9px 12px; border: 1.5px solid #c8b89a; border-radius: 8px;
  font-family: 'Lora', serif; font-size: 0.9rem; background: var(--post-bg); color: var(--inchiostro);
}
.campo-diario textarea { min-height: 80px; resize: vertical; }
.meteo-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.meteo-opt { font-size: 1.6rem; cursor: pointer; border: 2px solid transparent; border-radius: 8px; padding: 4px; opacity: 0.45; transition: all 0.15s; }
.meteo-opt.sel { opacity: 1; border-color: var(--oro); background: var(--oro-light); }

/* Radio group */
.radio-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.radio-group label { display: flex; align-items: center; gap: 5px; font-size: 0.82rem; cursor: pointer; background: var(--carta-scura); border: 1.5px solid #c8b89a; border-radius: 8px; padding: 5px 10px; transition: all 0.15s; }
.radio-group input[type=radio] { display: none; }
.radio-group input[type=radio]:checked + span, .radio-group label.sel { background: var(--oro-light); border-color: var(--oro); }

/* Ricordi forziere */
.ricordo-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--post-bg); border-radius: 8px; margin-bottom: 6px; cursor: pointer; border-left: 3px solid var(--navy); }
.ricordo-item:hover { border-left-color: var(--oro); }
.ricordo-data { font-size: 0.78rem; color: var(--muted); min-width: 80px; }
.ricordo-titolo { flex: 1; font-size: 0.88rem; font-family: 'Playfair Display', serif; }

/* Search bar */
.search-bar { display: flex; align-items: center; gap: 8px; background: var(--post-bg); border: 1.5px solid #c8b89a; border-radius: 10px; padding: 6px 12px; margin: 10px 12px; }
.search-bar input { flex: 1; border: none; background: none; font-family: 'Lora', serif; font-size: 0.9rem; outline: none; }

/* Admin badge */
.admin-banner { background: var(--navy); color: #fff; padding: 10px 16px; text-align: center; font-size: 0.85rem; }
.admin-banner a { color: var(--oro); text-decoration: none; font-weight: 600; }

/* Badge */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; margin-right: 4px; }
.badge-navy { background: #e8eef5; color: var(--navy); }
.badge-oro { background: var(--oro-light); color: var(--oro); }

/* Appunti */
.appunto-card { background: var(--post-bg); border-left: 4px solid var(--navy); border-radius: 4px 10px 10px 4px; padding: 10px 12px; margin-bottom: 8px; }

/* Forziere modal read */
.forziere-campo { margin-bottom: 12px; }
.forziere-campo .fc-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.forziere-campo .fc-val { font-size: 0.9rem; color: var(--inchiostro); }

/* Checkbox falò */
.falo-check { display: flex; flex-direction: column; gap: 8px; }
.falo-check label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; }
.falo-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--oro); }

/* Punteggio profilo */
.punti-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--oro-light); border: 1.5px solid var(--oro); border-radius: 20px; padding: 3px 12px; font-size: 0.8rem; color: var(--oro); font-weight: 600; margin-top: 6px; }

/* Coccarda rank */
.rank-badge { font-size: 1.5rem; }