/* 单场计分板 · 奢红第一版（body.style-luxury）
   黑皮纹 + 斜向赤铜块 + 香槟金描边。不改计分逻辑。 */

html:has(body.style-luxury) {
    background: #120e0c;
}

body.style-luxury {
    --lux-gold: #e4d2b8;
    --lux-gold-deep: #a68b67;
    --lux-bronze: #8c7355;
    color: #f7f1e8;
    background-color: #120e0c;
    background-image:
        radial-gradient(rgba(255, 220, 180, 0.09) 0.55px, transparent 0.7px),
        radial-gradient(rgba(0, 0, 0, 0.45) 0.7px, transparent 0.85px),
        linear-gradient(
            148deg,
            #141210 0%,
            #1c1816 32%,
            #1a1614 46%,
            #4a251d 46.35%,
            #5d2e24 68%,
            #3d221c 100%
        );
    background-size: 4px 4px, 7px 7px, 100% 100%;
    background-attachment: fixed;
}

html.ppq-wx-webview body.style-luxury[data-ppq-scoreboard-home] .scoreboard-top-bar {
    background: linear-gradient(
        to bottom,
        rgba(18, 12, 10, 0.94) 0%,
        rgba(18, 12, 10, 0.55) 72%,
        rgba(18, 12, 10, 0) 100%
    );
}

body.style-luxury .left-screen,
body.style-luxury .right-screen {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: none;
    border-radius: 26px;
    clip-path: none;
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    box-shadow:
        inset 0 1px 0 rgba(228, 210, 184, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(166, 139, 103, 0.55),
        0 14px 36px rgba(0, 0, 0, 0.48);
}

body.style-luxury .left-screen {
    background:
        radial-gradient(rgba(255, 220, 180, 0.08) 0.5px, transparent 0.7px),
        linear-gradient(165deg, rgba(93, 46, 36, 0.78) 0%, rgba(48, 24, 20, 0.86) 48%, rgba(28, 14, 12, 0.9) 100%);
    background-size: 5px 5px, 100% 100%;
}

body.style-luxury .right-screen {
    background:
        radial-gradient(rgba(255, 255, 255, 0.06) 0.5px, transparent 0.7px),
        linear-gradient(165deg, rgba(32, 28, 26, 0.82) 0%, rgba(14, 12, 11, 0.9) 100%);
    background-size: 5px 5px, 100% 100%;
}

body.style-luxury .left-screen:has(.select-options.show),
body.style-luxury .right-screen:has(.select-options.show),
body.style-luxury .left-screen.sb-select-open,
body.style-luxury .right-screen.sb-select-open {
    overflow: visible !important;
    z-index: 40;
}

body.style-luxury .select-trigger,
body.style-luxury #trigger-left,
body.style-luxury #trigger-right {
    background: linear-gradient(180deg, rgba(36, 28, 24, 0.88) 0%, rgba(16, 12, 10, 0.94) 100%);
    border: 1px solid rgba(196, 165, 116, 0.55);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(228, 210, 184, 0.2), 0 4px 14px rgba(0, 0, 0, 0.32);
    color: #f7f1e8;
}

body.style-luxury .selected-values,
body.style-luxury .select-arrow {
    color: #f7f1e8;
}

body.style-luxury .select-options,
body.style-luxury > .select-options.show,
body.style-luxury #options-left.select-options.show,
body.style-luxury #options-right.select-options.show {
    background: rgba(22, 16, 14, 0.98) !important;
    color: #f7f1e8 !important;
    border: 1px solid rgba(196, 165, 116, 0.45) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
    border-radius: 14px !important;
}

body.style-luxury .select-option,
body.style-luxury > .select-options.show .select-option {
    color: #f7f1e8;
    border-bottom-color: rgba(228, 210, 184, 0.12);
}

body.style-luxury .select-option:hover,
body.style-luxury > .select-options.show .select-option:hover {
    background: rgba(166, 139, 103, 0.22);
}

body.style-luxury .box-large,
body.style-luxury .box-large.left-side,
body.style-luxury .box-large.right-side {
    background:
        radial-gradient(circle at 50% 42%, rgba(40, 32, 28, 0.2) 0%, rgba(8, 6, 5, 0.55) 72%),
        linear-gradient(165deg, #2a221c 0%, #120e0c 100%);
    border: 1px solid rgba(228, 210, 184, 0.62);
    border-radius: 22px;
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 210, 0.28),
        inset 0 -8px 16px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(90, 62, 40, 0.65),
        0 8px 22px rgba(0, 0, 0, 0.4);
}

