/* Font del brand "Tower of Desire" nello splash (F6: Cormorant Garamond 600,
   scelto da Marco 2026-06-13). SELF-HOSTED in assets/fonts/ (subset latin, woff2)
   dal 2026-06-14 per la PWA: funziona offline, niente dipendenza da Google Fonts.
   Serve solo per "TOWER of DESIRE" (tutto ASCII), quindi basta il subset latin. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-600-italic-latin.woff2") format("woff2");
}
/* Font manoscritto delle FOTO (G1, deciso da Marco 2026-07-19: Caveat 600). Stesso
   self-hosting del Cormorant; usato per le caption delle polaroid (reveal) e per le
   eventuali note manoscritte future. Sostituisce la catena Segoe Print/Comic Sans:
   col woff2 self-hosted rende uguale anche su Android. 51KB (subset latin statico). */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/caveat-600-latin.woff2") format("woff2");
}

/* ========== Design tokens (palette v2, decisa 2026-06-12) ==========
   Tutti i colori dell'app vivono qui: per cambiare un colore si cambia UNA riga.
   (Predispone anche l'eventuale tema chiaro futuro: basta ridefinire i token.) */
:root {
  --bg: #07090d;            /* fondo chat e liste: quasi-nero profondo */
  --surface: #14161c;       /* header, tab, compose, modali */
  --raised: #20232b;        /* bolle di lei, input, hover, pillole system */
  --border: #2a2d35;        /* bordi sottili */
  --text: #f2f2f5;
  --text-2: #cdd3da;
  --muted: #8e8e96;
  --accent: #0a84ff;        /* blu iMessage: tab attiva, send, conferme */
  --accent-hover: #3b9bff;
  --bubble-me: #0a84ff;     /* bolla del player (gradiente con -deep) */
  --bubble-me-deep: #0070e8;
  --game: #e9b44c;          /* ORO: la dimensione gioco (banner Day, badge, progressione) */
}

/* ========== Reset ========== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior-y: none; }   /* il tira-giorno su Android innescava il pull-to-refresh del browser (audit 2026-07) */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #050608;
  color: #e8e8ea;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  font-size: 18px;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ========== Phone Shell ========== */
#phone {
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  max-height: 940px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* SAFE-AREA iOS: da PWA installata con status bar black-translucent, header e compose finivano
     sotto il notch / sopra la home bar. env() vale 0 su desktop e nel browser, quindi qui non
     cambia nulla; su iPhone installato tiene il contenuto nell'area sicura. (audit §1b, 2026-07-07) */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Rimuove il tap-highlight grigio/blu di default su mobile (webkit) */
#phone, #phone * {
  -webkit-tap-highlight-color: transparent;
}
#phone button:focus,
#phone [role="button"]:focus {
  outline: none;
}

