/* =========================================================
   ANGELINA — SMOOTH JAZZ SOLITAIRE VIRTUAL HOST
========================================================= */

.angelina-host {
  position: fixed;
  z-index: 45;

  left: clamp(-45px, -2.5vw, -25px);
  bottom: clamp(102px, 11vh, 138px);

  width: clamp(175px, 15vw, 265px);
  height: min(72vh, 720px);

  display: grid;
  align-items: end;
  justify-items: center;

  pointer-events: none;

  opacity: 0;
  visibility: hidden;

  transform:
    translate3d(-24px, 8px, 0)
    scale(.96);

  transition:
    opacity .35s ease,
    visibility .35s ease,
    transform .45s cubic-bezier(.22, 1, .36, 1);

  isolation: isolate;
}

/* Angelina appears only on the active Play screen. */
body[data-screen="play"] .angelina-host {
  opacity: 1;
  visibility: visible;

  transform:
    translate3d(0, 0, 0)
    scale(1);
}

.angelina-host-image {
  position: relative;
  z-index: 3;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center bottom;

  filter:
    drop-shadow(0 0 10px rgba(67, 234, 255, .54))
    drop-shadow(0 0 24px rgba(179, 73, 255, .38))
    drop-shadow(0 18px 24px rgba(0, 0, 0, .55));

  transform-origin: center bottom;

  animation:
    angelinaFloat 4.8s ease-in-out infinite,
    angelinaGlow 3.2s ease-in-out infinite;
}

.angelina-host-glow {
  position: absolute;
  z-index: 1;

  left: 50%;
  bottom: 3%;

  width: 82%;
  height: 72%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(62, 230, 255, .24) 0%,
      rgba(130, 88, 255, .15) 42%,
      rgba(237, 67, 255, .08) 62%,
      transparent 78%
    );

  filter: blur(20px);

  transform: translateX(-50%);

  animation:
    angelinaAura 3.5s ease-in-out infinite;
}

.angelina-host::after {
  content: "";

  position: absolute;
  z-index: 2;

  left: 50%;
  bottom: 1%;

  width: 74%;
  height: 18px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(62, 230, 255, .56),
      rgba(170, 68, 255, .25) 48%,
      transparent 74%
    );

  filter: blur(7px);

  transform: translateX(-50%);
}

.angelina-host-nameplate {
  position: absolute;
  z-index: 5;

  left: 50%;
  bottom: -4px;

  min-width: 128px;

  display: grid;
  gap: 1px;

  padding: 7px 14px;

  border:
    1px solid
    rgba(95, 235, 255, .68);

  border-radius: 999px;

  color: #fff;
  text-align: center;

  background:
    linear-gradient(
      135deg,
      rgba(5, 20, 48, .94),
      rgba(42, 10, 66, .94)
    );

  box-shadow:
    0 0 15px rgba(59, 225, 255, .33),
    0 0 25px rgba(191, 65, 255, .18),
    inset 0 1px 0 rgba(255, 255, 255, .08);

  transform: translateX(-50%);
}

.angelina-host-status {
  color: #72efff;

  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.angelina-host-nameplate strong {
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
}

@keyframes angelinaFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -9px, 0);
  }
}

@keyframes angelinaGlow {
  0%,
  100% {
    filter:
      drop-shadow(0 0 9px rgba(67, 234, 255, .46))
      drop-shadow(0 0 21px rgba(179, 73, 255, .3))
      drop-shadow(0 18px 24px rgba(0, 0, 0, .55));
  }

  50% {
    filter:
      drop-shadow(0 0 15px rgba(67, 234, 255, .7))
      drop-shadow(0 0 31px rgba(179, 73, 255, .48))
      drop-shadow(0 18px 24px rgba(0, 0, 0, .55));
  }
}

@keyframes angelinaAura {
  0%,
  100% {
    opacity: .58;
    transform:
      translateX(-50%)
      scale(.94);
  }

  50% {
    opacity: .94;
    transform:
      translateX(-50%)
      scale(1.06);
  }
}

/* Smaller laptops. */
@media screen and (max-width: 1180px) {
  .angelina-host {
    width: clamp(150px, 14vw, 205px);
    height: min(61vh, 590px);
  }
}

/* Keep her compact on tablets. */
@media screen and (max-width: 900px) {
  .angelina-host {
    left: -4px;
    bottom: 98px;

    width: 132px;
    height: 360px;

    opacity: .9;
  }

  .angelina-host-nameplate {
    min-width: 104px;
    padding: 5px 10px;
  }
}

