/* =====================================================================
   METASPEAK KIOSK V2 STYLES  (kiosk-v2.css)
   Reskinnable portrait/vertical kiosk. ALL selectors scoped under
   .ms-v2-root so nothing leaks into the existing styles.css. cqw/cqh resolve
   against the .kiosk container (container-type:size), not the viewport.
   Keyframes renamed msv2* to avoid global animation-name collisions.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

.ms-v2-root { position: fixed; inset: 0; z-index: 1; }

.ms-v2-root, .ms-v2-root *, .ms-v2-root *::before, .ms-v2-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ms-v2-root {
  --bg-deep:      #0a1428;
  --bg-mid:       #0f1f3d;
  --bg-center:    #18305a;
  --gold:         #c9a24b;
  --gold-bright:  #e6c66e;
  --gold-dim:     #6f5d2e;
  --gold-grad:    linear-gradient(135deg, #b8923a 0%, #e8cd78 50%, #c9a24b 100%);
  --text-body:    #aebcd6;
  --text-muted:   #7e8db0;
  --panel-fill:   rgba(13, 28, 58, 0.55);
  --panel-border: rgba(201, 162, 75, 0.35);
  --online:       #2fd17a;
  --font-display: "Cinzel", serif;
  --font-body:    "Inter", sans-serif;
}
.ms-v2-root .stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #04070f;
}
.ms-v2-root .kiosk {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1080px;
  height: 1920px;
  transform-origin: center;
  container-type: size;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 38%, var(--bg-center) 0%, var(--bg-mid) 45%, var(--bg-deep) 100%);
  color: var(--text-body);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.ms-v2-root .bg-layer { position: absolute; inset: 0; pointer-events: none; }
/* R37.9.73 — custom backdrop image (paste an R2/image URL in the V2 tab). Cover-fit
   with a soft top/bottom darkening so the gold title + cards stay legible. */
