/* 基础重置与全局 */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'CustomFont', sans-serif;
    font-size: 45px;
    height: 100%;
    /* 由整体隐藏改为只隐藏水平滚动条，垂直方向允许可见 */
    overflow-x: hidden;
    overflow-y: visible;

}
/* —— 弹幕容器背景 —— */
.screen {
    /* 原本没有 overflow，确保它允许子元素溢出 */
    overflow: visible;
    height: calc(100vh - 60px);
    position: relative;
}
.screen::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('./assert/bg00.jpg');
    background-repeat: repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}


/* —— 通用弹幕项 —— */
.danmu-item {
    /* 去掉隐藏，避免自身裁剪 */
    overflow: visible;
    display: inline-block;
    word-break: keep-all;
    white-space: nowrap;
    user-select: none;
    font-weight: 200;
    z-index: 10000000;
    transition: all 0.5s ease;
}
.danmu-item:hover {
    transform: scale(1.1);
}


/* —— 手动发送的弹幕 样式 —— */
.manual-danmu-item {
overflow: visible;
    background: linear-gradient(45deg, #ff4081, #2196f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 4px rgba(255,64,129,0.8),
        0 0 6px rgba(33,150,243,0.8);
    font-weight: bold;
    animation: manual-pop 8s ease-out both;
}
@keyframes manual-pop {
    0%   { transform: scale(0.8) rotate(-10deg); opacity: 0.5; }
    60%  { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(0.8) rotate(0); }
}
.manual-danmu-item:hover {
    animation: manual-pop 8s ease-out both;
    text-shadow:
        0 0 8px rgba(33,150,243,0.9),
        0 0 12px rgba(255,64,129,0.9);
}
/* —— 点击生成的弹幕 样式 —— */
.click-danmu-item {
    display: inline-block;         /* 让 transform 正常生效 */
    position: relative;            /* +overflow 需要定位上下文 */
    overflow: visible;             /* 自身也不裁剪 */
    transform-origin: center;      /* 动画围绕中心点 */
    /* 你想要的字体、阴影、背景等效果 */
    font-weight: bold;
    padding: 0 8px;
    text-shadow: 0 0 4px rgba(255,255,0,0.8);
    /* 可以配合渐变文字 */
    background: linear-gradient(90deg, #ffeb3b, #ffc107);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: click-pop 8s ease-out both;
}

@keyframes click-pop {
    0%   { transform: scale(0.8) rotate(-10deg); opacity: 1; }
    50%  { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(0.8) rotate(10deg); opacity: 0;}
}


/* 固定中间的 banner */
.banner {
    text-align: center;
    background-color: rgba(0, 0, 0, 0);
    width: 100vw;
    height: 350px;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    font-size: 2em;
    font-weight: 200;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    z-index: 1;
}
@keyframes animation-before {
    0% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(.62em 0 .29em 0); }
}
@keyframes animation-after {
    0% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(.29em 0 .62em 0); }
}
.banner::before {
    content: attr(data-text);
    position: absolute;
    left: -3px;
    width: 100%;
    background: transparent;
    text-shadow: 2px 0 red;
    animation: animation-before 0.3s infinite cubic-bezier(0.77, 0.5, 0.22, 2.2) alternate-reverse;
    font-weight: 200;
}
.banner::after {
    content: attr(data-text);
    position: absolute;
    left: 3px;
    width: 100%;
    background: transparent;
    text-shadow: -2px 0 blue;
    animation: animation-after 0.3s infinite cubic-bezier(0.71, -0.15, 0.33, 2.4) alternate-reverse;
    font-weight: 200;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
    .banner {
        font-size: 1.2em;
    }
    .banner::before {
        text-shadow: 1px 0 red;
        left: -2px;
    }
    .banner::after {
        text-shadow: -1px 0 blue;
        left: 2px;
    }
}

/* 顶栏、页脚及其他布局 */
.top {
    width: 100vw; height: 56px;
    background-image: url('./assert/header_bg.png');
    background-repeat: repeat;
    z-index: 1;
}
.top::before {
    content: '';
    position: fixed;
    height: 308px; width: 309px;
    bottom: 0; left: 0;
    background-image: url('./assert/bg01.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}
.top::after {
    content: '';
    position: fixed;
    height: 213px; width: 309px;
    bottom: 0; right: 0;
    background-image: url('./assert/bg02.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}
.footer {
    width: 100vw; height: 60px;
    position: fixed; bottom: 0;
    background-image: url('./assert/footer.jpg');
    background-repeat: repeat;
    background-size: 100% 100%;
    z-index: -100;
}

/* 点击计数 & 全局计数 */
.click-counter {
    position: fixed; top: 10px; left: 10px;
    background: rgba(255,255,255,0.7);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;
    z-index: 1000;
}
.newworld{
  position: fixed;
  left: 50%;                 /* 把元素左边缘放到视口中点 */
  transform: translateX(-50%); /* 再左移自身宽度的一半，使中心对齐 */
  top: -5px;
  z-index: 1000;
}

.global-counter {
    position: fixed; top: 10px; right: 10px;
    background: rgba(255,255,255,0.8);
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 18px;
    z-index: 1000;
}

/* 排行榜模态框 & 表格 */
.leaderboard-container { text-align: center; margin: 8px 0; }
#btnShowLeaderboard {
    padding: 6px 12px;
    font-size: 0.275rem;
    border: none;
    background: #007bff;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
#btnShowLeaderboard:hover { background: #0056b3; }

.leaderboard-modal {
    display: none;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding-top: 40px;
}
.leaderboard-dialog {
    background: rgba(255,255,255,0.9);
    width: 250px; max-width: 85%;
    padding: 4px;
    border-radius: 4px;
}
.leaderboard-header {
    font-size: 0.3rem; margin-bottom: 0;
}
.close-btn { font-size: 16px; line-height: 1; }
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}
.leaderboard-table th,
.leaderboard-table td {
    padding: 4px 6px;
    font-size: 0.35rem;
    border-bottom: 1px solid #eee;
    text-align: center;
    line-height: 1.2;
}
.leaderboard-table tbody tr:hover { background-color: #f5f5f5; }
.leaderboard-table .first  { font-weight: bold; color: #e91e63; }
.leaderboard-table .second { font-weight: bold; color: #9c27b0; }
.leaderboard-table .third  { font-weight: bold; color: #03a9f4; }
#leaderboard-tabs {
    display: flex; gap: 8px; margin-top: 8px;
}
#leaderboard-tabs .tab {
    padding: 4px 8px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f9f9f9;
}
#leaderboard-tabs .tab.active {
    background: #f39c12;
    color: #fff;
    border-color: #e67e22;
}

/* 输入框与发送按钮位置 */
.danmu-content .screen { position: relative; }
.opeate {
    position: absolute;
    top: 60px; left: 10%;
    transform: translateX(-50%);
    z-index: 1500;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0;
}
#d-input {
    flex: 1;
    max-width: 180px; min-width: 100px;
    padding: 8px 12px;
    font-size: 14px;
    border: 2px solid #ff9f1c;
    border-radius: 20px;
    background-color: #fff7e6;
    transition: border-color 0.2s;
}
#d-input:focus {
    outline: none;
    border-color: #ffbf69;
    box-shadow: 0 0 4px rgba(255, 191, 105, 0.5);
}
#btnSendDanmu {
    padding: 8px 16px;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(135deg, #ff9f1c, #ffbf69);
    border: none; border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s, transform 0.1s;
}
#btnSendDanmu:hover {
    background: linear-gradient(135deg, #ffbf69, #ffd380);
}
#btnSendDanmu:active {
    transform: scale(0.96);
}