body.style-luxury .box-large .score-display,
body.style-luxury .box-large .score-input,
body.style-luxury .box-large.left-side .score-display,
body.style-luxury .box-large.right-side .score-display,
body.style-luxury .box-large.left-side .score-input,
body.style-luxury .box-large.right-side .score-input {
    color: #e4d2b8 !important;
    font-family: "Bodoni MT", Didot, "Palatino Linotype", Palatino, "Songti SC", serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: 0 0 14px rgba(228, 210, 184, 0.45), 0 2px 6px rgba(0, 0, 0, 0.55);
}

body.style-luxury .box-large.serving {
    box-shadow:
        0 0 0 2px rgba(228, 210, 184, 0.95),
        0 0 22px rgba(196, 165, 116, 0.55),
        inset 0 1px 0 rgba(255, 236, 210, 0.3);
}

body.style-luxury .box,
body.style-luxury .box.left-side,
body.style-luxury .box.right-side {
    background: linear-gradient(180deg, rgba(42, 32, 28, 0.92) 0%, rgba(16, 12, 10, 0.96) 100%);
    border: 1px solid rgba(166, 139, 103, 0.5);
    border-radius: 14px;
    color: #e4d2b8;
    box-shadow: inset 0 1px 0 rgba(228, 210, 184, 0.16);
}