/* Hide the full-body host on phones to protect the game board. */
@media screen and (max-width: 620px) {
  .angelina-host {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .angelina-host-image,
  .angelina-host-glow {
    animation: none !important;
  }
}

/* =========================================================
   ANGELINA — FINAL SUPREME DESKTOP ALIGNMENT
========================================================= */

@media screen and (min-width: 901px) {

  body[data-screen="play"] .angelina-host {
    left: clamp(-34px, -2vw, -18px) !important;
    bottom: 116px !important;

    width: clamp(150px, 11vw, 190px) !important;
    height: min(55vh, 535px) !important;

    align-items: end !important;
    justify-items: center !important;

    transform:
      translate3d(0, 0, 0)
      scale(1) !important;
  }

  body[data-screen="play"] .angelina-host-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center bottom !important;

    transform-origin: center bottom !important;
  }

  body[data-screen="play"] .angelina-host-nameplate {
    left: 50% !important;
    bottom: -24px !important;

    min-width: 116px !important;
    padding: 6px 12px !important;

    transform:
      translateX(-50%) !important;
  }

  body[data-screen="play"] .angelina-host-controls {
    left: 50% !important;
    bottom: -68px !important;

    min-width: 172px !important;

    transform:
      translateX(-50%) !important;
  }

  body[data-screen="play"] .angelina-speech-panel {
    left: calc(100% - 6px) !important;
    bottom: 132px !important;

    width: clamp(225px, 20vw, 315px) !important;
  }

  body[data-screen="play"] .angelina-host-glow {
    bottom: 5% !important;
    width: 88% !important;
    height: 70% !important;
  }

  body[data-screen="play"] .angelina-host::after {
    bottom: 2% !important;
    width: 78% !important;
  }
}

/* Medium desktop and laptop refinement. */
@media screen
  and (min-width: 901px)
  and (max-width: 1280px) {

  body[data-screen="play"] .angelina-host {
    left: -26px !important;
    bottom: 112px !important;

    width: 150px !important;
    height: 430px !important;
  }

  body[data-screen="play"] .angelina-speech-panel {
    width: 250px !important;
    bottom: 116px !important;
  }
}

/* =========================================================
   ANGELINA — CORRECTED FINAL DESKTOP POSITION
========================================================= */

@media screen and (min-width: 901px) {

  body[data-screen="play"] .angelina-host {
    left: -34px !important;
    bottom: 112px !important;
    width: 250px !important;
    height: auto !important;
    display: block !important;
    transform: none !important;
  }

  body[data-screen="play"] .angelina-host-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: initial !important;
    object-position: initial !important;
    transform-origin: center bottom !important;
  }

  body[data-screen="play"] .angelina-host-nameplate {
    left: 50% !important;
    bottom: -16px !important;
    min-width: 124px !important;
    padding: 6px 13px !important;
    transform: translateX(-50%) !important;
  }

  body[data-screen="play"] .angelina-host-controls {
    left: 50% !important;
    bottom: -58px !important;
    transform: translateX(-50%) !important;
  }

  body[data-screen="play"] .angelina-speech-panel {
    left: calc(100% - 26px) !important;
    bottom: 150px !important;
    width: 290px !important;
  }

  body[data-screen="play"] .angelina-host-glow {
    left: 50% !important;
    bottom: 8% !important;
    width: 78% !important;
    height: 72% !important;
    transform: translateX(-50%) !important;
  }

  body[data-screen="play"] .angelina-host::after {
    left: 50% !important;
    bottom: 3% !important;
    width: 68% !important;
    transform: translateX(-50%) !important;
  }
}

/* =========================================================
   ANGELINA — VOICE ONLY
   Keep spoken audio active, hide visible speech captions
========================================================= */

#angelinaSpeechPanel,
.angelina-speech-panel,
#angelinaCaption {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   ANGELINA — DESKTOP ONLY
   Hidden completely on phones, tablets and touch-only devices
========================================================= */

@media screen and (max-width: 900px),
       (hover: none) and (pointer: coarse) {

  #angelinaHost,
  .angelina-host,
  #angelinaSpeechPanel,
  .angelina-speech-panel,
  #angelinaCaption,
  .angelina-host-controls,
  .angelina-host-nameplate,
  .angelina-host-glow,
  .angelina-speaking-dot {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

html.angelina-mobile-disabled
#angelinaHost,
html.angelina-mobile-disabled
.angelina-host {
  display: none !important;
}