/* 单场计分板 · 帝青试版（body.style-imperial）
   深青底、竖纹、金线弧。不改计分逻辑，也不替换奢红。 */

html:has(body.style-imperial) {
    background: #042824;
}

body.style-imperial {
    color: #f3e6c8;
    background-color: #042824;
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(243, 230, 200, 0.045) 0 1px,
            transparent 1px 8px
        ),
        radial-gradient(130% 52% at 118% 112%, transparent 46%, rgba(212, 184, 122, 0.72) 46.6%, transparent 47.4%),
        radial-gradient(150% 58% at 130% 122%, rgba(2, 28, 28, 0.2) 38%, #063832 62%, #021816 100%),
        linear-gradient(180deg, #0b524c 0%, #08423e 42%, #042e2c 100%);
    background-size: auto, 100% 100%, 100% 100%, 100% 100%;
    background-attachment: fixed;
}

html.ppq-wx-webview body.style-imperial[data-ppq-scoreboard-home] .scoreboard-top-bar {
    background: linear-gradient(to bottom, rgba(4, 36, 34, 0.92) 0%, rgba(4, 36, 34, 0) 100%);
}

body.style-imperial .left-screen,
body.style-imperial .right-screen {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: none;
    border-radius: 28px 28px 46px 28px;
    clip-path: none;
    box-shadow:
        inset 0 1px 0 rgba(243, 230, 200, 0.28),
        0 0 0 1px rgba(212, 184, 122, 0.55),
        0 14px 32px rgba(0, 0, 0, 0.4);
}

body.style-imperial .left-screen {
    background:
        repeating-linear-gradient(90deg, rgba(243, 230, 200, 0.05) 0 1px, transparent 1px 7px),
        linear-gradient(165deg, rgba(18, 110, 104, 0.88) 0%, rgba(8, 72, 68, 0.92) 100%);
    background-size: auto, 100% 100%;
}

body.style-imperial .right-screen {
    border-radius: 28px 28px 28px 46px;
    background:
        repeating-linear-gradient(90deg, rgba(243, 230, 200, 0.04) 0 1px, transparent 1px 7px),
        linear-gradient(165deg, rgba(6, 58, 56, 0.94) 0%, rgba(2, 24, 24, 0.96) 100%);
    background-size: auto, 100% 100%;
}

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

body.style-imperial .select-trigger,
body.style-imperial #trigger-left,
body.style-imperial #trigger-right {
    background: linear-gradient(180deg, rgba(8, 48, 46, 0.9) 0%, rgba(2, 22, 22, 0.94) 100%);
    border: 1px solid rgba(212, 184, 122, 0.55);
    border-radius: 16px;
    color: #f3e6c8;
    box-shadow: inset 0 1px 0 rgba(243, 230, 200, 0.16);
}

body.style-imperial .selected-values,
body.style-imperial .select-arrow {
    color: #f3e6c8;
}

body.style-imperial .select-options,
body.style-imperial > .select-options.show,
body.style-imperial #options-left.select-options.show,
body.style-imperial #options-right.select-options.show {
    background: rgba(4, 32, 30, 0.98) !important;
    color: #f3e6c8 !important;
    border: 1px solid rgba(212, 184, 122, 0.4) !important;
    border-radius: 14px !important;
}

body.style-imperial .select-option,
body.style-imperial > .select-options.show .select-option {
    color: #f3e6c8;
    border-bottom-color: rgba(243, 230, 200, 0.12);
}