.ms-v2-root .bg-custom { background-size: cover; background-position: center; background-repeat: no-repeat; }
.ms-v2-root .bg-custom::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,16,38,0.34) 0%, rgba(8,16,38,0.12) 38%, rgba(8,16,38,0.56) 100%); }
.ms-v2-root .bg-vignette {
  background: radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(4, 9, 20, 0.55) 88%, rgba(3, 7, 16, 0.85) 100%);
}
.ms-v2-root .bg-stars {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 8%,  rgba(230,198,110,0.55) 0%, transparent 100%),
    radial-gradient(1px   1px   at 28% 22%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 67% 5%,  rgba(230,198,110,0.4)  0%, transparent 100%),
    radial-gradient(1px   1px   at 84% 16%, rgba(255,255,255,0.3)  0%, transparent 100%),
    radial-gradient(1px   1px   at 45% 12%, rgba(230,198,110,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 33%, rgba(230,198,110,0.3)  0%, transparent 100%),
    radial-gradient(1px   1px   at 8%  41%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px   1px   at 55% 30%, rgba(230,198,110,0.3)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 22% 58%, rgba(230,198,110,0.25) 0%, transparent 100%),
    radial-gradient(1px   1px   at 73% 48%, rgba(255,255,255,0.22) 0%, transparent 100%),
    radial-gradient(1px   1px   at 38% 72%, rgba(230,198,110,0.22) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 64%, rgba(230,198,110,0.25) 0%, transparent 100%),
    radial-gradient(1px   1px   at 15% 82%, rgba(255,255,255,0.2)  0%, transparent 100%),
    radial-gradient(1px   1px   at 60% 88%, rgba(230,198,110,0.2)  0%, transparent 100%),
    radial-gradient(1px   1px   at 95% 90%, rgba(255,255,255,0.18) 0%, transparent 100%);
}
.ms-v2-root .bg-palace {
  position: absolute;
  top: 4cqh;
  right: -6cqw;
  width: 78cqw;
  height: 60cqh;
  opacity: 0.85;
  pointer-events: none;
}
.ms-v2-root .corner-ornament { position: absolute; width: 18cqw; height: 18cqw; pointer-events: none; }
.ms-v2-root .corner-ornament.tl { top: 1.2cqw; left: 1.2cqw; }
.ms-v2-root .corner-ornament.bl { bottom: 3cqw; left: 1.2cqw; transform: scaleY(-1); }
.ms-v2-root .corner-ornament.br { bottom: 3cqw; right: 1.2cqw; transform: scale(-1, -1); }
.ms-v2-root .frame-border {
  position: absolute;
  inset: 1cqw;
  border: 2px solid rgba(201, 162, 75, 0.55);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 5px rgba(201, 162, 75, 0.13),
    inset 0 0 70px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.ms-v2-root .bottom-divider {
  position: absolute;
  left: 50%;
  bottom: 0.4cqh;
  transform: translateX(-50%);
  width: 92cqw;
  height: 2.4cqh;
  pointer-events: none;
}
.ms-v2-root .kiosk-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  padding: clamp(20px, 3.2cqw, 48px);
  padding-bottom: 3.6cqh;
  gap: 1.3cqh;
}
.ms-v2-root .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 8cqh;
}
.ms-v2-root .header-brand { display: flex; align-items: center; gap: 2cqw; }
.ms-v2-root .crest { width: calc(clamp(56px, 8cqw, 88px) * var(--v2-logo-scale, 1)); height: auto; flex: none; }
.ms-v2-root .brand-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.6cqw, 56px);
  letter-spacing: 0.07em;
  line-height: 1.05;
  color: #f3ead2;
  text-shadow: 0 2px 18px rgba(201, 162, 75, 0.25);
}
.ms-v2-root .brand-sub {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  margin-top: 0.5cqh;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(15px, 2.1cqw, 24px);
  letter-spacing: 0.22em;
  color: var(--gold-bright);
}
.ms-v2-root .brand-sub::before {
  content: "";
  display: block;
  width: 4.5cqw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.ms-v2-root .online-pill {
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  font-size: clamp(14px, 1.6cqw, 18px);
  color: var(--text-body);
  font-weight: 500;
}
.ms-v2-root .online-dot {
  width: 1.2cqw;
  height: 1.2cqw;
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  background: var(--online);
  box-shadow: 0 0 10px rgba(47, 209, 122, 0.8), 0 0 22px rgba(47, 209, 122, 0.4);
}
.ms-v2-root .online-dot.offline {
  background: #51607f;
  box-shadow: none;
}
.ms-v2-root .hero {
  display: grid;
  grid-template-columns: var(--v2-hero-left, 58%) 1fr;
  min-height: 0;
}
.ms-v2-root .hero-left {
  display: flex;
  flex-direction: column;
  gap: 1.2cqh;
  min-height: 0;
  padding-right: 1.6cqw;
}
.ms-v2-root .panel {
  background: var(--panel-fill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px rgba(255, 255, 255, 0.05);
}
.ms-v2-root .welcome-card { padding: 2cqh 2.6cqw; }
.ms-v2-root .welcome-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(clamp(26px, 3.4cqw, 40px) * var(--v2-chat-font, 1));
  letter-spacing: 0.02em;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}
.ms-v2-root .welcome-rule {
  width: 14cqw;
  height: 10px;
  margin: 0.9cqh 0 1.2cqh;
  color: var(--gold-dim);
}
.ms-v2-root .welcome-body {
  font-size: calc(clamp(14px, 1.65cqw, 18px) * var(--v2-chat-font, 1));
  line-height: 1.55;
  color: var(--text-body);
  text-wrap: pretty;
}
/* Live spoken script shown IN the welcome card (replaces bubble box) */
.ms-v2-root .welcome-card.is-live { border-color: rgba(230,198,110,0.5); }
.ms-v2-root .welcome-live-tag {
  display: flex; align-items: center; gap: 0.7cqw;
  font-size: calc(clamp(10px, 1.15cqw, 13px) * var(--v2-chat-font, 1)); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-soft, #e6c66e);
  font-weight: 700; margin-bottom: 1.4cqh;
}
.ms-v2-root .welcome-live-tag .live-pulse {
  width: 0.9cqw; height: 0.9cqw; min-width: 8px; min-height: 8px;
  border-radius: 50%; background: #6b7280; flex: none;
}
.ms-v2-root .welcome-live-tag .live-pulse.on {
  background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,0.6);
  animation: msv2LivePulse 1.5s ease-out infinite;
}
@keyframes msv2LivePulse {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); }
  70% { box-shadow: 0 0 0 0.9cqw rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
.ms-v2-root .welcome-script {
  font-size: calc(clamp(15px, 1.85cqw, 21px) * var(--v2-chat-font, 1));
  line-height: 1.5; color: #fff; text-wrap: pretty;
  margin: 0; min-height: 6cqh;
}
.ms-v2-root .welcome-hint {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  margin-top: 1.6cqh;
  color: var(--gold);
  font-weight: 500;
  font-size: clamp(13px, 1.6cqw, 17px);
  line-height: 1.45;
}
.ms-v2-root .welcome-hint .star8 { flex: none; width: clamp(20px, 2.6cqw, 30px); height: auto; }
.ms-v2-root .mic-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1cqw;
  padding: 0.6cqh 0 0.6cqh 0.8cqw;
  transform: translateX(var(--v2-mic-x, 0cqw));
}
.ms-v2-root .mic-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3cqh;
  flex: none;
}
.ms-v2-root .mic-divider {
  flex: none;
  width: 1.3cqw;
  height: 1.3cqw;
  min-width: 11px;
  min-height: 11px;
  transform: rotate(45deg);
  border: 1px solid rgba(201, 162, 75, 0.5);
  background: rgba(201, 162, 75, 0.12);
  box-shadow: 0 0 10px rgba(201, 162, 75, 0.25);
}
.ms-v2-root .mic-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
}
.ms-v2-root .mic-wrap {
  position: relative;
  display: grid;
  place-items: center;
}
/* R37.9.78 — continuously-emitting pulse rings (Muzium template). Two staggered
   rings expand outward from the mic; recording state speeds them up + brightens. */
