:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --saffron: #ff9d2e;
  --gold: #f7cb72;
  --deep: #170b08;
  --cream: #fff4da;
  --mouth-mid: 0;
  --mouth-open: 0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 23%, rgba(175, 68, 20, .32), transparent 38%),
    linear-gradient(165deg, #2c1009 0%, #130907 55%, #080504 100%);
  overflow-x: hidden;
}

button { font: inherit; }

.app-shell {
  width: min(100%, 760px);
  min-height: 100svh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}

.topbar { display: flex; align-items: center; gap: 12px; position: relative; z-index: 5; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(247,203,114,.35); border-radius: 50%; color: var(--gold); background: rgba(255,255,255,.045); font-size: 23px; }
.eyebrow { margin: 0 0 2px; font-size: 10px; letter-spacing: .19em; color: rgba(255,244,218,.58); font-weight: 700; }
h1 { margin: 0; font: 500 29px/1.05 Georgia, serif; letter-spacing: .02em; }
.icon-button { margin-left: auto; width: 37px; height: 37px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: rgba(255,255,255,.72); background: rgba(255,255,255,.05); cursor: pointer; }

.stage { position: relative; min-height: 570px; display: grid; place-items: center; isolation: isolate; }
.ambient { position: absolute; width: 230px; height: 230px; border-radius: 50%; filter: blur(65px); opacity: .22; z-index: -2; }
.ambient-one { top: 15%; left: -10%; background: #f05b24; }
.ambient-two { top: 31%; right: -10%; background: #e9a842; }
.mandala { position: absolute; top: 46%; left: 50%; width: min(78vw, 510px); aspect-ratio: 1; translate: -50% -50%; border: 1px solid rgba(247,203,114,.16); border-radius: 50%; box-shadow: 0 0 0 24px rgba(247,203,114,.025), 0 0 0 64px rgba(247,203,114,.018); }
.mandala::before, .mandala::after { content: ""; position: absolute; inset: 9%; border: 1px dashed rgba(247,203,114,.12); border-radius: 50%; animation: rotate 40s linear infinite; }
.mandala::after { inset: 23%; animation-direction: reverse; animation-duration: 27s; }

.presence { position: absolute; top: 44%; left: 50%; width: min(81vw, 455px); translate: -50% -50%; transform-origin: 50% 85%; animation: breathe 5s ease-in-out infinite; filter: drop-shadow(0 22px 32px rgba(0,0,0,.46)); }
.presence .hanuman { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.character-frame { position: absolute; inset: 0; }
.base-frame { position: relative; z-index: 1; }
.gesture-frame, .blink-frame {
  z-index: 2;
  opacity: 0;
  -webkit-mask-image: url("/hanuman.png");
  mask-image: url("/hanuman.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.gesture-frame { transition: opacity 360ms ease-in-out; }
.presence.gesture .gesture-frame { opacity: 1; }
.presence.gesture { animation: friendlyWave 2.2s ease-in-out; }
.blink-frame {
  z-index: 4;
  clip-path: inset(20.5% 29% 65.5% 29%);
  animation: naturalBlink 5.8s infinite;
}
.mouth-frame {
  z-index: 5;
  pointer-events: none;
  clip-path: polygon(37% 30.5%, 63% 30.5%, 67% 36%, 63% 42.5%, 50% 44.5%, 37% 42.5%, 33% 36%);
  -webkit-mask-image: url("/hanuman.png");
  mask-image: url("/hanuman.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: opacity 45ms linear;
}
.mouth-mid-frame { opacity: var(--mouth-mid); }
.mouth-open-frame { opacity: var(--mouth-open); }
.aura { position: absolute; inset: 4% 10% 7%; border-radius: 50%; background: radial-gradient(circle, rgba(255,193,72,.26), rgba(227,79,22,.04) 57%, transparent 70%); z-index: -1; animation: aura 4s ease-in-out infinite; }
.presence.listening .aura { animation-duration: 1.5s; opacity: .9; }
.presence.speaking { animation: speakMotion 1.4s ease-in-out infinite; }

.status-card { position: absolute; bottom: 14px; z-index: 3; width: min(94%, 510px); padding: 14px 17px; border: 1px solid rgba(255,255,255,.105); border-radius: 18px; background: linear-gradient(135deg, rgba(38,21,16,.88), rgba(17,10,8,.78)); box-shadow: 0 18px 50px rgba(0,0,0,.24); backdrop-filter: blur(18px); }
.status-line { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #d69b54; box-shadow: 0 0 0 4px rgba(214,155,84,.1); }
.status-dot.live { background: #61d195; box-shadow: 0 0 0 4px rgba(97,209,149,.1), 0 0 16px rgba(97,209,149,.4); }
.status-card p { margin: 6px 0 0 17px; color: rgba(255,244,218,.6); font-size: 12px; line-height: 1.45; }

.camera-wrap { position: absolute; right: 1%; top: 8%; width: 130px; aspect-ratio: 3/4; z-index: 4; overflow: hidden; border: 1px solid rgba(247,203,114,.38); border-radius: 17px; background: #111; box-shadow: 0 15px 35px rgba(0,0,0,.36); }
.camera-wrap video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.camera-label { position: absolute; inset: auto 7px 7px; padding: 5px 7px; border-radius: 20px; background: rgba(0,0,0,.64); font-size: 9px; text-align: center; }
.camera-label span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #65df9b; margin-right: 4px; }

.controls { display: flex; justify-content: center; align-items: center; gap: clamp(22px, 7vw, 48px); padding: 18px 0 8px; }
.control { width: 60px; display: grid; place-items: center; gap: 7px; border: 0; color: rgba(255,244,218,.7); background: none; font-size: 11px; cursor: pointer; }
.control-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(255,255,255,.06); color: var(--gold); font-size: 14px; }
.control:disabled { opacity: .3; cursor: not-allowed; }
.control.active .control-icon { background: rgba(255,144,43,.18); border-color: rgba(255,164,69,.46); }
.talk-button { position: relative; width: 82px; height: 82px; display: grid; place-content: center; gap: 1px; border: 1px solid rgba(255,226,157,.6); border-radius: 50%; color: #2a1107; background: radial-gradient(circle at 36% 28%, #fff1bd, #f5a837 60%, #c5571f 100%); box-shadow: 0 8px 30px rgba(236,116,31,.34), inset 0 1px 1px rgba(255,255,255,.75); cursor: pointer; z-index: 1; }
.talk-button.connected { color: var(--cream); background: radial-gradient(circle at 38% 28%, #ad3d25, #6f1f17 67%, #3b110e); }
.talk-icon { font-size: 21px; line-height: 1; }
#talkLabel { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.talk-rings { position: absolute; inset: -8px; border: 1px solid rgba(247,203,114,.22); border-radius: 50%; }
.talk-button.connected .talk-rings { animation: ring 2s ease-out infinite; }
.privacy-note { margin: 4px auto 0; max-width: 510px; color: rgba(255,244,218,.37); text-align: center; font-size: 10px; line-height: 1.45; }

dialog { width: min(calc(100% - 36px), 460px); padding: 28px; color: var(--cream); border: 1px solid rgba(247,203,114,.25); border-radius: 24px; background: #21100c; box-shadow: 0 30px 90px rgba(0,0,0,.65); }
dialog::backdrop { background: rgba(7,3,2,.76); backdrop-filter: blur(8px); }
dialog h2 { margin: 7px 0 16px; font: 500 28px/1.1 Georgia, serif; }
dialog p:not(.eyebrow) { color: rgba(255,244,218,.68); font-size: 14px; line-height: 1.6; }
.dialog-close { position: absolute; top: 14px; right: 16px; border: 0; color: rgba(255,255,255,.7); background: none; font-size: 28px; cursor: pointer; }

@keyframes breathe { 0%,100% { transform: translateY(2px) scale(1); } 50% { transform: translateY(-5px) scale(1.008); } }
@keyframes aura { 0%,100% { transform: scale(.96); opacity: .58; } 50% { transform: scale(1.04); opacity: .9; } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes ring { 0% { transform: scale(.86); opacity: .7; } 80%,100% { transform: scale(1.28); opacity: 0; } }
@keyframes speakMotion { 0%,100% { transform: translateY(0) rotate(-.15deg); } 50% { transform: translateY(-3px) rotate(.15deg); } }
@keyframes naturalBlink {
  0%, 42%, 44.6%, 78%, 80.3%, 100% { opacity: 0; }
  43%, 44%, 79%, 79.8% { opacity: 1; }
}
@keyframes friendlyWave {
  0%, 100% { transform: translateY(0) rotate(0); }
  32% { transform: translateY(-3px) rotate(-.45deg); }
  68% { transform: translateY(-1px) rotate(.35deg); }
}

@media (max-height: 760px) {
  .stage { min-height: 485px; }
  .presence { width: min(70vw, 370px); }
  .status-card { bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}