/* ═══════════════════════════════════════════════════════════
   EXPERIÊNCIA "QUERO DECOLAR" — viagem cinematográfica direta
   1 Entrada rápida na nave
   2 Cabine de comando futurista + contagem + ignição
   3 Subida acelerada para a Lua
   4 Pouso realista no Planeta PROMAKEART (Bandeira + WhatsApp)
════════════════════════════════════════════════════════════ */
.pml {
  --pml-or: #ff3b1f; --pml-or2: #ff8400; --pml-pu: #7b2ff7; --pml-pu2: #b58fff;
  --pml-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  position: fixed; inset: 0; z-index: 100000; overflow: hidden;
  background: #05030c; color: #fff;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  opacity: 0; transition: opacity .4s ease;
  -webkit-font-smoothing: antialiased;
}
.pml[hidden] { display: none; }
.pml.is-open { opacity: 1; }
.pml *, .pml *::before, .pml *::after { box-sizing: border-box; }

/* Fundo Hiperespaço WebGL Upward Academy (Warp) */
.upw-bg-warp, .pml-bg-warp {
  --upw-base: #020205; --upw-veil: .45;
  --upw-neb-1: rgba(96, 165, 250, .18); --upw-neb-2: rgba(139, 92, 246, .24); --upw-neb-3: rgba(244, 114, 182, .16);
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  background: radial-gradient(55% 45% at 50% 50%, var(--upw-neb-2), #0000 70%),
    radial-gradient(60% 55% at 6% 0, var(--upw-neb-1), #0000 70%),
    radial-gradient(60% 55% at 96% 100%, var(--upw-neb-3), #0000 70%),
    var(--upw-base);
}
.upw-bg-warp__stars, .pml-bg-warp__stars {
  position: absolute; inset: -40%; transform: rotate(-28deg);
  background: radial-gradient(1.6px 1.6px at 23% 31%, #fff 50%, #0000), radial-gradient(1.2px 1.2px at 71% 64%, #c7d8ff 50%, #0000),
    radial-gradient(1px 1px at 41% 83%, #fff 50%, #0000), radial-gradient(1.4px 1.4px at 87% 19%, #e9d5ff 50%, #0000),
    radial-gradient(2px 2px at 58% 12%, #fff 50%, #0000), radial-gradient(1.2px 1.2px at 33% 47%, #fbcfe8 50%, #0000),
    radial-gradient(1px 1px at 12% 66%, #dbeafe 50%, #0000), radial-gradient(1.4px 1.4px at 66% 38%, #fff 50%, #0000),
    radial-gradient(2.4px 2.4px at 81% 77%, #ddd6fe 50%, #0000);
  background-size: 397px 283px, 271px 331px, 523px 419px, 349px 461px, 457px 373px, 229px 257px, 167px 193px, 311px 239px, 613px 487px;
  transition: opacity .5s ease;
}
.upw-bg-warp[data-upw-live] .upw-bg-warp__stars,
.pml-bg-warp[data-upw-live] .pml-bg-warp__stars { opacity: 0; }
.upw-bg-warp__glow, .pml-bg-warp__glow {
  position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; pointer-events: none; filter: blur(20px);
}
.upw-bg-warp canvas, .pml-bg-warp canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.upw-bg-warp::after, .pml-bg-warp::after {
  content: ''; position: absolute; inset: 0; opacity: var(--upw-veil); pointer-events: none;
  background: radial-gradient(46% 36% at 50% 50%, var(--upw-base), #0000);
}

.pml-scene {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s;
}
.pml-scene.is-on { opacity: 1; visibility: visible; transition: opacity .45s ease; }

/* vinheta de profundidade */
.pml-vig {
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 50%, rgba(0, 0, 0, .6) 100%);
}

.pml-flash { position: absolute; inset: 0; z-index: 40; background: #fff; opacity: 0; pointer-events: none; }
.pml.is-flash .pml-flash { animation: pml-flash .7s ease-in-out; }
@keyframes pml-flash { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }

/* legenda + controles */
.pml-cap {
  position: absolute; left: 50%; bottom: max(5vh, 24px); z-index: 45; margin: 0;
  transform: translateX(-50%); max-width: calc(100% - 32px); text-align: center;
  font: 600 11.5px/1.3 var(--pml-mono); letter-spacing: .2em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap;
  background: rgba(10, 6, 20, .6); border: 1px solid rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity .35s ease;
}
.pml-cap:empty { opacity: 0; }

/* Barra de controles superiores: Som + Pular + Fechar */
.pml-controls {
  position: absolute; top: max(2.4vh, 14px); right: max(2.4vw, 14px); z-index: 60;
  display: flex; align-items: center; gap: 10px;
}
.pml-vol, .pml-skip, .pml-close {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(10, 6, 20, .6);
  color: #fff; cursor: pointer; font: 600 11.5px/1 var(--pml-mono); letter-spacing: .12em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  user-select: none; -webkit-user-select: none;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pml-vol {
  padding: 0 14px;
}
.pml-vol-icon { font-size: 15px; line-height: 1; display: inline-block; transition: transform .2s ease; }
.pml-vol:hover .pml-vol-icon { transform: scale(1.15); }
.pml-vol.is-muted {
  border-color: rgba(255, 100, 100, .4);
  background: rgba(40, 10, 15, .6);
  color: #ff9999;
}
.pml-vol:hover, .pml-skip:hover, .pml-close:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .55);
  transform: translateY(-1px);
}
.pml-close { display: none; width: 40px; padding: 0; font-size: 20px; letter-spacing: 0; }
.pml.is-final .pml-close { display: inline-flex; }
.pml.is-final .pml-skip { display: none; }
.pml-vol:focus-visible, .pml-skip:focus-visible, .pml-close:focus-visible, .pml-wa:focus-visible, .pml-back:focus-visible { outline: 2.5px solid #fff; outline-offset: 3px; }

/* ═════════ CENA 1 · Entrada rápida na nave ═════════ */
.pml-s-launch {
  background: linear-gradient(rgba(5, 3, 12, 0) 0%, rgba(22, 11, 46, .55) 36%, #3a1a5c 56%, #c2416b 60.5%, #ff7a3d 62%, #1a0f2c 62.1%, #0b0616 100%);
}
.pml-s-launch-cam { position: absolute; inset: -3%; }
.pml-s-launch.is-on .pml-s-launch-cam { animation: pml-step-cam 1.8s ease-in-out both; }
@keyframes pml-step-cam {
  0% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.08) translateY(-1.5%); }
  100% { transform: scale(1.15) translateY(-2%); }
}
.pml-launch-moon {
  position: absolute; right: 16%; top: 14%; width: 9vmin; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffdf5, #d9d4c7 50%, #8f8a80);
  box-shadow: 0 0 40px rgba(255, 250, 230, .45);
}
.pml-launch-ground {
  position: absolute; left: 0; right: 0; top: 62%; bottom: 0; overflow: hidden;
  perspective: 240px; perspective-origin: 50% 0%;
}
.pml-launch-grid {
  position: absolute; left: -150%; right: -150%; top: 0; height: 400%;
  transform-origin: 50% 0; transform: rotateX(78deg);
  background:
    repeating-linear-gradient(90deg, rgba(181, 143, 255, .45) 0 2px, transparent 2px 70px),
    repeating-linear-gradient(0deg, rgba(255, 120, 60, .35) 0 2px, transparent 2px 70px);
}
.pml-s-launch.is-on .pml-launch-grid { animation: pml-grid 1.8s linear both; }
@keyframes pml-grid { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 280px; } }
.pml-launch-ground::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(26, 15, 44, .95), rgba(26, 15, 44, 0) 45%);
}
.pml-ship-enter {
  position: absolute; left: 50%; top: 62%; width: clamp(120px, 19vmin, 200px); aspect-ratio: 60 / 110;
  translate: -50% -73%; transform-origin: 50% 48%; transform: scale(.5);
}
.pml-ship-enter svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 0 25px rgba(255, 90, 40, .5)); }
.pml-s-launch.is-on .pml-ship-enter { animation: pml-enter-zoom 2s cubic-bezier(.5, 0, .8, .3) both; }
@keyframes pml-enter-zoom {
  0% { transform: scale(.5); }
  60% { transform: scale(1.6); }
  100% { transform: scale(18); }
}
.pml-hatch { fill: #2a0f66; transition: fill .3s; }
.pml-s-launch.is-on .pml-hatch { animation: pml-hatch-light 1.8s linear both; }
@keyframes pml-hatch-light { 0%, 45% { fill: #2a0f66; } 65%, 100% { fill: #fff6c8; } }

/* ═════════ CENA 2 · Cabine de comando + Contagem ═════════ */
.pml-cock { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pml-s-cockpit.is-on .pml-cock { animation: pml-rumble .2s linear infinite; }
.pml.is-warp .pml-s-cockpit { animation: pml-shake .07s linear infinite; }
@keyframes pml-rumble { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(.8px, -.8px); } }
@keyframes pml-shake {
  0% { transform: translate(0, 0); } 25% { transform: translate(-5px, 4px); }
  50% { transform: translate(4px, -4px); } 75% { transform: translate(-3px, -2px); } 100% { transform: translate(0, 0); }
}
.pml-led { animation: pml-led 1s ease-in-out infinite alternate; }
.pml-led:nth-of-type(2n) { animation-delay: .3s; animation-duration: .75s; }
.pml-led:nth-of-type(3n) { animation-delay: .55s; animation-duration: 1.3s; }
@keyframes pml-led { from { opacity: .25; } to { opacity: 1; } }
.pml-radar { transform-origin: 800px 330px; animation: pml-spin 2.6s linear infinite; }
@keyframes pml-spin { to { transform: rotate(360deg); } }
.pml-warpglow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(ellipse 45% 40% at 50% 38%, rgba(140, 200, 255, .6), rgba(123, 47, 247, .3) 45%, transparent 75%);
}
.pml.is-warp .pml-warpglow { opacity: 1; }
.pml-hud {
  position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); text-align: center; pointer-events: none;
}
.pml-hud small {
  display: block; margin-bottom: 12px; font: 600 11px/1 var(--pml-mono); letter-spacing: .3em; text-transform: uppercase;
  color: #9fe7ff; text-shadow: 0 0 12px rgba(0, 210, 255, .9);
}
.pml-count {
  display: block; font: 900 clamp(68px, 15vmin, 160px)/1 Inter, system-ui, sans-serif; letter-spacing: -.04em;
  color: #fff; text-shadow: 0 0 26px rgba(0, 210, 255, .95), 0 0 65px rgba(123, 47, 247, .75);
}
.pml-count.is-word { font-size: clamp(40px, 9.5vmin, 100px); color: #ffd36b; text-shadow: 0 0 26px rgba(255, 132, 0, .95), 0 0 65px rgba(255, 59, 31, .8); }
.pml-count.is-pop { animation: pml-pop .55s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pml-pop { 0% { opacity: 0; transform: scale(1.8); filter: blur(8px); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } }

/* ═════════ CENA 3 · Subindo acelerado para a Lua ═════════ */
.pml-s-sky { background: linear-gradient(rgba(5, 3, 12, 0) 40%, rgba(20, 40, 110, .35) 100%); }
.pml-earth {
  position: absolute; left: 50%; top: calc(100% - 24vmax); width: 240vmax; height: 240vmax; margin-left: -120vmax;
  border-radius: 50%;
  background: url('earth.jpg') center 18% / 125% 125% no-repeat;
  box-shadow:
    0 0 140px 35px rgba(56, 189, 248, .75),
    0 0 50px 14px rgba(186, 230, 253, .85),
    inset 0 25px 60px rgba(186, 230, 253, .8);
  overflow: hidden;
}
.pml-s-sky.is-on .pml-earth { animation: pml-earth 2.8s ease-in both; }
@keyframes pml-earth { to { transform: translateY(45vh) scale(.92); } }
.pml-moon {
  position: absolute; left: 50%; top: 16%; width: 28vmin; aspect-ratio: 1; margin-left: -14vmin; margin-top: -14vmin;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 95px 20px rgba(255, 250, 235, .55);
  transform: scale(.45);
}
.pml-moon-real-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 35px rgba(255, 250, 235, .6));
}
.pml-s-sky.is-on .pml-moon { animation: pml-moon 2.8s cubic-bezier(.6, 0, .9, .45) both; }
@keyframes pml-moon {
  0% { transform: translateY(0) scale(.45); }
  70% { transform: translateY(8vh) scale(1.4); }
  100% { transform: translateY(32vh) scale(9); }
}
.pml-rk {
  position: absolute; left: 50%; bottom: 0;
  width: clamp(80px, 12vmin, 130px);
  height: clamp(128px, 19.2vmin, 208px);
  margin-left: calc(clamp(80px, 12vmin, 130px) / -2);
  transform: translateY(30vh);
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 0 24px rgba(255, 90, 40, .85)) drop-shadow(0 0 50px rgba(255, 140, 0, .45));
}
.pml-rk svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.pml-fl {
  transform-origin: 50% 0;
  transform-box: fill-box;
  animation: pml-flick .07s ease-in-out infinite alternate;
}
.pml-fl-core {
  transform-origin: 50% 0;
  transform-box: fill-box;
  animation: pml-flick .05s ease-in-out infinite alternate;
}
@keyframes pml-flick {
  from { transform: scaleY(.88) scaleX(.96); }
  to { transform: scaleY(1.18) scaleX(1.04); }
}
.pml-rk::after {
  content: ''; position: absolute; left: 50%; top: 82%; width: 36%; height: 75vh; transform: translateX(-50%);
  background: linear-gradient(rgba(255, 220, 160, .95), rgba(255, 90, 40, .6) 20%, rgba(123, 47, 247, .25) 55%, transparent);
  filter: blur(8px); border-radius: 50%;
  pointer-events: none;
}
.pml-s-sky.is-on .pml-rk { animation: pml-rise 2.8s cubic-bezier(.35, 0, .55, 1) both; }
@keyframes pml-rise {
  0% { transform: translateY(30vh) rotate(0); }
  35% { transform: translateY(-8vh) rotate(-2.5deg); }
  65% { transform: translateY(-30vh) rotate(2.5deg) scale(.85); }
  100% { transform: translateY(-62vh) rotate(0) scale(.38); }
}

/* ═════════ CENA 4 · Planeta PROMAKEART (Bandeira Realista + WhatsApp) ═════════ */
.pml-s-final { background: transparent; }
.pml-s-final .upw-bg-warp { position: absolute; inset: 0; z-index: 1; }
.pml-earthmini {
  position: absolute; right: 8%; top: 10%; width: clamp(96px, 13vmin, 150px); aspect-ratio: 1; border-radius: 50%; z-index: 2;
  background: url('earth.jpg') center center / 126% 126% no-repeat;
  background: image-set(url('earth.webp') type('image/webp'), url('earth.jpg') type('image/jpeg')) center center / 126% 126% no-repeat;
  box-shadow:
    0 0 38px 10px rgba(56, 189, 248, .85),
    0 0 85px 22px rgba(14, 165, 233, .45),
    inset -14px -14px 28px rgba(0, 0, 0, .88);
  overflow: hidden;
}
.pml-earthmini::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 4px 4px 14px rgba(224, 242, 254, .65), inset -12px -12px 24px rgba(0, 0, 0, .85);
  pointer-events: none;
}
.pml-surface {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(160px, 21vh, 210px);
  z-index: 3;
  background: #07090e url('moon_surface.jpg') center 37% / cover no-repeat;
  background: #07090e image-set(url('moon_surface.webp') type('image/webp'), url('moon_surface.jpg') type('image/jpeg')) center 37% / cover no-repeat;
  box-shadow: 0 -12px 35px rgba(0, 0, 0, .85);
  overflow: hidden;
}
.pml-surface::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, .35) 25%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, .35) 75%, transparent 95%);
  box-shadow: 0 0 12px 2px rgba(255, 255, 255, .4);
}
.pml-s-final.is-on .pml-surface { animation: pml-land 1.3s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes pml-land { from { transform: translateY(30vh); } to { transform: none; } }

/* ── BANDEIRA LUNAR ULTRA REALISTA (TECIDO + MASTRO METÁLICO) ── */
.pml-flag {
  position: absolute;
  left: max(4vw, 16px);
  bottom: clamp(35px, 6vh, 65px);
  width: clamp(140px, 16vw, 240px);
  max-width: 250px;
  height: auto;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.75));
}
.pml-flag-canvas {
  width: 100%;
  height: auto;
  display: block;
}
.pml-s-final.is-on .pml-flag {
  animation: pml-plant .9s .25s cubic-bezier(.3, 1.35, .5, 1) both;
}
@keyframes pml-plant {
  from { opacity: 0; transform: translateY(-70px) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}

/* ── CONTEÚDO FINAL / TÍTULO COM EFEITO MOVIMENTANDO SOBRE AS LETRAS ── */
.pml-final {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  width: min(880px, calc(100% - 40px)); text-align: center;
  z-index: 5;
}
.pml-final > * { opacity: 0; }
.pml-s-final.is-on .pml-final > * { animation: pml-up .8s cubic-bezier(.2, .8, .2, 1) both; }
.pml-s-final.is-on .pml-final > :nth-child(1) { animation-delay: .35s; }
.pml-s-final.is-on .pml-final > :nth-child(2) { animation-delay: .5s; }
.pml-s-final.is-on .pml-final > :nth-child(3) { animation-delay: .7s; }
.pml-s-final.is-on .pml-final > :nth-child(4) { animation-delay: .85s; }
.pml-s-final.is-on .pml-final > :nth-child(5) { animation-delay: 1.0s; }
@keyframes pml-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.pml-kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  font: 600 11px/1 var(--pml-mono); letter-spacing: .22em; text-transform: uppercase; color: #ffd36b;
  background: rgba(255, 132, 0, .1); border: 1px solid rgba(255, 180, 60, .35);
}

