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

/* CSS变量定义 */
:root {
    --vh: 1vh;
    --dvh: 1dvh;
    --mobile-header-height: 4rem;
    --mobile-footer-height: 6rem;
}

html {
    /* 禁用双击缩放 */
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* 禁止Y轴滑动 */
    overflow-y: hidden;
    /* 设置根字体大小，便于rem计算 */
    font-size: 16px;
}

body {
    font-family: 'Arial', sans-serif;
    background: #f5f5f5;
    color: #333;
    overflow-x: hidden;
    /* 禁用触摸缩放和Y轴滑动 */
    touch-action: pan-x;
    -webkit-tap-highlight-color: transparent;
    /* 禁止Y轴滑动 */
    overflow-y: hidden;
}

/* 页面切换 */
.page {
    display: none;
    min-height: 100vh;
    padding: 1.25rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 页面切换动画 */
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.page.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

.page.slide-out {
    opacity: 0;
    transform: translateX(-100%);
}

/* 运动选择页面 */
#sportSelection {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(0);
    min-height: 100vh;
    box-sizing: border-box;
}

#sportSelection.active {
    transform: translateX(0);
}

/* 计分器页面 */
#scorerPage {
    background: #f8f9fa;
    transform: translateX(100%);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
}

#scorerPage.active {
    transform: translateX(0);
}

.container {
    text-align: center;
    max-width: 37.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#sportSelection h1 {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.3);
}

.sport-options {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.875rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}

.sport-card {
    background: white;
    border-radius: 1.25rem;
    padding: 2.5rem 1.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.2);
}

.sport-card:hover {
    transform: translateY(-0.625rem);
    box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.3);
}

.sport-icon {
    font-size: 4rem;
    margin-bottom: 1.25rem;
}

.sport-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.9375rem;
    color: #333;
}

.sport-card p {
    color: #666;
    line-height: 1.6;
}

/* 计分器主界面 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background: white;
    border-radius: 0.9375rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 0.3125rem 0.9375rem rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.back-btn, .theme-btn, .settings-btn, .fullscreen-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 1.5625rem;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.back-btn:hover, .theme-btn:hover, .settings-btn:hover, .fullscreen-btn:hover {
    background: #0056b3;
    transform: translateY(-0.125rem);
}

#sportTitle {
    font-size: 1.8rem;
    color: #333;
}

/* 计分器容器 */
.scorer-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
    gap: 1.25rem;
}

/* 计分板 */
.scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.25rem;
    background: white;
    padding: 1.875rem;
    border-radius: 1.25rem;
    box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.1);
    flex-shrink: 0;
    flex: 1;
}

.player {
    text-align: center;
    border-radius: 0.9375rem;
    padding: 1.5625rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    /* 禁用触摸缩放 */
    touch-action: manipulation;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
    gap: 0.9375rem;
}

.player::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.player:hover::before {
    opacity: 1;
}

.player:active {
    transform: scale(0.98);
}

/* 赛点提示指示器 */
.match-point-indicator {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    background: linear-gradient(135deg, #f6a904, #ffea02);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 1.25rem;
    font-size: 0.9rem;
    font-weight: bold;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    box-shadow: 0 0.25rem 0.9375rem rgba(255, 107, 107, 0.4);
    animation: matchPointBreathing 2s ease-in-out infinite;
}

/* 发球提示指示器 */
.serve-indicator {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 1.25rem;
    font-size: 0.9rem;
    font-weight: bold;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    box-shadow: 0 0.25rem 0.9375rem rgba(40, 167, 69, 0.4);
    animation: serveIndicatorPulse 2s ease-in-out infinite;
}

.match-point-text {
    font-size: 0.8rem;
}

.match-point-emoji {
    font-size: 1rem;
    animation: emojiBounce 1.5s ease-in-out infinite;
}

.serve-text {
    font-size: 0.8rem;
}

.serve-emoji {
    font-size: 1rem;
    animation: serveEmojiSpin 2s linear infinite;
}

/* 呼吸效果动画 */
@keyframes matchPointBreathing {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* 庆祝emoji弹跳动画 */
@keyframes emojiBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.1875rem);
    }
}

