/* Demo A · 暧昧私密产品壳 — overrides css/app.css; does not touch state machine */

:root {
  color-scheme: dark;
  --bg-deep: #120a0d;
  --bg-warm: #1c1014;
  --ember: #c45a4a;
  --rose: #e08a9a;
  --blush: #f0b8b0;
  --cream: rgba(255, 236, 228, 0.88);
  --ink-soft: rgba(255, 232, 224, 0.55);
  --rail: rgba(40, 22, 26, 0.22);
  --rail-hover: rgba(55, 28, 34, 0.55);
  --edge-fade: 0.12;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--cream);
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
    ui-sans-serif, system-ui, -apple-system, sans-serif;
  user-select: none;
  touch-action: none;
}

body.product {
  background:
    radial-gradient(ellipse 90% 70% at 50% 42%, #2a161c 0%, var(--bg-deep) 72%);
}

.app {
  position: relative;
  min-height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ——— Ambiance ——— */
.ambiance {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ambiance-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 38%, rgba(180, 70, 80, 0.18), transparent 70%),
    radial-gradient(ellipse 40% 30% at 70% 70%, rgba(120, 50, 40, 0.12), transparent 65%);
}
.ambiance-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 78% 78% at 50% 45%, transparent 42%, rgba(8, 4, 6, 0.72) 100%);
}
.ambiance-breath {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  background: radial-gradient(ellipse 50% 40% at 50% 42%, rgba(220, 90, 100, 0.16), transparent 68%);
}
.ambiance-breath.heat-low { opacity: 0.35; }
.ambiance-breath.heat-mid { opacity: 0.55; animation: desirePulse 3.6s ease-in-out infinite; }
.ambiance-breath.heat-hot { opacity: 0.78; animation: desirePulse 2.4s ease-in-out infinite; }
@keyframes desirePulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

/* ——— Stage fills viewport ——— */
.stage-wrap {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#stage {
  position: relative;
  width: min(100vw, calc(100vh * 640 / 852));
  height: min(100vh, calc(100vw * 852 / 640));
  min-width: min(280px, 100vw);
  min-height: min(360px, 100vh);
  max-height: 100vh;
  max-width: 100vw;
  aspect-ratio: 640 / 852;
  background: #1a0f14;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  touch-action: none;
}

/* Soft edge fade on character frame */
#stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(18, 10, 13, 0.55) 0%, transparent 14%),
    linear-gradient(to bottom, rgba(18, 10, 13, 0.28) 0%, transparent 10%),
    radial-gradient(ellipse 92% 90% at 50% 48%, transparent 62%, rgba(12, 6, 8, 0.45) 100%);
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  background: transparent !important;
}
/* shell-6: layer geometry local — survive CDN css lag */


/* ——— Hide debug chrome in product mode ——— */
body.product:not(.product-dev) .product-dev-only {
  display: none !important;
}

body.product:not(.product-dev) #hotDebug {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.product:not(.product-dev) #placeholderTag,
body.product:not(.product-dev) #verBadge {
  display: none !important;
}

body.product:not(.product-dev) .topbar,
body.product:not(.product-dev) .hud {
  display: none !important;
}

/* Soften zone pulse for product */
body.product:not(.product-dev) .zone-pulse {
  border-color: rgba(224, 138, 154, 0.45);
  box-shadow: 0 0 28px rgba(196, 90, 74, 0.28);
}

body.product:not(.product-dev) .react-flash {
  font-size: 0; /* no emoji/text flash if any */
  background: radial-gradient(circle at 50% 40%, rgba(224, 120, 130, 0.14), transparent 55%);
}
body.product:not(.product-dev) .react-flash.sticky {
  background: radial-gradient(circle at 50% 28%, rgba(255, 160, 100, 0.18), transparent 52%);
}

/* ——— Subtitle / talk line near person ——— */
#reactHud.react-hud {
  left: 50%;
  bottom: clamp(18%, 22vh, 28%);
  transform: translateX(-50%);
  z-index: 12;
  max-width: min(78%, 320px);
  padding: 8px 14px;
  border-radius: 16px;
  border: none;
  background: rgba(28, 14, 18, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cream);
  font-size: 13px;
  font-weight: 450;
  letter-spacing: 0.04em;
  line-height: 1.45;
  white-space: normal;
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  box-shadow: none;
  animation: quoteIn 900ms ease-out;
}

#reactHud.react-hud.sticky {
  animation: none;
  opacity: 1;
  background: rgba(36, 16, 22, 0.38);
  border: 1px solid rgba(240, 184, 176, 0.18);
  color: rgba(255, 240, 232, 0.95);
}

#reactHud.react-hud.c-deep,
#reactHud.react-hud.c-rose,
#reactHud.react-hud.c-warm,
#reactHud.react-hud.c-pink,
#reactHud.react-hud.c-violet,
#reactHud.react-hud.c-amber,
#reactHud.react-hud.c-coral {
  background: rgba(28, 14, 18, 0.32);
  border: none;
}

