.playpop-speed-dial { position: fixed; right: 25px; bottom: calc(25px + env(safe-area-inset-bottom)); z-index: 9999; font-family: var(--playpop-font-family-base); }
.playpop-speed-dial__trigger { position: relative; display: grid; place-items: center; inline-size: 3.75rem; block-size: 3.75rem; padding: 0; color: #fff; background: linear-gradient(135deg, var(--playpop-purple), var(--playpop-orange)); border: 0; border-radius: 50%; box-shadow: 0 0.8rem 2rem rgb(124 58 237 / 30%); font-size: 1.5rem; cursor: pointer; }
.playpop-speed-dial__trigger::before { position: absolute; inset: -0.4rem; border: 2px solid rgb(124 58 237 / 22%); border-radius: 50%; content: ""; animation: playpop-pulse 2s infinite; }
.playpop-speed-dial__menu { position: absolute; right: 0; bottom: calc(100% + var(--playpop-space-sm)); display: grid; gap: var(--playpop-space-sm); min-inline-size: 14rem; visibility: hidden; opacity: 0; transform: translateY(0.75rem); transition: 180ms ease; }
.playpop-speed-dial.is-open .playpop-speed-dial__menu { visibility: visible; opacity: 1; transform: none; }
.playpop-speed-dial__menu a, .playpop-speed-dial__menu button { display: flex; align-items: center; gap: var(--playpop-space-sm); min-block-size: 2.75rem; padding-inline: var(--playpop-space-md); color: var(--playpop-text); background: rgb(255 255 255 / 88%); border: 1px solid rgb(255 255 255 / 65%); border-radius: var(--playpop-radius-pill); box-shadow: var(--playpop-shadow-elevated); backdrop-filter: blur(14px); font: inherit; font-size: var(--playpop-font-size-small); font-weight: 700; text-decoration: none; cursor: pointer; }
.playpop-choice-modal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: var(--playpop-space-md); visibility: hidden; opacity: 0; transition: 180ms ease; }
.playpop-choice-modal.is-open { visibility: visible; opacity: 1; }
.playpop-choice-modal__backdrop { position: absolute; inset: 0; background: rgb(15 23 42 / 52%); border: 0; backdrop-filter: blur(5px); }
.playpop-choice-modal__dialog { position: relative; inline-size: min(100%, 34rem); max-block-size: min(85vh, 44rem); padding: var(--playpop-space-lg); overflow-y: auto; direction: rtl; background: linear-gradient(145deg, #fff, var(--playpop-purple-soft)); border: 1px solid rgb(255 255 255 / 75%); border-radius: 1.5rem; box-shadow: 0 1.5rem 4rem rgb(15 23 42 / 24%); font-family: var(--playpop-font-family-base); }
.playpop-choice-modal__dialog > header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--playpop-space-sm); padding-block-end: var(--playpop-space-md); border-block-end: 1px solid var(--playpop-border); }
.playpop-choice-modal__dialog h2, .playpop-choice-modal__dialog h3, .playpop-choice-modal__dialog p { margin-block: 0; }.playpop-choice-modal__dialog header p { color: var(--playpop-text-secondary); font-size: var(--playpop-font-size-small); }.playpop-choice-modal__dialog header button { inline-size: 2.25rem; block-size: 2.25rem; border: 0; border-radius: 50%; font-size: 1.4rem; cursor: pointer; }
.playpop-choice-modal__avatar { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; background: var(--playpop-yellow-soft); border-radius: 50%; font-size: 1.5rem; }.playpop-choice-step { padding-block-start: var(--playpop-space-lg); animation: playpop-message-in 220ms ease; }.playpop-choice-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--playpop-space-sm); margin-block-start: var(--playpop-space-md); }.playpop-choice-options button, .playpop-choice-restart { min-block-size: 3rem; padding: var(--playpop-space-sm); color: var(--playpop-purple); background: #fff; border: 1px solid rgb(124 58 237 / 18%); border-radius: 0.85rem; font: inherit; font-weight: 700; cursor: pointer; }
.playpop-choice-step__heading { display: flex; align-items: flex-start; gap: var(--playpop-space-sm); }
.playpop-choice-step__heading > div { flex: 1; min-inline-size: 0; }
.playpop-choice-step__heading p { margin-block-end: .25rem; color: var(--playpop-text-secondary); font-size: var(--playpop-font-size-caption); }
.playpop-choice-back { flex: 0 0 auto; min-block-size: 2.75rem; padding-inline: var(--playpop-space-md); color: var(--playpop-purple); background: #fff; border: 1px solid rgb(124 58 237 / 28%); border-radius: var(--playpop-radius-pill); font: inherit; font-weight: 700; cursor: pointer; }
.playpop-choice-options button.is-selected { color: #fff; background: var(--playpop-purple); border-color: var(--playpop-purple); box-shadow: 0 .35rem 1rem rgb(124 58 237 / 22%); }
.playpop-choice-options button:focus-visible, .playpop-choice-back:focus-visible, .playpop-choice-restart:focus-visible { outline: 3px solid rgb(124 58 237 / 35%); outline-offset: 2px; }
.playpop-choice-results__empty { padding: var(--playpop-space-md); color: var(--playpop-text); background: var(--playpop-yellow-soft); border: 1px solid rgb(245 158 11 / 24%); border-radius: .9rem; line-height: 1.9; }
[data-choice-results] { display: grid; gap: var(--playpop-space-sm); margin-block: var(--playpop-space-md); }[data-choice-results] article { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--playpop-space-sm); padding: var(--playpop-space-sm); background: #fff; border: 1px solid var(--playpop-border); border-radius: 1rem; }[data-choice-results] img { inline-size: 4.5rem; block-size: 4.5rem; border-radius: 0.75rem; object-fit: cover; }[data-choice-results] h4 { margin: 0; }[data-choice-results] a { color: var(--playpop-purple); font-weight: 700; }
body.playpop-modal-open { overflow: hidden; }@keyframes playpop-pulse { 70%,100% { opacity: 0; transform: scale(1.25); } }@keyframes playpop-message-in { from { opacity: 0; transform: translateY(0.5rem); } }
@media (max-width: 47.999rem) { .playpop-speed-dial { inset-block-end: calc(5rem + env(safe-area-inset-bottom)); }.playpop-choice-modal { align-items: end; padding: .75rem; }.playpop-choice-modal__dialog { max-block-size: calc(100dvh - 1.5rem); padding: var(--playpop-space-md); }.playpop-choice-options { grid-template-columns: 1fr; }.playpop-choice-step__heading { position: sticky; inset-block-start: calc(-1 * var(--playpop-space-md)); z-index: 2; padding-block: var(--playpop-space-sm); background: linear-gradient(145deg, #fff, var(--playpop-purple-soft)); }.playpop-choice-back { min-inline-size: 5.5rem; } }
@media (prefers-reduced-motion: reduce) { .playpop-speed-dial__trigger::before, .playpop-choice-step { animation: none; }.playpop-speed-dial__menu, .playpop-choice-modal { transition: none; } }