.ms-v2-root .mic-wrap::before,
.ms-v2-root .mic-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(120px, 13.5cqw, 152px);
  height: clamp(120px, 13.5cqw, 152px);
  border-radius: 50%;
  border: 2px solid rgba(201, 162, 75, 0.55);
  pointer-events: none;
  z-index: 0;
  animation: msv2MicEmit 2.8s ease-out infinite;
}
.ms-v2-root .mic-wrap::after { animation-delay: 1.4s; }
.ms-v2-root .mic-wrap.recording::before,
.ms-v2-root .mic-wrap.recording::after {
  animation-duration: 1.5s;
  border-color: rgba(230, 198, 110, 0.8);
}
@keyframes msv2MicEmit {
  0%   { transform: scale(0.92); opacity: 0.7; }
  70%  { opacity: 0.12; }
  100% { transform: scale(2.0); opacity: 0; }
}
.ms-v2-root .mic-ring-deco {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.18);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ms-v2-root .mic-ring-deco.r1 { inset: -1.6cqw; }
.ms-v2-root .mic-ring-deco.r2 { inset: -3.4cqw; border-color: rgba(201, 162, 75, 0.11); }
.ms-v2-root .mic-ring-deco.r3 { inset: -5.4cqw; border-color: rgba(201, 162, 75, 0.06); }
.ms-v2-root .mic-wrap.recording .mic-ring-deco { animation: msv2RingBreath 1.8s ease-in-out infinite; }
.ms-v2-root .mic-wrap.recording .mic-ring-deco.r2 { animation-delay: 0.3s; }
.ms-v2-root .mic-wrap.recording .mic-ring-deco.r3 { animation-delay: 0.6s; }
/* R37.9.78 — idle ring-deco pulse removed; the emit rings above now carry the
   idle "tap me" motion, so the static deco rings stay calm until recording. */