/* ========== Tooltip mobile (long-press) ========== */
.mobile-tooltip {
  position: absolute;
  background: rgba(20, 24, 30, 0.95);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3000;
  opacity: 0;
  transition: opacity 0.15s;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.mobile-tooltip.show { opacity: 1; }

@media (min-width: 540px) {
  #phone { border-radius: 32px; height: 92vh; height: 92dvh; }
  body { padding: 20px; }
}

/* ========== Screens ========== */
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.screen.hidden { display: none; }

/* ========== STORY SELECT (title screen: l'app si apre qui) ==========
   Carousel full-bleed (deciso 2026-06-12). Con UNA storia l'auto-slide e' SPENTO;
   da 2+ storie: avanza ogni 7s e un tocco lo ferma per sempre (niente ripresa). */
#screen-storyselect { background: var(--bg); }
.ss-car { flex: 1; position: relative; overflow: hidden; min-height: 0; }
.ss-top { position: absolute; top: 22px; left: 0; right: 0; text-align: center; z-index: 4; pointer-events: none; }
.ss-name { font-size: 24px; font-weight: 800; letter-spacing: 1.2px; color: #fff; display: flex; align-items: center; justify-content: center; gap: 11px; text-shadow: 0 2px 14px rgba(0,0,0,0.75); }
.ss-name img { width: 31px; height: 31px; border-radius: 9px; }
.ss-track { display: flex; height: 100%; transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1); }
.ss-slide { width: 100%; height: 100%; flex-shrink: 0; position: relative; overflow: hidden; }
.ss-slide img.ss-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; display: block; }
.ss-slide .ss-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,13,0.85) 0%, rgba(7,9,13,0.25) 22%, transparent 45%, rgba(7,9,13,0.6) 66%, rgba(7,9,13,0.98) 90%); }
.ss-info { position: absolute; left: 20px; right: 20px; bottom: 64px; text-align: center; }
.ss-kick { font-size: 11px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--game); margin-bottom: 6px; }
.ss-title { font-size: 36px; font-weight: 900; letter-spacing: -0.5px; line-height: 1.02; color: #fff; text-shadow: 0 3px 18px rgba(0,0,0,0.55); max-width: 7em; margin: 0 auto; }
.ss-name { font-size: 17px; color: #fff; font-weight: 700; margin-top: 15px; letter-spacing: 0.2px; }
.ss-sub { font-size: 12.5px; color: #9aa0a8; font-weight: 600; margin-top: 3px; letter-spacing: 0.3px; }
.ss-tagline { font-size: 13.5px; color: var(--text-2); margin: 9px auto 16px; max-width: 280px; line-height: 1.5; font-style: italic; }
.ss-day { position: absolute; top: 56px; right: 16px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; color: #ffe2ab; background: rgba(24,18,8,0.82); border: 1px solid rgba(233,180,76,0.5); padding: 4px 10px; border-radius: 999px; z-index: 3; }
.ss-day.done { color: #9aa0a8; background: rgba(20,22,28,0.85); border-color: #2f3340; }
.ss-cta { display: inline-block; min-width: 210px; text-align: center; font-size: 14px; font-weight: 800; letter-spacing: 1.6px; padding: 12px 30px; border-radius: 999px; background: linear-gradient(180deg, #f2c25c, #d99a28); color: #221703; box-shadow: 0 6px 18px -6px rgba(233,180,76,0.55); margin-top: 22px; }
.ss-cta:active { transform: translateY(1px); }

/* Frecce di navigazione del carousel (idea Marco 2026-06-14): piu' comode dei puntini.
   Si nascondono agli estremi via .hide (gestito da ssGo). */
.ss-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(8,10,16,0.40); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 4px 14px -4px rgba(0,0,0,0.6); transition: opacity 0.3s ease; }
.ss-nav svg { width: 23px; height: 23px; }
.ss-nav-prev { left: 12px; }
.ss-nav-next { right: 12px; }
.ss-nav.hide { opacity: 0; pointer-events: none; }
.ss-nav:active { transform: translateY(-50%) scale(0.9); }
/* slide "next story" (coming soon, v2 2026-06-13): buio PULITO, niente figura, niente
   rosso/oro, niente CTA. Solo la bolla typing come unico elemento vivo. */
.ss-slide.ss-locked { background: radial-gradient(120% 90% at 50% 32%, #0e0a0c 0%, #090709 55%, #060507 100%); box-shadow: inset 0 0 100px 36px rgba(0,0,0,0.62); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
/* aurora: due aloni morbidi che respirano, profondita' senza figura (deciso 2026-06-13) */
/* "Fuori fuoco" (scelto da Marco 2026-06-14): macchie calde MOLTO smorzate e scure nel buio,
   blur forte, niente figura. Meno caldo/prepotente dell'aurora: il focus resta sulle scritte. */
.ss-aurora { position: absolute; inset: -14%; background: radial-gradient(38% 28% at 50% 32%, rgba(168, 150, 142, 0.13), transparent 70%), radial-gradient(52% 42% at 40% 72%, rgba(92, 34, 48, 0.26), transparent 72%), radial-gradient(46% 38% at 67% 60%, rgba(68, 40, 64, 0.22), transparent 72%); filter: blur(34px); animation: ss-aurora 12s ease-in-out infinite; pointer-events: none; }
@keyframes ss-aurora { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; } 50% { transform: translate(0, -10px) scale(1.05); opacity: 0.85; } }
.ss-bubble { position: relative; background: linear-gradient(180deg, #23262f, #1b1e25); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 32px; border-bottom-left-radius: 10px; padding: 25px 34px; display: flex; gap: 12px; align-items: center; box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.85); }
.ss-bubble i { width: 13px; height: 13px; border-radius: 50%; background: #6a7080; animation: ss-typing 1.5s ease-in-out infinite; }
.ss-bubble i:nth-child(2) { animation-delay: 0.18s; }
.ss-bubble i:nth-child(3) { animation-delay: 0.36s; }
@keyframes ss-typing { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }
.ss-locked .ss-t { position: relative; font-size: 18px; font-weight: 800; letter-spacing: 5px; text-transform: uppercase; color: #d8d8e0; margin-top: 46px; }
.ss-locked .ss-s { position: relative; font-size: 14.5px; color: var(--muted); margin-top: 13px; font-style: italic; letter-spacing: 0.3px; }
.ss-locked .ss-soon { position: relative; font-size: 11px; color: var(--text-2); letter-spacing: 2.6px; text-transform: uppercase; margin-top: 32px; border: 1px solid rgba(255, 255, 255, 0.13); padding: 9px 24px; border-radius: 999px; }
.ss-dots { position: absolute; bottom: 34px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 4; }
.ss-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.25); cursor: pointer; transition: all 0.3s; }
.ss-dots i.on { background: var(--game); width: 19px; border-radius: 999px; }
.ss-foot { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 10px; color: #565660; letter-spacing: 0.4px; z-index: 4; }

/* Splash: copre tutto a ogni avvio, un tap la salta.
   Le due meta' del logo si compongono (clip del PNG), lampo sulla giuntura,
   nome digitato col cursore. */
/* Coreografia v2 (feedback Marco: tutto piu' grande, piu' arioso, piu' LENTO):
   0.2s "presents" entra e resta solo in scena -> 1.4s le meta' si compongono ->
   2.1s lampo+snap -> 2.5-3.3s il nome si digita -> 3.8s lo slogan EMERGE lento
   (blur che si dissolve) -> ~1.5s di scena completa ferma -> 5.9s fade. Tap salta. */
#splash-overlay { position: absolute; inset: 0; background: #050608; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 4000; transition: opacity 0.55s ease; }
#splash-overlay.fade { opacity: 0; pointer-events: none; }
#splash-overlay.hidden { display: none; }
/* il brand fa da INTRODUZIONE: grande, su due righe, da solo in scena per ~1.3s */
#splash-overlay .sp-pres { display: flex; flex-direction: column; align-items: center; gap: 7px; animation: sp-fadeup 0.9s 0.2s ease both; padding: 0 16px; }
/* F6: Cormorant (sigla serif sensuale) con "of" corsivo dorato staccato */
.sp-brand { font-family: "Cormorant Garamond", Georgia, serif; font-size: 29px; font-weight: 600; letter-spacing: 2px; color: #ece5d8; white-space: nowrap; }
.sp-brand .of { font-style: italic; font-weight: 600; text-transform: lowercase; color: var(--game); letter-spacing: 0; margin: 0 5px; }
.sp-presents { font-size: 12px; letter-spacing: 4.5px; text-transform: uppercase; color: #8e8e96; }
/* il riquadro (ombra+fondo) appare INSIEME alle meta', non prima */
.sp-logo { width: 142px; height: 142px; position: relative; margin: 34px 0 24px; border-radius: 33px; overflow: hidden; box-shadow: none; animation: sp-frame 0.5s 1.6s ease forwards, sp-snap 0.26s 2.62s ease; }
@keyframes sp-frame { to { box-shadow: 0 22px 60px -18px rgba(155, 22, 38, 0.55); } }
/* le meta' entrano LENTE (1.15s, feedback Marco: niente sfrecciata) */
.sp-half { position: absolute; inset: 0; background: url("assets/brand/sidechat_512.png") center/cover; }
.sp-half.top { clip-path: inset(0 0 50% 0); transform: translateX(-170px); opacity: 0; animation: sp-in 1.15s 1.5s cubic-bezier(0.25, 0.8, 0.25, 1.04) forwards; }
.sp-half.bot { clip-path: inset(50% 0 0 0); transform: translateX(170px); opacity: 0; animation: sp-in 1.15s 1.5s cubic-bezier(0.25, 0.8, 0.25, 1.04) forwards; }
@keyframes sp-in { to { transform: translateX(0); opacity: 1; } }
.sp-seam { position: absolute; left: -8%; right: -8%; top: 50%; height: 2.5px; margin-top: -1.25px; background: linear-gradient(90deg, transparent, rgba(255,243,224,1), transparent); box-shadow: 0 0 14px 2px rgba(255,230,190,0.85), 0 0 34px 6px rgba(233,180,76,0.45); opacity: 0; animation: sp-seam 0.6s 2.62s ease-out; }
@keyframes sp-seam { 0% { opacity: 0; transform: scaleX(0.2); } 20% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.05); } }
@keyframes sp-snap { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
#splash-overlay .sp-name { font-size: 29px; font-weight: 800; letter-spacing: 1.4px; color: var(--text); min-height: 38px; display: flex; align-items: center; }
/* lo slogan del GIOCO: emerge come una frase importante (blur che si dissolve, lento) */
.sp-tagline { font-size: 15px; color: #b9b9c2; letter-spacing: 0.8px; margin-top: 26px; font-style: italic; opacity: 0; animation: sp-slogan 1.4s 4.9s ease-out both; }
@keyframes sp-slogan { 0% { opacity: 0; filter: blur(6px); transform: translateY(6px); } 100% { opacity: 1; filter: blur(0); transform: none; } }
/* il cursore appare SOLO quando il nome inizia a digitarsi (3.1s): prima distoglieva
   l'attenzione dall'icona che si compone (feedback Marco) */
.sp-cursor { display: inline-block; width: 2.5px; height: 25px; background: var(--game); margin-left: 4px; opacity: 0; animation: sp-cursor 0.7s 3.1s step-end infinite; }
@keyframes sp-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes sp-fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ===== Onboarding a catena: overlay del tour (deciso 2026-06-13) ===== */
#tour-blocker { position: absolute; inset: 0; background: transparent; z-index: 5000; display: none; }
#tour-blocker.show { display: block; }
#tour-blocker.dim { background: rgba(3, 4, 6, 0.8); }
#tour-hole { position: absolute; border-radius: 13px; box-shadow: 0 0 0 9999px rgba(3, 4, 6, 0.82); border: 1.5px solid rgba(233, 180, 76, 0.75); z-index: 5001; pointer-events: none; opacity: 0; transition: opacity 0.3s, left 0.4s cubic-bezier(0.3,0.7,0.2,1), top 0.4s cubic-bezier(0.3,0.7,0.2,1), width 0.4s cubic-bezier(0.3,0.7,0.2,1), height 0.4s cubic-bezier(0.3,0.7,0.2,1); }
#tour-hole.show { opacity: 1; }
#tour-tip { position: absolute; z-index: 5002; width: 262px; background: #181b22; border: 1px solid var(--border); border-radius: 14px; padding: 14px 15px; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.9); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
#tour-tip.show { opacity: 1; pointer-events: auto; }
#tour-tip .tt-title { font-size: 14px; font-weight: 800; color: var(--game); margin-bottom: 5px; }
#tour-tip .tt-body { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
#tour-tip .tt-body b { color: var(--text); }
#tour-tip .tt-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
#tour-tip .tt-skip { font-size: 11.5px; color: var(--muted); cursor: pointer; padding: 2px 4px; }
#tour-tip .tt-step { font-size: 10.5px; color: var(--muted); letter-spacing: 1px; }
#tour-tip .tt-next { font-size: 12.5px; font-weight: 800; background: linear-gradient(180deg, #f2c25c, #d99a28); color: #221703; padding: 8px 20px; border-radius: 999px; cursor: pointer; }

/* Age gate: card sopra la selezione, solo al primo avvio */
#agegate-overlay { position: absolute; inset: 0; background: rgba(4,5,7,0.88); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 3800; padding: 26px; }
#agegate-overlay.hidden { display: none; }
.ag-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px 22px 20px; width: 100%; max-width: 340px; text-align: center; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.9); }
/* targhetta rating monocroma (deciso da Marco 2026-07-19: via il cerchio rosso "da
   casino'", 18+ come lo mostrano le piattaforme streaming) */
.ag-chip { display: inline-block; margin: 0 auto 12px; font-size: 15px; font-weight: 800; letter-spacing: 0.5px; color: #f2f2f5; background: #2a2d35; border-radius: 6px; padding: 5px 11px; }
.ag-title { font-size: 18px; font-weight: 800; color: var(--text); }
.ag-txt { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 9px 0 19px; }
.ag-yes { display: block; width: 100%; background: linear-gradient(180deg, #f2c25c, #d99a28); color: #221703; font-size: 13.5px; font-weight: 800; letter-spacing: 0.6px; padding: 12px 0; border-radius: 999px; }
.ag-no { display: block; width: 100%; margin-top: 9px; color: var(--muted); font-size: 12.5px; padding: 8px 0; }

/* ========== CHAT LIST ========== */
#chatlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
  background: var(--surface);
}
.app-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
}
#chatlist-header .actions { display: flex; gap: 8px; }
.hicon {
  padding: 6px;
  color: var(--text-2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  font-size: 22px;
  line-height: 1;
  transition: background 0.12s;
}
.hicon:hover { background: var(--raised); }

#chatlist-tabs {
  display: flex;
  padding: 0 14px;
  border-bottom: 1px solid var(--raised);
  background: var(--surface);
}
.tab {
  flex: 1;
  padding: 18px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.tab svg { width: 26px; height: 26px; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

.view {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  background: var(--bg);
  min-height: 0;
}
.view.hidden { display: none; }
.view::-webkit-scrollbar { width: 6px; }
.view::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Pager della home (2026-06-14): Chats/Stats/Map scorrono col dito. touch-action pan-y
   lascia lo scroll verticale al browser; lo swipe orizzontale lo gestisce il JS. */
#home-pager { flex: 1; overflow: hidden; position: relative; min-height: 0; touch-action: pan-y; }
#home-track { display: flex; height: 100%; will-change: transform; }
.home-pane { width: 100%; flex-shrink: 0; height: 100%; display: flex; flex-direction: column; min-height: 0; }
#home-vn-map { background: var(--bg); }
#home-map-daynav { display: flex; gap: 10px; padding: 12px 16px; background: #0e0b14; flex-shrink: 0; }
#home-map-daynav.hidden { display: none; }

.contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.12s;
}
.contact-row:hover { background: var(--surface); }
.contact-row .ca-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.contact-row .ca-info { flex: 1; min-width: 0; }
.contact-row .ca-name {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
}
/* anteprima ultimo messaggio (la riga cresce: con i futuri contatti di vita e' necessaria) */
/* storia annunciata ma bloccata (deciso da Marco 2026-07-19): riga smorzata, "Coming soon"
   a destra nella posizione del timestamp; il tap apre il popup */
.contact-row.locked .ca-avatar { filter: grayscale(.85) brightness(.72); }
.contact-row.locked .ca-name { color: var(--muted); }
.ca-coming { margin-left: auto; font-size: 13px; color: #8e8e96; flex-shrink: 0; }
.contact-row .ca-preview {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Badge Day: ORO = c'e' da giocare, GRIGIO = finito il disponibile.
   Vive nell'HEADER della home (il giorno e' uno stato della STORIA, non della
   singola chat: deciso 2026-06-12); stessa pillola anche sulla card del title. */
.ca-day {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #ffe2ab;
  background: linear-gradient(165deg, #4a3517, #2c2010);
  border: 1px solid rgba(233, 180, 76, 0.45);
  padding: 4px 11px;
  border-radius: 999px;
}
.ca-day.done {
  color: #9aa0a8;
  background: #1b1e24;
  border-color: #2f3340;
}
/* header E3 (deciso 2026-06-13): logo + titolo, niente day in home (il giorno
   vive su Stats e Map). Il logo ancora il brand come fa WhatsApp col suo glifo. */
#chatlist-header .title-wrap { display: flex; align-items: center; gap: 11px; min-width: 0; }
#chatlist-header .app-logo { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; }
#home-day-badge.hidden { display: none; }
.contact-row-tutorial .ca-avatar {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent) 0%, #7c5cff 100%);
  object-fit: contain;
  padding: 4px;
}
#chat-header.chat-header-tutorial #avatar {
  background: linear-gradient(135deg, var(--accent) 0%, #7c5cff 100%);
  border-color: var(--accent);
  object-fit: contain;
  padding: 3px;
}

/* Detail screens (Status / Endings per contatto) */
#status-detail-header, #endings-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--raised);
  flex-shrink: 0;
}
#status-detail-back, #endings-detail-back {
  font-size: 34px;
  line-height: 1;
  padding: 0 6px;
  color: var(--text-2);
}
.detail-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
#status-detail-header .info, #endings-detail-header .info {
  flex: 1;
  min-width: 0;
}
#status-detail-header .name, #endings-detail-header .name {
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
}

/* ========== CHAT HEADER ========== */
#chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--raised);
  position: relative;
  flex-shrink: 0;
}
#chat-header #btn-back {
  font-size: 34px;
  line-height: 1;
  padding: 0 6px;
  color: var(--text-2);
}
#avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  background: #333;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: transform 0.15s;
  flex-shrink: 0;
}
#avatar:hover { transform: scale(1.05); }
#chat-header .info { flex: 1; min-width: 0; }
#chat-header .name {
  font-weight: 600;
  font-size: 22px;
  color: var(--text);
}

#chat-header #btn-gallery,
#chat-header #btn-skip,
#chat-header #btn-back-choice,
#chat-header #btn-reset {
  padding: 4px 4px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  border-radius: 8px;
  transition: background 0.12s;
}
#chat-header #btn-gallery:hover,
#chat-header #btn-skip:hover,
#chat-header #btn-back-choice:hover,
#chat-header #btn-reset:hover { background: var(--raised); }

/* ========== Chat Area ========== */
#chat {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 12px 10px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;   /* lo scroll al bordo non "buca" verso il refresh del browser (audit 2026-07) */
}
#chat::-webkit-scrollbar { width: 6px; }
#chat::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* GIORNI A SEZIONI (2026-06-15): ogni giorno e' un blocco; se ne mostra UNO ALLA VOLTA. */
.day-section { display: flex; flex-direction: column; gap: 8px; }
.day-section:not(.current) { display: none; }
#day-chip { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 6px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
#day-chip.hidden { display: none; }
#day-chip .dc-label { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; color: #cdd3da; padding: 0 10px; min-width: 64px; text-align: center; }
#day-chip .dc-arrow { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #cdd3da; border-radius: 50%; }
#day-chip .dc-arrow svg { width: 18px; height: 18px; }
#day-chip .dc-arrow:hover { background: var(--raised); }
#day-chip .dc-arrow.hidden { visibility: hidden; }
#day-chip .dc-arrow:active { transform: scale(0.9); }
/* consultazione di un giorno passato: niente compose (si gioca solo nel giorno corrente).
   Stessa sola lettura per la scheda seconda del multi-tab (2bis, 2026-07-19). */
#bottom.readonly-day #choices, #bottom.readonly-day #compose-bar, #bottom.readonly-day #startday-pill,
#bottom.tab-readonly #choices, #bottom.tab-readonly #compose-bar, #bottom.tab-readonly #startday-pill { display: none; }
/* avviso multi-tab: banner sotto l'header, lingua del day-chip (sobrio, niente allarmi) */
#tab-lock-banner { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
#tab-lock-banner.hidden { display: none; }
#tab-lock-banner svg { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
#screen-chat { position: relative; }
#day-pull { position: absolute; left: 50%; transform: translateX(-50%); z-index: 7; display: none; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; background: linear-gradient(180deg, #1c1f27, #14161c); border: 1px solid var(--border); border-radius: 999px; color: #cdd3da; font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px; box-shadow: 0 8px 22px -8px rgba(0,0,0,0.8); pointer-events: none; }
#day-pull.show { display: flex; }
#day-pull .dp-arrow { display: flex; width: 22px; height: 22px; align-items: center; justify-content: center; color: var(--muted); transition: transform .15s ease, color .15s ease; }
#day-pull .dp-arrow svg { width: 18px; height: 18px; }
#day-pull.up .dp-arrow { transform: rotate(180deg); }
#day-pull.ready .dp-arrow { color: var(--game); }
#day-pull.ready { border-color: rgba(233,180,76,0.55); color: #ffe2ab; }
#day-pull .dp-hint { color: var(--muted); font-weight: 600; font-size: 11px; }
#day-pull.ready .dp-hint { color: #e9b44c; }
.row-system, .row-system .bubble { cursor: default; }   /* separatori (Day N / contesto): niente manina, neanche sul fumetto interno */
/* #day-picker RIMOSSO (2026-07-06): frecce + ritorno a oggi bastano */
/* maniglia CLICCABILE (tap = rilegge l'hint per 2s) e rimbalzo LIMITATO a 3 cicli:
   un elemento che rimbalza per sempre mentre leggi era rumore (decisioni Marco 2026-07-06) */
#day-handle { position: absolute; left: 50%; z-index: 5; display: flex; align-items: center; gap: 7px; padding: 5px 13px; background: rgba(20,22,28,0.9); border: 1px solid rgba(255,255,255,0.09); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; animation: dh-bob 1.9s ease-in-out 3; transform: translateX(-50%); }
#day-handle.hidden { display: none; }
#day-handle.mini { padding: 4px 5px; gap: 0; }
#day-handle.mini .dh-hint { display: none; }
#day-handle .dh-chev { width: 16px; height: 16px; flex-shrink: 0; }
@keyframes dh-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } }

/* ========== Rows ========== */
.row {
  display: flex;
  width: 100%;
  animation: pop-in 0.22s ease-out;
}
.row-player { justify-content: flex-end; }
.row-girl { justify-content: flex-start; }
.row-system { justify-content: center; }

@keyframes pop-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== Bubbles ========== */
.bubble {
  max-width: 78%;
  padding: 12px 17px;
  border-radius: 22px;
  font-size: 19px;
  line-height: 1.35;
  word-wrap: break-word;
  position: relative;
  cursor: pointer;
}
.bubble .speaker { display: none; }
.bubble-player {
  background: linear-gradient(180deg, var(--bubble-me), var(--bubble-me-deep));
  color: #fff;
  border-bottom-right-radius: 6px;
}
.bubble-girl {
  background: var(--raised);
  color: var(--text);
  border-bottom-left-radius: 6px;
}
.bubble-system {
  background: transparent;
  color: var(--text-2);
  font-size: 21px;
  font-weight: 500;
  padding: 0;
  text-align: center;
  max-width: 92%;
  cursor: pointer;
}
.bubble-system .text {
  background: var(--raised);
  border-radius: 22px;
  padding: 9px 24px;
  display: inline-block;
  border: 1px solid var(--border);
  letter-spacing: 0.2px;
}
/* NB pillole System: TUTTE neutre, anche "Day N" (deciso 2026-06-12: il Day oro accanto
   ad "After School" grigia stonava; l'oro vive nei momenti di gioco veri: Day complete,
   mappa, badge della home). */
.row-system + .row-system { margin-top: -4px; }

.bubble:not(.bubble-system):hover { filter: brightness(1.12); }

/* ========== Image messages ========== */
.bubble .msg-img {
  max-width: 100%;
  max-height: 420px; /* le verticali non mangiano lo schermo intero; proporzioni intatte, tap per il fullscreen */
  width: auto;
  display: block;
  border-radius: 14px;
  cursor: zoom-in;
  transition: transform 0.15s;
  background: #14161c;   /* placeholder scuro durante il lazy-load: il bianco flashava nel tema scuro (audit 2026-07) */
}

/* Icone inline dentro i messaggi (Back, Skip, Reset, Gallery) */
.text .inline-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin: 0 2px;
}
.bubble .msg-img:hover { transform: scale(1.015); }
.bubble-girl:has(.msg-img),
.bubble-player:has(.msg-img) {
  padding: 4px;
  background: transparent;
  max-width: 72%;
}

