/* =========================================================
   盲盒信 · 时空漂流瓶 — 前台样式（漂流写信版）
   ========================================================= */

/* ---------- 基础变量（统一作用域） ---------- */
.bbx-shell,
.bbx-alert {
    --bbx-paper:      #fffdf8;
    --bbx-paper-soft: #fdfbf6;
    --bbx-ink:        #3e3247;
    --bbx-ink-2:      #6b5f76;
    --bbx-ink-3:      #a99fb2;
    --bbx-line:       #ede2d0;
    --bbx-amber:      #d18b5a;
    --bbx-amber-soft: #ffe9d3;
    --bbx-sunset-1:   #f5b78a;
    --bbx-sunset-2:   #ec8a63;
}

.bbx-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 0 48px;
    color: var(--bbx-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

/* ---------- 卡片 ---------- */
.bbx-card {
    position: relative;
    background: var(--bbx-paper);
    border-radius: 22px;
    box-shadow:
        0 24px 60px -28px rgba(140, 100, 60, .22),
        0 6px 20px -8px  rgba(140, 100, 60, .08),
        inset 0 0 0 1px rgba(237, 226, 208, .6);
    overflow: hidden;
}

/* 顶部黄昏光晕 */
.bbx-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 170px;
    background: linear-gradient(180deg, #fff1e0 0%, rgba(255, 241, 224, 0) 100%);
    pointer-events: none;
}

/* 安静闪烁的星星 */
.bbx-stars {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 170px;
    pointer-events: none;
    overflow: hidden;
}
.bbx-stars span {
    position: absolute;
    width: 3px; height: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px 1px rgba(255, 220, 180, .9);
    opacity: .7;
    animation: bbx-twinkle 4s ease-in-out infinite;
}
.bbx-stars span:nth-child(1) { top: 28px; left: 18%; animation-delay: 0s;   }
.bbx-stars span:nth-child(2) { top: 52px; left: 82%; animation-delay: 1.2s; width: 2px; height: 2px; }
.bbx-stars span:nth-child(3) { top: 78px; left: 34%; animation-delay: 2.1s; width: 4px; height: 4px; }
.bbx-stars span:nth-child(4) { top: 34px; left: 62%; animation-delay: .6s;  width: 2px; height: 2px; }
.bbx-stars span:nth-child(5) { top: 96px; left: 8%;  animation-delay: 1.8s; }
.bbx-stars span:nth-child(6) { top: 66px; left: 92%; animation-delay: 2.6s; width: 2px; height: 2px; }

@keyframes bbx-twinkle {
    0%, 100% { opacity: .25; transform: scale(.9); }
    50%      { opacity: 1;   transform: scale(1.3); }
}

/* ---------- 卡片头部 ---------- */
.bbx-card-head {
    position: relative;
    padding: 52px 40px 16px;
    text-align: center;
    z-index: 1;
}
.bbx-card-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bbx-amber);
    background: linear-gradient(135deg, #fff6e8, #ffe1c4);
    border-radius: 22px;
    box-shadow:
        0 10px 28px -14px rgba(209, 139, 90, .45),
        inset 0 0 0 1px rgba(237, 210, 180, .55);
}
.bbx-card-title {
    margin: 0 0 12px;
    font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--bbx-ink);
    line-height: 1.3;
}
.bbx-card-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    color: var(--bbx-ink-2);
    letter-spacing: .5px;
}

/* ---------- 表单通用 ---------- */
.bbx-form {
    position: relative;
    z-index: 1;
    padding: 24px 40px 44px;
    margin: 0;
}

.bbx-field { margin: 0 0 26px; }

.bbx-form label,
.bbx-field label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--bbx-ink);
}
.bbx-req { color: #d97a5b; margin-left: 2px; }

.bbx-form input[type="text"],
.bbx-form input[type="email"],
.bbx-form input[type="url"],
.bbx-form input[type="number"],
.bbx-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--bbx-ink);
    background: var(--bbx-paper-soft);
    border: 1.5px solid var(--bbx-line);
    border-radius: 12px;
    font-family: inherit;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.bbx-form input::placeholder,
.bbx-form textarea::placeholder {
    color: #c4b9cb;
}
.bbx-form input:focus,
.bbx-form select:focus {
    outline: none;
    background: #fff;
    border-color: var(--bbx-sunset-1);
    box-shadow: 0 0 0 4px rgba(245, 183, 138, .18);
}