@keyframes msv2RingBreath {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.035); }
}
.ms-v2-root .mic-btn {
  position: relative;
  z-index: 1;
  width: clamp(120px, 13.5cqw, 152px);
  height: clamp(120px, 13.5cqw, 152px);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: radial-gradient(circle at 50% 32%, #16284c 0%, #0c1a36 70%, #091227 100%);
  color: var(--gold);
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 3px rgba(201, 162, 75, 0.9),
    0 0 0 7px rgba(201, 162, 75, 0.18),
    0 0 28px rgba(201, 162, 75, 0.35),
    0 12px 32px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.25s ease, transform 0.15s ease, color 0.25s ease;
}
.ms-v2-root .mic-btn:active { transform: scale(0.96); }
.ms-v2-root .mic-btn svg { width: 42%; height: 42%; filter: drop-shadow(0 0 8px rgba(201, 162, 75, 0.5)); }
.ms-v2-root .mic-btn.recording {
  color: var(--gold-bright);
  animation: msv2MicPulse 1.4s ease-in-out infinite;
}
@keyframes msv2MicPulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(230, 198, 110, 1),
      0 0 0 8px rgba(230, 198, 110, 0.3),
      0 0 36px rgba(230, 198, 110, 0.55),
      0 12px 32px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(230, 198, 110, 1),
      0 0 0 12px rgba(230, 198, 110, 0.22),
      0 0 60px rgba(230, 198, 110, 0.8),
      0 12px 32px rgba(0, 0, 0, 0.5);
  }
}
/* R37.9.76 — soft continuous glow pulse on the mic even when idle (pairs with the
   ring pulse → unmistakably "tap me"). Recording (.mic-btn.recording, higher
   specificity) takes over with the livelier msv2MicPulse. */