.pml-final-title {
  margin: 18px 0 14px;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.pml-title-lead {
  display: block;
  font-size: clamp(24px, 4.4vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  background: linear-gradient(90deg, #ffffff 0%, #e0e7ff 35%, #ffffff 55%, #c7d2fe 80%, #ffffff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pml-lead-sweep 4.5s linear infinite;
  margin-bottom: 6px;
}
@keyframes pml-lead-sweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

.pml-title-brand {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font: 900 clamp(38px, 7.5vw, 84px)/1 Inter, system-ui, sans-serif;
  letter-spacing: -.03em;
  user-select: none;
}
.pml-brand-char {
  display: inline-block;
  background: linear-gradient(90deg,
    #ff7607 0%,
    #ff5f0e 12%,
    #ff471b 25%,
    #f93845 38%,
    #e22bd1 52%,
    #c62ce1 68%,
    #a52deb 82%,
    #762df5 94%,
    #ff7607 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pml-char-sweep 3.2s linear infinite, pml-char-float 2.8s ease-in-out infinite alternate;
  animation-delay: calc(var(--ci, 0) * 0.1s);
  filter: drop-shadow(0 0 16px rgba(226, 43, 209, .4));
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), filter .25s ease;
  will-change: transform;
  cursor: default;
}
.pml-brand-char:hover {
  transform: translateY(-8px) scale(1.15) rotate(3deg);
  filter: drop-shadow(0 0 28px rgba(255, 118, 7, .85));
}
@keyframes pml-char-sweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 260% 50%; }
}
@keyframes pml-char-float {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

.pml-final p { margin: 0 auto; max-width: 34em; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; color: rgba(255, 255, 255, .78); }

/* ── CARD ATENDENTE JOSI (WHATSAPP) ── */
.pml-attendant {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 20px auto 0;
  padding: 8px 22px 8px 10px;
  background: rgba(18, 22, 34, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-align: left;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pml-attendant:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 211, 102, 0.5);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(37, 211, 102, 0.25);
}
.pml-attendant-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
}
.pml-attendant-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 14px rgba(37, 211, 102, 0.35);
}
.pml-attendant-dot {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 13px;
  height: 13px;
  background: #25d366;
  border: 2.5px solid #0b0e17;
  border-radius: 50%;
  box-shadow: 0 0 8px #25d366;
  animation: pml-dot-pulse 2s infinite ease-in-out;
}
@keyframes pml-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: .85; box-shadow: 0 0 14px #25d366; }
}
.pml-attendant-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pml-attendant-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pml-attendant-badge {
  font: 700 9px/1 var(--pml-mono, 'Space Mono', monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffd36b;
  background: rgba(255, 180, 60, 0.12);
  padding: 3px 7px;
  border-radius: 4px;
}
.pml-attendant-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 11px/1 var(--pml-mono, 'Space Mono', monospace);
  color: #25d366;
  letter-spacing: .04em;
}
.pml-live-dot {
  width: 6px;
  height: 6px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 0 6px #25d366;
  display: inline-block;
}
.pml-attendant-name {
  font: 800 clamp(11.5px, 1.2vw, 13.5px)/1.25 Inter, system-ui, sans-serif;
  letter-spacing: .02em;
  color: #ffffff;
  text-transform: uppercase;
}