/* ========== Typing Bubble (girl is typing) ========== */
.typing-bubble {
  background: var(--raised);
  border-radius: 22px;
  border-bottom-left-radius: 6px;
  padding: 13px 18px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.typing-bubble .tdot {
  width: 7px;
  height: 7px;
  background: var(--muted);
  border-radius: 50%;
  animation: typing-pulse 1.2s infinite;
}
.typing-bubble .tdot:nth-child(2) { animation-delay: 0.2s; }
.typing-bubble .tdot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-pulse {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ========== Bottom area ========== */
#bottom {
  background: var(--surface);
  border-top: 1px solid var(--raised);
  padding: 10px 12px;
  flex-shrink: 0;
}
#choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* micro-hint contestuali (una volta sola, al posto del tutorial obbligatorio) */
.ui-hint {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  padding: 0 0 8px;
  animation: hint-in 0.4s ease-out;
}
.ui-hint.hidden { display: none; }
.choice-hint {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  padding: 2px 0 1px;
  animation: hint-in 0.4s ease-out;
}
@keyframes hint-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#choices:not(:empty) { margin-bottom: 8px; }
/* Scelte, trattamento 2 (deciso 2026-06-12): a riposo NEUTRE (nessuna sembra selezionata),
   tutta l'energia arriva solo al tocco (fill blu pieno). */
.choice-btn {
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 16px;
  font-size: 17px;
  text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
}
.choice-btn:hover {
  background: #262a33;
  border-color: #343945;
}
.choice-btn:active {
  background: linear-gradient(180deg, var(--bubble-me), var(--bubble-me-deep));
  border-color: var(--accent);
  color: #fff;
  transform: scale(0.98);
}

/* ========== Compose Bar (fake WhatsApp input) ========== */
#compose-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
#compose-bar.hidden { display: none; }

.ib-emoji,
.ib-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.ib-emoji { color: var(--muted); }
.ib-input {
  flex: 1;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 22px;
  height: 40px;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 5px;
  transition: background 0.12s;
}
.ib-input .idot {
  width: 7px;
  height: 7px;
  background: var(--muted);
  border-radius: 50%;
  opacity: 0;
}
.ib-input.active .idot {
  opacity: 0.3;
  animation: typing-pulse 1.4s infinite;
}
.ib-input.active .idot:nth-child(2) { animation-delay: 0.2s; }
.ib-input.active .idot:nth-child(3) { animation-delay: 0.4s; }

#compose-bar:hover .ib-input { background: #2a3038; }

.ib-send { background: var(--accent); color: #fff; }
.ib-send.disabled {
  background: var(--raised);
  color: #484f58;
  cursor: default;
}
#compose-bar:hover .ib-send:not(.disabled) { background: var(--accent-hover); }

/* ========== Lightbox (INSIDE phone) ========== */
#lightbox {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.93);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: zoom-out;
  border-radius: inherit;
}
#lightbox.show { display: flex; }
#lightbox-img {
  max-width: 92%;
  max-height: 92%;
  border-radius: 8px;
}
/* La X del lightbox (#lightbox-close) e' stata rimossa: si chiude col back di sistema o col tap. */

