/*
 * score_BP 专用基础样式。
 * 负责结构、控件几何和业务状态；现代材质由 css/score-bp-ui-theme.css 统一维护。
 * S7 使用 css/S7/score-bp-base.css，不加载本文件。
 */

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
}

.fa-solid, .fas {
    font-weight: 900;
}

body {
    font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Alibaba PuHuiTi', 'SimHei', sans-serif;
    background: var(--gsbp-ui-canvas, #101820);
    color: var(--gsbp-ui-text, #F2F5F8);
    min-height: 100vh;
}

/* ========== score_BP 页面专用覆盖 ========== */

/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

html {
    font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Alibaba PuHuiTi', 'SimHei', sans-serif;
}

/* 普通 Web 的统一字体族；不改字重，也不进入 S7 的字体级联。 */
html:not(.gsbp-electron-broadcast-ui) {
    --score-bp-web-font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'SimHei', sans-serif;
    font-family: var(--score-bp-web-font-family);
}

html:not(.gsbp-electron-broadcast-ui) body,
html:not(.gsbp-electron-broadcast-ui) button,
html:not(.gsbp-electron-broadcast-ui) input,
html:not(.gsbp-electron-broadcast-ui) input::file-selector-button,
html:not(.gsbp-electron-broadcast-ui) select,
html:not(.gsbp-electron-broadcast-ui) textarea,
html:not(.gsbp-electron-broadcast-ui) .match-info-display {
    font-family: var(--score-bp-web-font-family);
}

/* 主要容器 */
.scoreboard-container {
    width: 100%;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

/* 左侧区域 */
.left-area {
    width: 10%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.home-logo {
    display: block;
    width: 80%;
    margin: 0 auto 5px;
    cursor: pointer;
}

.match-context-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 5px;
    margin-top: 5px;
}

.host-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    margin-bottom: 30px;
}

.host-title {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.host-display {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 5px;
}

.host-add-container {
    flex-direction: row;
    align-items: center;
    gap: 3px;
    margin-top: 5px;
}

.host-add-select,
.host-add-button {
    border-radius: 3px;
    color: white;
    font-size: 12px;
}

.host-add-select {
    padding: 2px 4px;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.host-add-button {
    padding: 2px 8px;
    border: 1px solid #4b5563;
    cursor: pointer;
}

.left-tool-row {
    display: flex;
    justify-content: space-between;
    width: 100px;
    margin: 0 auto 10px;
}

.left-tool-button {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #374151;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.left-tool-button i {
    font-size: 14px;
}

.left-tool-button .left-tool-icon-small {
    font-size: 13px;
}

.left-tool-button-strong {
    color: white;
}

.bgm-trigger {
    position: relative;
}

.bgm-playlist-container {
    position: fixed;
    left: 0;
    bottom: 10px;
    z-index: 1000;
    width: 180px;
    padding: 6px;
    background-color: rgba(31, 41, 55, 0.95);
    border: 1px solid #4b5563;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.bgm-close-button {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    color: #9ca3af;
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.bgm-playlist-layout {
    position: relative;
    display: flex;
    gap: 6px;
}

.bgm-playlist-list {
    flex: 1;
    max-height: 115px;
    padding-right: 35px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bgm-volume-control {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 35px;
    padding: 8px 2px;
    background-color: rgba(31, 41, 55, 0.95);
    border-left: 1px solid #4b5563;
}

.bgm-volume-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 18px;
    padding: 0;
    background: none;
    color: white;
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.bgm-volume-slider-wrap {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    margin: 4px 0;
}

.bgm-volume-tooltip {
    position: absolute;
    top: 50%;
    left: -45px;
    z-index: 1001;
    padding: 4px 8px;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.bgm-volume-slider {
    width: 4px;
    height: 100%;
    max-height: 80px;
    appearance: slider-vertical;
    -webkit-appearance: slider-vertical;
    writing-mode: vertical-lr;
    direction: rtl;
    cursor: pointer;
}

/* 角色头像容器 */
.character-avatars-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-top: 4px;
    padding: 2px;
    background-color: transparent;
    overflow: auto;
    /* 隐藏滚动条但允许滚动 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.character-avatars-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.character-avatar {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4), 0 0 16px rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
}

/* 幽境模式头像 - 矩形 5:4 */
.stygian-avatar .character-avatar {
    aspect-ratio: 5/4;
}

.character-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 0 0 24px rgba(255, 215, 0, 0.3);
}

/* 角色头像反转动画 */
@keyframes flipIn {
    0% {
        transform: rotateY(90deg) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: rotateY(0deg) scale(1);
        opacity: 1;
    }
}

.character-avatar.flip-animation {
    animation: flipIn 0.5s ease-out forwards;
}

/* 可编辑文本框样式 */
.editable-text {
    border: 0px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 6px;
    margin-bottom: 3px;
    cursor: pointer;
    word-break: break-all;
    text-align: center;
    font-size: 18px;
}

/* VS文字样式 */
.vs-text {
    text-align: center;
    font-weight: bold;
    margin: 2px 0 3px 0;
    font-size: 14px;
}

.editable-input {
    width: 100%;
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 8px;
    font-size: 20px;
    outline: none;
}

/* 下拉菜单样式 */
.match-type-container {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 75px;
}

.match-type-select,
.game-selector {
    flex: 1;
    padding: 3px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid #555;
    border-radius: 4px;
    color: white;
    text-align: center;
    outline: none;
    cursor: pointer;
    height: 28px;
}

.match-type-select {
    font-size: 16px;
}

.match-type-text,
.game-text {
    flex: 1;
    color: #eab308;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 60px;
}

.confirm-button {
    padding: 1px 3px;
    border: 1px solid #4b5563;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 局数选择区域样式 */
.game-selectors-container {
    display: flex;
    align-items: center;
}

/* 每个局数选择器的容器 */
.game-selector-container {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 2px;
    width: 75px;
}

/* 局数选择器样式 */
.game-selector {
    font-size: 14px;
}

/* 统一显示容器样式 */
.match-info-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-top: 5px;
    padding: 3px 10px;
    background-color: transparent;
    border-radius: 4px;
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Alibaba PuHuiTi', 'SimHei', Arial, sans-serif;
}

.match-info-display #match-info-bo,
.match-info-display #match-info-game {
    color: #eab308;
    font-size: 21px;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
}

.game-selector option,
.match-type-select option,
.player-select option {
    background-color: #1f2937;
    color: white;
}

/* 右侧部分（包含右上和底部区域） */
.right-section {
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 右上区域 */
.top-right-area {
    height: 85%;
    background-image: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

/* 为右上区域添加半透明覆盖层 */
.top-right-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(31, 41, 55, 0.8);
    z-index: 1;
    pointer-events: none; /* 允许点击穿透到下层内容 */
}

/* BP工具容器样式 */
.bp-tool-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
    padding-bottom: 20px; /* 添加底部间距，使按钮不紧贴底部 */
}

/* 下拉框容器样式 */
.player-selects-container {
    position: absolute;
    top: 50vh;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10%;
    z-index: 5;
}

/* 单个下拉框和按钮的包装容器 */
.player-select-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 选手选择下拉框样式 */
.player-select {
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    z-index: 5;
    min-width: 150px;
}

/* 确认按钮样式 */
.confirm-players-button {
    padding: 6px 12px; /* 调整为6px垂直padding */
    border: 1px solid #4b5563;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    z-index: 5;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 比赛名称显示样式 */
.match-name-display {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    z-index: 5;
    padding: 0 20px;
    display: none;
    letter-spacing: 1px;
}

/* BO信息显示样式 */
.bo-info-display {
    position: absolute;
    top: 150px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    z-index: 5;
    padding: 0 20px;
    display: none;
    letter-spacing: 2px;
}


/* VS图片显示样式 */
.vs-display {
    position: absolute;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: none;
    pointer-events: auto;
    width: 200px; /* 原图片宽度的25% */
    height: 100px; /* 原图片高度的25%（估算值） */
    overflow: hidden;
    border-radius: 8px;
}

.vs-display img {
    width: 800px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.history-trigger {
    cursor: pointer;
}

.vs-image {
    width: 800px;
    height: auto;
}

/* Ordinary portrait stage: avatar + name only. S7 does not load this sheet. */
.player-card.is-portrait-stage,
.player-card.is-portrait-stage:hover {
    flex-direction:column;justify-content:center;gap:1.4vw;
    width:34%;height:14vw;padding:0;border-radius:0;
    background:none;box-shadow:none;overflow:visible;transform:none;
    cursor:default;transition:none;
}
.player-card.is-portrait-stage::after {display:none}
.player-card.is-portrait-stage .player-card-avatar {
    width:14vw;height:14vw;border:0;overflow:visible;box-shadow:none;animation:none;
    isolation:isolate;
}
.player-card.is-portrait-stage .player-card-avatar img,
.player-card.is-portrait-stage .player-card-avatar img:hover {
    display:block;border-radius:50%;transform:none;transition:none;
}
.player-card.is-portrait-stage .avatar-frame {
    position:absolute;left:-8.8235294118%;top:-8.8235294118%;
    width:117.6470588236%;height:117.6470588236%;overflow:visible;
    pointer-events:none;
    filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--gsbp-ui-canvas) 55%,transparent));
}
.player-card.is-portrait-stage .player-card-info {
    position:absolute;top:calc(100% + 1.4vw);left:0;
    flex:none;text-align:center;width:100%;
}
.player-card.is-portrait-stage .player-card-name {
    margin:0;font-size:2.5vw;line-height:1.2;color:var(--gsbp-ui-text);
    overflow-wrap:anywhere;
    text-shadow:0 .12vw .22vw var(--gsbp-ui-canvas),0 .25vw .65vw var(--gsbp-ui-canvas);
}
.player-card.is-portrait-stage .player-card-profile,
.player-card.is-portrait-stage .player-card-team-info {visibility:hidden;height:0;overflow:hidden;margin:0;line-height:0}

/* Card structure only; the ordinary portrait above owns its appearance. */
.player-card { position: relative; display: flex; align-items: center; z-index: 5; }
.player-card-avatar { border-radius: 50%; flex-shrink: 0; z-index: 2; position: relative; }
.player-card-avatar img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }

/* 垃圾话云朵样式 */
.trash-talk-cloud {
    position: fixed;
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    border-radius: 20px;
    padding: 20px 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    font-size: 20px;
    font-weight: bold;
    color: #333;
    text-align: center;
    max-width: 400px;
    /* 只高于 z-index: 5 的选手卡；BP、裁判及转播 iframe 从 100 开始。 */
    z-index: 6;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    animation: cloudFloat 0.5s ease-out forwards;
}

.trash-talk-cloud::before {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 30px;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    border-radius: 50%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.trash-talk-cloud::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 45px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    border-radius: 50%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

@keyframes cloudFloat {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes cloudFadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
}

/* 选手信息样式 */
.player-card-info {
    z-index: 2;
    position: relative;
}

.player-card-name {
    font-weight: bold;
}

/* BP工具按钮样式 */
.bp-tool-button {
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* 添加细微边框以便识别 */
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 20;
    margin-top: 20px;
}

/* 正方形按钮样式 */
.bp-tool-button.square {
    padding: 12px;
    width: 40px;
    height: 40px;
    justify-content: center;
    gap: 0;
}

/* BP工具iframe样式 - 采用标准缩放实现 */
.bp-tool-iframe {
    width: 100%;
    height: 100%; /* 设置为父容器的100%高度 */
    border: none;
    z-index: 100;
    /* 设置绝对定位，从左上角开始显示 */
    position: absolute;
    top: 0;
    left: 0;
    /* 缩放原点设为页面右上容器的顶部中央 */
    transform-origin: top center;
    /* 添加平滑过渡 */
    transition: transform 0.3s ease;
}

/* 裁判直播间容器 - 16:9 比例 */
.bp-tool-iframe[data-bp-loading="true"] {
    visibility: hidden;
    pointer-events: none;
}

.bp-loading-status {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    text-align: center;
    color: #eaf3ff;
    background: #101b2b;
    font-size: 16px;
}

.bp-loading-status[hidden] { display: none; }

/* Ordinary loading paint only: keep the iframe hidden/inert until ready.
 * S7 owns its private stylesheet; failure presentation remains unchanged. */
html:not(.gsbp-electron-broadcast-ui) .bp-loading-status[data-state="loading"] {
    background: color-mix(in srgb, var(--gsbp-ui-surface, #192735) 50%, transparent);
    color: var(--gsbp-ui-text, #F2F5F8);
}

#refereeContainer {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    z-index: 100;
}

/* 裁判直播间16:9容器 */
#refereeAspectRatioBox {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
}

/* 主舞台直播 iframe 共用基础样式 */
#refereeIframe,
.broadcast-iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
}

/* 裁判直播间iframe */
#refereeIframe {
    left: 0;
}

/* 直播界面iframe样式 - 锚点设在右上角 */
.broadcast-iframe {
    z-index: 100;
    right: 0; /* 定位到右上角 */
    /* 缩放原点设为右上角 */
    transform-origin: top right;
    /* 添加平滑过渡 */
    transition: transform 0.3s ease;
}

/* 缩放控制按钮样式 */
.zoom-controls {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    background-color: rgba(31, 41, 55, 0.15); /* 15%透明度，更透明 */
    border-radius: 0 0 4px 4px; /* 底部圆角，顶部直角 */
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 1001;
}

.zoom-button {
    background-color: rgba(55, 65, 81, 0.15); /* 15%透明度，更透明 */
    color: white;
    border: none;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.zoom-button:hover {
    background-color: rgba(75, 85, 99, 0.7); /* 悬停时70%透明度 */
}

.zoom-button.close-button:hover {
    background-color: rgba(220, 38, 38, 0.7); /* 关闭按钮悬停时70%透明度 */
}

.zoom-level {
    color: white;
    font-size: 12px;
    min-width: 40px;
    text-align: center;
}

.height-control {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.iframe-height-select {
    width: 60px;
    padding: 2px;
    background-color: transparent;
    color: white;
    border: none;
}

.iframe-height-unit {
    margin-left: 5px;
    color: white;
}

/* 分数播报层位于主舞台内容之上、模式弹窗之下。 */
#score-broadcast-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 1000;
    width: 80%;
    max-width: 900px;
    padding: 20px;
    transform: translateX(-50%) translateY(20px);
    background: rgba(31, 41, 55, 0.3);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;
}

.score-broadcast-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.score-broadcast-team {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    text-align: center;
}

.score-broadcast-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.score-broadcast-copy-left {
    align-items: flex-start;
}

.score-broadcast-copy-right {
    align-items: flex-end;
}

.score-broadcast-name {
    margin-bottom: 15px;
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.score-broadcast-line {
    margin: 8px 0;
    color: #ffd700;
    font-size: 18px;
}

.score-broadcast-total {
    margin-top: 15px;
    color: #ffd700;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.score-broadcast-avatar-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.score-broadcast-avatar {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 3px solid rgba(255, 215, 0, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.score-broadcast-hint {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    color: #22c55e;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
}

.score-broadcast-versus {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 30px;
}

.score-broadcast-vs {
    color: white;
    font-size: 36px;
    font-weight: bold;
    text-shadow: 0 0 15px rgba(255, 215, 0, 1);
}

.score-broadcast-even {
    margin-top: 10px;
    color: #ffd700;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    white-space: pre-line;
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.8);
}

/* 底部区域 */
.bottom-area {
    height: 15%;
    padding: 10px;
    display: flex;
    gap: 1px;
}

/* 底部左右记分区 */
.bottom-left,
.bottom-right {
    width: 40%;
    padding: 5px;
    overflow: auto;
    /* 隐藏滚动条但允许滚动 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.bottom-left::-webkit-scrollbar,
.bottom-right::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* Score atoms in score-bp-ui-theme.css are the only table presentation. */
.timer-table { width: 100%; font-weight: 400; }
.timer-table .timer-cell { white-space: nowrap; }

.score-summary {
    margin-top: 10px;
    text-align: center;
}

.score-summary-label {
    font-size: 14px;
    font-weight: bold;
}

.score-summary-final-label {
    margin-left: 15px;
}

.score-summary-value {
    font-size: 14px;
}

.score-broadcast-button {
    margin-left: 8px;
    padding: 3px 6px;
    border: 1px solid #374151;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.bottom-center {
    width: 20%;
    padding: 2px 5px 0 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1px;
}

.bottom-center-top {
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    --score-name-fit-size: 24px;
    height: min-content;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
}

/* Electron 舞台专用的中轴姓名层；普通浏览器继续使用原 bottomTeamDisplay。 */
.gsbp-score-match-name {
    display: none;
}

/* 播报层默认隐藏；普通底栏由现代样式按 aria-hidden 显式显示。 */
.gsbp-score-zone {
    display: none;
}

.bottom-center-bottom {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding-top: 2px;
}

.score-number {
    font-size: 30px;
    font-weight: bold;
    padding: 3px 12px;
    border-radius: 5px;
    cursor: pointer;
    min-width: 40px;
    text-align: center;
}

.score-separator {
    font-size: 30px;
    font-weight: bold;
    margin: 0 5px;
}

.bottom-center-bottom :is(.score-number, .score-separator) {
    box-sizing: border-box;
    height: 42px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 时钟显示样式 */
.clock-display {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: bold;
    z-index: 5;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

/* 清空计时按钮样式 */
.clear-timer-button {
    border: none; /* 移除边框 */
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
    margin-top: 5px;
    transition: all 0.3s;
}

.scoreboard-actions {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
}

.match-actions-menu {
    position: relative;
}

.match-actions-trigger {
    min-width: 34px;
    letter-spacing: 1px;
}

.match-actions-popover {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 30;
    min-width: 150px;
    padding: 5px;
    background: rgba(17, 24, 39, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 5px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
}

.match-actions-popover.show {
    display: block;
}

.match-actions-popover button {
    width: 100%;
    padding: 8px 10px;
    color: #d1d5db;
    background: transparent;
    border: 0;
    border-radius: 3px;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.match-actions-popover button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.match-actions-popover button.danger {
    color: #fca5a5;
}

.match-actions-popover button.danger:hover {
    color: #fecaca;
    background: rgba(127, 29, 29, 0.28);
}

/* 导入窗口与通用弹窗共用全屏容器 */
.import-modal,
.custom-modal-overlay,
dialog.custom-modal::backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.custom-modal-overlay,
dialog.custom-modal::backdrop {
    z-index: 12010;
}

.import-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.import-modal-content,
.custom-modal {
    position: relative;
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 20px;
    max-width: 90%;
    text-align: center;
    color: white;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    animation: modalFadeIn 0.3s ease-out;
}

.import-modal-content {
    width: 400px;
}

.import-modal-title,
.custom-modal-title {
    font-size: 18px;
    margin-bottom: 15px;
}

.import-modal-title {
    font-weight: bold;
}

.import-modal-instructions,
.custom-modal-message {
    font-size: 14px;
    color: #d1d5db;
}

.import-modal-instructions,
.file-input-container,
.custom-modal-body {
    margin-bottom: 20px;
}

.custom-file-input {
    display: none;
}

.custom-file-button,
.custom-modal-btn {
    padding: 10px 20px;
}

.custom-file-button,
.import-button,
.cancel-button,
.custom-modal-btn {
    background-color: #1f2937cc;
    border-radius: 4px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.3s;
}

.custom-file-button,
.import-button,
.custom-modal-btn {
    border: 0px solid #4b5563;
}

.file-name-display {
    margin-top: 10px;
    font-size: 12px;
    color: #9ca3af;
    word-break: break-all;
}

.modal-buttons,
.custom-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.import-button, .cancel-button {
    padding: 8px 16px;
}

.cancel-button {
    border: none;
}

.error-message {
    color: #ef4444;
    margin-top: 10px;
    font-size: 12px;
    min-height: 16px;
}

.error-message.gsbp-import-error-emphasized {
    font-weight: 700;
}

/* Status notices expose only layout and legacy fallbacks here. The ordinary
 * visual adapter owns semantic paint through the normal cascade, so runtime
 * code never needs inline colors or forced theme overrides. */
.success-message {
    padding: 10px 20px;
    border: 0;
    border-radius: 4px;
    background-color: var(
        --score-bp-notice-background,
        rgba(16, 185, 129, 0.9)
    );
    color: var(--score-bp-notice-color, white);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: 700;
}

.success-message.is-quiet {
    padding: 7px 12px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    font-size: 14px;
    font-weight: 500;
}

.gsbp-semantic-attention-active {
    background-color: rgba(234, 179, 8, 0.08);
    box-shadow: inset 0 0 18px rgba(234, 179, 8, 0.28);
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

/* 当前选手相关样式 */
.current-player-container {
    margin: 2px 0;
    text-align: center;
}

.current-player-label {
    color: white;
    font-size: 14px;
    margin-bottom: 1px;
    text-align: center;
}

.current-player-select-wrapper {
    display: flex;
    gap: 3px;
    justify-content: center;
    margin-bottom: 1px;
}

.current-player-select {
    border: 1px solid #555;
    border-radius: 4px;
    padding: 4px;
    font-size: 12px;
}

.current-player-display {
    font-size: 20px;
    font-weight: bold;
    color: #eab308;
    text-align: center;
    min-height: 24px;
}

/* ========== 自定义弹窗组件样式 - 毛玻璃效果 ========== */
.custom-modal-overlay,
dialog.custom-modal::backdrop {
    background: rgba(0, 0, 0, 0.3);
}

.custom-modal-overlay.show {
    display: flex;
}

.custom-modal {
    min-width: 320px;
    max-height: 80%;
}

.custom-modal-header {
    margin-bottom: 15px;
}

.custom-modal-title {
    font-weight: 500;
}

.custom-modal-message {
    line-height: 1.6;
}

.custom-modal-btn {
    font-size: 14px;
    font-weight: 500;
}

.score-bp-startup-error {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #111827;
    color: #f8fafc;
    font-family: var(
        --score-bp-web-font-family,
        Inter,
        "PingFang SC",
        "Microsoft YaHei",
        sans-serif
    );
}

.score-bp-startup-error-panel {
    width: min(520px, 100%);
    padding: 28px;
    border: 1px solid #475569;
    background: #1e293b;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.score-bp-startup-error-title {
    margin: 0 0 12px;
    color: #f8fafc;
    font-size: 24px;
}

.score-bp-startup-error-message {
    margin: 0 0 20px;
    color: #cbd5e1;
    line-height: 1.7;
}

.score-bp-startup-error-reload {
    padding: 10px 18px;
    border: 1px solid #fbbf24;
    background: #fbbf24;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* BGM 歌单列表隐藏滚动条 */
#bgmPlaylistList::-webkit-scrollbar {
    display: none;
}

/* BP模式选择弹窗样式 - 毛玻璃效果（学习 genshin-bp-tool-g.html） */
#bpModeOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

#bpModeModal {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 40px 50px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    animation: slideIn 0.4s ease-out;
}

#bpModeModal h2 {
    color: #fbbf24;
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 30px;
    text-align: center;
}

.bp-mode-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.bp-mode-btn {
    min-width: 130px;
    padding: 16px 20px;
    border-radius: 8px;
    border: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.bp-mode-btn i {
    font-size: 32px;
}

.bp-mode-btn .mode-desc {
    font-size: 14px;
    opacity: 0.9;
}