.ms-v2-root .mic-btn { animation: msv2MicGlowIdle 2.8s ease-in-out infinite; }
@keyframes msv2MicGlowIdle {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(201, 162, 75, 0.9),
      0 0 0 7px rgba(201, 162, 75, 0.18),
      0 0 22px rgba(201, 162, 75, 0.3),
      0 12px 32px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(230, 198, 110, 1),
      0 0 0 10px rgba(201, 162, 75, 0.28),
      0 0 46px rgba(230, 198, 110, 0.6),
      0 12px 32px rgba(0, 0, 0, 0.5);
  }
}
.ms-v2-root .mic-wave {
  width: clamp(180px, 26cqw, 300px);
  height: 0;
  margin-top: 0;
  opacity: 0;
  transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease;
}
.ms-v2-root .mic-wave.active { height: 2.6cqh; margin-top: 0.2cqh; opacity: 1; }
.ms-v2-root .mic-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.5cqw, 30px);
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-top: 0;
  transition: color 0.3s ease;
}
.ms-v2-root .mic-label.recording { color: var(--gold-bright); }
.ms-v2-root .mic-sub {
  font-size: clamp(12px, 1.45cqw, 16px);
  color: var(--text-muted);
  margin-top: 0.4cqh;
}
.ms-v2-root .related-card {
  padding: 1.6cqh 1.8cqw;
  display: flex;
  flex-direction: column;
  gap: 1cqh;
  min-height: 0;
  flex: 1;
}
.ms-v2-root .related-head {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.2cqw, 26px);
  letter-spacing: 0.05em;
  color: var(--gold);
}
.ms-v2-root .related-head .star8 { width: clamp(20px, 2.4cqw, 28px); height: auto; color: var(--gold); }
.ms-v2-root .related-stage {
  position: relative;
  flex: 1;
  min-height: 12cqh;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 75, 0.25);
  background: #08101f;
}
.ms-v2-root .related-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}
.ms-v2-root .related-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(201, 162, 75, 0.25);
}
.ms-v2-root .related-caption {
  position: absolute;
  left: 1.4cqw;
  right: 1.4cqw;
  bottom: 1.2cqh;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 1cqh 1.4cqw;
  border-radius: 12px;
  background: rgba(7, 13, 27, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 162, 75, 0.2);
  font-size: clamp(11px, 1.4cqw, 15px);
  line-height: 1.45;
  color: var(--text-muted);
}
.ms-v2-root .related-caption .cap-icon {
  flex: none;
  width: clamp(26px, 3cqw, 34px);
  height: clamp(26px, 3cqw, 34px);
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(201, 162, 75, 0.12);
  color: var(--gold);
}
.ms-v2-root .related-caption .cap-icon svg { width: 60%; height: 60%; }
.ms-v2-root .related-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1cqw;
  flex: none;
  min-height: 14px;
}
.ms-v2-root .related-dot {
  width: 1cqw;
  height: 1cqw;
  min-width: 9px;
  min-height: 9px;
  border-radius: 99px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(201, 162, 75, 0.25);
  transition: all 0.3s ease;
}
.ms-v2-root .related-dot.active {
  width: 3cqw;
  min-width: 26px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(201, 162, 75, 0.6);
}
.ms-v2-root .avatar-stage {
  position: relative;
  min-height: 0;
}
.ms-v2-root .avatar-silhouette {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 92%;
  width: auto;
  color: var(--gold);
  opacity: 0.08;
  pointer-events: none;
}
.ms-v2-root .avatar-mock {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}
.ms-v2-root .avatar-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ms-v2-root .menu-section {
  display: flex;
  flex-direction: column;
  gap: 1.1cqh;
}
.ms-v2-root .menu-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8cqw;
}
.ms-v2-root .menu-heading h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.7cqw, 32px);
  letter-spacing: 0.08em;
  color: var(--gold);
  white-space: nowrap;
}
.ms-v2-root .heading-rule { flex: 1; max-width: 22cqw; height: 9px; color: var(--gold-dim); }
.ms-v2-root .menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: 1cqw;
}
.ms-v2-root .menu-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.4cqh 1.5cqw;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  min-height: 7.6cqh;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.ms-v2-root .menu-card:hover, .ms-v2-root .menu-card:focus-visible {
  border-color: var(--gold-bright);
  transform: translateY(-3px);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(201, 162, 75, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.07);
  outline: none;
}
.ms-v2-root .menu-card:active {
  transform: translateY(0) scale(0.955);
  border-color: var(--gold-bright);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(201, 162, 75, 0.4),
    inset 0 0 24px rgba(230, 198, 110, 0.2);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.ms-v2-root .menu-icon {
  flex: none;
  width: clamp(40px, 4.6cqw, 56px);
  height: clamp(40px, 4.6cqw, 56px);
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(201, 162, 75, 0.1);
  border: 1px solid rgba(201, 162, 75, 0.25);
  color: var(--gold);
}
.ms-v2-root .menu-icon svg { width: 56%; height: 56%; }
.ms-v2-root .menu-text { flex: 1; min-width: 0; }
.ms-v2-root .menu-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(clamp(14px, 1.75cqw, 20px) * var(--v2-menu-font, 1));
  letter-spacing: 0.03em;
  color: var(--gold);
  margin-bottom: 0.35cqh;
}
.ms-v2-root .menu-sub {
  font-size: calc(clamp(10.5px, 1.25cqw, 14px) * var(--v2-menu-font, 1));
  line-height: 1.4;
  color: var(--text-muted);
}
.ms-v2-root .menu-chevron { flex: none; color: var(--gold); opacity: 0.8; width: clamp(18px, 2.2cqw, 26px); height: clamp(18px, 2.2cqw, 26px); }
/* R37.9.78 — Muzium menu-card polish: diagonal sheen sweep + radial gold glow on
   hover/tap, plus icon bloom. Pseudos at z-index 0; content lifted to z-index 1. */
.ms-v2-root .menu-card::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -130%;
  width: 70%;
  height: 120%;
  background: linear-gradient(105deg, transparent 0%, rgba(230, 198, 110, 0.22) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}