/* ========== Gallery Overlay (INSIDE phone) ========== */
#gallery-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: none;
  flex-direction: column;
  z-index: 500;
  border-radius: inherit;
  overflow: hidden;
}
#gallery-overlay.show { display: flex; }
#gallery-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--raised);
  flex-shrink: 0;
}
/* La X della gallery (#gallery-close) e' stata rimossa (Marco: ridondante col back). Header con due
   spacer per tenere il titolo centrato. */
.gallery-title {
  flex: 1;
  text-align: center;
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
}
#gallery-counter { color: var(--accent); margin-left: 6px; }
.gallery-spacer { width: 50px; }

#gallery-grid {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  align-content: start;
}
#gallery-grid::-webkit-scrollbar { width: 6px; }
#gallery-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.gal-cell {
  aspect-ratio: 1 / 1;
  background: var(--raised);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s;
}
.gal-cell:hover { transform: scale(1.03); }
.gal-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* foto non ancora scoperta: BLUR forte della foto vera + lucchettino (scelta 2026-06-12) */
.gal-cell.gal-locked {
  position: relative;
  cursor: default;
}
.gal-cell.gal-locked:hover { transform: none; }
.gal-cell.gal-locked .gal-blur {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(14px) brightness(0.55) saturate(0.7);
  transform: scale(1.2); /* copre i bordi vivi che il blur lascerebbe scoperti */
}
.gal-cell.gal-locked .gal-lock-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.85);
}
.gal-cell.gal-locked .gal-lock-badge svg {
  width: 26%;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}

.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
  font-size: 15px;
}

/* ========== Status ========== */
/* Header: foto centrata, X di chiusura a sinistra, nome sotto (override delle regole
   condivise con endings, che restano a riga per gli endings). */
#status-detail-header {
  position: relative;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 12px;
  background: var(--bg);
  border-bottom: none;
}
#status-detail-back {
  position: absolute;
  left: 12px;
  top: 14px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-2);
  display: grid;
  place-items: center;
  line-height: 1;
}
#status-detail-back svg { width: 23px; height: 23px; display: block; }
.sd-avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15), 0 10px 24px -8px rgba(0,0,0,0.7);
}
.sd-name {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--text);
}
.sd-day {
  position: absolute;
  right: 14px;
  top: 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #cdd3da;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 6px 12px;
  border-radius: 999px;
}

#status-list { padding: 52px 20px 24px; flex: 1; display: flex; flex-direction: column; }

.stat-bars { display: flex; flex-direction: column; gap: 26px; }
/* Scheda Stats della home: avatar a cerchio + nome in cima, come a fine giornata (Marco 2026-06-15).
   Compattata SOLO in home (avatar/barre piu' stretti) perche' avatar + 6 barre entrino in una
   schermata senza scroll; a fine giornata resta com'era (Marco 2026-06-15). */
