:root {
  --navy: #161e33;
  --navy-2: #222c47;
  --champagne: #efe0da;
  --gold: #c9a47a;
  --text: #f6efe9;
  --muted: #b9b2ad;
  --ok: #7fd1a8;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--navy); color: var(--text); font-family: Inter, system-ui, sans-serif; overflow: hidden; }
.stage { position: relative; height: 100dvh; width: 100%; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 30%, #2b3657 0%, var(--navy) 65%); }
.brand { display: flex; align-items: baseline; gap: 6px; opacity: .9; }
.brand-name { font-family: "Cormorant Garamond", serif; font-size: 18px; font-weight: 600; color: var(--champagne); }
.brand-sub { font-size: 9px; text-transform: uppercase; letter-spacing: .24em; color: var(--gold); }

.avatar { position: absolute; inset: 0; }
.halo { position: absolute; left: 50%; bottom: 18%; width: 90vmin; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(239,224,218,.14), transparent 65%); opacity: .6; transition: transform .25s, opacity .25s; }
.avatar-img, .avatar-stream { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  transform-origin: 50% 100%; animation: breathe 5.5s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.006); } }
.stage[data-state="speaking"] .halo { opacity: 1; transform: scale(calc(1 + var(--lvl, 0) * .2)); }
.stage[data-state="speaking"] .avatar-img { transform: translateY(calc(var(--lvl, 0) * -2px)) rotate(calc(var(--sway, 0) * .6deg)); animation: none; }

/* sottotitoli: una riga, in basso, a pezzi mentre parla */
.caption { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 44px);
  margin: 0; padding: 6px 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 17px; font-weight: 500; line-height: 1.3; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  opacity: 0; transition: opacity .2s; }
.caption.show { opacity: 1; }

.dock { position: absolute; z-index: 3; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center; gap: 10px;
  pointer-events: none; }
.stage::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 22%; pointer-events: none;
  background: linear-gradient(to top, rgba(10,14,26,.75), transparent); }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(10,14,26,.45); border: 1px solid rgba(255,255,255,.12); font-size: 12px; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.stage[data-state="waiting"] .dot { background: var(--gold); animation: pulse 1.6s infinite; }
.stage[data-state="listening"] .dot, .stage[data-state="speaking"] .dot { background: var(--ok); }
@keyframes pulse { 50% { opacity: .3; } }
.people { font-size: 11px; color: var(--muted); }

.cam-box { position: absolute; z-index: 3; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 72px; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.18); background: #000; }
.cam-box video, .cam-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

.start { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(22,30,51,.72); backdrop-filter: blur(6px); border: 0; color: var(--text); cursor: pointer; font: inherit; }
.start-title { font-family: "Cormorant Garamond", serif; font-size: 44px; color: var(--champagne); }
.start-sub { font-size: 15px; color: var(--muted); line-height: 1.5; text-align: center; }
.start[hidden] { display: none; }

.lock { position: absolute; z-index: 6; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(22,30,51,.88); backdrop-filter: blur(8px); padding: 24px; }
.lock[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 6px; width: min(280px, 100%); font-size: 13px; color: var(--muted); }
.field input { font: inherit; font-size: 20px; letter-spacing: .12em; text-align: center; padding: 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--text); outline: none; }
.field input:focus { border-color: var(--gold); }
.lock-btn { width: min(280px, 100%); padding: 13px; border-radius: 12px; border: 0; background: var(--champagne); color: var(--navy);
  font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; }
.lock-err { min-height: 1.2em; margin: 0; font-size: 13px; color: #f2a7a0; }

.avatar-loop { opacity: 0; transition: opacity .35s ease; }
.avatar-loop.on { opacity: 1; }