/* ---------- 信纸横线 textarea ---------- */
.bbx-form textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 260px;
    resize: vertical;
    line-height: 32px;
    padding: 10px 20px;
    font-size: 15px;
    color: var(--bbx-ink);
    font-family: inherit;
    border: 1.5px solid var(--bbx-line);
    border-radius: 12px;
    background-color: var(--bbx-paper-soft);
    background-image: linear-gradient(
        to bottom,
        transparent 31px,
        rgba(214, 190, 160, .3) 31px,
        rgba(214, 190, 160, .3) 32px
    );
    background-size: 100% 32px;
    background-position: 0 10px;
    background-attachment: local;
    background-repeat: repeat-y;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.bbx-form textarea:focus {
    outline: none;
    background-color: #fff;
    border-color: var(--bbx-sunset-1);
    box-shadow: 0 0 0 4px rgba(245, 183, 138, .18);
}

/* ---------- 邮箱验证码行 ---------- */
.bbx-code-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}
.bbx-code-row .bbx-code-input {
    flex: 1 1 200px;
    min-width: 140px !important;
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: 6px;
    text-align: center;
    font-size: 17px !important;
    font-weight: 600;
}
.bbx-code-row .bbx-send-code {
    flex: 0 0 auto;
    padding: 0 22px;
    background: #fff5e6;
    color: var(--bbx-amber);
    border: 1.5px solid #f0d7b8;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.bbx-code-row .bbx-send-code:hover:not(:disabled) {
    background: #ffe9d0;
    box-shadow: 0 3px 12px -4px rgba(209, 139, 90, .4);
}
.bbx-code-row .bbx-send-code:active:not(:disabled) {
    transform: translateY(1px);
}
.bbx-code-row .bbx-send-code:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.bbx-note-inline {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--bbx-ink-3);
    letter-spacing: .2px;
}

/* ---------- 说明提示 ---------- */
.bbx-form .bbx-note {
    margin: 4px 0 26px;
    padding: 16px 20px;
    background: rgba(255, 241, 224, .5);
    border: 1px dashed rgba(232, 200, 160, .8);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--bbx-ink-2);
    letter-spacing: .2px;
}

/* ---------- 按钮 ---------- */
.bbx-actions {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}
.bbx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 48px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--bbx-sunset-1) 0%, var(--bbx-sunset-2) 100%);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    text-decoration: none;
    box-shadow:
        0 14px 28px -12px rgba(236, 138, 99, .5),
        0 3px 8px -2px   rgba(236, 138, 99, .25);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.bbx-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 34px -12px rgba(236, 138, 99, .6),
        0 4px 10px -2px   rgba(236, 138, 99, .3);
    filter: brightness(1.03);
}
.bbx-btn:active {
    transform: translateY(0);
    box-shadow:
        0 10px 20px -10px rgba(236, 138, 99, .5),
        0 2px 6px -2px   rgba(236, 138, 99, .2);
}

/* ---------- 提示条 ---------- */
.bbx-alert {
    max-width: 720px;
    margin: 0 auto 22px;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .2px;
    box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .1);
}
.bbx-success {
    background: #eefbf3;
    color: #157347;
    border-left: 4px solid #2fb37a;
}
.bbx-error {
    background: #fdecea;
    color: #b3261e;
    border-left: 4px solid #e0453a;
}
.bbx-code {
    display: inline-block;
    padding: 2px 10px;
    margin: 2px 0;
    background: #ffeee0;
    color: #b3662a;
    border-radius: 6px;
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: 1.5px;
    font-size: 14px;
}

/* =========================================================
   信件预览、进度、流程提示
   ========================================================= */

.bbx-letter {
    position: relative;
    margin: 0 0 22px;
    padding: 28px 32px;
    background: #fffaef;
    border: 1px solid #f0e0c8;
    border-left: 4px solid var(--bbx-amber);
    border-radius: 16px;
    box-shadow:
        0 8px 30px -20px rgba(140, 100, 60, .4),
        inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.bbx-letter h3 {
    margin: 0 0 18px;
    font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--bbx-ink);
}
.bbx-letter-body {
    font-size: 15px;
    line-height: 1.95;
    color: #4a3f52;
    word-break: break-word;
}
.bbx-letter-meta {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed #ecdcbf;
    font-size: 12px;
    color: var(--bbx-ink-3);
    letter-spacing: .3px;
}

.bbx-progress {
    margin: 0 0 22px;
    padding: 26px 30px;
    background: #fffaf0;
    border: 1px solid #f0e0c8;
    border-radius: 16px;
}
.bbx-progress h3 {
    margin: 0 0 14px;
    font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
    letter-spacing: 1.5px;
    color: var(--bbx-ink);
}
.bbx-progress .bbx-status { font-size: 16px; margin: 10px 0; }
.bbx-progress .bbx-meta   { font-size: 13px; color: var(--bbx-ink-3); margin: 6px 0; }

.bbx-reply-box {
    margin-top: 20px;
    padding: 18px 22px;
    background: #fff;
    border: 1px dashed #e8c9a0;
    border-radius: 12px;
}
.bbx-reply-box h4 {
    margin: 0 0 12px;
    font-size: 15px;
    color: #b3662a;
    letter-spacing: 1px;
}