.ms-v2-root .menu-card:hover::before,
.ms-v2-root .menu-card:focus-visible::before,
.ms-v2-root .menu-card:active::before { left: 140%; }
.ms-v2-root .menu-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 16% 50%, rgba(201, 162, 75, 0.2) 0%, transparent 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
.ms-v2-root .menu-card:hover::after,
.ms-v2-root .menu-card:focus-visible::after,
.ms-v2-root .menu-card:active::after { opacity: 1; }
.ms-v2-root .menu-icon, .ms-v2-root .menu-text, .ms-v2-root .menu-chevron { position: relative; z-index: 1; }
.ms-v2-root .menu-icon { transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease; }
.ms-v2-root .menu-card:hover .menu-icon,
.ms-v2-root .menu-card:focus-visible .menu-icon,
.ms-v2-root .menu-card:active .menu-icon {
  background: rgba(201, 162, 75, 0.22);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  box-shadow: 0 0 20px rgba(201, 162, 75, 0.55);
  transform: scale(1.07);
}
.ms-v2-root .menu-card:hover .menu-title,
.ms-v2-root .menu-card:focus-visible .menu-title,
.ms-v2-root .menu-card:active .menu-title { color: var(--gold-bright); }
.ms-v2-root .footer-tip {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 1cqh 2.2cqw;
  border-radius: 99px;
}
.ms-v2-root .tip-icon {
  flex: none;
  width: clamp(38px, 4.4cqw, 52px);
  height: clamp(38px, 4.4cqw, 52px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.4);
  color: var(--gold);
}
.ms-v2-root .tip-icon svg { width: 54%; height: 54%; }
.ms-v2-root .tip-text {
  flex: 1;
  font-size: clamp(11.5px, 1.45cqw, 16px);
  line-height: 1.5;
  color: var(--text-muted);
}
.ms-v2-root .tip-text strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 1.7cqw, 19px);
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-right: 0.6cqw;
}
.ms-v2-root .tip-ornament { flex: none; width: 5cqw; height: 9px; color: var(--gold-dim); opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .ms-v2-root .mic-btn, .ms-v2-root .mic-btn.recording, .ms-v2-root .mic-wrap.recording .mic-ring-deco, .ms-v2-root .mic-ring-deco,
  .ms-v2-root .mic-wrap::before, .ms-v2-root .mic-wrap::after { animation: none; }
  .ms-v2-root .mic-wrap::before, .ms-v2-root .mic-wrap::after { display: none; }
  .ms-v2-root .menu-card::before { transition: none; }
}

/* =====================================================================
   LIVE MODE (.ms-v2-live) — mounted over the real MetaSpeak engine.
   The engine's full-frame WebGPU canvas (.ms-canvas) sits BEHIND this
   chrome and provides the 3D scene + character as the backdrop, so the
   DOM backdrop layers go transparent. The gold glass PANELS, ornaments
   and frame stay (their own translucent fills compose over the scene).
   Toggled only when app.js mounts V2 with live={true} (?layout=v2).
   ===================================================================== */
.ms-v2-root.ms-v2-live .stage { background: transparent; z-index: 2; }
.ms-v2-root.ms-v2-live .kiosk { background: transparent; }

/* R37.9.75 — Lock LIVE V2 to a portrait 9:16 box (centered) with a black
   letterbox outside, so standalone on a landscape monitor matches the portrait
   preview AND a real portrait pylon. Backdrop + engine canvas are confined to
   the same centered box as the scaled chrome (.kiosk); on a portrait screen the
   box fills the viewport (no letterbox). app.js sizes the canvas pixels to the
   same box; here we only center + bound the layout box. */
.ms-v2-root.ms-v2-live { background: #05070d; }
.ms-v2-root.ms-v2-live .ms-v2-backdrop {
  inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100vw, 56.25vh); height: min(177.78vw, 100vh);
}
.ms-v2-root.ms-v2-live .ms-v2-engine {
  inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100vw, 56.25vh); height: min(177.78vw, 100vh);
}

/* Full-window navy/palace backdrop (z0). container-type:size so the palace
   line-art's cqw/cqh resolve against the whole window, not the portrait frame.
   Glow biased right (62%) to sit behind the character like the reference. */
.ms-v2-root .ms-v2-backdrop {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  container-type: size;
  background: radial-gradient(ellipse at 62% 42%, var(--bg-center) 0%, var(--bg-mid) 45%, var(--bg-deep) 100%);
}

/* The engine canvas: transparent (alpha) so only the character composites over
   the backdrop (z1). app.js renders the character-only scene into this. */
.ms-v2-root .ms-v2-engine {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 1; pointer-events: none; background: transparent;
}
.ms-v2-root.ms-v2-live .avatar-stage { pointer-events: none; }