/* 发球提示脉冲动画 */
@keyframes serveIndicatorPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* 发球emoji旋转动画 */
@keyframes serveEmojiSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 黑白色主题的得分板样式 */
.player.player1 {
    background: #000;
    color: white;
}

.player.player2 {
    background: #fff;
    color: #000;
    border: 0.125rem solid #e9ecef;
}

/* 黑白色主题的按钮样式 */
body.theme-black-white .fullscreen-btn {
    background: #007bff;
    color: white;
    border: 0.125rem solid #0056b3;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 123, 255, 0.3);
}

body.theme-black-white .fullscreen-btn:hover {
    background: #0056b3;
    border-color: #004085;
    box-shadow: 0 0.375rem 0.75rem rgba(0, 123, 255, 0.4);
}

body.theme-black-white .set-btn {
    background: #ffc107;
    color: #333;
    border: 0.125rem solid #e0a800;
    box-shadow: 0 0.25rem 0.5rem rgba(255, 193, 7, 0.3);
}

body.theme-black-white .set-btn:hover {
    background: #e0a800;
    border-color: #d39e00;
    box-shadow: 0 0.375rem 0.75rem rgba(255, 193, 7, 0.4);
}

body.theme-black-white .reset-btn {
    background: #dc3545;
    color: white;
    border: 0.125rem solid #c82333;
    box-shadow: 0 0.25rem 0.5rem rgba(220, 53, 69, 0.3);
}

body.theme-black-white .reset-btn:hover {
    background: #c82333;
    border-color: #bd2130;
    box-shadow: 0 0.375rem 0.75rem rgba(220, 53, 69, 0.4);
}

/* 黑白色主题的发球提示样式 */
body.theme-black-white .serve-indicator {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: 0.125rem solid #20c997;
    box-shadow: 0 0.25rem 0.5rem rgba(40, 167, 69, 0.3);
}

body.theme-black-white .serve-indicator:hover {
    background: linear-gradient(135deg, #20c997, #17a2b8);
    border-color: #17a2b8;
    box-shadow: 0 0.375rem 0.75rem rgba(40, 167, 69, 0.4);
}

.player-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.9375rem;
    position: relative;
    z-index: 1;
}

.score {
    font-size: 10rem;
    font-weight: bold;
    margin-bottom: 0.625rem;
    position: relative;
    z-index: 1;
}

.sets {
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
}

.vs-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9375rem;
}

.vs-text {
    font-size: 2rem;
    font-weight: bold;
    color: #666;
}

.current-set {
    font-size: 1.2rem;
    color: #333;
    background: #e9ecef;
    padding: 0.5rem 1rem;
    border-radius: 1.25rem;
}

/* 局数控制 */
.set-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    flex-shrink: 0;
    margin-top: 1.25rem;
}