/* 流程提示 */
.bbx-flow-hint {
    margin: 0 0 22px;
    padding: 14px 18px;
    background: #fff5e6;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--bbx-ink-2);
    letter-spacing: .3px;
}
.bbx-flow-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--bbx-sunset-2);
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.bbx-flow-arrow { color: #e8c9a0; margin: 0 4px; }

/* 截止倒计时 */
.bbx-deadline-hint {
    margin: 0 0 18px;
    padding: 13px 18px;
    background: #fff3e3;
    border-left: 3px solid var(--bbx-sunset-2);
    border-radius: 8px;
    font-size: 14px;
    color: #8a4a1e;
    letter-spacing: .2px;
}

/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 640px) {
    .bbx-shell { padding: 10px 0 32px; }
    .bbx-card { border-radius: 18px; }
    .bbx-card-head { padding: 38px 24px 12px; }
    .bbx-card-title { font-size: 22px; letter-spacing: 3px; }
    .bbx-card-sub { font-size: 13px; }
    .bbx-form { padding: 20px 24px 32px; }
    .bbx-letter,
    .bbx-progress,
    .bbx-reply-box { padding: 22px 22px; }
    .bbx-btn { width: 100%; padding: 15px 24px; letter-spacing: 1.5px; }
    .bbx-code-row { flex-direction: column; }
    .bbx-code-row .bbx-send-code { width: 100%; padding: 12px; }
    .bbx-flow-hint { font-size: 12px; }
}

/* ============ 图形验证码 ============ */
.bbx-cap-wrapper { margin-bottom: 4px; }

.bbx-cap-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fffaf2;
    border: 1.5px solid #f0e0c8;
    border-radius: 12px;
    flex-wrap: wrap;
}
.bbx-cap-visual {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-height: 28px;
}
.bbx-captcha-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    flex-shrink: 0;
}
.bbx-cap-op {
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 18px;
    font-weight: 700;
    color: #a99fb2;
    margin: 0 4px;
}
.bbx-cap-input {
    width: 60px !important;
    padding: 8px 10px !important;
    text-align: center;
    font-size: 18px !important;
    font-weight: 700;
    border-radius: 8px !important;
    border: 1.5px solid #f0e0c8 !important;
    background: #fff !important;
}

/* 6 种图标，统一 22×22 尺寸，配色温和 */
.bbx-icon-star {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8b04a'><path d='M12 2l2.9 6.2 6.8.7-5.1 4.5 1.5 6.7-6.1-3.5-6.1 3.5 1.5-6.7-5.1-4.5 6.8-.7z'/></svg>");
}
.bbx-icon-heart {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e07a8f'><path d='M12 21s-8-5.3-8-11a4 4 0 018-1 4 4 0 018 1c0 5.7-8 11-8 11z'/></svg>");
}
.bbx-icon-moon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a99fb2'><path d='M20 14a8 8 0 11-10-10 6 6 0 0010 10z'/></svg>");
}
.bbx-icon-cloud {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c9dd1'><path d='M6 18a4 4 0 01-.8-7.9 6 6 0 0111.5-1.9A4.5 4.5 0 0117 18z'/></svg>");
}
.bbx-icon-leaf {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236fb37a'><path d='M20 4C10 4 4 10 4 18l2 .5C7 13 12 9 20 8v-4z'/></svg>");
}
.bbx-icon-flower {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d18b5a'><path d='M12 3a2.5 2.5 0 012.5 2.5V7a2.5 2.5 0 010 5v1.5a2.5 2.5 0 012.5 2.5 2.5 2.5 0 01-5 0V14a2.5 2.5 0 01-5 0 2.5 2.5 0 012.5-2.5V10a2.5 2.5 0 010-5V5.5A2.5 2.5 0 0112 3z'/></svg>");
}

/* ============ 蜜罐字段（隐藏但不可 display:none） ============ */
.bbx-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.bbx-hp input,
.bbx-hp label {
    width: 1px !important;
    height: 1px !important;
    font-size: 1px !important;
    border: 0 !important;
    padding: 0 !important;
}







/* =========================================================
   投递特效 —— 信件飞入时空（慢镜版）
   ========================================================= */

.bbx-send-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 55%,
            rgba(70, 50, 95, 0.92) 0%,
            rgba(30, 22, 50, 0.96) 55%,
            rgba(15, 10, 30, 0.98) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    overflow: hidden;
}
.bbx-send-overlay.is-active  { opacity: 1; pointer-events: auto; }
.bbx-send-overlay.is-fading  { opacity: 0; transition: opacity 0.35s ease; }