/* Home Stats: avatar a cerchio + nome in cima, barre sotto RAGGRUPPATE con gap ridotto. NIENTE
   space-between (spingeva Kinkiness fino al bordo inferiore arrotondato dove si perdeva): le barre
   restano in alto sotto l'avatar e l'ultima lascia margine dal bordo. Compattate SOLO in home perche'
   entri tutto; fine giornata (.sd-* / .stat-* globali) invariato. (Marco 2026-06-15) */
.stats-head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 10px; }
#home-status-list .sd-avatar { width: 104px; height: 104px; }
#home-status-list .sd-name { font-size: 22px; }
#home-status-list .stat-bars { gap: 20px; }
#home-status-list .stat-top { margin-bottom: 7px; }
#home-status-list .stat-trk { height: 13px; }
/* Accessibilita': chi ha attivo "riduci movimento" (sensibilita' vestibolare) non subisce le animazioni
   ne lo scroll animato. Quasi gratis, allarga il pubblico. (Marco 2026-06-18) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
.stat-top { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.stat-ic { width: 30px; height: 30px; color: var(--c); display: grid; place-items: center; flex: 0 0 auto; }
.stat-ic svg { width: 27px; height: 27px; display: block; }
.stat-ic.emoji { font-size: 23px; line-height: 1; }
.stat-name { font-size: 17px; font-weight: 600; color: #eef1f4; }
.stat-trk {
  position: relative; /* ancora i .stat-delta assoluti alla barra (senza, finivano sul telefono intero) */
  height: 15px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.03);
}
.stat-fil {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 78%, #000), var(--c) 72%, color-mix(in srgb, var(--c) 55%, #fff));
  box-shadow: 0 0 11px -1px var(--c);
  position: relative;
  transition: width 0.5s ease-out;
}
.stat-fil::after {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), transparent);
}
/* ----- fine giornata: barre con delta ----- */
.stat-trk.eod .stat-fil{ border-radius:0; transition:width 1.1s cubic-bezier(.3,.85,.3,1); }
.stat-delta{ position:absolute; top:0; height:100%; border-radius:0; transition:width 1.1s cubic-bezier(.3,.85,.3,1); }
.stat-delta::after{ content:""; position:absolute; inset:0 0 55% 0; background:linear-gradient(180deg, rgba(255,255,255,0.28), transparent); }
.stat-delta.gain{ background:linear-gradient(180deg,#5be08a,#2faf5a); }
.stat-delta.gain.pulse{ animation:gainPulse 1.5s ease; }   /* il pulse parte via JS a fine corsa (stagger G5) */
.stat-delta.loss{ background:linear-gradient(180deg,#ff6b6b,#d23a3a); }
@keyframes gainPulse{ 0%{filter:brightness(1.5);} 100%{filter:brightness(1);} }
.stat-arrow{ margin-left:auto; font-size:13px; font-weight:800; }
.stat-arrow.up{ color:#4fd17e; } .stat-arrow.down{ color:#ff5d5d; }
/* ----- rito eod, "cascata completa" (G5, deciso da Marco 2026-07-19) -----
   Ogni riga entra a 160ms dalla precedente; la sua barra parte subito dopo e la freccia
   "poppa" col movimento (solo sulle stat CAMBIATE); le righe ferme entrano smorzate
   (.calm) e NON hanno trattino (il vecchio – e' stato eliminato). */
.stat-row.pre{ opacity:0; transform:translateY(8px); }
.stat-row.in{ animation:statRowIn .45s ease-out both; }
.stat-row.in.calm{ animation-name:statRowInCalm; }
@keyframes statRowIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes statRowInCalm{ from{ opacity:0; transform:translateY(8px); } to{ opacity:.45; transform:none; } }
.status-detail-eod .stat-arrow{ opacity:0; transform:scale(.6); }
.status-detail-eod .stat-arrow.pop{ animation:arrowPop .35s cubic-bezier(.3,.9,.4,1.2) both; }
@keyframes arrowPop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }
#status-eod-continue{ display:none; }
.status-detail-eod #status-eod-continue{ display:block; position:absolute; left:20px; right:20px; bottom:22px; padding:14px; border-radius:999px; border:1px solid rgba(247,190,80,0.5); background:linear-gradient(180deg,#f5c252,#e0982a); color:#1a1206; font-size:15px; font-weight:800; cursor:pointer; z-index:5; }
.status-detail-eod #status-list{ padding-bottom:92px; }   /* spazio per il bottone Continue, niente piu' Kinkiness incollata (Marco 2026-06-15) */
/* in eod la X resta: esce dal rito (deciso 2026-06-12, prima era nascosta) */
.status-detail-eod #status-detail-back{ display:grid; }

.status-empty {
  padding: 34px 24px 0;
  text-align: center;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  white-space: pre-line;
}


/* ========== Settings Modal ========== */
/* ========== Settings & More (redesign v2 approvato 2026-06-12) ========== */
#settings-modal {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: none;
  z-index: 1400;
  border-radius: inherit;
}
#settings-modal.show { display: flex; }
/* il More ha solo 4 voci: da pagina intera era spoglio (feedback Marco) ->
   torna BOTTOM SHEET, con le stesse righe del redesign */
#more-modal {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: none;
  align-items: flex-end;
  z-index: 1400;
  border-radius: inherit;
}
#more-modal.show { display: flex; }
#more-modal .set-page {
  flex: none;
  width: 100%;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  padding-bottom: 16px;
  animation: sheet-up 0.24s ease-out;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
#more-modal .set-body { overflow: visible; padding: 2px 16px 8px; }
/* R2 (deciso 2026-06-13): nel More le righe sono FLAT con un filo divisorio (menu di
   link, piu' elegante delle scatole). I Settings restano a card: la' sono CONTROLLI. */
#more-modal .set-row { background: none; border: none; border-radius: 0; margin: 0; padding: 15px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.055); }
#more-modal .set-row:last-child { border-bottom: none; }
#more-modal .set-row:hover { background: none; }
#more-modal .set-row:active { opacity: 0.6; }
.set-page { flex: 1; display: flex; flex-direction: column; min-height: 0; animation: set-in 0.22s ease-out; }
@keyframes set-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.set-head { display: flex; align-items: center; gap: 13px; padding: 16px 16px 11px; flex-shrink: 0; }
.set-head h2 { margin: 0; font-size: 25px; font-weight: 800; color: var(--text); }
#settings-close,
#more-close,
#credits-close {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--raised);
  color: var(--text-2);
  font-size: 23px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding-bottom: 3px;
  flex-shrink: 0;
}
.ic-patreon { background: rgba(255, 66, 77, 0.13); color: #ff6b75; }
/* righe ariose: la pagina deve riempirsi, non galleggiare in alto (feedback Marco) */
.set-body { flex: 1; overflow-y: auto; padding: 2px 16px 18px; min-height: 0; }
.set-ghead { font-size: 11px; font-weight: 800; letter-spacing: 1.7px; text-transform: uppercase; color: var(--muted); margin: 20px 4px 9px; }
.set-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 14px;
  margin-bottom: 9px;
  color: var(--text);
  font-size: 15.5px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.set-row:hover { background: #181b22; }
.set-row.set-stack { flex-direction: column; align-items: stretch; gap: 0; cursor: default; }
.set-row.set-stack:hover { background: var(--surface); }
.set-toprow { display: flex; align-items: center; gap: 12px; }
.set-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.set-ic svg { width: 19px; height: 19px; }
.ic-blue { background: rgba(10, 132, 255, 0.13); color: #6db4ff; }
.ic-gold { background: rgba(233, 180, 76, 0.13); color: var(--game); }
.ic-grey { background: rgba(255, 255, 255, 0.07); color: #aab2bc; }
.ic-red { background: rgba(220, 70, 70, 0.12); color: #e07070; }
.set-lb { flex: 1; font-weight: 600; }
.lb-danger { color: #e07070; }
.set-val { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.set-chev { color: #5a5e68; font-size: 18px; }
/* toggle */
.set-tgl { width: 47px; height: 28px; border-radius: 999px; background: #33363f; position: relative; transition: background 0.18s; flex-shrink: 0; }
.set-tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.18s; }
.set-tgl.on { background: var(--accent); }
.set-tgl.on::after { transform: translateX(19px); }
/* segmented (typing speed: tutte le opzioni visibili) */
.set-seg { display: flex; background: var(--raised); border-radius: 11px; padding: 3px; gap: 3px; margin-top: 11px; }
.set-seg button { flex: 1; padding: 9px 0; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); transition: all 0.15s; }
.set-seg button.on { background: var(--accent); color: #fff; font-weight: 700; }
/* slider volume */
#settings-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 50%, #33363f 50%);
  margin-top: 14px;
  cursor: pointer;
}
#settings-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.5); cursor: pointer; }
#settings-volume-row.dimmed { opacity: 0.45; }
#settings-volume-row.dimmed #settings-volume { cursor: default; }
/* ========== Credits (pagina rifatta: card, non righe perse nel vuoto) ========== */
#credits-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: none;
  z-index: 1400;
  border-radius: inherit;
  overflow: hidden;
}
#credits-overlay.show { display: flex; }
.cr-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 12px 13px;
  margin-bottom: 7px;
}
.cr-card img.cr-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); flex-shrink: 0; }
.cr-card img.cr-logo { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; }
.cr-info { min-width: 0; }
.cr-name { font-size: 15.5px; font-weight: 700; color: var(--text); }
.cr-role { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ========== Modal Confirm ========== */
#modal-confirm {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  padding: 20px;
  border-radius: inherit;
}
#modal-confirm.show { display: flex; }
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 22px 18px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
.modal-text {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 20px;
  line-height: 1.4;
}
.modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.modal-btn {
  flex: 1;
  padding: 11px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.12s;
}
.modal-btn-cancel {
  background: var(--raised);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.modal-btn-cancel:hover { background: var(--border); }
.modal-btn-ok {
  background: var(--accent);
  color: #fff;
}
.modal-btn-ok:hover { background: var(--accent-hover); }

.modal-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
  cursor: pointer;
  user-select: none;
}
.modal-checkbox-label.hidden { display: none; }
.modal-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* ========== Spotlight (tutorial onboarding) ========== */
#spotlight-blocker {
  position: absolute;
  inset: 0;
  z-index: 1999;
  background: transparent;
  display: none;
  cursor: not-allowed;
  border-radius: inherit;
}
#spotlight-blocker.show { display: block; }

#spotlight-hole {
  position: absolute;
  z-index: 2000;
  pointer-events: none;
  border-radius: 14px;
  display: none;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.72),
    0 0 18px rgba(10, 132, 255, 0.6);
  animation: spotlight-pulse 1.6s ease-in-out infinite;
}
#spotlight-hole.show { display: block; }
@keyframes spotlight-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.72),
      0 0 15px rgba(10, 132, 255, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.72),
      0 0 35px rgba(10, 132, 255, 0.95);
  }
}