body.style-imperial .box-large,
body.style-imperial .box-large.left-side,
body.style-imperial .box-large.right-side {
    background: radial-gradient(circle at 50% 40%, #0c3e3a 0%, #021816 72%);
    border: 1px solid rgba(212, 184, 122, 0.7);
    border-radius: 22px;
    box-shadow:
        inset 0 1px 0 rgba(243, 230, 200, 0.28),
        inset 0 -8px 14px rgba(0, 0, 0, 0.35);
}

body.style-imperial .box-large .score-display,
body.style-imperial .box-large .score-input,
body.style-imperial .box-large.left-side .score-display,
body.style-imperial .box-large.right-side .score-display,
body.style-imperial .box-large.left-side .score-input,
body.style-imperial .box-large.right-side .score-input {
    color: #f3e6c8 !important;
    font-family: "Bodoni MT", Didot, "Palatino Linotype", Palatino, "Songti SC", serif;
    font-weight: 600;
    text-shadow: 0 0 12px rgba(212, 184, 122, 0.35), 0 2px 6px rgba(0, 0, 0, 0.45);
}

body.style-imperial .box-large.serving {
    box-shadow:
        0 0 0 2px rgba(243, 230, 200, 0.9),
        0 0 18px rgba(212, 184, 122, 0.45),
        inset 0 1px 0 rgba(243, 230, 200, 0.28);
}

body.style-imperial .box,
body.style-imperial .box.left-side,
body.style-imperial .box.right-side {
    background: linear-gradient(180deg, rgba(10, 56, 52, 0.92) 0%, rgba(2, 22, 22, 0.96) 100%);
    border: 1px solid rgba(212, 184, 122, 0.45);
    border-radius: 14px;
    color: #f3e6c8;
}

body.style-imperial .circle,
body.style-imperial .circle.left-side,
body.style-imperial .circle.right-side {
    border-radius: 16px;
    background: linear-gradient(160deg, #f6ead0 0%, #c4a574 48%, #8c7355 100%);
    border: 1px solid rgba(255, 236, 210, 0.55);
    color: #12302c;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 14px rgba(0, 0, 0, 0.28);
}

body.style-imperial .scoreboard-bottom-dock {
    border-radius: 28px 28px 22px 22px;
    border: 1px solid rgba(212, 184, 122, 0.42);
    background:
        repeating-linear-gradient(90deg, rgba(243, 230, 200, 0.04) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, rgba(8, 62, 58, 0.94) 0%, rgba(2, 22, 22, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(243, 230, 200, 0.2), 0 16px 36px rgba(0, 0, 0, 0.4);
}

body.style-imperial .scoreboard-dock-meta,
body.style-imperial .bottom-dock-dots-row {
    border-bottom-color: rgba(212, 184, 122, 0.2);
}

body.style-imperial .scoreboard-dock-title,
body.style-imperial .scoreboard-dock-format {
    color: #f3e6c8;
}

body.style-imperial .scoreboard-dock-timer .info-value,
body.style-imperial .scoreboard-top-bar .scoreboard-header-timer .info-value {
    background: rgba(2, 22, 22, 0.72);
    border: 1px solid rgba(212, 184, 122, 0.4);
    color: #f3e6c8;
    font-family: "Bodoni MT", Didot, "Palatino Linotype", Palatino, serif;
}

body.style-imperial .game-dot {
    background: transparent;
    border: 1.5px solid rgba(212, 184, 122, 0.5);
}

body.style-imperial .game-dot.active {
    background: radial-gradient(circle at 35% 30%, #f6ead0 0%, #c4a574 70%);
    border-color: #f3e6c8;
    animation: none;
}

body.style-imperial #start-match-btn.dock-primary-btn {
    background: linear-gradient(180deg, #0e6a62 0%, #063832 100%) !important;
    color: #f3e6c8 !important;
    border: 1px solid rgba(212, 184, 122, 0.65) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(243, 230, 200, 0.22) !important;
}

body.style-imperial #undo-btn.dock-warn-btn,
body.style-imperial #cancel-btn.dock-neutral-btn {
    background: rgba(243, 230, 200, 0.08) !important;
    color: #f3e6c8 !important;
    border: 1px solid rgba(212, 184, 122, 0.28) !important;
    border-radius: 16px !important;
}

body.style-imperial #confirm-game-btn,
body.style-imperial .new-match-main-btn,
body.style-imperial .continue-match-main-btn {
    background: linear-gradient(180deg, #f3e6c8 0%, #c4a574 100%);
    color: #12302c;
    border-radius: 16px;
}

body.style-imperial .scoreboard-format-btn,
body.style-imperial .scoreboard-share-btn,
body.style-imperial .scoreboard-settings-btn {
    background: linear-gradient(180deg, rgba(8, 56, 52, 0.9) 0%, rgba(2, 22, 22, 0.94) 100%);
    border: 1px solid rgba(212, 184, 122, 0.4);
    color: #f3e6c8;
}

body.style-imperial .bottom-nav {
    background: linear-gradient(180deg, rgba(6, 42, 40, 0.92) 0%, rgba(2, 16, 16, 0.96) 100%);
    border-top: 1px solid rgba(212, 184, 122, 0.32);
}

body.style-imperial .nav-item {
    color: rgba(243, 230, 200, 0.78);
}

body.style-imperial .scoreboard-settings-panel {
    background: linear-gradient(180deg, rgba(8, 52, 48, 0.98) 0%, rgba(2, 22, 22, 0.98) 100%);
    color: #f3e6c8;
    border-left: 1px solid rgba(212, 184, 122, 0.35);
}

body.style-imperial .scoreboard-settings-header h2,
body.style-imperial .settings-field-label,
body.style-imperial .settings-inline-label {
    color: #f3e6c8;
}

body.style-imperial .settings-player-hint {
    color: rgba(243, 230, 200, 0.72);
}

body.style-imperial .style-toggle-btn {
    background: linear-gradient(160deg, #0e6a62 0%, #063430 100%);
    border: 1px solid rgba(212, 184, 122, 0.45);
    color: #f3e6c8;
}

body.style-imperial .voice-toggle-btn,
body.style-imperial .speech-mode-btn,
body.style-imperial .voice-preview-btn {
    background: rgba(243, 230, 200, 0.08);
    color: #f3e6c8;
    border: 1px solid rgba(212, 184, 122, 0.28);
}

body.style-imperial #match-format.settings-match-format-select,
body.style-imperial .settings-field-row {
    background: rgba(2, 22, 22, 0.55);
    border-color: rgba(212, 184, 122, 0.35);
    color: #f3e6c8;
}

body.style-imperial .tc-dialog {
    background: linear-gradient(180deg, rgba(8, 52, 48, 0.98), rgba(2, 22, 22, 0.98));
    border: 1px solid rgba(212, 184, 122, 0.4);
    color: #f3e6c8;
    border-radius: 20px;
}

body.style-imperial .tc-dialog-ft .tc-primary {
    background: linear-gradient(180deg, #f3e6c8 0%, #c4a574 100%);
    color: #12302c;
}