.set-btn, .reset-btn {
    padding: 0.9375rem;
    border: none;
    border-radius: 0.625rem;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 默认主题的按钮样式 */
.set-btn {
    background: #ffc107;
    color: #333;
    border: 0.125rem solid #e0a800;
    box-shadow: 0 0.25rem 0.5rem rgba(255, 193, 7, 0.3);
}

.set-btn:hover {
    background: #e0a800;
    border-color: #d39e00;
    box-shadow: 0 0.375rem 0.75rem rgba(255, 193, 7, 0.4);
    transform: translateY(-0.125rem);
}

.reset-btn {
    background: #dc3545;
    color: white;
    border: 0.125rem solid #c82333;
    box-shadow: 0 0.25rem 0.5rem rgba(220, 53, 69, 0.3);
}

.reset-btn:hover {
    background: #c82333;
    border-color: #bd2130;
    box-shadow: 0 0.375rem 0.75rem rgba(220, 53, 69, 0.4);
    transform: translateY(-0.125rem);
}

/* 默认主题的发球提示样式 */
.serve-indicator {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: 0.125rem solid #20c997;
    box-shadow: 0 0.25rem 0.5rem rgba(40, 167, 69, 0.3);
}

.serve-indicator:hover {
    background: linear-gradient(135deg, #20c997, #17a2b8);
    border-color: #17a2b8;
    box-shadow: 0 0.375rem 0.75rem rgba(40, 167, 69, 0.4);
}

/* 设置弹窗 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: white;
    margin: 0;
    padding: 0;
    border-radius: 0.9375rem;
    width: 90%;
    max-width: 40.625rem;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    /* 确保内容可以滚动 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem;
    border-bottom: 0.0625rem solid #e9ecef;
    position: sticky;
    top: 0;
    background: white;
    border-radius: 0.9375rem 0.9375rem 0 0;
    flex-shrink: 0;
}

.modal-header h3 {
    color: #333;
    font-size: 1.3rem;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
}

.modal-body {
    padding: 1.5625rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* 确保内容可以正常滚动 */
    position: relative;
    max-height: calc(90vh - 8rem);
}

.setting-item {
    margin-bottom: 1.875rem;
}

.setting-item:last-child {
    margin-bottom: 0;
}

.setting-item label {
    display: block;
    margin-bottom: 0.9375rem;
    font-weight: bold;
    color: #333;
    font-size: 1.1rem;
}

.theme-options {
    display: flex;
    gap: 0.9375rem;
    flex-wrap: wrap;
}

.theme-option {
    padding: 0.75rem 1.5rem;
    border: 0.125rem solid #e9ecef;
    background: white;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.theme-option.active {
    border-color: #007bff;
    background: #007bff;
    color: white;
}

.theme-option:hover {
    border-color: #007bff;
}

/* 运动员姓名设置样式 */
.player-name-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    gap: 1.25rem;
}

.player-name-input {
    display: flex;
    flex-direction: column;
}

.player-name-input label {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #555;
    font-size: 0.95rem;
}

.player-name-input input {
    padding: 0.75rem;
    border: 0.125rem solid #e9ecef;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.player-name-input input:focus {
    outline: none;
    border-color: #007bff;
}

/* 分段设置样式 */
.segment-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr));
    gap: 1.25rem;
}

.segment-input {
    display: flex;
    flex-direction: column;
}

.segment-input label {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #555;
    font-size: 0.95rem;
}

.segment-input input {
    padding: 0.75rem;
    border: 0.125rem solid #e9ecef;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.segment-input input:focus {
    outline: none;
    border-color: #007bff;
}

/* 红蓝色主题的得分板样式 */
body.theme-red-blue .player.player1 {
    background: #ff6b6b;
    color: white;
}

body.theme-red-blue .player.player2 {
    background: #4ecdc4;
    color: white;
    border: none;
}

/* 红蓝色主题 */
body.theme-red-blue {
    background: #f0f8ff;
}

body.theme-red-blue .header {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
}

body.theme-red-blue .fullscreen-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 0.125rem solid rgba(255, 255, 255, 0.3);
}

body.theme-red-blue .fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* 全屏退出按钮样式 */
.fullscreen-exit-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
}

.fullscreen-exit-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.4);
}

/* 全屏状态下的样式 */
.fullscreen-mode .header,
.fullscreen-mode .set-controls {
    display: none !important;
}

.fullscreen-mode .scorer-container {
    height: 100vh;
    justify-content: center;
    padding: 0;
}