body.style-luxury .circle,
body.style-luxury .circle.left-side,
body.style-luxury .circle.right-side {
    width: 56.7px;
    height: 56.7px;
    border-radius: 16px;
    background: linear-gradient(160deg, #f3e6d0 0%, #c4a574 46%, #8c7355 100%);
    border: 1px solid rgba(255, 236, 210, 0.55);
    color: #2a1814;
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 0 16px rgba(228, 210, 184, 0.28),
        0 6px 16px rgba(0, 0, 0, 0.35);
}

body.style-luxury .circle:hover {
    background: linear-gradient(160deg, #fff6e8 0%, #d4b88a 50%, #a68b67 100%);
    color: #2a1814;
}

body.style-luxury .scoreboard-bottom-dock {
    border-radius: 26px;
    border: 1px solid rgba(166, 139, 103, 0.42);
    background:
        radial-gradient(rgba(255, 220, 180, 0.05) 0.5px, transparent 0.7px),
        linear-gradient(180deg, rgba(36, 28, 24, 0.9) 0%, rgba(14, 10, 9, 0.94) 100%);
    background-size: 5px 5px, 100% 100%;
    box-shadow:
        inset 0 1px 0 rgba(228, 210, 184, 0.18),
        0 16px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.style-luxury .scoreboard-dock-meta,
body.style-luxury .bottom-dock-dots-row {
    border-bottom-color: rgba(228, 210, 184, 0.16);
}

body.style-luxury .scoreboard-dock-title {
    color: #f7f1e8;
    letter-spacing: 0.08em;
    font-weight: 500;
    text-shadow: none;
}

body.style-luxury .scoreboard-dock-format {
    color: #e4d2b8;
}

body.style-luxury .scoreboard-dock-timer .info-value,
body.style-luxury .scoreboard-top-bar .scoreboard-header-timer .info-value {
    background: linear-gradient(180deg, rgba(42, 32, 28, 0.9) 0%, rgba(16, 12, 10, 0.94) 100%);
    border: 1px solid rgba(166, 139, 103, 0.45);
    color: #e4d2b8;
    font-family: "Bodoni MT", Didot, "Palatino Linotype", Palatino, serif;
    box-shadow: inset 0 1px 0 rgba(228, 210, 184, 0.16);
}

body.style-luxury .game-dot {
    background: transparent;
    border: 1.5px solid rgba(196, 165, 116, 0.55);
    box-shadow: none;
}

body.style-luxury .game-dot.active {
    background: radial-gradient(circle at 35% 30%, #f3e6d0 0%, #c4a574 70%);
    border-color: #e4d2b8;
    box-shadow: 0 0 12px rgba(228, 210, 184, 0.65);
    animation: none;
}

body.style-luxury .game-dot.completed.winner-left,
body.style-luxury .game-dot.completed.winner-right {
    background: #8c7355;
    border-color: #e4d2b8;
}

body.style-luxury #start-match-btn.dock-primary-btn {
    background: linear-gradient(180deg, #3a2c28 0%, #241816 100%) !important;
    color: #f7f1e8 !important;
    border: 1px solid rgba(228, 210, 184, 0.55) !important;
    border-radius: 16px !important;
    box-shadow:
        inset 0 1px 0 rgba(228, 210, 184, 0.22),
        0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

body.style-luxury #undo-btn.dock-warn-btn,
body.style-luxury #cancel-btn.dock-neutral-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f7f1e8 !important;
    border: 1px solid rgba(228, 210, 184, 0.28) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

body.style-luxury #confirm-game-btn,
body.style-luxury .new-match-main-btn,
body.style-luxury .continue-match-main-btn {
    background: linear-gradient(180deg, #e4d2b8 0%, #a68b67 100%);
    color: #2a1814;
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

body.style-luxury .scoreboard-format-btn,
body.style-luxury .scoreboard-share-btn,
body.style-luxury .scoreboard-layout-btn,
body.style-luxury .scoreboard-settings-btn {
    background: linear-gradient(180deg, rgba(42, 32, 28, 0.88) 0%, rgba(16, 12, 10, 0.92) 100%);
    border: 1px solid rgba(196, 165, 116, 0.45);
    color: #f7f1e8;
    box-shadow: inset 0 1px 0 rgba(228, 210, 184, 0.16), 0 4px 12px rgba(0, 0, 0, 0.28);
}

body.style-luxury .bottom-nav {
    background: linear-gradient(180deg, rgba(28, 20, 18, 0.9) 0%, rgba(12, 8, 7, 0.96) 100%);
    border-top: 1px solid rgba(166, 139, 103, 0.35);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.4);
}

body.style-luxury .nav-item {
    color: rgba(247, 241, 232, 0.78);
}

body.style-luxury .nav-item:hover,
body.style-luxury .nav-item.active {
    background-color: rgba(166, 139, 103, 0.16);
    color: #e4d2b8;
}

body.style-luxury .scoreboard-settings-panel {
    background:
        radial-gradient(rgba(255, 220, 180, 0.05) 0.5px, transparent 0.7px),
        linear-gradient(180deg, rgba(36, 26, 22, 0.98) 0%, rgba(16, 12, 10, 0.98) 100%);
    background-size: 5px 5px, 100% 100%;
    color: #f7f1e8;
    border-left: 1px solid rgba(166, 139, 103, 0.4);
}

body.style-luxury .scoreboard-settings-header {
    border-bottom-color: rgba(228, 210, 184, 0.16);
}

body.style-luxury .scoreboard-settings-header h2,
body.style-luxury .settings-field-label,
body.style-luxury .settings-inline-label,
body.style-luxury .settings-player-hint {
    color: #f7f1e8;
}

body.style-luxury .settings-player-hint {
    color: rgba(228, 210, 184, 0.78);
}

body.style-luxury .scoreboard-settings-close {
    background: rgba(255, 255, 255, 0.08);
    color: #f7f1e8;
}

body.style-luxury .settings-field-row {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(166, 139, 103, 0.35);
}

body.style-luxury #match-format.settings-match-format-select {
    background: rgba(16, 12, 10, 0.85);
    border-color: rgba(166, 139, 103, 0.45);
    color: #f7f1e8;
}

body.style-luxury .style-toggle-btn {
    background: linear-gradient(160deg, #5d2e24 0%, #3a221c 100%);
    border: 1px solid rgba(228, 210, 184, 0.45);
    box-shadow: inset 0 1px 0 rgba(228, 210, 184, 0.2);
}

body.style-luxury .voice-toggle-btn,
body.style-luxury .speech-mode-btn,
body.style-luxury .voice-preview-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #f7f1e8;
    border: 1px solid rgba(228, 210, 184, 0.28);
    box-shadow: none;
}

body.style-luxury .tc-dialog {
    background: linear-gradient(180deg, rgba(42, 30, 26, 0.98), rgba(18, 12, 10, 0.98));
    border: 1px solid rgba(166, 139, 103, 0.45);
    color: #f7f1e8;
    border-radius: 20px;
}

body.style-luxury .tc-dialog select,
body.style-luxury .tc-dialog input[type="search"],
body.style-luxury .tc-dialog input[type="number"],
body.style-luxury .tc-search-pick,
body.style-luxury .tc-roster-slot {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(166, 139, 103, 0.4);
    color: #f7f1e8;
}

body.style-luxury .tc-dialog select option,
body.style-luxury .tc-dialog select optgroup {
    background: #1c1412;
    color: #f7f1e8;
}

body.style-luxury .tc-dialog-ft .tc-primary {
    background: linear-gradient(180deg, #e4d2b8 0%, #a68b67 100%);
    color: #2a1814;
}

body.style-luxury .game-score-item {
    background: rgba(20, 14, 12, 0.72);
    border-color: rgba(166, 139, 103, 0.4);
    color: #f7f1e8;
}

body.style-luxury .game-score-item.current {
    background: rgba(93, 46, 36, 0.72);
    border-color: rgba(228, 210, 184, 0.55);
}

body.style-luxury .game-score-item.game-score-item-pending {
    background: rgba(166, 139, 103, 0.16);
    border-color: rgba(228, 210, 184, 0.45);
}