/* Font serviti in locale (cartella fonts/): l'app non contatta server esterni. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/space-grotesk-600.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/space-grotesk-700.woff2) format('woff2')}

:root{
  --bg:#0a0a12; --card:rgba(255,255,255,.055); --stroke:rgba(255,255,255,.12);
  --text:#eef0f6; --muted:#9aa0b4; --grad:linear-gradient(90deg,#7b2ff7,#e02f75);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--bg);
  min-height:100vh;padding:22px clamp(14px,4vw,48px) 40px;overflow-x:hidden;
  max-width:1220px;margin:0 auto;   /* centro tutta la colonna: testi allineati allo stesso bordo */
}

/* barre di scorrimento sottili e in tema scuro (pagina e finestre interne) */
html{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}

/* sfondo con gradiente animato */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(1200px 700px at 80% -10%,rgba(123,47,247,.18),transparent),
  radial-gradient(900px 600px at 0% 100%,rgba(224,47,117,.16),transparent),var(--bg)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:float 18s ease-in-out infinite}
.b1{width:340px;height:340px;background:#7b2ff7;top:-60px;left:8%}
.b2{width:300px;height:300px;background:#e02f75;bottom:-40px;right:12%;animation-delay:-6s}
.b3{width:260px;height:260px;background:#2f80ed;top:40%;left:60%;animation-delay:-11s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(1.12)}}

/* ---- intestazione "hero" centrata ---- */
.hero-head{text-align:center;padding:20px 0 4px}
.logo-emoji{font-size:3.4rem;line-height:1;filter:drop-shadow(0 8px 26px rgba(123,47,247,.45))}
.title{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(2.4rem,6vw,3.6rem);margin:8px 0 0;line-height:1.05}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* barra dei controlli: schede a sinistra, modello + dispositivo a destra */
.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:20px 0 16px}
.right{display:flex;align-items:center;gap:10px}
.badge{font-size:.72rem;font-weight:600;color:#c9cee0;background:rgba(255,255,255,.08);
  border:1px solid var(--stroke);padding:5px 10px;border-radius:999px}
.tagline{color:#c3c7d6;margin:.7rem auto .9rem;max-width:60ch;font-size:1.08rem}

/* pill informative sotto il titolo */
.pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 4px}
.pill{font-size:.74rem;font-weight:600;color:#cfd3e2;padding:6px 12px;border-radius:999px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.05)}

/* ---- dropdown personalizzato (sostituisce il <select> nativo) ---- */
.dropdown{position:relative}
.dd-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-width:150px;background:rgba(255,255,255,.06);color:var(--text);
  border:1px solid var(--stroke);border-radius:10px;padding:8px 12px;
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:.15s}
.dd-toggle:hover{border-color:#e02f75;background:rgba(255,255,255,.1)}
.caret{color:var(--muted);font-size:.7rem;transition:transform .2s}
.dropdown.open .caret{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:100%;
  background:#15131f;border:1px solid var(--stroke);border-radius:12px;padding:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);backdrop-filter:blur(14px);
  display:none;z-index:60}
.dropdown.open .dd-menu{display:block}
.dd-item{padding:9px 12px;border-radius:8px;cursor:pointer;font-size:.85rem;
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:min(340px,80vw);color:#cfd3e2;transition:.12s}
/* variante che si apre verso l'alto (per i menu nella barra sotto il video) */
.dropdown.up .dd-menu{top:auto;bottom:calc(100% + 8px)}
#cam-dd .dd-menu{left:0;right:auto}
.dropdown.up .caret{transform:rotate(180deg)}
.dropdown.up.open .caret{transform:rotate(0deg)}
.dd-item:hover{background:rgba(255,255,255,.09);color:#fff}
.dd-item.sel{background:var(--grad);color:#fff}

.tabs{display:flex;gap:8px}
.tab{background:rgba(255,255,255,.05);border:1px solid var(--stroke);color:var(--muted);
  padding:9px 16px;border-radius:12px;font:inherit;font-weight:600;cursor:pointer;transition:.2s}
.tab:hover{color:var(--text)}
.tab.active{color:#fff;border-color:transparent;background:var(--grad);box-shadow:0 8px 24px rgba(224,47,117,.35)}

.grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}

.card{background:var(--card);border:1px solid var(--stroke);border-radius:20px;padding:16px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,.45)}

.holder{position:relative;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  background:#05050b;box-shadow:inset 0 0 0 1px var(--stroke),0 0 40px rgba(123,47,247,.25)}
#video,#photo,#overlay{position:absolute;inset:0;width:100%;height:100%}
#video.mirror{transform:scaleX(-1)}   /* anteprima a specchio (i frame inviati sono già ribaltati) */
#mirror{flex:0 0 auto}
#mirror.on{background:var(--grad);border-color:transparent;color:#fff}
#video,#photo{object-fit:cover}
#photo{display:none}
#overlay{pointer-events:none}
.hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.9rem;text-align:center;padding:20px}

.stagebar{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.btn{background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--stroke);
  border-radius:12px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer;transition:.15s}
.btn:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.btn.primary{background:var(--grad);border-color:transparent;box-shadow:0 8px 22px rgba(224,47,117,.35)}
.btn.ghost{background:transparent}
.fps{margin-left:auto;color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}

.panel{min-height:100%}
.hero{text-align:center;padding:10px 6px 16px;border-bottom:1px solid var(--stroke);margin-bottom:14px}
.emoji{font-size:4.6rem;line-height:1;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5));
  transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.emoji.pop{transform:scale(1.14)}
.name{font-family:'Space Grotesk',sans-serif;font-size:1.7rem;font-weight:700;margin-top:6px}
.conf{color:var(--muted);font-size:.86rem;margin-top:2px}

.bars{display:flex;flex-direction:column;gap:9px}
.row{display:flex;align-items:center;gap:9px;font-size:.86rem}
.row .lab{width:104px;white-space:nowrap;color:#cfd3e2}
.track{flex:1;height:11px;background:rgba(150,150,160,.16);border-radius:7px;overflow:hidden}
.fill{height:100%;width:0;border-radius:7px;transition:width .35s ease}
.pct{width:40px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.note{color:var(--muted);font-size:.8rem;margin-top:14px;text-align:center}

/* ---- pulsante informativo e finestra modale sui modelli ---- */
.info-btn{width:34px;height:34px;flex:0 0 auto;border-radius:50%;cursor:pointer;
  border:1px solid var(--stroke);background:rgba(255,255,255,.06);color:var(--text);
  font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;
  font-size:1rem;transition:.15s}
.info-btn:hover{border-color:#e02f75;background:rgba(255,255,255,.13);transform:translateY(-1px)}

.modal-bg{position:fixed;inset:0;z-index:100;display:flex;align-items:center;
  justify-content:center;padding:18px;background:rgba(5,5,12,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-bg[hidden]{display:none}   /* il display:flex sopra vincerebbe su "hidden" */
.modal{background:#15131f;border:1px solid var(--stroke);border-radius:18px;
  max-width:640px;width:100%;max-height:86vh;overflow:auto;padding:18px 20px;
  box-shadow:0 30px 80px rgba(0,0,0,.65)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.modal-head h2{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;margin:2px 0 4px}
.modal-x{background:none;border:0;color:var(--muted);font-size:1.05rem;cursor:pointer;
  padding:6px;border-radius:8px;transition:.15s}
.modal-x:hover{color:#fff;background:rgba(255,255,255,.08)}
.m-row{border:1px solid var(--stroke);border-radius:12px;padding:10px 13px;margin:10px 0;
  background:rgba(255,255,255,.03)}
.m-head{display:flex;align-items:center;gap:10px}
.m-tier{font-size:.68rem;font-weight:700;letter-spacing:.06em;color:#fff;
  background:var(--grad);padding:4px 10px;border-radius:999px;white-space:nowrap}
.m-acc{margin-left:auto;font-weight:700;color:#e02f75;font-variant-numeric:tabular-nums}
.m-row p{margin:6px 0 0;color:#b9bdcc;font-size:.85rem;line-height:1.55}
.modal-note{color:var(--muted);font-size:.78rem;margin:12px 2px 2px;line-height:1.5}

/* ---- modalità confronto: due modelli sulla stessa immagine ---- */
.vs-row{display:flex;align-items:flex-end;gap:8px;margin-bottom:14px}
.vs-col{flex:1;min-width:0}
.vs-cap{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 5px 2px}
.vs-col .dropdown{width:100%}
.vs-col .dd-toggle{width:100%;min-width:0}
.vs{font-family:'Space Grotesk',sans-serif;font-weight:700;color:#8a8f98;font-size:.8rem;
  flex:0 0 auto;padding-bottom:9px}
.duel{display:flex;flex-direction:column;gap:12px}
.duel-card{border:1px solid var(--stroke);border-radius:14px;padding:10px 12px;
  background:rgba(255,255,255,.03)}
.duel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.duel-model{font-size:.7rem;font-weight:700;letter-spacing:.05em;color:#9aa0b4;
  background:rgba(255,255,255,.07);padding:4px 9px;border-radius:999px;white-space:nowrap}
.duel-res{font-weight:700;font-size:.92rem;text-align:right}
.duel .row{font-size:.76rem;margin:3px 0}
.duel .lab{width:92px}
.duel .track{height:8px}

/* chip cliccabili per scegliere il volto (scatto/upload con più persone) */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;justify-content:center}
.chip{padding:6px 11px;border:1px solid var(--stroke);border-radius:999px;cursor:pointer;
  font-size:.8rem;font-weight:600;color:#cfd3e2;background:rgba(255,255,255,.06);transition:.15s}
.chip:hover{background:rgba(255,255,255,.12);color:#fff}
.chip.sel{background:var(--grad);border-color:transparent;color:#fff}

footer{color:var(--muted);font-size:.78rem;margin-top:26px;text-align:center}

/* ---------------- responsive (in fondo: deve vincere sulle regole base) ---------------- */
@media (max-width:880px){
  body{padding:16px clamp(12px,4vw,20px) 32px}
  .grid{grid-template-columns:1fr;gap:14px}
  .hero-head{padding-top:10px}
  .logo-emoji{font-size:2.7rem}
  .tagline{font-size:.92rem}
  .emoji{font-size:3.8rem}
  .name{font-size:1.4rem}
  .btn,.tab{padding:11px 15px}          /* aree di tocco più grandi */
}
@media (max-width:560px){
  .controls{flex-direction:column;align-items:stretch}
  .right{width:100%;justify-content:space-between}
  #model-dd{flex:1}
  #model-dd .dd-toggle{width:100%}
  .tabs{gap:6px}
  .tab{flex:1;padding:10px 6px;font-size:.8rem;text-align:center}
  .stagebar{gap:8px}
  .stagebar .btn{flex:1;justify-content:center;text-align:center}
  .fps{flex-basis:100%;margin-left:0;text-align:center;order:9}
  .card{padding:12px}
  .row .lab{width:88px;font-size:.8rem}
  .emoji{font-size:3.2rem}
  .name{font-size:1.25rem}
}