/**
 * 弹幕相关公共样式
 * 用于 client/index.html 和 zhuotai/7272.html
 */

/* iOS/微信：禁止系统“自动文字缩放”导致布局抖动 */
html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 公告定位已统一交由 /css/danmu-page-common.css（.page-title-wrap）处理，这里不再做覆盖 */

#danmu-overlay,
.danmu-overlay {
    /* 统一覆盖（主站 + 桌台）：避免桌台模板内联 #danmu-overlay 覆盖导致高度/层级异常 */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 102 !important;
    background: transparent !important;
}

.danmu {
    position: absolute;
    white-space: nowrap;
    /* 关键：使用 em 跟随 JS 动态 font-size 等比缩放，避免不同端气泡“松紧”不一致 */
    padding: 0.5em 1em;
    border-radius: 1.6em;
    opacity: 0.9;
    pointer-events: none;
    will-change: transform;
    background-color: rgba(0, 0, 0, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.4);
    font-size: 16px;
    /* 角标可能超出行高，确保不被任何默认溢出策略裁剪 */
    overflow: visible !important;
}

/* 微信内置浏览器：大量飘动弹幕时，降低阴影开销（更省电更稳） */
html.wx .danmu {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.65) !important;
}

/* 用户角标标签（用户名右上角） */
.danmu .danmu-sender {
    position: relative;
    display: inline-block;
    /* 角标放左上角，不需要为右侧预留空间 */
    padding-right: 0;
    overflow: visible;
}

.danmu .danmu-sender-name.rainbow {
    background-image: linear-gradient(
        to right,
        #ff0000, #ff7f00, #ffff00, #00ff80, #00ffff, #0080ff, #8000ff, #ff00ff, #ff0000
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 2px rgba(255,255,255,0.12);
}

.danmu .danmu-sender-name.rainbow.rainbow-dynamic {
    animation: rainbow 4s linear infinite;
}

.danmu .user-tag {
    position: absolute;
    left: 0;
    top: 0;
    /* 位置：用户名左上方（在名字上方，不压住文字） */
    transform: translate(-6px, calc(-100% + 1px));
    pointer-events: none;
    font-size: 0.62em;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    /* 磨砂玻璃（更不透明）：减少透底 */
    background: linear-gradient(180deg, rgba(28, 28, 28, 0.92), rgba(18, 18, 18, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.danmu .user-tag--registered { color: rgba(120, 200, 255, 0.95); }
.danmu .user-tag--zhuotai { color: rgba(255, 140, 190, 0.95); }
.danmu .user-tag--ai { color: rgba(255, 220, 140, 0.95); }

/* 彩虹字弹幕样式 */
.danmu-rainbow {
    background-color: rgba(0, 0, 0, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 随机彩色字体弹幕样式 */
.danmu-random-color {
    /* 随机颜色将通过JavaScript动态设置 */
    background-color: rgba(0, 0, 0, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 彩虹字弹幕文本样式 */
.danmu-text-rainbow {
    background-image: linear-gradient(
        to right,
        #ff0000, #ff4000, #ff7f00, #ffbf00, #ffff00, #bfff00, #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040, #ff0000
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: rainbow 5s linear infinite;
    font-size: 16px;
    font-family: inherit;
    font-weight: inherit;
    text-shadow: 0 0 2px rgba(255,255,255,0.1);
}

/* 随机彩色字体弹幕文本样式 */
.danmu-text-random {
    font-size: 16px;
    font-family: inherit;
    font-weight: inherit;
    font-weight: bold;
    letter-spacing: 0.5px;
}

@keyframes rainbow {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

@keyframes danmu-move {
    from { transform: translate3d(100vw, 0, 0); }
    to { transform: translate3d(-120vw, 0, 0); }
}

/* 大屏设备弹幕样式 */
@media (min-width: 1920px) {
    .danmu { 
        font-size: 32px;
        text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    }
    .danmu-text-rainbow, .danmu-text-random { font-size: 32px; }
}

@media (min-width: 3840px) {
    .danmu { 
        font-size: 40px;
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    }
    .danmu-text-rainbow, .danmu-text-random { font-size: 40px; }
}