/* ---------- 场景 ---------- */
.bbx-send-scene {
    position: relative;
    width: 340px;
    height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- 中央光晕（延迟到信封就位后爆开） ---------- */
.bbx-send-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 220, 170, 0.9) 0%,
        rgba(255, 180, 120, 0.45) 40%,
        transparent 72%
    );
    filter: blur(6px);
    opacity: 0;
    animation: bbx-glow-burst 1.8s cubic-bezier(.2, .7, .3, 1) 1s forwards;
}
@keyframes bbx-glow-burst {
    0%   { opacity: 0;   transform: scale(0.4); }
    30%  { opacity: 1;   transform: scale(2.4); }
    70%  { opacity: 0.7; transform: scale(3.8); }
    100% { opacity: 0;   transform: scale(5.5); }
}

/* ---------- 信封本体：3 秒长镜头 ---------- */
.bbx-send-letter {
    position: relative;
    width: 92px;
    height: 92px;
    z-index: 2;
    opacity: 0;
    filter: drop-shadow(0 10px 26px rgba(255, 180, 120, 0.55));
    animation: bbx-letter-flight 3s cubic-bezier(.45, .1, .35, 1) 0.2s forwards;
}
.bbx-send-letter svg {
    width: 100%;
    height: 100%;
    display: block;
}
@keyframes bbx-letter-flight {
    0%   { opacity: 0; transform: translateY(140px)  scale(0.4)  rotate(-8deg); }
    12%  { opacity: 1; transform: translateY(0)      scale(1)    rotate(0deg);  }
    20%  { opacity: 1; transform: translateY(-16px)  scale(1.05) rotate(2deg);  }
    30%  { opacity: 1; transform: translateY(0)      scale(1)    rotate(-1deg); }
    40%  { opacity: 1; transform: translateY(-10px)  scale(1.02) rotate(1.5deg); }
    50%  { opacity: 1; transform: translateY(0)      scale(1)    rotate(0deg);  }
    60%  { opacity: 1; transform: translateY(0)      scale(1)    rotate(0deg);  }
    100% { opacity: 0; transform: translateY(-320px) scale(0.15) rotate(22deg); }
}

/* ---------- 散射星星（延迟到光晕爆开时） ---------- */
.bbx-send-stars {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    z-index: 1;
}
.bbx-send-stars span {
    position: absolute;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    background: #ffd49e;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255, 200, 140, 0.8);
    opacity: 0;
    animation: bbx-star-scatter 1.8s cubic-bezier(.2, .6, .4, 1) 1.2s forwards;
}
.bbx-send-stars span:nth-child(1)  { --tx: -160px; --ty: -180px; }
.bbx-send-stars span:nth-child(2)  { --tx:  180px; --ty: -140px; }
.bbx-send-stars span:nth-child(3)  { --tx: -200px; --ty:   40px; }
.bbx-send-stars span:nth-child(4)  { --tx:  210px; --ty:   60px; }
.bbx-send-stars span:nth-child(5)  { --tx:  -90px; --ty:  160px; }
.bbx-send-stars span:nth-child(6)  { --tx:  110px; --ty:  180px; }
.bbx-send-stars span:nth-child(7)  { --tx:  -20px; --ty: -240px; }
.bbx-send-stars span:nth-child(8)  { --tx:   40px; --ty:  220px; }
.bbx-send-stars span:nth-child(9)  { --tx: -240px; --ty: -100px; }
.bbx-send-stars span:nth-child(10) { --tx:  240px; --ty:  -40px; }

@keyframes bbx-star-scatter {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.4);
    }
    20% {
        opacity: 1;
        transform:
            translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3))
            scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.2);
    }
}

/* ---------- 文案：在信封上升前浮现 ---------- */
.bbx-send-text {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translate(-50%, 20px);
    font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
    font-size: 16px;
    letter-spacing: 6px;
    color: rgba(255, 220, 180, 0.92);
    text-shadow: 0 0 20px rgba(255, 200, 140, 0.6);
    opacity: 0;
    white-space: nowrap;
    animation: bbx-text-appear 2.2s ease 1.1s forwards;
}
@keyframes bbx-text-appear {
    0%   { opacity: 0; transform: translate(-50%, 20px); }
    20%  { opacity: 1; transform: translate(-50%, 0); }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
    .bbx-send-letter { width: 76px; height: 76px; }
    .bbx-send-text   { font-size: 14px; letter-spacing: 4px; bottom: 32px; }
    .bbx-send-stars span:nth-child(n) { --tx: 0px; --ty: -180px; }
    .bbx-send-stars span:nth-child(odd)  { --tx: -120px; --ty:  -60px; }
    .bbx-send-stars span:nth-child(even) { --tx:  120px; --ty:  -80px; }
}