.hppn-activation-card {
    position: fixed;
    z-index: 70;
    right: max(12px, env(safe-area-inset-right));
    /* The selected-show card owns the bottom edge, including its Play button. */
    top: max(76px, calc(env(safe-area-inset-top) + 64px));
    width: min(390px, calc(100vw - 24px));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    color: #171717;
    background: #fff9ef;
    border: 2px solid #171717;
    border-radius: 18px;
    box-shadow: 4px 4px 0 #171717;
    font-family: "DM Sans", system-ui, sans-serif;
}

.hppn-activation-card[hidden] { display: none; }
.hppn-activation-copy { min-width: 0; display: grid; gap: 2px; flex: 1; }
.hppn-activation-copy small { font-size: 9px; font-weight: 800; letter-spacing: 1.5px; color: #666; }
.hppn-activation-copy strong { font-family: "Fraunces", Georgia, serif; font-size: 19px; line-height: 1.05; }
.hppn-activation-copy span { font-size: 11px; line-height: 1.3; color: #555; }
.hppn-activation-actions { display: grid; justify-items: center; gap: 5px; }
.hppn-activation-primary {
    min-height: 38px;
    padding: 0 13px;
    border: 2px solid #171717;
    border-radius: 999px;
    background: #f2ae8e;
    color: #171717;
    font: 800 10px/1 "DM Sans", system-ui, sans-serif;
    text-transform: uppercase;
    cursor: pointer;
}
.hppn-activation-later, .hppn-activation-close {
    border: 0;
    background: transparent;
    color: #666;
    font: 700 10px/1.2 "DM Sans", system-ui, sans-serif;
    cursor: pointer;
}
.hppn-activation-close { align-self: flex-start; font-size: 20px; padding: 0; }
.hppn-activation-icon { font-size: 22px; color: #4a7a8e; }

@media (max-width: 640px) {
    .hppn-activation-card {
        left: 12px;
        right: 12px;
        width: auto;
        top: max(70px, calc(env(safe-area-inset-top) + 58px));
    }
    .hppn-activation-copy strong { font-size: 17px; }
}

@media (prefers-reduced-motion: no-preference) {
    .hppn-activation-card { animation: hppn-activation-in 220ms ease-out; }
    @keyframes hppn-activation-in { from { opacity: 0; transform: translateY(12px); } }
}