.spotlight-target {
  position: relative !important;
  z-index: 2001 !important;
  animation: spotlight-glow 1s ease-in-out infinite;
  border-radius: 12px;
  transform-origin: center;
}

/* Spotlight bloccante (bar): porta il target sopra al blocker senza glow */
.spotlight-clickable {
  position: relative !important;
  z-index: 2002 !important;
  cursor: pointer !important;
}
@keyframes spotlight-glow {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(10, 132, 255, 0.9),
      0 0 25px 8px rgba(10, 132, 255, 0.85),
      0 0 60px 22px rgba(10, 132, 255, 0.45);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(120, 180, 255, 1),
      0 0 45px 18px rgba(10, 132, 255, 1),
      0 0 100px 40px rgba(10, 132, 255, 0.65);
    transform: scale(1.18);
  }
}

/* ========== Toast ========== */
.rewind-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.88);
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2000;
}
.rewind-toast.show { opacity: 1; }

/* "Premi di nuovo per uscire": pill in basso (piu' discreta del toast centrale). */
.exit-hint {
  position: absolute;
  left: 50%;
  bottom: 78px;
  transform: translateX(-50%) translateY(8px);
  background: rgba(18,18,20,0.92);
  color: #f2f2f4;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 2400;
  box-shadow: 0 6px 22px rgba(0,0,0,0.42);
}
.exit-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ========== End of day banner ========== */
#endofday-overlay{ position:absolute; inset:0; z-index:3000; display:grid; place-items:center; background:rgba(8,6,12,0.88); backdrop-filter:blur(3px); padding:24px; }
#endofday-overlay.hidden{ display:none; }
.eod-card{ text-align:center; position:relative; z-index:3; }
.eod-sub{ font-size:12px; letter-spacing:3px; text-transform:uppercase; color:#caa256; margin-bottom:12px; animation:sp-fadeup .5s .1s ease both; }
/* E2 "braci" (deciso 2026-06-12): il titolo piomba a fuoco, poi il glow respira */
.eod-title{ font-size:38px; font-weight:900; letter-spacing:4px; color:#f5d79e; line-height:1.1;
  animation:eodTitleIn .7s .25s cubic-bezier(.2,.9,.3,1.1) both, eodBreathe 2.6s 1.15s ease-in-out infinite; }
@keyframes eodTitleIn{ 0%{ opacity:0; transform:scale(1.22); filter:blur(8px); } 100%{ opacity:1; transform:scale(1); filter:blur(0); } }
@keyframes eodBreathe{ 0%,100%{ text-shadow:0 2px 22px rgba(245,166,35,0.35); } 50%{ text-shadow:0 2px 38px rgba(245,166,35,0.65); } }
.eod-btn{ margin-top:30px; padding:13px 40px; border-radius:999px; border:1px solid rgba(247,190,80,0.5); background:linear-gradient(180deg,#f5c252,#e0982a); color:#1a1206; font-size:15px; font-weight:800; cursor:pointer; animation:sp-fadeup .5s .9s ease both; }
/* scintille d'oro che salgono lente (generate da JS, ripartono a ogni apertura) */
.eod-spark{ position:absolute; bottom:-12px; border-radius:50%; background:#ffd98a; opacity:0; pointer-events:none; filter:drop-shadow(0 0 4px rgba(233,180,76,0.9)); animation:eodRise linear infinite both; }
@keyframes eodRise{ 0%{ transform:translateY(0) translateX(0); opacity:0; } 12%{ opacity:.9; } 80%{ opacity:.5; } 100%{ transform:translateY(-900px) translateX(var(--dx)); opacity:0; } }
/* X per uscire dal rito di fine giornata (banner / foto / status / mappa) */
.rite-x{ position:absolute; top:14px; left:14px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.10); display:grid; place-items:center; color:var(--text-2); cursor:pointer; z-index:6; }
.rite-x svg{ width:18px; height:18px; }

/* ========== Gallery reveal di fine giornata ========== */
#reveal-overlay{ position:absolute; inset:0; z-index:3000; display:flex; flex-direction:column; align-items:center; padding:34px 20px 22px; background:radial-gradient(120% 100% at 50% 0%, #100d16, #08070c 60%); }
#reveal-overlay.hidden{ display:none; }
.rv-sub{ font-size:12px; letter-spacing:3px; text-transform:uppercase; color:#caa256; animation:sp-fadeup .5s ease both; }
.rv-title{ font-size:23px; font-weight:800; color:var(--text); margin:12px 0 8px; animation:sp-fadeup .5s .1s ease both; }
.rv-count{ font-size:13px; color:var(--game); font-weight:700; margin-bottom:30px; animation:sp-fadeup .5s .2s ease both; }
/* GRIGLIA a righe da 3 (deciso da Marco 2026-07-19, via la striscia orizzontale):
   riga incompleta allineata a SINISTRA (comportamento naturale di grid: "la quarta card
   sta sotto la prima"). Con tante foto la griglia scrolla in VERTICALE (min-height:0
   dentro il flex dell'overlay): il Continue resta sempre raggiungibile, stesso motivo
   dell'audit 2026-07 che aveva imposto lo scroll. Card a larghezza variabile (--rvw)
   cosi' le righe da 3 reggono anche i 320px. Con 1-2 foto la classe .rv-few (engine)
   passa a card grandi centrate. */
.rv-strip{ --rvw:104px; display:grid; grid-template-columns:repeat(3, var(--rvw)); justify-content:center; align-content:start; gap:11px; max-width:100%; min-height:0; overflow-y:auto; overflow-x:hidden; padding:4px 4px 12px; }
.rv-strip::-webkit-scrollbar{ width:5px; height:5px; }
.rv-strip::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; }
@media (max-width:379px){ .rv-strip{ --rvw:86px; } }
.rv-strip.rv-few{ --rvw:150px; display:flex; flex-wrap:nowrap; justify-content:center; }
.rv-card{ width:var(--rvw); height:calc(var(--rvw)*1.404); perspective:700px; position:relative; }
.rv-card .rv-in{ width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.3,.7,.25,1.05); }
.rv-card.flip .rv-in{ transform:rotateY(180deg); }
.rv-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:10px; overflow:hidden; }
.rv-back{ background:linear-gradient(160deg,#1c1f27,#12141a); border:1px solid #2c2f38; display:grid; place-items:center; }
.rv-back span{ font-size:32px; color:#3c404c; font-weight:800; }
.rv-front{ transform:rotateY(180deg); background:linear-gradient(180deg,#efe7d6,#dccfb6); padding:6px 6px 0; }
.rv-front .rv-ph{ width:100%; height:calc(var(--rvw, 104px)*1.038); border-radius:3px; overflow:hidden; position:relative; }
.rv-front .rv-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.rv-front .rv-ph img.rv-blur{ filter:blur(13px) saturate(1.05); transform:scale(1.12); }
/* caption manoscritta in Caveat self-hosted (G1+G2, deciso 2026-07-19) */
.rv-front .rv-cap{ text-align:center; font-family:"Caveat",cursive; font-weight:600; color:#4a3f2e; font-size:15px; padding:3px 0; }
/* il nub sta FUORI dalla card che gira: senza il gate sull'opacita' si vedeva quale card
   era bloccata PRIMA del flip (bug segnalato da Marco 2026-07-19) */
.rv-lock{ position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 38% 30%, #463a28, #181208); display:grid; place-items:center; z-index:2; box-shadow:0 0 0 1px rgba(233,180,76,0.4); color:#d9b35e; opacity:0; transition:opacity .25s ease .35s; }
.rv-card.flip .rv-lock{ opacity:1; }
.rv-lock svg{ width:13px; height:13px; }
.rv-cont{ margin-top:auto; width:100%; max-width:300px; opacity:0; pointer-events:none; transition:opacity .4s; animation:none; }   /* invisibile MA cliccabile era una trappola per tap impazienti (audit 2026-07) */
.rv-cont.on{ opacity:1; pointer-events:auto; }

/* ========== FINE CONTENUTO (mockup fine_contenuto v7, deciso 2026-07-06) ==========
   Card stile-rito una volta per capitolo + blocco persistente in fondo alla chat.
   Tavolozza decisa: SOLO oro (titolo e CTA) + grigi; brand nei glifi, non nelle pillole. */
#eoc-overlay{ position:absolute; inset:0; z-index:3200; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(5,4,8,0.84); backdrop-filter:blur(2px); }
.eoc-card{ position:relative; width:100%; max-width:304px; background:#0d0b10; border:1px solid rgba(233,180,76,0.25); border-radius:20px; padding:28px 20px 18px; text-align:center; box-shadow:0 26px 60px -18px rgba(0,0,0,0.85); }
.eoc-title{ font-size:26px; font-weight:900; letter-spacing:2.5px; color:#f5d79e; line-height:1.15; margin:2px 0 16px; white-space:nowrap; animation:eodBreathe 2.6s ease-in-out infinite; }
.eoc-cd{ font-size:15px; color:var(--muted); letter-spacing:0.3px; text-align:center; margin-bottom:20px; }
.eoc-cd b{ color:var(--text); font-weight:800; font-variant-numeric:tabular-nums; font-size:17px; }
.eoc-cta{ position:relative; display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:13px 0; border-radius:999px; background:linear-gradient(180deg,#ffdd85,#f2b93f 55%,#df9b26); color:#1d1402; font-size:14.5px; font-weight:800; letter-spacing:0.3px; border:1px solid rgba(255,224,150,0.7); cursor:pointer; box-shadow:0 8px 26px -6px rgba(240,190,90,0.8), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 4px rgba(120,75,10,0.35); }
.eoc-glyph{ width:17px; height:17px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.eoc-glyph svg{ width:17px; height:17px; display:block; fill:#1d1402; }
.eoc-glyph-r svg{ width:19px; height:19px; }
.eoc-sec{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:11px 0; border-radius:999px; background:transparent; color:var(--text-2); font-size:13px; font-weight:700; border:1px solid #3a3e48; cursor:pointer; margin-top:10px; }
.eoc-dot{ width:8px; height:8px; border-radius:50%; background:#34c759; flex-shrink:0; animation:eocLive 2s ease-in-out infinite; }
@keyframes eocLive{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(52,199,89,0.45); } 50%{ opacity:0.75; box-shadow:0 0 0 4px rgba(52,199,89,0); } }
.eoc-wait{ display:block; width:100%; margin-top:10px; padding:8px 0; color:var(--muted); font-size:12.5px; background:none; border:none; cursor:pointer; }
.eoc-typ{ display:inline-flex; gap:5px; align-items:center; background:var(--raised); border-radius:18px; border-bottom-left-radius:6px; padding:11px 15px; margin-bottom:12px; }
.eoc-typ i{ width:7px; height:7px; border-radius:50%; background:var(--muted); animation:typing-pulse 1.2s infinite; }
.eoc-typ i:nth-child(2){ animation-delay:0.2s; }
.eoc-typ i:nth-child(3){ animation-delay:0.4s; }
/* blocco in chat: ultima cosa della day-section corrente, ancorato in basso dal flusso */
#eoc-block{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:14px 26px 18px; margin-top:10px; }
#eoc-block .eoc-pill{ font-size:18px; font-weight:500; color:var(--text-2); background:var(--raised); border:1px solid var(--border); border-radius:22px; padding:8px 22px; letter-spacing:0.2px; }
#eoc-block .eoc-cd{ margin-bottom:0; }
#eoc-block .eoc-cta, #eoc-block .eoc-sec{ max-width:300px; }

/* Pillola START DAY (fine giornata: il Day dopo parte SOLO da qui o da "Next day") */
#startday-pill{ display:block; width:calc(100% - 24px); margin:0 auto 9px; padding:13px 0; border-radius:999px; text-align:center; font-size:13px; font-weight:800; letter-spacing:1.5px; color:#221703; background:linear-gradient(180deg,#f2c25c,#d99a28); box-shadow:0 8px 22px -8px rgba(233,180,76,0.55); cursor:pointer; animation:sp-fadeup .45s ease both; }
#startday-pill.hidden{ display:none; }
/* compose a fine contenuto: barra inerte, niente puntini (niente da dire) */
#compose-bar.compose-done .idot{ display:none; }
#compose-bar.compose-done{ cursor:default; }
@keyframes eodIn{ from{opacity:0; transform:scale(.9);} to{opacity:1; transform:scale(1);} }

/* ========== Story Progress / Mappa scelte ========== */
.map-head{ position:relative; flex-direction:row !important; align-items:center; justify-content:center; padding:16px !important; background:#0e0b14; border-bottom:none; }
.map-head .sd-close{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:40px; height:40px; padding:0; border-radius:50%; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.10); color:var(--text-2); display:grid; place-items:center; cursor:pointer; }
.map-head .sd-close svg{ width:23px; height:23px; display:block; }
.map-title{ font-size:19px; font-weight:800; letter-spacing:.3px; color:var(--text); text-align:center; }
.vn-map{ position:relative; flex:1 1 auto; width:100%; min-height:0; overflow:hidden; touch-action:none; cursor:grab;
  --p1:#5a4520; --p2:#402f16; --p3:#30220f; --p4:#493618; --pb:rgba(247,190,80,.55); --ph:rgba(255,228,160,.45); --pt:#ffe2ab; --cl:#ffe2ab; --ln:#f5a623; --glow:rgba(245,166,35,.6);
  background:radial-gradient(130% 50% at 50% 0%, rgba(255,255,255,.04), transparent 55%), linear-gradient(180deg,#110e17,#09070d); }
.vn-map.grabbing{ cursor:grabbing; }
.vn-map .vn-canvas{ position:absolute; left:0; top:0; transform-origin:0 0; }
.vn-map svg.vn-lines{ position:absolute; left:0; top:0; overflow:visible; }
.vn-map .seg{ fill:none; stroke:var(--ln); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px var(--glow)); }
.vn-map .seg.lock{ stroke:#3a342c; stroke-width:2.4; stroke-dasharray:1 7; filter:none; }
/* terzo stato (M1, deciso da Marco 2026-07-19): percorso di una run PASSATA = stesso oro,
   opacita' .32, niente glow ("era oro, e' solo invecchiato") */
.vn-map .seg.past{ opacity:.32; filter:none; }
/* animazione (replay / fine giornata): nodi e linee partono nascosti, poi si tracciano */
.vn-map.anim .n{ opacity:0; }
.vn-map.anim .seg:not(.lock){ stroke-dasharray:100; stroke-dashoffset:100; }
/* la run passata NON si ri-anima nel rito: resta ferma e spenta mentre la nuova si disegna */
.vn-map.anim .seg.past{ stroke-dasharray:none; stroke-dashoffset:0; }
.vn-map .seg-mask{ stroke:#fff; fill:none; stroke-width:9; stroke-linecap:round; stroke-linejoin:round; }
.vn-map.anim .seg-mask{ stroke-dasharray:100; stroke-dashoffset:100; }
.vn-map .seg-mask.draw{ animation:vnDraw 1s linear forwards; }
.vn-map .n.shown{ animation:vnGlow .6s ease-out forwards; }
.vn-map .n.softshown{ animation:vnFade .6s ease-out forwards; }
@keyframes vnGlow{ 0%{opacity:0; filter:drop-shadow(0 0 0 rgba(245,166,35,0));} 45%{opacity:1; filter:drop-shadow(0 0 10px var(--glow));} 100%{opacity:1; filter:drop-shadow(0 0 0 rgba(245,166,35,0));} }
@keyframes vnFade{ from{opacity:0;} to{opacity:1;} }
.vn-map .seg.draw{ animation:vnDraw 1s linear forwards; }
@keyframes vnDraw{ to{ stroke-dashoffset:0; } }

.vn-map .vn-head{ position:absolute; top:0; left:0; right:0; z-index:8; padding:16px 16px 10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#0e0b14 64%,transparent); pointer-events:none; }
.vn-map .d2{ position:relative; padding:11px 28px; border-radius:5px; background:linear-gradient(165deg,#5a431f,#2c2010); box-shadow:inset 0 1px 0 rgba(255,228,160,.4), inset 0 0 0 1px rgba(247,190,80,.55), inset 0 0 0 4px rgba(0,0,0,.3), inset 0 0 0 5px rgba(247,190,80,.22), 0 8px 16px -6px rgba(0,0,0,.6); }
.vn-map .d2 .dd{ font-size:17px; font-weight:800; letter-spacing:5px; color:var(--cl); padding-left:5px; text-shadow:0 -1px 0 rgba(0,0,0,.6), 0 1px 0 rgba(255,220,150,.18); }
.vn-map .ring{ position:absolute; top:15px; right:15px; width:48px; height:48px; z-index:9; pointer-events:none; }
.vn-map .ring svg{ width:48px; height:48px; transform:rotate(-90deg); }
.vn-map .ring .lab{ position:absolute; inset:0; display:grid; place-items:center; font-size:12px; font-weight:800; color:var(--cl); }
.vn-map .ring .arc{ stroke:var(--ln); }

.vn-map .n{ position:absolute; transform:translate(-50%,-50%); }
.vn-map .n.endn{ transform:translate(-50%,0); }
.vn-map .plate{ position:relative; padding:12px 20px; border-radius:7px; white-space:nowrap; text-align:center; background:linear-gradient(180deg, rgba(255,220,150,.08), transparent 26%), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), linear-gradient(165deg, var(--p1), var(--p2) 46%, var(--p3) 54%, var(--p4)); border:1px solid var(--pb); box-shadow:inset 0 1px 0 var(--ph), inset 0 -3px 6px rgba(0,0,0,.42), 0 9px 20px -7px rgba(0,0,0,.6), 0 0 24px -9px var(--glow); }
.vn-map .plate .t{ font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--pt); text-shadow:0 -1px 0 rgba(0,0,0,.6); }
.vn-map .plate.dim{ filter:saturate(.3) brightness(.55); } .vn-map .plate.dim .t{ color:#8a8270; }

.vn-map .choice-light{ padding:12px 13px; border-radius:13px; background:color-mix(in srgb,var(--ln) 5%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pb) 60%,transparent); display:flex; flex-direction:column; align-items:center; gap:10px; }
.vn-map .choice-light .ct{ font-size:10px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:var(--pt); }
.vn-map .opts{ display:flex; gap:9px; }
.vn-map .opt{ padding:9px 14px; border-radius:9px; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap; }
.vn-map .opt.off{ background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); color:#827a68; }
.vn-map .opt.on{ background:linear-gradient(180deg, color-mix(in srgb,var(--ln) 40%,#1a140a), color-mix(in srgb,var(--ln) 16%,#120e07)); box-shadow:inset 0 0 0 1.5px var(--ln), 0 0 11px -4px var(--glow); color:var(--pt); }

.vn-map .b-hex{ position:relative; padding:17px 30px; clip-path:polygon(15% 0,85% 0,100% 50%,85% 100%,15% 100%,0 50%); background:linear-gradient(180deg,var(--p1),var(--p3)); filter:drop-shadow(0 6px 11px rgba(0,0,0,.6)) drop-shadow(0 0 17px var(--glow)); }
.vn-map .b-hex::after{ content:""; position:absolute; inset:0; clip-path:inherit; box-shadow:inset 0 0 0 1.5px var(--pb); }
.vn-map .b-hex .t{ position:relative; font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--pt); white-space:nowrap; }

.vn-map .endnode{ position:relative; display:inline-flex; flex-direction:column; align-items:center; }
.vn-map .platewrap{ position:relative; z-index:4; }
.vn-map .pol{ position:relative; margin-top:-7px; z-index:2; transform-origin:50% 0; background:linear-gradient(180deg,#efe7d6,#dccfb6); padding:7px 7px 0; border-radius:3px; box-shadow:0 16px 28px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.18), 0 0 22px -12px var(--glow); }
/* finale di run passata (M1): la foto resta, smorzata, e perde il glow oro */
.vn-map .endnode.past .pol{ filter:saturate(.55) brightness(.8); box-shadow:0 16px 28px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.18); }
.vn-map .pol img{ width:112px; height:104px; object-fit:cover; object-position:50% 18%; display:block; }
.vn-map .pol .strip{ height:19px; }
.vn-map .pol.qmark .ph{ width:112px; height:104px; background:linear-gradient(160deg,#241d14,#120d08); display:grid; place-items:center; }
.vn-map .pol.qmark .ph b{ font-size:40px; font-weight:800; color:rgba(247,190,80,.34); }
.vn-map .pin{ position:absolute; left:50%; top:34px; transform:translateX(-50%); z-index:6; width:11px; height:11px; }
.vn-map .pin .cap2{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 34% 28%, #ffe9b0 0%, #e1a52f 45%, #7a4d12 100%); box-shadow:0 2px 4px rgba(0,0,0,.55), inset 0 -1px 2px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.55); }
.vn-map .pin .gl{ position:absolute; top:2.6px; left:3px; width:3px; height:2.6px; border-radius:50%; background:rgba(255,255,255,.85); }
.vn-map .nub{ position:absolute; top:-12px; right:-12px; width:31px; height:31px; border-radius:50%; display:grid; place-items:center; z-index:8; background:radial-gradient(circle at 38% 30%, #463a28, #181208); box-shadow:0 4px 9px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,224,160,.3), inset 0 -2px 4px rgba(0,0,0,.55), 0 0 0 1px rgba(247,190,80,.45); }
.vn-map .nub svg{ width:16px; height:16px; }

.vn-map .vn-zoom{ position:absolute; right:12px; bottom:14px; z-index:10; display:flex; flex-direction:column; gap:7px; }
.vn-map .vn-zoom button{ width:38px; height:38px; border-radius:10px; border:1px solid rgba(247,190,80,.3); background:rgba(20,16,10,.82); color:#f0d79a; font-size:20px; font-weight:700; cursor:pointer; display:grid; place-items:center; }
.vn-map .vn-empty{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#7d8893; font-size:15px; padding:30px; }
/* legenda dei 3 stati linea (M1, decisa 2026-07-19): la emette sc-map SOLO quando esiste
   un percorso passato; sfumatura in basso, non intercetta pan/zoom */
.vn-map .vn-legend{ position:absolute; left:0; right:0; bottom:0; z-index:8; padding:10px 16px 12px; display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; background:linear-gradient(0deg, rgba(14,11,20,.92) 55%, transparent); pointer-events:none; }
.vn-map .vn-legend .lg{ display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#a89f8c; }
.vn-map .vn-legend svg{ width:30px; height:8px; display:block; }
/* tasti fine giornata sotto la mappa */
#map-actions{ display:flex; gap:10px; padding:14px 16px; background:#0e0b14; flex-shrink:0; }
#map-actions.hidden{ display:none; }
.ma-btn{ flex:1; padding:13px; border-radius:999px; font-size:14px; font-weight:800; cursor:pointer; }
.ma-btn.disabled{ opacity:.4; filter:saturate(.4); cursor:default; pointer-events:none; }
.ma-sec{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#cdd3da; }
.ma-pri{ background:linear-gradient(180deg,#f5c252,#e0982a); border:1px solid rgba(247,190,80,0.5); color:#1a1206; }
/* Day-nav (consultazione): sfoglia le mappe dei Day completati */
#map-daynav{ display:flex; gap:10px; padding:12px 16px; background:#0e0b14; flex-shrink:0; }
#map-daynav.hidden{ display:none; }
.mdn-btn{ flex:1; padding:11px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:#cdd3da; }
.mdn-btn:hover{ border-color:rgba(233,180,76,0.5); color:#ffe2ab; }
.mdn-btn.hidden{ visibility:hidden; }