.fullscreen-mode .scoreboard {
    flex: 1;
    max-height: 100vh;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.fullscreen-mode .score {
    font-size: 15rem;
}

.fullscreen-mode .player-name {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.fullscreen-mode .sets {
    font-size: 2.5rem;
}

.fullscreen-mode .vs-text {
    font-size: 3rem;
}

.fullscreen-mode .current-set {
    font-size: 1.8rem;
    padding: 1rem 2rem;
}

/* 全屏模式下的移动端优化 */
@media (max-width: 48rem) {
    .fullscreen-mode .score {
        font-size: 8rem;
    }
    
    .fullscreen-mode .player-name {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .fullscreen-mode .sets {
        font-size: 2rem;
    }
    
    .fullscreen-mode .vs-text {
        font-size: 2rem;
    }
    
    .fullscreen-mode .current-set {
        font-size: 1.3rem;
        padding: 0.75rem 1.5rem;
    }
    
    .fullscreen-mode .scoreboard {
        padding: 1rem;
    }
}

/* 移动端浏览器特殊优化 - 解决顶部栏遮挡问题 */
@media (max-width: 48rem) and (max-height: 50rem) {
    .page {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .header {
        margin-top: 1rem;
    }
    
    .scorer-container {
        min-height: calc(100vh - 8rem);
        justify-content: space-between;
    }
    
    .set-controls {
        margin-top: auto;
        padding-bottom: 1rem;
    }
    
    /* 确保按钮在底部可见 */
    .set-btn, .reset-btn {
        min-height: 3rem;
        font-size: 1.1rem;
    }
}

/* 移动端浏览器viewport高度适配 */
@media (max-width: 48rem) {
    .page {
        min-height: 100vh;
        min-height: 100dvh; /* 动态视口高度 */
    }
    
    .scorer-container {
        min-height: calc(100vh - 6rem);
        min-height: calc(100dvh - 6rem);
    }
    
    /* 确保内容不会超出屏幕 */
    .scoreboard {
        max-height: calc(100vh - 12rem);
        max-height: calc(100dvh - 12rem);
        overflow: hidden;
    }
    
    /* 移动端按钮优化 */
    .set-controls {
        position: sticky;
        bottom: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        padding: 1rem;
        margin: 0 -0.5rem;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.1);
    }
}

/* 全屏模式下的超小屏幕优化 */
@media (max-width: 30rem) {
    .fullscreen-mode .score {
        font-size: 6rem;
    }
    
    .fullscreen-mode .player-name {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }
    
    .fullscreen-mode .sets {
        font-size: 1.5rem;
    }
    
    .fullscreen-mode .vs-text {
        font-size: 1.5rem;
    }
    
    .fullscreen-mode .current-set {
        font-size: 1.1rem;
        padding: 0.5rem 1rem;
    }
}

/* 全屏模式下的移动端高度优化 */
@media (max-width: 48rem) and (max-height: 50rem) {
    .fullscreen-mode .scorer-container {
        height: 100vh;
        height: 100dvh;
        padding: 1rem;
        box-sizing: border-box;
    }
    
    .fullscreen-mode .scoreboard {
        flex: 1;
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
        padding: 0.5rem;
        overflow: hidden;
    }
    
    .fullscreen-mode .score {
        font-size: 6rem;
        line-height: 1;
        margin-bottom: 0.5rem;
    }
    
    .fullscreen-mode .player-name {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }
    
    .fullscreen-mode .sets {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .fullscreen-mode .vs-text {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .fullscreen-mode .current-set {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
    
    .fullscreen-mode .player {
        padding: 1rem;
        min-height: auto;
    }
    
    /* 全屏模式下发球提示优化 */
    .fullscreen-mode .serve-indicator {
        top: 1rem;
        left: 1rem;
        padding: 0.75rem 1rem;
        font-size: 1.1rem;
    }
    
    .fullscreen-mode .serve-text {
        font-size: 1rem;
    }
    
    .fullscreen-mode .serve-emoji {
        font-size: 1.2rem;
    }
}

/* 全屏模式下的移动端通用优化 */
@media (max-width: 48rem) {
    .fullscreen-mode .scorer-container {
        height: 100vh;
        height: 100dvh;
        padding: 0.5rem;
        box-sizing: border-box;
    }
    
    .fullscreen-mode .scoreboard {
        flex: 1;
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
        padding: 0.5rem;
        overflow: hidden;
    }
    
    .fullscreen-mode .score {
        font-size: 7rem;
        line-height: 1;
        margin-bottom: 0.5rem;
    }
    
    .fullscreen-mode .player-name {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }
    
    .fullscreen-mode .sets {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .fullscreen-mode .vs-text {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .fullscreen-mode .current-set {
        font-size: 1.2rem;
        padding: 0.5rem 1rem;
    }
    
    .fullscreen-mode .player {
        padding: 0.75rem;
        min-height: auto;
    }
    
    /* 全屏模式移动端发球提示优化 */
    .fullscreen-mode .serve-indicator {
        top: 0.75rem;
        left: 0.75rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    .fullscreen-mode .serve-text {
        font-size: 0.8rem;
    }
    
    .fullscreen-mode .serve-emoji {
        font-size: 1rem;
    }
}

/* 全屏模式下的横屏优化 */
@media (orientation: landscape) {
    .fullscreen-mode .score {
        font-size: 9rem;
    }
    
    .fullscreen-mode .player-name {
        font-size: 1.8rem;
        margin-bottom: 1.2rem;
    }
    
    .fullscreen-mode .sets {
        font-size: 2.2rem;
    }
    
    .fullscreen-mode .vs-text {
        font-size: 2.5rem;
    }
    
    .fullscreen-mode .current-set {
        font-size: 1.5rem;
        padding: 0.8rem 1.6rem;
    }
    
    /* 全屏模式横屏发球提示优化 */
    .fullscreen-mode .serve-indicator {
        top: 1.25rem;
        left: 1.25rem;
        padding: 1rem 1.25rem;
        font-size: 1.3rem;
    }
    
    .fullscreen-mode .serve-text {
        font-size: 1.2rem;
    }
    
    .fullscreen-mode .serve-emoji {
        font-size: 1.4rem;
    }
}

body.theme-red-blue #sportTitle {
    color: white;
}

body.theme-red-blue .set-btn {
    background: #ffa726;
    border: 0.125rem solid #ff9800;
    box-shadow: 0 0.25rem 0.5rem rgba(255, 167, 38, 0.3);
}

body.theme-red-blue .set-btn:hover {
    background: #ff9800;
    border-color: #f57c00;
    box-shadow: 0 0.375rem 0.75rem rgba(255, 167, 38, 0.4);
}

body.theme-red-blue .reset-btn {
    background: #ff6b6b;
    border: 0.125rem solid #ee5a24;
    box-shadow: 0 0.25rem 0.5rem rgba(255, 107, 107, 0.3);
}

body.theme-red-blue .reset-btn:hover {
    background: #ee5a24;
    border-color: #d63031;
    box-shadow: 0 0.375rem 0.75rem rgba(255, 107, 107, 0.4);
}

/* 红蓝色主题的发球提示样式 */
body.theme-red-blue .serve-indicator {
    background: linear-gradient(135deg, #20c997, #17a2b8);
    border: 0.125rem solid #17a2b8;
    box-shadow: 0 0.25rem 0.5rem rgba(32, 201, 151, 0.3);
}

body.theme-red-blue .serve-indicator:hover {
    background: linear-gradient(135deg, #17a2b8, #138496);
    border-color: #138496;
    box-shadow: 0 0.375rem 0.75rem rgba(32, 201, 151, 0.4);
}

/* 移动端横屏适配 */
@media (orientation: landscape) and (max-height: 37.5rem) {
    .page {
        padding: 0.625rem;
    }
    
    .header {
        padding: 0.9375rem;
        margin-bottom: 1rem;
    }
    
    .scorer-container {
        gap: 1rem;
    }
    
    .scoreboard {
        padding: 1.25rem;
    }
    
    .score {
        font-size: 3rem;
    }
    
    .set-controls {
        gap: 1rem;
    }
    
    /* 横屏时运动选择页面优化 */
    #sportSelection {
        padding: 0.625rem;
    }
    
    .container {
        height: 100%;
        justify-content: center;
    }
    
    #sportSelection h1 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    
    .sport-options {
        gap: 1.25rem;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    
    .sport-card {
        padding: 1.875rem 1.25rem;
        min-width: 12.5rem;
        flex: 0 1 auto;
    }
}

@media (max-width: 48rem) {
    .sport-options {
        flex-direction: column;
        gap: 1.25rem;
        justify-content: center;
        align-items: center;
    }
    
    .sport-card {
        width: 100%;
        max-width: 20rem;
    }
    
    .scoreboard {
        grid-template-columns: 1fr;
        gap: 0.9375rem;
        text-align: center;
    }
    
    .vs-section {
        order: -1;
        margin-bottom: 1.25rem;
    }
    
    .set-controls {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        margin: 0;
        width: 95%;
        max-height: 96vh;
        /* 保持居中定位 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .player-name-inputs {
        grid-template-columns: 1fr;
    }
    
    .segment-inputs {
        grid-template-columns: 1fr;
    }
    
    .theme-options {
        flex-direction: column;
    }
    
    /* 移动端赛点提示调整 */
    .match-point-indicator {
        top: 0.3125rem;
        right: 0.3125rem;
        padding: 0.375rem 0.625rem;
        font-size: 0.8rem;
    }
    
    .match-point-text {
        font-size: 0.7rem;
    }
    
    .match-point-emoji {
        font-size: 0.9rem;
    }
    
    /* 移动端发球提示调整 */
    .serve-indicator {
        top: 0.3125rem;
        left: 0.3125rem;
        padding: 0.375rem 0.625rem;
        font-size: 0.8rem;
    }
    
    .serve-text {
        font-size: 0.7rem;
    }
    
    .serve-emoji {
        font-size: 0.9rem;
    }
}

/* 超小屏幕适配 */
@media (max-width: 30rem) {
    .page {
        padding: 0.5rem;
    }
    
    .header {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .scorer-container {
        gap: 1rem;
    }
    
    .scoreboard {
        padding: 1.25rem;
    }
    
    .player {
        padding: 1.25rem;
    }
    
    .score {
        font-size: 3.5rem;
    }
    
    .player-name {
        font-size: 1.1rem;
    }
    
    .vs-text {
        font-size: 1.5rem;
    }
    
    .current-set {
        font-size: 1rem;
        padding: 0.375rem 0.75rem;
    }
    
    .set-controls {
        gap: 1rem;
    }
    
    .set-btn, .reset-btn {
        padding: 0.875rem;
        font-size: 1rem;
    }
    
    /* 超小屏幕发球提示调整 */
    .serve-indicator {
        top: 0.25rem;
        left: 0.25rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }
    
    .serve-text {
        font-size: 0.6rem;
    }
    
    .serve-emoji {
        font-size: 0.8rem;
    }
    
    /* 超小屏幕运动选择优化 */
    .container {
        padding: 0 0.5rem;
    }
    
    #sportSelection h1 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    
    .sport-options {
        gap: 1rem;
    }
    
    .sport-card {
        padding: 1.5rem 1rem;
    }
    
    /* 超小屏幕模态框优化 */
    .modal-content {
        margin: 0;
        width: 98%;
        max-height: 98vh;
        /* 保持居中定位 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .modal-body {
        padding: 1.25rem;
    }
}

/* 超小高度屏幕适配 */
@media (max-height: 40rem) {
    .page {
        padding: 0.5rem;
    }
    
    .header {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .scorer-container {
        gap: 0.75rem;
    }
    
    .scoreboard {
        padding: 1.25rem;
    }
    
    .player {
        padding: 1.25rem;
    }
    
    .score {
        font-size: 3rem;
    }
    
    .player-name {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .sets {
        font-size: 1.25rem;
    }
    
    .vs-text {
        font-size: 1.5rem;
    }
    
    .current-set {
        font-size: 1rem;
        padding: 0.375rem 0.75rem;
    }
    
    .set-controls {
        gap: 0.75rem;
    }
    
    .set-btn, .reset-btn {
        padding: 0.75rem;
        font-size: 1rem;
    }
    
    /* 超小高度屏幕发球提示调整 */
    .serve-indicator {
        top: 0.25rem;
        left: 0.25rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }
    
    .serve-text {
        font-size: 0.6rem;
    }
    
    .serve-emoji {
        font-size: 0.8rem;
    }
    
    /* 超小高度屏幕运动选择优化 */
    #sportSelection h1 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    
    .sport-options {
        gap: 1.25rem;
    }
    
    .sport-card {
        padding: 1.875rem 1.25rem;
    }
    
    /* 超小高度屏幕模态框优化 */
    .modal-content {
        margin: 2% auto;
        max-height: 96vh;
        overflow-y: auto;
    }
    
    .modal-body {
        padding: 1.25rem;
        overflow-y: auto;
        max-height: calc(96vh - 6rem);
    }
    
    /* 确保小高度屏幕时模态框可以正常滚动 */
    .modal {
        overflow-y: auto;
    }
}

/* 横屏模态框优化 */
@media (orientation: landscape) {
    .modal-content {
        margin: 0;
        max-height: 96vh;
        overflow-y: auto;
        /* 横屏时调整宽度和高度 */
        width: 95%;
        max-width: 90vw;
        /* 保持居中定位 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .modal-body {
        padding: 1.25rem;
        overflow-y: auto;
        max-height: calc(96vh - 8rem);
        /* 确保横屏时内容可以正常滚动 */
        overflow-x: hidden;
    }
    
    .setting-item {
        margin-bottom: 1.25rem;
    }
    
    .setting-item:last-child {
        margin-bottom: 0.625rem;
    }
    
    /* 确保横屏时模态框内容可以正常滚动 */
    .modal {
        overflow-y: auto;
    }
    
    /* 横屏时改为三列布局 */
    .modal-body {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        align-items: start;
    }
    
    /* 横屏时设置项样式调整 */
    .setting-item {
        margin-bottom: 0;
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 0.5rem;
        border: 0.0625rem solid #e9ecef;
    }
    
    /* 横屏时优化设置项布局 */
    .player-name-inputs {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .segment-inputs {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    /* 横屏时主题选项布局 */
    .theme-options {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .theme-option {
        padding: 0.5rem 1rem;
        text-align: center;
    }
}

/* 横屏且高度较小时的模态框优化 */
@media (orientation: landscape) and (max-height: 40rem) {
    .modal-content {
        margin: 0;
        max-height: 98vh;
        width: 98%;
        max-width: 95vw;
        /* 保持居中定位 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .modal-body {
        padding: 1rem;
        max-height: calc(98vh - 6rem);
        overflow-y: auto;
        /* 保持三列布局 */
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        align-items: start;
    }
    
    .modal-header {
        padding: 0.8rem 1rem;
    }
    
    .setting-item {
        margin-bottom: 0;
        padding: 0.75rem;
        background: #f8f9fa;
        border-radius: 0.5rem;
        border: 0.0625rem solid #e9ecef;
    }
    
    .setting-item:last-child {
        margin-bottom: 0;
    }
    
    /* 确保所有内容都可以滚动查看 */
    .modal {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 小高度时的字体和间距调整 */
    .setting-item label {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .setting-item input {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
    .theme-option {
        padding: 0.375rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* 中等高度横屏优化 */
@media (orientation: landscape) and (min-height: 40rem) and (max-height: 50rem) {
    .modal-body {
        gap: 1.25rem;
    }
    
    .setting-item {
        padding: 0.875rem;
    }
    
    .setting-item label {
        font-size: 1.05rem;
        margin-bottom: 0.625rem;
    }
    
    .setting-item input {
        padding: 0.625rem;
        font-size: 0.95rem;
    }
}

/* 超宽横屏优化 */
@media (orientation: landscape) and (min-width: 80rem) {
    .modal-content {
        max-width: 80vw;
        /* 保持居中定位 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .modal-body {
        gap: 2rem;
    }
    
    .setting-item {
        padding: 1.25rem;
    }
    
    .setting-item label {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    
    .setting-item input {
        padding: 0.75rem;
        font-size: 1rem;
    }
    
    .theme-option {
        padding: 0.625rem 1.25rem;
        font-size: 1rem;
    }
}

.setting-item-auto-match-point {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}