/* LED字体 */
@font-face {
    font-family: 'Digital Numbers';
    src: url('DigitalNumbers-Regular.woff') format('woff');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
}

/* CSS变量 - 原版设计 */
:root {
    --nav-height: 0px;
    --bg: whitesmoke;
    --board-bg: #383838;
    --card-bg: dimgray;
    --card-color: whitesmoke;
    --btn-color: black;
    --btn-bg: whitesmoke;
    --size: 45vw;
    --card-ratio: 0.65;
    --board-ratio: 0.75;
    --digit-ratio: 0.7;
    --card-size: calc(var(--size) * var(--card-ratio));
    --title-size: calc(var(--card-size) * 0.2);
    --set-size: calc(var(--size) / 5);
    --settings-size: calc(var(--size) * (var(--board-ratio) - var(--card-ratio)));
    --minus-color: black;
    --minus-bg: lightgray;
    --border-width: 1px;
    --real-full-vh: 100vh;
}

/* 默认大卡片 */
:root {
    --card-ratio: 1;
    --board-ratio: 1;
}

/* 局数显示时的卡片比例 */
:root[data-sets] {
    --card-ratio: 0.75;
}

@media (orientation: portrait) {
    :root[data-sets] {
        --card-ratio: 0.8;
    }
    :root {
        --set-size: calc(var(--size) * .2);
    }
}

/* 大屏幕优化 */
@media only screen and (min-width:575px) {
    :root {
        --card-ratio: 0.9;
    }
}

/* 横屏比例优化 */
@media (max-aspect-ratio:2/1) and (orientation:landscape) {
    :root { --size:45vw }
}
@media (min-aspect-ratio:2/1) and (orientation:landscape) {
    :root { --size:calc(90vh - var(--nav-height)) }
}

/* 竖屏比例优化 */
@media (max-aspect-ratio:1/2) and (orientation:portrait) {
    :root { --size:calc(85vw) }
}
@media (min-aspect-ratio:1/2) and (orientation:portrait) {
    :root { --size:calc(80vh / 2 - var(--nav-height) / 2) }
}

/* 明亮主题 */
:root[data-theme="bright"] {
    --board-bg: darkgray;
    --card-bg: white;
    --card-color: black;
    --digit-ratio: 0.9;
}
:root[data-theme="bright"] .card:first-child .score {
    color: red;
}
:root[data-theme="bright"] .card:last-child .score {
    color: #00f;
}

/* LED主题 - 原版样式 */
:root[data-theme="led"] {
    --digit-ratio: 0.55;
    --card-color: linen;
}
:root[data-theme="led"] .score {
    font-family: 'Digital Numbers', monospace;
    transform: skew(-2deg);
}

/* 红蓝主题 */
:root[data-theme="red-blue"] .card:first-child {
    background: #ff4500;
    color: #fff;
}
:root[data-theme="red-blue"] .card:last-child {
    background: #1e90ff;
    color: #fff;
}

/* 默认主题分数颜色 */
:root[data-theme="default"] .card .score,
:root:not([data-theme]) .card .score {
    color: #ff0;
}

/* 记分板区域 */
.board {
    flex: 1;
    background: var(--board-bg);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    min-height: 0;
}

/* 卡片区域 */
.cards {
    display: flex;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex: 1;
}

@media (orientation: portrait) {
    .cards {
        flex-direction: column;
        flex-grow: 1;
    }
}

.card {
    width: var(--card-size);
    height: var(--card-size);
    color: var(--card-color);
    background: var(--card-bg);
    border-radius: calc(var(--card-size) * .05);
    position: relative;
    overflow: hidden;
}

/* 局数显示区域 - 原版样式 */
.sets {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: calc(var(--set-size) / 4);
}

.sets.show {
    display: flex;
}

/* 单个局数显示 - 隐藏第二个 */
:root[data-sets="1"] .sets .set:last-child {
    display: none;
}

/* 两个局数时的间距 */
.sets .set:last-child {
    margin-left: calc(var(--set-size) / 4);
}

.set {
    width: var(--set-size);
    height: var(--set-size);
    color: var(--card-color);
    background: var(--card-bg);
    border-radius: calc(var(--card-size) * .05);
    position: relative;
    overflow: hidden;
}

:root[data-theme="red-blue"] .set {
    background: var(--card-bg);
}

.set .score {
    font-size: calc(var(--set-size) * var(--digit-ratio));
    height: var(--set-size);
    line-height: var(--set-size);
}

.set .minus {
    bottom: calc(var(--border-width) * -1);
    left: calc(var(--border-width) * -1);
    transform: translateX(0) translateY(0);
    zoom: 60%;
}

@media (orientation: portrait) {
    .set .minus {
        zoom: 70%;
    }
}

/* 队名 */
.title {
    display: none;
    position: absolute;
    top: .2em;
    font-size: var(--title-size);
    height: 1em;
    width: var(--card-size);
    line-height: 1em;
    text-align: center;
    cursor: pointer;
    z-index: 100;
}

.show-title .title {
    display: block;
}

.show-title .card {
    padding-top: calc(var(--title-size) / 2);
}

/* 分数显示 - 参考原版 */
.score {
    font-family: Tahoma, "Lucida Console", "Helvetica Neue", sans-serif;
    display: flex;
    justify-content: center;
    font-size: calc(var(--card-size) * var(--digit-ratio));
    height: var(--card-size);
    line-height: var(--card-size);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}

/* -1按钮 */
.minus {
    color: var(--minus-color);
    background: var(--minus-bg);
    position: absolute;
    display: none;
    font-size: 2em;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    z-index: 200;
    border-radius: .3em;
    direction: ltr;
    cursor: pointer;
    bottom: calc(var(--border-width) * -1);
    left: calc(var(--border-width) * -1);
    transform: translateX(0) translateY(0);
}

.show-minus .minus {
    display: inline-block;
}

@media (orientation: portrait) {
    .set .minus {
        zoom: 70%;
    }
}

/* 控制栏 */
.controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 10px;
    background: var(--bg);
    border-top: 1px solid rgba(0,0,0,0.1);
    min-height: 60px;
    position: relative;
    z-index: 100;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid #666;
    border-radius: 8px;
    background: #f0f0f0;
    color: #333;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    visibility: visible;
    opacity: 1;
}

.btn:hover {
    background: #e0e0e0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.btn.sound-on {
    background: #4CAF50;
    color: white;
}

.btn.sound-off {
    background: #f0f0f0;
    color: #666;
}

/* 下拉菜单 */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--btn-bg);
    border-radius: 8px;
    padding: 5px 0;
    min-width: 150px;
    display: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 1000;
    margin-bottom: 5px;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    padding: 10px 15px;
    color: var(--btn-color);
    cursor: pointer;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: rgba(0,0,0,0.1);
}

/* 弹窗样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

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

.modal {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 30px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    color: var(--card-color);
}

.modal h2 {
    margin-bottom: 20px;
    text-align: center;
}

.modal ul {
    margin-left: 20px;
    line-height: 1.8;
}

.modal li {
    margin-bottom: 10px;
}

.modal-close {
    margin-top: 20px;
    width: 100%;
}

/* 副屏状态提示 */
.secondary-screen-info {
    position: fixed;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    display: none;
}

.secondary-screen-info.show {
    display: block;
}

/* 全屏退出按钮 */
.exit-fullscreen {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 10px 20px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: none;
    z-index: 10000;
}

:fullscreen .exit-fullscreen,
:-webkit-full-screen .exit-fullscreen {
    display: block;
}