.pml-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: 18px; }
.pml-wa {
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 28px 0 22px;
  border-radius: 999px; background: #25d366; color: #062b14; text-decoration: none;
  font: 800 17px/1 Inter, system-ui, sans-serif; letter-spacing: -.01em;
  box-shadow: 0 14px 40px rgba(37, 211, 102, .45);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.pml-wa::before {
  content: ''; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(37, 211, 102, .6);
  animation: pml-ping 1.8s ease-out infinite; pointer-events: none;
}
@keyframes pml-ping { 0% { opacity: .9; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.18); } }
.pml-wa:hover { transform: translateY(-2px); background: #2ee374; box-shadow: 0 18px 50px rgba(37, 211, 102, .6); }
.pml-wa svg { width: 26px; height: 26px; flex: none; }
.pml-back {
  min-height: 60px; padding: 0 24px; border-radius: 999px; cursor: pointer;
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .3);
  font: 700 15px/1 Inter, system-ui, sans-serif;
  transition: background-color .2s ease, border-color .2s ease;
}
.pml-back:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }

@media (max-width: 599px) {
  .pml-cap { font-size: 10px; letter-spacing: .14em; padding: 9px 14px; white-space: normal; }
  .pml-final { top: 35%; }
  .pml-surface { height: clamp(140px, 18vh, 180px); }
  .pml-flag { bottom: clamp(38px, 6.5vh, 65px); left: 2vw; width: clamp(95px, 24vw, 130px); }
  .pml-attendant { border-radius: 18px; padding: 8px 14px; gap: 10px; max-width: 100%; }
  .pml-attendant-avatar-wrap { width: 42px; height: 42px; }
  .pml-attendant-name { font-size: 11px; line-height: 1.3; }
  .pml-wa, .pml-back { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pml *, .pml *::before, .pml *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}