@keyframes quoteIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  18% { opacity: 0.92; transform: translateX(-50%) translateY(0); }
  78% { opacity: 0.92; }
  100% { opacity: 0; }
}

/* Strip heat-only HUD labels visually when they look like status chips;
   talk sticky lines still show via .sticky */
body.product:not(.product-dev) #reactHud.react-hud:not(.sticky) {
  /* keep soft quote for reaction one-shots */
  font-weight: 400;
  opacity: 0.82;
}

/* ——— Edge rail ——— */
.edge-rail {
  position: fixed;
  z-index: 20;
  right: max(6px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 6px;
  border-radius: 999px;
  background: var(--rail);
  opacity: var(--edge-fade);
  transition: opacity 0.35s ease, background 0.35s ease;
  pointer-events: auto;
}

.edge-rail:hover,
.edge-rail:focus-within,
.edge-rail.near,
body.product-dev .edge-rail {
  opacity: 0.92;
  background: var(--rail-hover);
}

.edge-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(240, 184, 176, 0.18);
  border-radius: 50%;
  background: rgba(20, 10, 14, 0.35);
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}

.edge-btn:hover,
.edge-btn:focus-visible {
  color: var(--cream);
  border-color: rgba(224, 138, 154, 0.55);
  background: rgba(60, 28, 36, 0.55);
  outline: none;
}

.edge-btn:active { transform: scale(0.94); }

.edge-btn[disabled] {
  opacity: 0.28;
  cursor: default;
  transform: none;
}

.edge-btn[aria-pressed="true"] {
  color: var(--blush);
  border-color: rgba(224, 138, 154, 0.65);
}

/* Mute glyph readability when app.js sets text 静音/有声 */
#muteBtn.edge-btn {
  font-size: 11px;
}

/* Outfit chip may become long label from app.js — keep circular-ish */
#outfitBtn.edge-btn {
  font-size: 11px;
  width: auto;
  min-width: 36px;
  padding: 0 8px;
  border-radius: 999px;
}

/* ——— Dev corner ——— */
.dev-corner {
  position: fixed;
  z-index: 30;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: default;
  opacity: 0;
}

/* ——— Product-dev restoration ——— */
body.product-dev .topbar {
  position: fixed;
  z-index: 25;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: rgba(12, 6, 8, 0.72);
  backdrop-filter: blur(10px);
}

body.product-dev .hud {
  position: fixed;
  z-index: 25;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(12, 6, 8, 0.78);
  backdrop-filter: blur(10px);
}

body.product-dev #hotDebug {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.product-dev #stage {
  max-height: calc(100vh - 120px);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

body.product-dev .stage-wrap {
  padding: 56px 12px 100px;
}

/* Quiet chips in dev */
.chip {
  border: 1px solid rgba(240, 184, 176, 0.25);
  background: rgba(40, 22, 26, 0.7);
  color: var(--cream);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.chip[aria-pressed="true"] {
  border-color: rgba(224, 138, 154, 0.7);
  color: var(--blush);
}
.ver { font-size: 11px; color: var(--ink-soft); }

/* Mobile: edge rail sits lower-right, thinner */
@media (max-width: 520px) {
  .edge-rail {
    right: max(4px, env(safe-area-inset-right));
    gap: 6px;
    padding: 8px 4px;
  }
  .edge-btn {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
  #reactHud.react-hud {
    font-size: 12px;
    bottom: clamp(16%, 18vh, 26%);
  }
}

/* Prefer dark romantic when reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ambiance-breath,
  #reactHud.react-hud {
    animation: none !important;
  }
}

/* app.js rewrites 脱衣/穿衣/装扮 to longer Chinese — keep pills, not broken circles */
#undressBtn.edge-btn,
#dressBtn.edge-btn,
#muteBtn.edge-btn {
  width: auto;
  min-width: 36px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}


/* shell-5/shell-3: never lose the person under failed idle video / stacking */
#idleImg.layer.idle,
#idleImgB.layer.idle.show {
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#idleImg.layer.idle.fade-out {
  opacity: 0 !important;
}
.layer.idle-vid {
  z-index: 1;
}
.layer.idle-vid.playing {
  /* only cover still when we actually have frames (JS guard removes .playing otherwise) */
  z-index: 3;
}
#stage {
  background: #1a0f14 !important;
}
/* shell-6: empty videos must not mask still */
.layer.idle-vid:not(.playing),
.layer.react-vid:not(.playing) {
  opacity: 0 !important;
  visibility: hidden !important;
}
body.product:not(.product-dev) #idleImg.layer.idle {
  z-index: 4 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.product:not(.product-dev) .edge-rail {
  opacity: 0.55;
}