:root {
  --bg: #0a0a10;
  --bg-2: #14141f;
  --card: rgba(255,255,255,0.045);
  --line: rgba(255,255,255,0.09);
  --text: #f3f1ec;
  --dim: #b4b0a8;
  --gold: #e2b95c;
  --green: #6fcf97;
  --blue: #7fb2ff;
  --gray: #9a96a0;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: radial-gradient(ellipse at 50% -10%, #1d1b2c 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}
a { color: var(--gold); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* Testata */
.hero { text-align: center; padding: 48px 0 24px; }
.logo { width: min(440px, 88vw); margin: 0 auto; }
.logo img { display: block; width: 100%; height: auto; }
.hero p { color: var(--dim); max-width: 560px; margin: 8px auto 0; font-size: 1.05rem; }

/* Elenco app */
h2.sez { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 40px 0 14px; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.app {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 18px; display: flex; gap: 16px; align-items: flex-start;
}
.app img { width: 72px; height: 72px; border-radius: 17px; flex: none; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.app h3 { margin: 0 0 2px; font-size: 1.1rem; }
.app p { margin: 4px 0 8px; color: var(--dim); font-size: 0.93rem; }
.stato { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; border: 1px solid currentColor; }
.stato.pub { color: var(--green); }
.stato.test { color: var(--blue); }
.stato.dev { color: var(--gray); }
.stato.web { color: var(--gold); }
.link { font-size: 0.88rem; margin-right: 12px; white-space: nowrap; }

footer { text-align: center; color: var(--dim); font-size: 0.85rem; padding: 48px 16px 40px; }

/* Pagine privacy */
.doc { max-width: 720px; margin: 0 auto; padding: 32px 16px 60px; }
.doc header { text-align: center; margin-bottom: 20px; }
.doc header img { width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.doc h1 { font-size: 1.6rem; margin: 14px 0 2px; }
.doc .agg { color: var(--dim); font-size: 0.9rem; margin: 0; }
.doc .torna { display: inline-block; margin-top: 10px; font-size: 0.9rem; }
.doc .card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px; }
.doc .card h2 { font-size: 1.05rem; margin: 26px 0 6px; }
.doc .card h2:first-child { margin-top: 0; }
.doc .card p, .doc .card li { color: var(--dim); }
.doc .card strong { color: var(--text); font-weight: 600; }
.doc .nota { border-left: 3px solid var(--gold); padding: 6px 0 6px 14px; margin: 14px 0; }

/* Pagina di presentazione dell'app */
a.app { color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
a.app:hover { border-color: rgba(226,185,92,.45); transform: translateY(-2px); }
.app .vedi { font-size: 0.88rem; color: var(--gold); }
.scheda { max-width: 792px; margin: 0 auto; padding: 20px 16px 40px; }
.scheda .torna { display: inline-block; margin-bottom: 14px; font-size: 0.92rem; }
.scheda .banner { width: 100%; height: auto; border-radius: 18px; display: block; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.scheda .testa { text-align: center; margin: -44px auto 0; position: relative; max-width: 560px; }
.scheda .icona { width: 88px; height: 88px; border-radius: 20px; border: 3px solid var(--bg); box-shadow: 0 8px 22px rgba(0,0,0,.5); display: block; margin: 0 auto 10px; }
.scheda h1 { margin: 0 0 8px; font-size: 1.9rem; line-height: 1.2; }
.scheda .breve { color: var(--dim); margin: 12px 0 0; font-size: 1.05rem; }
.tabella { max-width: 760px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 16px; }
.riga { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 28px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 28px; }
.riga .foto { text-align: center; }
.riga .foto img { width: 170px; height: auto; aspect-ratio: 9 / 16; border-radius: 16px; cursor: zoom-in; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 26px rgba(0,0,0,.45); vertical-align: middle; transition: transform .2s; }
.riga .foto img:hover { transform: scale(1.03); }
.riga h2 { font-size: 1.25rem; margin: 0 0 10px; line-height: 1.3; color: var(--titolo, var(--text)); font-family: var(--font-titoli, inherit); }
.riga p { color: var(--dim); margin: 0; font-size: 0.98rem; }
.riga.inversa .testo { text-align: right; }
.finale { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 760px; margin: 16px auto 0; }
.finale > div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.finale h3 { font-size: 0.82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accento, var(--gold)); margin: 0 0 6px; }
.finale p { color: var(--dim); margin: 0; font-size: 0.95rem; }
.nota-app { text-align: center; color: var(--dim); font-size: 0.88rem; font-style: italic; max-width: 600px; margin: 28px auto 0; }
.link-app { text-align: center; margin-top: 20px; }
.lente { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; cursor: zoom-out; }
.lente[hidden] { display: none; }
.lente img { max-width: 100%; max-height: 100%; border-radius: 14px; }
@media (max-width: 640px) {
  .scheda .testa { margin-top: 16px; }
  .scheda .icona { border: none; }
  .riga { gap: 14px; padding: 16px; }
  .riga .foto img { width: 120px; }
  .riga h2 { font-size: 1.02rem; }
  .riga p { font-size: 0.86rem; }
}

/* Colori e caratteri di ogni app */
@font-face { font-family: 'Cormorant'; src: url('fonts/cormorant-600.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Lobster'; src: url('fonts/Lobster-Regular.ttf') format('truetype'); font-display: swap; }
body.tema-stellaria { --accento: #E2B95C; --titolo: #F2D48A; --font-titoli: 'Cormorant', Georgia, serif;
  --card: rgba(20,27,58,.78); --line: rgba(226,185,92,.22);
  background: radial-gradient(ellipse at 50% 0%, #1c2550 0%, #0B1026 55%) fixed, #0B1026; }
body.tema-stellaria h1 { font-family: 'Cormorant', Georgia, serif; color: #F2D48A; font-size: 2.6rem; font-weight: 600; }
body.tema-stellaria .riga h2 { font-size: 1.6rem; font-weight: 600; }
body.tema-brain-train { --accento: #F29B4B; --titolo: #FFD9B0;
  --card: rgba(58,36,20,.55); --line: rgba(242,155,75,.22);
  background: radial-gradient(ellipse at 50% 0%, #3a2414 0%, #120b07 60%) fixed, #120b07; }
body.tema-brain-train h1 { font-family: 'Lobster', cursive; font-weight: 400; font-size: 2.6rem; color: #FFE7CC; }
body.tema-eco { --accento: #7fb2ff; --titolo: #cfe0ff;
  --card: rgba(20,36,71,.55); --line: rgba(127,178,255,.2);
  background: radial-gradient(ellipse at 50% 0%, #142447 0%, #05070f 60%) fixed, #05070f; }
body.tema-drivius { --accento: #3fb8ff; --titolo: #9fdcff;
  --card: rgba(22,40,90,.6); --line: rgba(63,184,255,.22);
  background: radial-gradient(ellipse at 50% 0%, #1b2f75 0%, #0a1030 60%) fixed, #0a1030; }
body.tema-giardino-segreto { --accento: #9bdc6e; --titolo: #ffc1d6;
  --card: rgba(40,74,36,.55); --line: rgba(155,220,110,.22);
  background: radial-gradient(ellipse at 50% 0%, #2c5a2a 0%, #0f2311 60%) fixed, #0f2311; }
body.tema-luna-park { --accento: #f4c34a; --titolo: #ffd978;
  --card: rgba(60,32,100,.55); --line: rgba(244,195,74,.22);
  background: radial-gradient(ellipse at 50% 0%, #3d2366 0%, #160a2c 60%) fixed, #160a2c; }
body.tema-call-me-now { --accento: #3cc8b4; --titolo: #a8efe3;
  --card: rgba(20,60,72,.55); --line: rgba(60,200,180,.22);
  background: radial-gradient(ellipse at 50% 0%, #17485a 0%, #0b1d26 60%) fixed, #0b1d26; }
body.tema-endless-mahjong { --accento: #d9ae4a; --titolo: #f0cf7a;
  --card: rgba(48,40,22,.55); --line: rgba(217,174,74,.22);
  background: radial-gradient(ellipse at 50% 0%, #2e2614 0%, #0b0a07 60%) fixed, #0b0a07; }
body.tema-ink-flood { --accento: #ff5fd6; --titolo: #9ff3ff;
  --card: rgba(50,22,70,.55); --line: rgba(255,95,214,.22);
  background: radial-gradient(ellipse at 50% 0%, #3a1250 0%, #0a0612 60%) fixed, #0a0612; }
body.tema-tinturia { --accento: #e8a65a; --titolo: #ffd79a;
  --card: rgba(74,44,24,.55); --line: rgba(232,166,90,.24);
  background: radial-gradient(ellipse at 50% 0%, #4a2c18 0%, #1a0f08 60%) fixed, #1a0f08; }
body[class^="tema-"] a { color: var(--accento); }
body[class^="tema-"] .scheda .icona { border-color: transparent; }
@media (max-width: 640px) {
  body.tema-stellaria .riga h2 { font-size: 1.25rem; }
  body[class^="tema-"] h1 { font-size: 2.1rem; }
}

/* Logo animato nelle pagine interne */
.logo.logo-mini { display: block; width: min(280px, 70vw); margin: 4px auto 14px; }
.doc .logo.logo-mini { margin-bottom: 18px; }

/* Niente scorrimento laterale, anche con caratteri di sistema grandi */
html, body { overflow-x: hidden; max-width: 100%; }
.scheda, .doc, .wrap { overflow-x: clip; }
.riga .testo, .riga .foto { min-width: 0; }
.riga h2, .riga p, .finale p, .descr p { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.riga .foto img, .scheda .banner { max-width: 100%; }

/* Telefono: niente tabella, immagine sopra e testo sotto */
@media (max-width: 640px) {
  .riga, .riga.inversa { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 18px 16px; }
  .riga.inversa .testo { order: 2; text-align: center; }
  .riga.inversa .foto { order: 1; }
  .riga .foto img { width: 170px; }
  .riga .testo { width: 100%; }
  .riga h2 { font-size: 1.15rem; }
  .riga p { font-size: 0.95rem; }
  body.tema-stellaria .riga h2 { font-size: 1.35rem; }
}
.doc header .logo img { width: 100%; height: auto; border-radius: 0; box-shadow: none; }