/* Electron score_BP observer stage. Normal browser, judge and offline selectors never match. */

@font-face {
    font-family: "Source Han Sans SC";
    src: url("../../fonts/electron-broadcast/files/SourceHanSansSC-VF.otf.woff2") format("woff2");
    font-style: normal;
    font-weight: 250 900;
    font-display: swap;
}

@font-face {
    font-family: "Source Han Serif SC";
    src: url("../../fonts/electron-broadcast/files/SourceHanSerifSC-VF.otf.woff2") format("woff2");
    font-style: normal;
    font-weight: 250 900;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("../../fonts/electron-broadcast/files/BarlowCondensed-SemiBold-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("../../fonts/electron-broadcast/files/BarlowCondensed-Bold-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Archivo Black";
    src: url("../../fonts/electron-broadcast/files/ArchivoBlack-Regular-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

html.bp-observer-stage-root {
    width: 100%;
    height: 100%;
    min-height: 0;
    background: transparent;
}

body.bp-observer-stage-ready {
    --bp-stage-font-serif: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", serif;
    --bp-stage-font-sans: "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", sans-serif;
    --bp-stage-font-numeric: "Barlow Condensed", "Arial Narrow", var(--bp-stage-font-sans);
    --bp-stage-font-impact: "Archivo Black", var(--bp-stage-font-sans);
    --bp-stage-ink: #020508;
    --bp-stage-ivory: #f1ecdf;
    --bp-stage-muted: #9ca9b6;
    --bp-stage-gold: #d6b76c;
    --bp-stage-gold-bright: #f0d994;
    --bp-stage-blue: #69afd9;
    --bp-stage-blue-bright: #b4e3fb;
    --bp-stage-role-size: clamp(64px, min(5vw, 9.2vh), 96px);
    --bp-stage-pick-size: clamp(54px, min(4.5vw, 8.2vh), 86px);
    --bp-stage-pool-size: var(--bp-stage-role-size);
    --bp-stage-gap: clamp(4px, 0.42vw, 8px);
    --bp-stage-side-inset: 2.4%;
    --bp-pool-columns: 12;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--bp-stage-ivory);
    background: transparent;
    font-family: var(--bp-stage-font-sans);
    font-weight: 500;
    font-synthesis: none;
}

body.bp-observer-stage-ready:not(.bp-observer-stage-fonts-ready):not(.bp-observer-stage-fonts-fallback) .bp-area {
    visibility: hidden;
}

body.bp-observer-stage-ready *,
body.bp-observer-stage-ready *::before,
body.bp-observer-stage-ready *::after {
    box-sizing: border-box;
}

body.bp-observer-stage-ready > .container,
body.bp-observer-stage-ready.bp-observer-stage-g > .container {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
}

/* The legacy A/S themes paint their outer container; clear it only on the
   dedicated Electron OB stage so the shared glass layer can see score_BP. */
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) > .container {
    background: transparent;
}

body.bp-observer-stage-ready .bp-area {
    isolation: isolate;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgb(173 191 207 / 0.14);
    border-radius: 0;
    background:
        linear-gradient(90deg, rgb(214 183 108 / 0.035), transparent 24%, transparent 76%, rgb(105 175 217 / 0.04)),
        linear-gradient(180deg, rgb(1 5 9 / 0.72), rgb(3 8 14 / 0.86));
    box-shadow: inset 0 0 70px rgb(0 0 0 / 0.2);
}

/* A/S/G Electron OB: let the score_BP stage remain visible below the approved
   dark broadcast veil. */
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-area {
    background: rgb(4 11 18 / 0.32);
    -webkit-backdrop-filter: blur(5px) saturate(0.82);
    backdrop-filter: blur(5px) saturate(0.82);
}

body.bp-observer-stage-ready.bp-observer-stage-empty:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-area {
    background: rgb(4 11 18 / 0.32);
}

body.bp-observer-stage-ready .bp-area::before,
body.bp-observer-stage-ready .bp-area::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

body.bp-observer-stage-ready .bp-area::before {
    inset: 0;
    background:
        radial-gradient(ellipse at 7% 12%, rgb(214 183 108 / 0.09), transparent 28%),
        radial-gradient(ellipse at 93% 14%, rgb(67 144 196 / 0.11), transparent 30%);
}

body.bp-observer-stage-ready .bp-area::after {
    inset: 1.2%;
    background:
        linear-gradient(90deg, var(--bp-stage-gold), transparent 14%) 0 0 / 28% 1px no-repeat,
        linear-gradient(270deg, var(--bp-stage-blue), transparent 14%) 100% 0 / 28% 1px no-repeat,
        linear-gradient(90deg, rgb(214 183 108 / 0.38), transparent 18%) 0 100% / 22% 1px no-repeat,
        linear-gradient(270deg, rgb(105 175 217 / 0.38), transparent 18%) 100% 100% / 22% 1px no-repeat;
    opacity: 0.72;
}

body.bp-observer-stage-ready .online-role-gate,
body.bp-observer-stage-ready .online-bp-panel,
body.bp-observer-stage-ready .player-names,
body.bp-observer-stage-ready .display-pick-btn-container,
body.bp-observer-stage-ready .character-pool-header,
body.bp-observer-stage-ready .timer-options,
body.bp-observer-stage-ready .timer-reset,
body.bp-observer-stage-ready #reset-timer,
body.bp-observer-stage-ready .generate-btn-container,
body.bp-observer-stage-ready .home-btn,
body.bp-observer-stage-ready .copyright {
    display: none !important;
}

body.bp-observer-stage-ready .observer-info-bar {
    position: absolute;
    z-index: 4;
    top: 4.2%;
    right: 2.4%;
    left: 2.4%;
    display: flex !important;
    min-height: clamp(60px, 7.2vh, 74px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--bp-stage-ivory);
}

body.bp-observer-stage-ready .observer-info-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 25%) minmax(0, 1fr);
    align-items: stretch;
    gap: 2.5%;
    width: 100%;
}

body.bp-observer-stage-ready .observer-player {
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: clamp(60px, 7.2vh, 74px);
    padding: clamp(9px, 0.75vw, 14px) clamp(14px, 1.15vw, 22px);
    border: 0;
    border-bottom: 1px solid rgb(214 183 108 / 0.46);
    border-radius: 0;
    background: linear-gradient(90deg, rgb(214 183 108 / 0.12), rgb(8 19 30 / 0.52) 62%, transparent);
    clip-path: polygon(0 0, 97% 0, 100% 100%, 0 100%);
}

body.bp-observer-stage-ready #observer-player2-box {
    text-align: right;
    border-bottom-color: rgb(105 175 217 / 0.5);
    background: linear-gradient(270deg, rgb(105 175 217 / 0.13), rgb(8 19 30 / 0.52) 62%, transparent);
    clip-path: polygon(3% 0, 100% 0, 100% 100%, 0 100%);
}

body.bp-observer-stage-ready .observer-player-line {
    color: var(--bp-stage-muted);
    font-size: clamp(12px, 0.86vw, 17px);
    font-weight: 700;
    letter-spacing: 0.08em;
}

body.bp-observer-stage-ready .observer-name {
    color: var(--bp-stage-gold-bright);
    margin-top: clamp(5px, 0.45vw, 9px);
    margin-bottom: -0.2em;
    padding-bottom: 0.2em;
    font-size: clamp(18px, 1.45vw, 28px);
    font-weight: 700;
    line-height: 1.15;
    text-shadow: 0 3px 18px rgb(0 0 0 / 0.75);
}

body.bp-observer-stage-ready #observer-player2-name {
    color: var(--bp-stage-blue-bright);
}

body.bp-observer-stage-ready .observer-meta {
    display: grid;
    align-content: center;
    justify-items: center;
    min-width: 0;
    padding: 5px 10px;
    border: 0;
    background: linear-gradient(90deg, transparent, rgb(8 19 31 / 0.78) 20% 80%, transparent);
    text-align: center;
}

body.bp-observer-stage-ready.bp-observer-stage-meta-v2 #observer-info-summary,
body.bp-observer-stage-ready.bp-observer-stage-meta-v2 #observer-info-detail {
    display: none;
}

body.bp-observer-stage-ready .bp-observer-meta-layout {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, auto));
    align-content: center;
    width: 100%;
    min-width: 0;
    row-gap: clamp(3px, 0.35vh, 5px);
}

body.bp-observer-stage-ready .bp-observer-meta-row {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    color: var(--bp-stage-muted);
    font-size: clamp(11px, 0.76vw, 15px);
    font-weight: 600;
    line-height: 1.12;
    white-space: nowrap;
}

body.bp-observer-stage-ready .bp-observer-meta-row > span {
    position: relative;
    left: 50%;
    display: block;
    width: max-content;
    margin: 0;
    transform: translateX(-50%);
}

body.bp-observer-stage-ready .bp-observer-meta-phase {
    color: var(--bp-stage-ivory);
    font-size: clamp(15px, 1.08vw, 21px);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: 0.045em;
}

body.bp-observer-stage-ready .bp-observer-meta-current {
    color: rgb(216 222 226 / 0.88);
    font-size: clamp(13px, 0.88vw, 17px);
    line-height: 1.28;
}

body.bp-observer-stage-ready .bp-observer-meta-row.is-overflowing > span {
    animation: bp-observer-meta-shuttle var(--bp-meta-duration, 8s) ease-in-out infinite;
}

@keyframes bp-observer-meta-shuttle {
    0%, 18% {
        transform: translateX(-50%);
    }
    32%, 42% {
        transform: translateX(calc(-50% - var(--bp-meta-travel, 8px)));
    }
    50%, 60% {
        transform: translateX(-50%);
    }
    74%, 84% {
        transform: translateX(calc(-50% + var(--bp-meta-travel, 8px)));
    }
    100% {
        transform: translateX(-50%);
    }
}

body.bp-observer-stage-ready #observer-info-summary {
    color: var(--bp-stage-ivory);
    font-size: clamp(14px, 1vw, 19px);
    letter-spacing: 0.06em;
}

body.bp-observer-stage-ready #observer-info-detail {
    max-width: 100%;
    overflow: hidden;
    color: var(--bp-stage-muted);
    font-size: clamp(12px, 0.82vw, 16px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.bp-observer-stage-ready .ban-area {
    position: absolute;
    z-index: 3;
    inset: 0;
    margin: 0;
    pointer-events: none;
}

body.bp-observer-stage-ready .ban-slots {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    margin: 0;
    padding: 0;
}

body.bp-observer-stage-ready .player-ban {
    position: absolute;
    top: 14.3%;
    width: auto;
    min-width: 0;
}

body.bp-observer-stage-ready .player1-ban { left: var(--bp-stage-side-inset); }
body.bp-observer-stage-ready .player2-ban { right: var(--bp-stage-side-inset); }

/* A/G legacy DOM names both wrappers `.player-ban`; keep the existing DOM and
   recover the canonical left/right placement by structural position. */
body.bp-observer-stage-ready:is(.bp-observer-stage-a, .bp-observer-stage-g) .ban-slots > .player-ban:first-child {
    left: var(--bp-stage-side-inset);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-a, .bp-observer-stage-g) .ban-slots > .player-ban:last-child {
    right: var(--bp-stage-side-inset);
}

body.bp-observer-stage-ready.bp-observer-stage-s .player-ban {
    width: auto;
}

body.bp-observer-stage-ready .ban-title,
body.bp-observer-stage-ready .pick-title {
    margin: 0 0 7px;
    color: var(--bp-stage-gold-bright);
    font-size: clamp(14px, 0.95vw, 17px);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: left;
}

body.bp-observer-stage-ready .player-ban:last-child .ban-title,
body.bp-observer-stage-ready .pick-right .pick-title {
    color: var(--bp-stage-blue-bright);
    text-align: right;
}

body.bp-observer-stage-ready .ban-slot-group {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--bp-stage-gap);
    width: 100%;
    margin: 0;
}

body.bp-observer-stage-ready #player2-ban-group {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

body.bp-observer-stage-ready .public-select {
    position: absolute;
    z-index: 6;
    top: 32%;
    left: 50%;
    display: block;
    width: 19.8%;
    min-width: calc(var(--bp-stage-role-size) * 2 + 90px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .public-select {
    top: 30.2%;
}

/* A no-public match marks both preserved public slots as X. Hide that empty
   group only on the explicit S observer stage; ordinary pages keep it. */
body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode
    .public-select:has(.slot[data-original-index="PSA"][data-index="X"]):has(.slot[data-original-index="PSB"][data-index="X"]) {
    display: none !important;
}

body.bp-observer-stage-ready .public-select::before {
    content: "本局公选";
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--bp-stage-ivory);
    font-size: clamp(14px, 1.08vw, 21px);
    font-weight: 700;
    letter-spacing: 0.14em;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgb(0 0 0 / 0.88), 0 0 16px rgb(214 183 108 / 0.12);
}

body.bp-observer-stage-ready .public-slot-group {
    display: grid;
    grid-template-columns: var(--bp-stage-role-size) minmax(90px, 1fr) var(--bp-stage-role-size);
    align-items: center;
    width: 100%;
    gap: 0;
}

body.bp-observer-stage-ready .public-slot-wrapper {
    width: var(--bp-stage-role-size);
    height: var(--bp-stage-role-size);
}

body.bp-observer-stage-ready .public-slot-wrapper:first-child { grid-column: 1; }
body.bp-observer-stage-ready .public-slot-wrapper:last-child { grid-column: 3; }

body.bp-observer-stage-ready .public-slot-wrapper .slot {
    width: 100%;
    height: 100%;
}

body.bp-observer-stage-ready .slot {
    flex: 0 0 var(--bp-stage-role-size);
    width: var(--bp-stage-role-size);
    height: var(--bp-stage-role-size);
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgb(173 191 207 / 0.32) !important;
    border-radius: 0 !important;
    background: rgb(22 30 38 / 0.76) !important;
    box-shadow: inset 0 0 24px rgb(0 0 0 / 0.28), 0 6px 20px rgb(0 0 0 / 0.18) !important;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

body.bp-observer-stage-ready .slot[data-player="1"] {
    border-color: rgb(214 183 108 / 0.54) !important;
    background: linear-gradient(135deg, rgb(214 183 108 / 0.14), rgb(22 30 38 / 0.82) 48%) !important;
}

body.bp-observer-stage-ready .slot[data-player="2"] {
    border-color: rgb(105 175 217 / 0.58) !important;
    background: linear-gradient(225deg, rgb(105 175 217 / 0.16), rgb(22 30 38 / 0.82) 48%) !important;
}

body.bp-observer-stage-ready .slot[data-type="public"],
body.bp-observer-stage-ready .slot[data-index="PSA"],
body.bp-observer-stage-ready .slot[data-index="PSB"] {
    border-color: rgb(215 222 226 / 0.52) !important;
    background: linear-gradient(145deg, rgb(221 226 225 / 0.16), rgb(46 57 66 / 0.76)) !important;
}

body.bp-observer-stage-ready .slot img,
body.bp-observer-stage-ready .slot > img,
body.bp-observer-stage-ready .slot .character-card,
body.bp-observer-stage-ready .slot .character-card img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    object-fit: cover;
}

body.bp-observer-stage-ready .slot.empty::after,
body.bp-observer-stage-ready .slot[data-index="X"]::after {
    color: rgb(241 236 223 / 0.34);
    font-size: clamp(17px, 1.35vw, 24px);
    text-shadow: 0 2px 8px #000;
}

body.bp-observer-stage-ready .slot-highlight {
    --bp-next-rgb: 228 190 91;
    z-index: 3;
    border-color: rgb(var(--bp-next-rgb) / 0.94) !important;
    background:
        radial-gradient(circle at 50% 50%, rgb(var(--bp-next-rgb) / 0.16), transparent 67%),
        linear-gradient(145deg, rgb(var(--bp-next-rgb) / 0.1), rgb(6 13 22 / 0.7)) !important;
    box-shadow:
        0 0 0 1px rgb(var(--bp-next-rgb) / 0.22),
        0 0 18px rgb(var(--bp-next-rgb) / 0.28),
        inset 0 0 20px rgb(var(--bp-next-rgb) / 0.13) !important;
    animation: none !important;
}

body.bp-observer-stage-ready[data-bp-active-player="player2"] .slot-highlight {
    --bp-next-rgb: 105 175 217;
}

body.bp-observer-stage-ready #player2-ban-group .slot-highlight,
body.bp-observer-stage-ready .pick-right .slot-highlight {
    --bp-next-rgb: 105 175 217;
}

body.bp-observer-stage-ready .slot-highlight::before {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    box-sizing: border-box;
    border: 1px solid rgb(var(--bp-next-rgb) / 0.94);
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgb(var(--bp-next-rgb) / 0.96), transparent) -90% 0 / 62% 2px no-repeat,
        linear-gradient(90deg, transparent, rgb(var(--bp-next-rgb) / 0.72), transparent) 190% 100% / 62% 2px no-repeat;
    filter: drop-shadow(0 0 4px rgb(var(--bp-next-rgb) / 0.72));
    animation: bp-stage-slot-breathe 1.3s ease-in-out infinite, bp-stage-slot-trace 1.3s ease-in-out infinite;
}

@keyframes bp-stage-slot-breathe {
    0%, 100% {
        border-color: rgb(var(--bp-next-rgb) / 0.56);
        box-shadow: 0 0 0 1px rgb(var(--bp-next-rgb) / 0.1), 0 0 8px rgb(var(--bp-next-rgb) / 0.12), inset 0 0 14px rgb(var(--bp-next-rgb) / 0.07);
    }
    50% {
        border-color: rgb(var(--bp-next-rgb) / 1);
        box-shadow: 0 0 0 1px rgb(var(--bp-next-rgb) / 0.28), 0 0 23px rgb(var(--bp-next-rgb) / 0.38), inset 0 0 24px rgb(var(--bp-next-rgb) / 0.18);
    }
}

@keyframes bp-stage-slot-trace {
    0%, 10% { background-position: -90% 0, 190% 100%; opacity: 0.45; }
    50% { opacity: 1; }
    90%, 100% { background-position: 190% 0, -90% 100%; opacity: 0.45; }
}

body.bp-observer-stage-ready .timer-container {
    position: absolute;
    z-index: 5;
    top: var(--bp-stage-ban-center-y, 14.3%);
    left: 50%;
    display: grid;
    place-items: center;
    width: clamp(150px, 12vw, 210px);
    min-height: 72px;
    padding: 8px 20px;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, rgb(5 13 22 / 0.88) 20% 80%, transparent);
    box-shadow: none;
    pointer-events: none;
}

body.bp-observer-stage-ready .timer-display,
body.bp-observer-stage-ready .compact-timer-display {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--bp-stage-ivory) !important;
    font-family: var(--bp-stage-font-numeric);
    font-size: clamp(28px, 2.6vw, 50px);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-shadow: 0 0 24px rgb(214 183 108 / 0.17), 0 4px 15px #000;
    transform: none !important;
}

body.bp-observer-stage-ready .timer-display.timer-warning,
body.bp-observer-stage-ready .timer-display.timer-ended,
body.bp-observer-stage-ready .compact-timer-display.timer-warning,
body.bp-observer-stage-ready .compact-timer-display.timer-ended {
    color: #e48585 !important;
}

body.bp-observer-stage-ready .pick-area {
    position: absolute;
    z-index: 2;
    display: grid;
    grid-template-columns:
        calc(var(--bp-stage-role-size) * 2 + var(--bp-stage-gap))
        minmax(0, 1fr)
        calc(var(--bp-stage-role-size) * 2 + var(--bp-stage-gap));
    gap: clamp(10px, 1.2vw, 20px);
    top: 30.5%;
    right: 0;
    bottom: 4.8%;
    left: 0;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 var(--bp-stage-side-inset);
    overflow: hidden;
}

body.bp-observer-stage-ready .pick-left,
body.bp-observer-stage-ready .pick-right,
body.bp-observer-stage-ready .pick-column {
    display: block;
    visibility: visible;
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

body.bp-observer-stage-ready .pick-right { grid-column: 3; }

body.bp-observer-stage-ready .pick-center {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
}

body.bp-observer-stage-ready .pick-slot-group {
    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    align-items: flex-start;
    height: calc(100% - clamp(21px, 2.2vh, 28px));
    gap: var(--bp-stage-gap) !important;
}

body.bp-observer-stage-ready .pick-right .pick-slot-group { align-items: flex-end; }

body.bp-observer-stage-ready .pick-slot-row {
    display: flex;
    min-height: 0;
    gap: var(--bp-stage-gap);
}

body.bp-observer-stage-ready .pick-slot-row .slot {
    flex: 0 0 auto;
    width: var(--bp-stage-pick-size);
    height: var(--bp-stage-pick-size);
    aspect-ratio: 1;
}

body.bp-observer-stage-ready .character-pool,
body.bp-observer-stage-ready .character-pool-container {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.bp-observer-stage-ready #pool-container {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

body.bp-observer-stage-ready .character-grid {
    --bp-card-size: var(--bp-stage-pool-size);
    display: grid;
    grid-template-columns: repeat(var(--bp-pool-columns), var(--bp-card-size));
    place-content: center;
    align-content: center;
    row-gap: clamp(1px, 0.12vw, 2px);
    column-gap: clamp(2px, 0.2vw, 4px);
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: visible;
}

body.bp-observer-stage-ready[data-bp-pool-density="dense"] .character-grid {
    --bp-card-size: clamp(48px, min(3.85vw, 7.2vh), 74px);
}

body.bp-observer-stage-ready[data-bp-pool-density="compact"] .character-grid {
    --bp-card-size: clamp(38px, min(3.05vw, 5.7vh), 58px);
}

body.bp-observer-stage-ready .character-grid .character-card {
    isolation: isolate;
    position: relative;
    width: var(--bp-card-size);
    height: var(--bp-card-size);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0;
    box-shadow: inset 1px 1px 0 rgb(255 255 255 / 0.18), inset -1px -1px 0 rgb(1 5 9 / 0.42), 0 5px 12px rgb(0 0 0 / 0.2) !important;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    transform: none;
}

body.bp-observer-stage-ready .character-grid .character-card::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -24%;
    bottom: -24%;
    left: -52%;
    width: 34%;
    transform: skewX(-17deg);
    background: linear-gradient(90deg, transparent, rgb(188 224 246 / 0.18), rgb(255 249 224 / 0.78), rgb(252 219 142 / 0.34), rgb(167 213 240 / 0.2), transparent);
    filter: blur(0.2px) drop-shadow(0 0 7px rgb(244 224 170 / 0.48));
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}

body.bp-observer-stage-ready[data-bp-active-player="player1"] .character-grid .character-card::before,
body.bp-observer-stage-ready[data-bp-active-player="player2"] .character-grid .character-card::before {
    animation: bp-stage-pool-sheen 8s var(--bp-sheen-delay, 0s) ease-in-out infinite;
}

@keyframes bp-stage-pool-sheen {
    0%, 8% { translate: 0 0; opacity: 0; }
    10% { opacity: 0.9; }
    18% { translate: 540% 0; opacity: 0; }
    100% { translate: 540% 0; opacity: 0; }
}

body.bp-observer-stage-ready .character-grid .character-card:hover,
body.bp-observer-stage-ready .character-grid .character-card.active {
    z-index: 8;
    transform: scale(1.08) !important;
    box-shadow: 0 0 0 1px rgb(241 236 223 / 0.34), 0 8px 24px rgb(0 0 0 / 0.46) !important;
}

body.bp-observer-stage-ready .character-grid .character-card img {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    object-fit: cover;
    transform: scale(1.04);
    transform-origin: 50% 100%;
}

body.bp-observer-stage-ready .character-grid .character-name { display: none !important; }

/* Canonical S pool stage: 2+2 and 3+2 share this exact composition. */
body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-area {
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: visible;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-left,
body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-right {
    position: absolute;
    top: 30.5%;
    bottom: 4.8%;
    width: clamp(132px, 10.4vw, 200px);
    height: auto;
    transform: translateY(-15.75px);
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-left {
    left: 2.4%;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-right {
    right: 2.4%;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-right .pick-slot-group {
    align-items: flex-start;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-slot-group {
    grid-template-rows: repeat(6, var(--bp-stage-role-size));
    align-content: start;
    height: auto;
    gap: var(--bp-stage-gap) !important;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-right .pick-slot-row {
    justify-content: flex-end;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-slot-row .slot {
    width: var(--bp-stage-role-size);
    height: var(--bp-stage-role-size);
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-left .slot,
body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-right .slot {
    background: linear-gradient(145deg, rgb(16 29 44 / 0.9), rgb(3 9 15 / 0.98)) !important;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-left .slot {
    background:
        radial-gradient(circle at 42% 22%, rgb(232 207 144 / 0.2), transparent 42%),
        linear-gradient(145deg, #4c4330 0%, #252a2d 48%, #0b1117 100%) !important;
    border-color: rgb(214 183 108 / 0.27) !important;
    box-shadow: 0 6px 15px rgb(0 0 0 / 0.28), inset 0 0 16px rgb(214 183 108 / 0.05) !important;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-right .slot {
    background:
        radial-gradient(circle at 58% 22%, rgb(129 194 229 / 0.22), transparent 42%),
        linear-gradient(215deg, #29495d 0%, #202c34 48%, #0b1117 100%) !important;
    border-color: rgb(105 175 217 / 0.3) !important;
    box-shadow: 0 6px 15px rgb(0 0 0 / 0.28), inset 0 0 16px rgb(105 175 217 / 0.05) !important;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-left .slot:not(.empty) {
    background:
        radial-gradient(circle at 42% 22%, rgb(232 207 144 / 0.2), transparent 42%),
        linear-gradient(145deg, #4c4330 0%, #252a2d 48%, #0b1117 100%) !important;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-right .slot:not(.empty) {
    background:
        radial-gradient(circle at 58% 22%, rgb(129 194 229 / 0.22), transparent 42%),
        linear-gradient(215deg, #29495d 0%, #202c34 48%, #0b1117 100%) !important;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-left .slot:not(.empty) .character-card {
    background:
        radial-gradient(circle at 42% 22%, rgb(232 207 144 / 0.24), transparent 42%),
        linear-gradient(145deg, #5a4c31 0%, #2d2d2b 50%, #0b1117 100%) !important;
    box-shadow: inset 0 0 18px rgb(214 183 108 / 0.11) !important;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-right .slot:not(.empty) .character-card {
    background:
        radial-gradient(circle at 58% 22%, rgb(129 194 229 / 0.26), transparent 42%),
        linear-gradient(215deg, #31566d 0%, #23313a 50%, #0b1117 100%) !important;
    box-shadow: inset 0 0 18px rgb(105 175 217 / 0.12) !important;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-left .slot:not(.empty)::after,
body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-right .slot:not(.empty)::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 38%;
    bottom: 0;
    left: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgb(228 190 91 / 0.84));
    box-shadow: 0 0 8px rgb(228 190 91 / 0.38);
    pointer-events: none;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-right .slot:not(.empty)::after {
    right: 10%;
    left: 38%;
    background: linear-gradient(270deg, transparent, rgb(105 175 217 / 0.88));
    box-shadow: 0 0 8px rgb(105 175 217 / 0.4);
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pick-center {
    position: absolute;
    top: 30.2%;
    right: 16.6%;
    bottom: 4.8%;
    left: 16.6%;
    width: auto;
    height: auto;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .character-pool {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(6px, 0.75vh, 9px);
    min-height: 0;
    padding: clamp(6px, 0.7vh, 8px) 1.2% clamp(6px, 0.7vh, 8px);
    background:
        linear-gradient(90deg, rgb(214 183 108 / 0.34), transparent 82%) 0 0 / 36% 1px no-repeat,
        linear-gradient(270deg, rgb(105 175 217 / 0.34), transparent 82%) 100% 0 / 36% 1px no-repeat,
        radial-gradient(ellipse at 50% 52%, rgb(21 41 59 / 0.24), transparent 69%);
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .character-pool-header {
    display: none !important;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .character-pool-header button {
    display: none !important;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .character-grid {
    min-height: 0;
    transform: translateY(-1.83px);
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty)[data-bp-pool-density="compact"] .character-grid {
    --bp-card-size: clamp(42px, min(3.36vw, 6.27vh), 64px);
}

body.bp-observer-stage-ready .pool-info {
    position: absolute;
    right: 2%;
    bottom: 0;
    left: 2%;
    display: flex;
    justify-content: center;
    min-height: 22px;
    margin: 0;
    padding: 3px 12px;
    border: 0;
    border-top: 1px solid rgb(173 191 207 / 0.14);
    border-radius: 0;
    background: linear-gradient(90deg, transparent, rgb(4 12 20 / 0.62) 18% 82%, transparent);
    color: var(--bp-stage-muted);
    font-size: clamp(13px, 0.82vw, 16px);
    line-height: 1.35;
}

body.bp-observer-stage-ready .pool-info .info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    line-height: inherit;
}

body.bp-observer-stage-ready .pool-info .info-label,
body.bp-observer-stage-ready .pool-info .info-value,
body.bp-observer-stage-ready .pool-info .info-hint {
    min-width: 0;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pool-info {
    position: static;
    display: flex !important;
    align-items: center;
    justify-content: stretch;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #b3bec7;
    font-size: clamp(14px, 1vw, 20px);
    font-weight: 700;
    line-height: 1.25;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pool-info .info-item {
    justify-content: flex-start;
    width: 100%;
    gap: 3%;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pool-info .info-label {
    flex: 0 0 auto;
    color: #d6c07e;
    font-size: inherit;
    font-weight: 700;
    white-space: nowrap;
}

body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pool-info .info-value,
body.bp-observer-stage-ready.bp-observer-stage-s:not(.bp-observer-stage-empty) .pool-info .info-hint {
    flex: 1 1 auto;
    font-size: inherit;
    font-weight: 700;
    text-align: right;
}

body.bp-observer-stage-ready .initial-state {
    display: grid;
    place-content: center;
    width: 100%;
    height: 100%;
    min-height: 240px;
    margin: 0;
    padding: 20px;
    border: 0;
    border-radius: 0;
    background: radial-gradient(circle, rgb(13 31 47 / 0.42), transparent 58%);
    box-shadow: none;
    color: var(--bp-stage-muted);
    text-align: center;
}

body.bp-observer-stage-ready .initial-state i {
    color: rgb(214 183 108 / 0.48);
    font-size: clamp(42px, 5vw, 76px);
}

body.bp-observer-stage-ready .initial-state h3 {
    margin: 10px 0 0;
    color: var(--bp-stage-ivory);
    font: 600 clamp(24px, 2.2vw, 38px) var(--bp-stage-font-serif);
    letter-spacing: 0.1em;
}

body.bp-observer-stage-ready .initial-state p {
    margin: 8px 0 0;
    font-size: clamp(14px, 1vw, 18px);
}

body.bp-observer-stage-ready.bp-observer-stage-empty .ban-slot-group,
body.bp-observer-stage-ready.bp-observer-stage-empty .public-select,
body.bp-observer-stage-ready.bp-observer-stage-empty .pick-left,
body.bp-observer-stage-ready.bp-observer-stage-empty .pick-right {
    display: none !important;
}

body.bp-observer-stage-ready.bp-observer-stage-empty .timer-display,
body.bp-observer-stage-ready.bp-observer-stage-empty .compact-timer-display {
    color: transparent !important;
    font-size: 0;
    text-shadow: none;
}

body.bp-observer-stage-ready.bp-observer-stage-empty .timer-display::after,
body.bp-observer-stage-ready.bp-observer-stage-empty .compact-timer-display::after {
    content: "--:--";
    display: block;
    color: var(--bp-stage-ivory);
    font-size: clamp(32px, 3vw, 52px);
    line-height: 1;
    text-shadow: 0 0 24px rgb(214 183 108 / 0.17), 0 4px 15px #000;
}

body.bp-observer-stage-ready.bp-observer-stage-empty .initial-state h3,
body.bp-observer-stage-ready.bp-observer-stage-empty .initial-state p {
    font-size: 0;
}

body.bp-observer-stage-ready.bp-observer-stage-empty .initial-state h3::after {
    content: "阵容即将揭晓";
    font: 600 clamp(24px, 2.2vw, 38px) var(--bp-stage-font-serif);
    letter-spacing: 0.1em;
}

body.bp-observer-stage-ready.bp-observer-stage-empty .initial-state p::after {
    content: "等待裁判同步角色池";
    font-size: clamp(14px, 1vw, 18px);
}

/* A/S/G empty-pool stage follows the canonical 1920x1080 standby composition. */
body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-empty .public-select,
body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-empty .public-select::before {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    content: none !important;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .timer-display {
    display: none !important;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .timer-container::after {
    content: "00:00";
    display: block;
    color: var(--bp-stage-ivory);
    font-family: var(--bp-stage-font-numeric);
    font-size: clamp(28px, 2.6vw, 50px);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-shadow: 0 0 25px rgb(214 183 108 / 0.16), 0 3px 14px #000;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .pick-area {
    top: 26%;
    right: 0;
    bottom: 8%;
    left: 0;
    grid-template-columns: minmax(0, 1fr);
    padding: 0 11%;
    overflow: visible;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .pick-center {
    grid-column: 1;
    width: 100%;
    height: 100%;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty #pool-container {
    display: block;
    width: 100%;
    height: 100%;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state::before,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    width: 36%;
    height: 1px;
    pointer-events: none;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state::before {
    left: 0;
    background: linear-gradient(90deg, transparent, rgb(214 183 108 / 0.76));
    box-shadow: 0 0 18px rgb(214 183 108 / 0.18);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state::after {
    right: 0;
    background: linear-gradient(270deg, transparent, rgb(105 175 217 / 0.78));
    box-shadow: 0 0 18px rgb(105 175 217 / 0.2);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state i {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: clamp(220px, 24vw, 460px);
    aspect-ratio: 1;
    border: 1px solid rgb(178 196 209 / 0.12);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgb(13 31 47 / 0.56) 0 30%, transparent 66%),
        conic-gradient(from 45deg, transparent 0 23%, rgb(214 183 108 / 0.25) 24% 25%, transparent 26% 48%, rgb(105 175 217 / 0.25) 49% 50%, transparent 51% 73%, rgb(214 183 108 / 0.2) 74% 75%, transparent 76%);
    color: transparent;
    font-size: 0;
    rotate: 45deg;
    box-shadow: inset 0 0 80px rgb(6 18 29 / 0.4), 0 0 60px rgb(0 0 0 / 0.22);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state i::before,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state i::after {
    content: "";
    position: absolute;
    inset: 11%;
    border: 1px solid rgb(214 183 108 / 0.18);
    border-radius: 50%;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state i::after {
    inset: 27%;
    border-color: rgb(105 175 217 / 0.22);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state h3,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state p {
    position: absolute;
    z-index: 2;
    left: 50%;
    width: 100%;
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state h3 {
    top: 50%;
    transform: translate(-50%, -50%);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state h3::after {
    content: "BP 准备阶段";
    color: var(--bp-stage-ivory);
    font: 600 clamp(30px, 3vw, 58px) var(--bp-stage-font-serif);
    letter-spacing: 0.1em;
    text-shadow: 0 0 28px rgb(214 183 108 / 0.22), 0 4px 18px #000;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state p {
    top: calc(50% + 33px);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g).bp-observer-stage-empty .initial-state p::after {
    content: "阵容即将揭晓";
    color: #c4ced6;
    font-size: clamp(16px, 1.25vw, 24px);
    font-family: var(--bp-stage-font-sans);
    font-weight: 700;
    letter-spacing: 0.16em;
}

/* A uses the approved S-peak strip language with the demo's own geometry:
   eight height-fitted strips in traditional mode, four square-avatar strips
   in peak mode. The original slot order and inline peak hiding stay intact. */
body.bp-observer-stage-ready.bp-observer-stage-a:not(.bp-observer-stage-empty) .pick-area {
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: visible;
}

body.bp-observer-stage-ready.bp-observer-stage-a:not(.bp-observer-stage-empty) .pick-left,
body.bp-observer-stage-ready.bp-observer-stage-a:not(.bp-observer-stage-empty) .pick-right {
    position: absolute;
    top: 30.5%;
    bottom: 4.8%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 2%;
    width: 14.2%;
    height: auto;
    overflow: visible;
    /* The title row pushes the visible PICK group down while the pool footer
       pushes the pool-card grid up. Offset the complete side columns so their
       visible slot midpoint matches the pool-card midpoint at the locked
       16:9 Electron stage sizes. */
    transform: translateY(clamp(-49px, -4.55vh, -33px));
}

body.bp-observer-stage-ready.bp-observer-stage-a:not(.bp-observer-stage-empty) .pick-left { left: 2.4%; }
body.bp-observer-stage-ready.bp-observer-stage-a:not(.bp-observer-stage-empty) .pick-right { right: 2.4%; }

body.bp-observer-stage-ready.bp-observer-stage-a:not(.bp-observer-stage-empty) .pick-right > .pick-column {
    display: contents;
}

body.bp-observer-stage-ready.bp-observer-stage-a .pick-slot-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(8, minmax(0, 1fr));
    align-content: stretch;
    width: 100%;
    height: auto;
    gap: clamp(3px, 0.24vw, 5px) !important;
}

body.bp-observer-stage-ready.bp-observer-stage-a .pick-slot-row {
    display: contents;
}

body.bp-observer-stage-ready.bp-observer-stage-a .pick-area .slot {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    flex-basis: auto;
    aspect-ratio: auto;
    background:
        linear-gradient(90deg, rgb(214 183 108 / 0.13), rgb(9 18 28 / 0.68) 70%),
        rgb(7 14 23 / 0.62) !important;
    clip-path: polygon(4% 0, 100% 0, 100% 84%, 96% 100%, 0 100%, 0 16%);
}

body.bp-observer-stage-ready.bp-observer-stage-a .pick-right .slot {
    background:
        linear-gradient(270deg, rgb(105 175 217 / 0.15), rgb(9 18 28 / 0.68) 70%),
        rgb(7 14 23 / 0.62) !important;
}

body.bp-observer-stage-ready.bp-observer-stage-a .pick-area .slot > img {
    position: relative;
    flex: 0 0 var(--bp-stage-role-size);
    width: var(--bp-stage-role-size);
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center 18%;
    transform: none;
    border-right: 1px solid rgb(214 183 108 / 0.34);
}

body.bp-observer-stage-ready.bp-observer-stage-a .pick-right .slot > img {
    border-right: 0;
    border-left: 1px solid rgb(105 175 217 / 0.36);
}

body.bp-observer-stage-ready.bp-observer-stage-a .pick-right .slot {
    flex-direction: row-reverse;
}

body.bp-observer-stage-ready.bp-observer-stage-a .pick-area .character-name {
    position: static;
    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
    align-items: center;
    min-width: 0;
    padding: 0 clamp(8px, 0.7vw, 14px);
    overflow: hidden;
    background: transparent;
    color: #eee9df;
    font-size: clamp(13px, 1vw, 19px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: 0.06em;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 7px rgb(0 0 0 / 0.86);
}

body.bp-observer-stage-ready.bp-observer-stage-a .pick-right .character-name {
    justify-content: flex-end;
    text-align: right;
}

body.bp-observer-stage-ready.bp-observer-stage-a .pick-area .slot.empty::after {
    content: "待选择";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--bp-stage-role-size);
    display: flex;
    align-items: center;
    padding: 0 clamp(8px, 0.7vw, 14px);
    color: rgb(232 238 243 / 0.38);
    font-size: clamp(13px, 1vw, 19px);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-shadow: 0 2px 7px rgb(0 0 0 / 0.86);
}

body.bp-observer-stage-ready.bp-observer-stage-a .pick-right .slot.empty::after {
    right: var(--bp-stage-role-size);
    left: 0;
    justify-content: flex-end;
    text-align: right;
}

body.bp-observer-stage-ready.bp-observer-stage-a:not(.bp-observer-stage-empty) .pick-center {
    position: absolute;
    top: 30.2%;
    right: 16.6%;
    bottom: 4.8%;
    left: 16.6%;
    width: auto;
    height: auto;
}

body.bp-observer-stage-ready.bp-observer-stage-a .character-pool {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(6px, 0.75vh, 9px);
    min-height: 0;
    padding: clamp(6px, 0.7vh, 8px) 1.2% clamp(6px, 0.7vh, 8px);
    background:
        linear-gradient(90deg, rgb(214 183 108 / 0.34), transparent 82%) 0 0 / 36% 1px no-repeat,
        linear-gradient(270deg, rgb(105 175 217 / 0.34), transparent 82%) 100% 0 / 36% 1px no-repeat,
        radial-gradient(ellipse at 50% 52%, rgb(21 41 59 / 0.24), transparent 69%);
}

body.bp-observer-stage-ready.bp-observer-stage-a .character-grid {
    min-height: 0;
    transform: translateY(-1.83px);
}

body.bp-observer-stage-ready.bp-observer-stage-a[data-bp-pool-density="compact"] .character-grid {
    --bp-card-size: clamp(42px, min(3.36vw, 6.27vh), 64px);
}

body.bp-observer-stage-ready.bp-observer-stage-a:not(.bp-observer-stage-empty) .pool-info {
    position: static;
    display: flex !important;
    align-items: center;
    justify-content: stretch;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #b3bec7;
    font-size: clamp(14px, 1vw, 20px);
    font-weight: 700;
    line-height: 1.25;
}

body.bp-observer-stage-ready.bp-observer-stage-a:not(.bp-observer-stage-empty) .pool-info .info-item {
    justify-content: flex-start;
    width: 100%;
    gap: 3%;
}

body.bp-observer-stage-ready.bp-observer-stage-a:not(.bp-observer-stage-empty) .pool-info .info-label {
    flex: 0 0 auto;
    color: #d6c07e;
    font-size: inherit;
    font-weight: 700;
    white-space: nowrap;
}

body.bp-observer-stage-ready.bp-observer-stage-a:not(.bp-observer-stage-empty) .pool-info .info-value,
body.bp-observer-stage-ready.bp-observer-stage-a:not(.bp-observer-stage-empty) .pool-info .info-hint {
    flex: 1 1 auto;
    font-size: inherit;
    font-weight: 700;
    text-align: right;
}

body.bp-observer-stage-ready.bp-observer-stage-a.bp-observer-stage-peak .pick-slot-group {
    grid-template-rows: repeat(4, var(--bp-stage-role-size));
    align-content: center;
    gap: clamp(8px, 1.2vh, 16px) !important;
}

body.bp-observer-stage-ready.bp-observer-stage-a.bp-observer-stage-peak .pick-area .slot {
    align-self: center;
    height: var(--bp-stage-role-size);
}

body.bp-observer-stage-ready.bp-observer-stage-a.bp-observer-stage-peak .pick-area .slot > img {
    height: var(--bp-stage-role-size);
    aspect-ratio: 1;
}

/* Peak S follows the approved demo exactly: six full role-size named strips.
   The underlying slot/card DOM stays untouched so BP sequencing and recovery
   continue to use the original page implementation. */
body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak:not(.bp-observer-stage-empty) .pick-left,
body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak:not(.bp-observer-stage-empty) .pick-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 2%;
    width: 14.2%;
    transform: none;
}

body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak:not(.bp-observer-stage-empty) .pick-right > .pick-column {
    display: contents;
}

body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak .pick-slot-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, var(--bp-stage-role-size));
    align-content: center;
    width: 100%;
    height: 100%;
    gap: clamp(7px, 0.9vh, 13px) !important;
}

body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak .pick-slot-row {
    display: contents;
}

body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak .pick-area .slot {
    display: flex;
    align-items: center;
    align-self: center;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    height: var(--bp-stage-role-size) !important;
    min-height: 0;
    flex-basis: auto;
    aspect-ratio: auto;
    background:
        linear-gradient(90deg, rgb(214 183 108 / 0.13), rgb(9 18 28 / 0.68) 70%),
        rgb(7 14 23 / 0.62) !important;
    clip-path: polygon(4% 0, 100% 0, 100% 84%, 96% 100%, 0 100%, 0 16%);
}

body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak .pick-right .slot {
    background:
        linear-gradient(270deg, rgb(105 175 217 / 0.15), rgb(9 18 28 / 0.68) 70%),
        rgb(7 14 23 / 0.62) !important;
}

body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak .pick-area .slot .character-card {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    background: transparent !important;
    box-shadow: none !important;
}

body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak .pick-right .slot .character-card {
    flex-direction: row-reverse;
}

body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak .pick-area .slot .character-card img {
    position: relative;
    flex: 0 0 var(--bp-stage-role-size);
    width: var(--bp-stage-role-size);
    height: var(--bp-stage-role-size);
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center 18%;
    transform: none;
    border-right: 1px solid rgb(214 183 108 / 0.34);
}

body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak .pick-right .slot .character-card img {
    border-right: 0;
    border-left: 1px solid rgb(105 175 217 / 0.36);
}

body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak .pick-area .character-name {
    position: static;
    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
    align-items: center;
    min-width: 0;
    padding: 0 clamp(8px, 0.7vw, 14px);
    overflow: hidden;
    background: transparent;
    color: #eee9df;
    font-size: clamp(13px, 1vw, 19px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: 0.06em;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 7px rgb(0 0 0 / 0.86);
}

body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak .pick-right .character-name {
    justify-content: flex-end;
    text-align: right;
}

body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak .pick-area .slot.empty::after {
    content: "待选择";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--bp-stage-role-size);
    display: flex;
    align-items: center;
    padding: 0 clamp(8px, 0.7vw, 14px);
    color: rgb(232 238 243 / 0.38);
    font-size: clamp(13px, 1vw, 19px);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-shadow: 0 2px 7px rgb(0 0 0 / 0.86);
}

body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-peak .pick-right .slot.empty::after {
    right: var(--bp-stage-role-size);
    left: 0;
    justify-content: flex-end;
    text-align: right;
}

/* S 3+2 is visually identical to 2+2; the extra pair is allowed to render. */
body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-3plus2 .slot[data-index="5"],
body.bp-observer-stage-ready.bp-observer-stage-s.bp-observer-stage-3plus2 .slot[data-index="6"] {
    display: flex !important;
}

/* G follows its own demo structure. 60 and 75 both remain 15 columns at the
   canonical 96px role size; only abnormal pools above 90 may compact. */
body.bp-observer-stage-ready.bp-observer-stage-g:not(.bp-observer-stage-empty) .bp-area > .pick-area {
    inset: 25.8% 5.6% 1.8%;
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    overflow: visible;
}

body.bp-observer-stage-ready.bp-observer-stage-g:not(.bp-observer-stage-empty) .bp-area > .pick-area > .pick-left,
body.bp-observer-stage-ready.bp-observer-stage-g:not(.bp-observer-stage-empty) .bp-area > .pick-area > .pick-right {
    display: none !important;
}

body.bp-observer-stage-ready.bp-observer-stage-g:not(.bp-observer-stage-empty) .bp-area > .pick-area > .pick-center {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
}

body.bp-observer-stage-ready.bp-observer-stage-g .pick-center.bp-global-flow-leave-left {
    animation: bp-global-flow-leave-left 0.2s cubic-bezier(0.55, 0.08, 0.82, 0.35) both;
    pointer-events: none;
}

body.bp-observer-stage-ready.bp-observer-stage-g .pick-center.bp-global-flow-leave-right {
    animation: bp-global-flow-leave-right 0.2s cubic-bezier(0.55, 0.08, 0.82, 0.35) both;
    pointer-events: none;
}

body.bp-observer-stage-ready.bp-observer-stage-g .pick-center.bp-global-flow-enter-left {
    animation: bp-global-flow-enter-left 0.32s cubic-bezier(0.16, 0.76, 0.2, 1) both;
    pointer-events: none;
}

body.bp-observer-stage-ready.bp-observer-stage-g .pick-center.bp-global-flow-enter-right {
    animation: bp-global-flow-enter-right 0.32s cubic-bezier(0.16, 0.76, 0.2, 1) both;
    pointer-events: none;
}

@keyframes bp-global-flow-leave-left {
    from { opacity: 1; translate: 0 0; filter: blur(0); }
    to { opacity: 0; translate: -12% 0; filter: blur(2px); }
}

@keyframes bp-global-flow-leave-right {
    from { opacity: 1; translate: 0 0; filter: blur(0); }
    to { opacity: 0; translate: 12% 0; filter: blur(2px); }
}

@keyframes bp-global-flow-enter-left {
    from { opacity: 0; translate: -12% 0; filter: blur(2px); }
    to { opacity: 1; translate: 0 0; filter: blur(0); }
}

@keyframes bp-global-flow-enter-right {
    from { opacity: 0; translate: 12% 0; filter: blur(2px); }
    to { opacity: 1; translate: 0 0; filter: blur(0); }
}

body.bp-observer-stage-ready.bp-observer-stage-g:not(.bp-observer-stage-empty) #pool-container {
    display: block;
    width: 100%;
    height: auto;
}

body.bp-observer-stage-ready.bp-observer-stage-g.bp-observer-stage-g-split-pools #pool-container {
    display: none;
}

body.bp-observer-stage-ready.bp-observer-stage-g:not(.bp-observer-stage-empty) .pick-center .character-pool-container {
    display: none !important;
}

body.bp-observer-stage-ready.bp-observer-stage-g:not(.bp-observer-stage-empty) .pick-center .character-pool-container.bp-global-active-pool {
    position: absolute;
    z-index: 2;
    inset: 0 0 auto;
    display: grid !important;
    grid-template-rows: auto auto auto;
    gap: clamp(6px, 0.7vh, 10px);
    width: 100%;
    height: auto;
    padding: clamp(6px, 0.65vh, 10px) 1.2% clamp(7px, 0.8vh, 12px);
    background:
        linear-gradient(90deg, rgb(214 183 108 / 0.32), transparent 82%) 0 0 / 40% 1px no-repeat,
        linear-gradient(270deg, rgb(105 175 217 / 0.32), transparent 82%) 100% 0 / 40% 1px no-repeat,
        radial-gradient(ellipse at 50% 56%, rgb(21 41 59 / 0.22), transparent 72%);
}

body.bp-observer-stage-ready.bp-observer-stage-g:not(.bp-observer-stage-empty):not(.bp-observer-stage-g-split-pools)
    .pick-center .character-pool-container.bp-global-active-pool {
    top: 96px;
}

body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-pool-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(7px, 0.6vw, 12px);
    min-height: clamp(24px, 2.4vh, 30px);
    padding: 0 0.7%;
    color: rgb(221 218 207 / 0.84);
    font-family: var(--bp-stage-font-sans);
    font-size: clamp(12px, 0.86vw, 17px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-align: center;
}

body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-pool-heading strong,
body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-pool-heading span {
    margin: 0;
    color: inherit;
    font: inherit;
    font-style: normal;
    white-space: nowrap;
}

body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-pool-heading > i {
    width: 1px;
    height: 1em;
    background: rgb(173 191 207 / 0.24);
}

body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-pool-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(7px, 0.6vw, 12px);
    min-width: 0;
    padding: 0 0.7%;
    color: #b3bec7;
    font-size: clamp(12px, 0.82vw, 16px);
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
}

body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-pool-footer b {
    flex: 0 0 auto;
    color: var(--bp-stage-gold-bright);
    font-weight: 850;
    white-space: nowrap;
}

body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-pool-footer b::after {
    content: "·";
    margin-left: clamp(7px, 0.6vw, 12px);
    color: rgb(173 191 207 / 0.42);
}

body.bp-observer-stage-ready.bp-observer-stage-g[data-bp-global-view-player="2"] .bp-global-pool-footer b {
    color: var(--bp-stage-blue-bright);
}

body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-pool-footer span {
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}

body.bp-observer-stage-ready.bp-observer-stage-g.bp-observer-stage-g-split-pools .bp-global-pool-footer {
    display: none;
}

body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-active-pool > .character-pool-header,
body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-active-pool > .pool-info {
    display: none !important;
}

body.bp-observer-stage-ready.bp-observer-stage-g:not(.bp-observer-stage-empty) .bp-global-active-pool > .character-grid {
    --bp-card-size: var(--bp-stage-role-size);
    --bp-pool-columns: 15;
    grid-template-columns: repeat(15, var(--bp-card-size));
    place-content: center;
    align-content: center;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 0.7%;
}

body.bp-observer-stage-ready.bp-observer-stage-g:not(.bp-observer-stage-empty)[data-bp-pool-density="compact"]
    .bp-global-active-pool > .character-grid {
    --bp-card-size: clamp(40px, min(3vw, 5.6vh), 58px);
    --bp-pool-columns: 18;
    grid-template-columns: repeat(18, var(--bp-card-size));
}

body.bp-observer-stage-ready.bp-observer-stage-g #pick-area-container {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 79.2%;
    height: 100%;
    margin: 0 auto;
}

body.bp-observer-stage-ready.bp-observer-stage-g .global-pick-area {
    display: none !important;
}

body.bp-observer-stage-ready.bp-observer-stage-g .global-pick-area.bp-global-active-pick-area {
    --bp-global-history-nav-width: clamp(118px, 8.6vw, 165px);
    --bp-global-lineup-gap: clamp(10px, 0.8vw, 16px);
    --bp-global-current-top: 0px;
    position: absolute;
    inset: 0;
    display: block !important;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body.bp-observer-stage-ready.bp-observer-stage-g .global-pick-area > .pick-stats-bar,
body.bp-observer-stage-ready.bp-observer-stage-g .global-pick-area .copy-team-btn,
body.bp-observer-stage-ready.bp-observer-stage-g .global-pick-area .clear-team-btn,
body.bp-observer-stage-ready.bp-observer-stage-g .role-pool-buttons {
    display: none !important;
}

body.bp-observer-stage-ready.bp-observer-stage-g .global-pick-area > .pick-row {
    display: none;
    min-width: 0;
    min-height: 0;
    height: var(--bp-stage-role-size);
    margin: 0;
}

body.bp-observer-stage-ready.bp-observer-stage-g .global-pick-area > .pick-row.bp-global-current-row,
body.bp-observer-stage-ready.bp-observer-stage-g .global-pick-area > .pick-row.bp-global-history-open {
    position: absolute;
    left: 0;
    right: calc(var(--bp-global-history-nav-width) + var(--bp-global-lineup-gap));
    display: grid;
    grid-template-columns: clamp(150px, 11vw, 210px) minmax(0, 1fr);
    justify-content: center;
    align-items: center;
    gap: clamp(3px, 0.24vw, 5px);
}

body.bp-observer-stage-ready.bp-observer-stage-g .global-pick-area > .pick-row.bp-global-current-row {
    top: var(--bp-global-current-top);
}

body.bp-observer-stage-ready.bp-observer-stage-g .global-pick-area > .pick-row.bp-global-history-open {
    bottom: 0;
    opacity: 0.78;
}

body.bp-observer-stage-ready.bp-observer-stage-g .global-pick-area > .pick-row.bp-global-history-from {
    z-index: 2;
    animation: bp-global-history-leave-up 0.52s cubic-bezier(0.45, 0, 0.2, 1) both;
}

body.bp-observer-stage-ready.bp-observer-stage-g .global-pick-area > .pick-row.bp-global-history-to {
    z-index: 3;
    animation: bp-global-history-enter-up 0.52s cubic-bezier(0.45, 0, 0.2, 1) both;
}

@keyframes bp-global-history-leave-up {
    from { opacity: 0.78; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-100%); }
}

@keyframes bp-global-history-enter-up {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 0.78; transform: translateY(0); }
}

body.bp-observer-stage-ready.bp-observer-stage-g .game-label {
    display: flex;
    align-items: center;
    width: auto;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgb(214 183 108 / 0.3);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #d8d2c7;
    font-size: clamp(14px, 1vw, 20px);
    font-weight: 750;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-current-row .game-label {
    color: #f0dfad;
    border-bottom-color: rgb(228 190 91 / 0.72);
    text-shadow: 0 0 14px rgb(228 190 91 / 0.15);
}

body.bp-observer-stage-ready.bp-observer-stage-g[data-bp-global-view-player="2"] .bp-global-current-row .game-label {
    color: #dceffa;
    border-bottom-color: rgb(105 175 217 / 0.72);
    text-shadow: 0 0 14px rgb(105 175 217 / 0.16);
}

body.bp-observer-stage-ready.bp-observer-stage-g .slots-container {
    display: grid;
    grid-template-columns: repeat(8, var(--bp-stage-role-size));
    justify-content: center;
    align-items: center;
    gap: clamp(3px, 0.24vw, 5px);
    min-width: 0;
    min-height: 0;
    height: 100%;
}

body.bp-observer-stage-ready.bp-observer-stage-g .slots-container > .slot {
    position: relative;
    align-self: center;
    width: var(--bp-stage-role-size);
    height: var(--bp-stage-role-size);
    min-height: 0;
    aspect-ratio: 1;
    border-color: rgb(214 183 108 / 0.38);
    background:
        radial-gradient(circle at 42% 24%, rgb(228 190 91 / 0.1), transparent 48%),
        linear-gradient(145deg, rgb(49 43 31 / 0.78), rgb(5 12 18 / 0.96));
    box-shadow: 0 6px 15px rgb(0 0 0 / 0.3), inset 0 0 18px rgb(214 183 108 / 0.055);
}

body.bp-observer-stage-ready.bp-observer-stage-g[data-bp-global-view-player="2"] .slots-container > .slot {
    border-color: rgb(105 175 217 / 0.42);
    background:
        radial-gradient(circle at 58% 24%, rgb(105 175 217 / 0.12), transparent 48%),
        linear-gradient(215deg, rgb(26 53 70 / 0.82), rgb(5 12 18 / 0.96));
    box-shadow: 0 6px 15px rgb(0 0 0 / 0.3), inset 0 0 18px rgb(105 175 217 / 0.065);
}

body.bp-observer-stage-ready.bp-observer-stage-g .slots-container > .slot:empty::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20%;
    left: 20%;
    height: 1px;
    background: rgb(173 191 207 / 0.15);
}

body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-history-nav {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(8px, 1vh, 14px);
    width: var(--bp-global-history-nav-width);
    min-width: 0;
    padding: var(--bp-global-current-top) 0 0 clamp(8px, 0.7vw, 14px);
    border-left: 1px solid rgb(173 191 207 / 0.14);
}

body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-history-nav:empty {
    display: none;
}

body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-history-nav::before {
    content: "已结束";
    flex: 0 0 var(--bp-stage-role-size);
    display: flex;
    align-items: center;
    color: rgb(211 218 223 / 0.58);
    font-size: clamp(14px, 1vw, 20px);
    font-weight: 800;
    letter-spacing: 0.08em;
}

body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-history-nav button {
    position: relative;
    min-height: clamp(44px, 5.4vh, 62px);
    padding: 0 clamp(10px, 0.8vw, 16px);
    border: 1px solid rgb(214 183 108 / 0.2);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    background: linear-gradient(145deg, rgb(58 54 44 / 0.74), rgb(9 17 25 / 0.82));
    color: #d7d2c9;
    font-family: var(--bp-stage-font-sans);
    font-size: clamp(14px, 0.96vw, 19px);
    font-weight: 850;
    letter-spacing: 0.07em;
    text-align: left;
    cursor: pointer;
}

body.bp-observer-stage-ready.bp-observer-stage-g .bp-global-history-nav button[aria-expanded="true"] {
    border-color: rgb(214 183 108 / 0.68);
    color: #f0e8d6;
    box-shadow: inset 3px 0 0 rgb(228 190 91 / 0.72), 0 0 16px rgb(214 183 108 / 0.1);
}

body.bp-observer-stage-ready.bp-observer-stage-g[data-bp-global-view-player="2"] .bp-global-history-nav button {
    border-color: rgb(105 175 217 / 0.22);
    background: linear-gradient(215deg, rgb(34 64 82 / 0.72), rgb(9 17 25 / 0.82));
}

body.bp-observer-stage-ready.bp-observer-stage-g[data-bp-global-view-player="2"] .bp-global-history-nav button[aria-expanded="true"] {
    border-color: rgb(105 175 217 / 0.7);
    color: #dceffa;
    box-shadow: inset -3px 0 0 rgb(105 175 217 / 0.78), 0 0 16px rgb(105 175 217 / 0.12);
}

body.bp-observer-stage-ready.bp-observer-stage-g.bp-observer-stage-g-split-pools .observer-player {
    opacity: 0.5;
    filter: saturate(0.58) brightness(0.78);
    cursor: pointer;
    transition: opacity 0.2s ease, filter 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

body.bp-observer-stage-ready.bp-observer-stage-g[data-bp-global-view-player="1"] #observer-player1-box,
body.bp-observer-stage-ready.bp-observer-stage-g[data-bp-global-view-player="2"] #observer-player2-box {
    opacity: 1;
    filter: none;
    cursor: default;
}

body.bp-observer-stage-ready.bp-observer-stage-g[data-bp-global-view-player="1"] #observer-player1-box {
    background: linear-gradient(90deg, rgb(214 183 108 / 0.22), rgb(8 19 30 / 0.58) 64%, transparent);
    box-shadow: inset 3px 0 0 rgb(228 190 91 / 0.74), 0 8px 24px rgb(214 183 108 / 0.08);
}

body.bp-observer-stage-ready.bp-observer-stage-g[data-bp-global-view-player="2"] #observer-player2-box {
    background: linear-gradient(270deg, rgb(105 175 217 / 0.24), rgb(8 19 30 / 0.58) 64%, transparent);
    box-shadow: inset -3px 0 0 rgb(105 175 217 / 0.78), 0 8px 24px rgb(105 175 217 / 0.09);
}

/* Canonical demo PICK/BAN surface. Runtime triggering, audio, queueing and cleanup remain unchanged. */
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-overlay {
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 46%, rgb(24 43 65 / 0.34), transparent 42%),
        rgb(1 4 7 / 0.92) !important;
    backdrop-filter: blur(5px);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-scene {
    isolation: isolate;
    flex: 0 0 auto;
    width: 91.2% !important;
    height: 85.6% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(2.5% 0, 100% 0, 97.5% 100%, 0 100%);
    background: #07101a !important;
    box-shadow: 0 0 70px rgb(0 0 0 / 0.58) !important;
    animation: bp-stage-scene-in 0.55s cubic-bezier(0.2, 0.75, 0.2, 1) both !important;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-scene::before {
    content: "";
    position: absolute;
    z-index: 12;
    inset: 10px 12px;
    clip-path: polygon(2.1% 0, 100% 0, 97.9% 100%, 0 100%);
    border-top: 1px solid rgb(231 203 135 / 0.72);
    border-bottom: 1px solid rgb(109 178 218 / 0.42);
    pointer-events: none;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-visual,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-background,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-avatar,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-tear,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-tear-top,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-tear-bottom {
    position: absolute;
    inset: 0 !important;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-visual {
    z-index: 1;
}

/* Keep the right-side vignette above the character while leaving particles,
   tear accents and copy unobscured. Its former background-layer span ran
   from roughly 46% to 100%; the foreground overlay is 10 points narrower. */
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-visual::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44%;
    pointer-events: none;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-pick .bp-stage-effect-visual::after {
    background: linear-gradient(90deg, transparent, rgb(2 7 13 / 0.36));
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-ban .bp-stage-effect-visual::after {
    background: linear-gradient(90deg, transparent, rgb(2 4 6 / 0.42));
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-pick .bp-stage-effect-visual {
    animation: bp-stage-pick-color 2.8s 0.2s ease both;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-ban .bp-stage-effect-visual {
    animation: bp-stage-ban-grayscale 2.3s 0.7s ease forwards;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-pick-sweep {
    position: absolute;
    z-index: 4;
    top: -20%;
    bottom: -20%;
    left: -30%;
    width: 22%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgb(151 194 255 / 0.2), rgb(255 235 176 / 0.7), rgb(151 194 255 / 0.16), transparent);
    filter: blur(2px);
    animation: bp-stage-pick-sweep 1.05s 0.58s cubic-bezier(0.2, 0.72, 0.2, 1) both;
    pointer-events: none;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-background {
    z-index: 0;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-position: center !important;
    background-size: cover !important;
    scale: 1.04;
    animation: bp-stage-backdrop-settle 2.2s 0.55s ease forwards !important;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-pick .bp-stage-effect-background {
    background-image:
        linear-gradient(90deg, rgb(2 7 13 / 0.9) 0 19%, rgb(2 7 13 / 0.08) 46%, transparent 56%),
        radial-gradient(circle at 68% 50%, rgb(79 130 255 / 0.18), transparent 38%),
        var(--bp-stage-effect-backdrop, url("../../images/flashdemo/fountain.png")) !important;
    animation: bp-stage-backdrop-settle 2.2s 0.55s ease forwards !important;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-ban .bp-stage-effect-background {
    background-image:
        linear-gradient(90deg, rgb(2 4 6 / 0.9) 0 19%, rgb(2 4 6 / 0.1) 46%, transparent 56%),
        radial-gradient(circle at 68% 50%, rgb(117 164 199 / 0.15), transparent 38%),
        var(--bp-stage-effect-backdrop, url("../../images/flashdemo/fountain.png")) !important;
    animation: bp-stage-backdrop-settle 2.2s 0.55s ease forwards !important;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-avatar {
    z-index: 2 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    animation: bp-stage-character-in 0.68s 0.08s cubic-bezier(0.16, 0.82, 0.22, 1) both !important;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-avatar > img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 20px 35px rgb(0 0 0 / 0.52));
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-copy {
    z-index: 15 !important;
    right: auto !important;
    bottom: 7.5% !important;
    left: 5.8% !important;
    width: min(40%, 620px) !important;
    padding: clamp(14px, 1.45vw, 28px) clamp(28px, 2.6vw, 50px) !important;
    transform: none !important;
    clip-path: polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 4% 50%);
    border: 0 !important;
    border-left: 3px solid var(--bp-stage-gold-bright) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(90deg, rgb(1 5 10 / 0.94), rgb(8 19 31 / 0.88) 75%, rgb(8 19 31 / 0.26)),
        linear-gradient(180deg, rgb(224 193 115 / 0.18), transparent 45%) !important;
    color: var(--bp-stage-ivory) !important;
    font-family: var(--bp-stage-font-sans) !important;
    text-align: left !important;
    text-shadow: 0 4px 22px #000 !important;
    white-space: normal !important;
    animation: bp-stage-copy-in 0.52s 0.45s cubic-bezier(0.16, 0.82, 0.22, 1) both !important;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-copy small {
    display: block;
    color: #d2dbe2;
    font-size: clamp(16px, 1.15vw, 23px);
    font-weight: 700;
    letter-spacing: 0.12em;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-copy strong {
    display: inline-block;
    margin-top: 2.5%;
    color: var(--bp-stage-gold-bright);
    font-size: clamp(24px, 2vw, 39px);
    line-height: 1;
    letter-spacing: 0.12em;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-copy b {
    display: inline-block;
    margin-left: 0.6em;
    color: var(--bp-stage-ivory);
    font-size: clamp(27px, 2.25vw, 44px);
    line-height: 1;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-ban .bp-stage-effect-copy {
    border-left-color: #b8c8d5 !important;
    filter: grayscale(0.3);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-ban .bp-stage-effect-copy strong {
    color: #d7e1e8;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-tear {
    z-index: 3 !important;
    filter: grayscale(1) contrast(1.05);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-visual > .cryo-particle,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-visual > .fire-particle,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-visual > .wind-particle,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-visual > .geo-particle,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-visual > .water-particle,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-visual > .dendro-particle,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-visual > .electro-particle,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-visual > .electro-trail {
    z-index: 5 !important;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-tear-line {
    left: -10% !important;
    width: 120% !important;
    background: linear-gradient(90deg, transparent 5%, #7e8b94 18%, #f3eee4 42%, #b55f62 50%, #f3eee4 58%, #7e8b94 82%, transparent 95%) !important;
    box-shadow: 0 0 15px rgb(220 226 229 / 0.52), 0 0 34px rgb(178 76 80 / 0.28) !important;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-banned {
    z-index: 18 !important;
    padding: 0 clamp(12px, 1.2vw, 24px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #f0eee7 !important;
    font-family: var(--bp-stage-font-impact) !important;
    font-size: clamp(34px, 3.7vw, 72px) !important;
    font-weight: 400 !important;
    font-synthesis: none;
    letter-spacing: 0.045em;
    line-height: 1;
    text-shadow:
        -4px 0 #090d11,
        4px 0 #090d11,
        0 -4px #090d11,
        0 4px #090d11,
        -3px -3px #090d11,
        3px -3px #090d11,
        -3px 3px #090d11,
        3px 3px #090d11,
        0 8px 24px rgb(0 0 0 / 0.8),
        0 0 18px rgb(232 238 240 / 0.18) !important;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-ban.is-tearing .bp-stage-effect-banned {
    animation: bp-stage-ban-stamp 0.28s cubic-bezier(0.15, 0.84, 0.24, 1.15) both;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-ban.is-tearing .bp-stage-effect-avatar {
    visibility: hidden;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-ban.is-tearing .bp-stage-effect-tear,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-effect-ban.is-tearing .bp-stage-effect-tear-line {
    opacity: 1 !important;
}

/* The original online dice still owns timing/result/removal. This is an Electron-OB-only visual shell. */
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .dice-animation-container.bp-stage-dice-container {
    overflow: hidden;
    background:
        radial-gradient(circle at 36% 44%, rgb(214 183 108 / 0.13), transparent 28%),
        radial-gradient(circle at 64% 44%, rgb(105 175 217 / 0.14), transparent 28%),
        rgb(1 5 9 / 0.84) !important;
    backdrop-filter: blur(8px) brightness(0.72);
    perspective: 1100px;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-source {
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-scene {
    position: relative;
    width: clamp(132px, 10vw, 190px);
    aspect-ratio: 1;
    perspective: 920px;
    transform-style: preserve-3d;
    filter: drop-shadow(0 34px 26px rgb(0 0 0 / 0.58));
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-scene::before,
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-scene::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-scene::before {
    inset: -52%;
    border: 1px solid rgb(173 191 207 / 0.09);
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 0 24%, rgb(173 191 207 / 0.07) 24.5% 25%, transparent 25.5% 43%, rgb(214 183 108 / 0.07) 43.5% 44%, transparent 44.5%);
    transform: rotateX(68deg) translateZ(-92px);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-scene::after {
    z-index: -1;
    left: 9%;
    right: 9%;
    bottom: -27%;
    height: 24%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgb(105 175 217 / 0.22), rgb(214 183 108 / 0.08) 42%, transparent 72%);
    filter: blur(8px);
    transform: rotateX(72deg);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-cube {
    --bp-stage-dice-half: clamp(66px, 5vw, 95px);
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.62s cubic-bezier(0.14, 0.76, 0.2, 1);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-cube.is-rolling {
    animation: bp-stage-dice-roll 0.64s linear infinite;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-cube.is-settled[data-result="1"] { transform: rotateX(-8deg) rotateY(0deg); }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-cube.is-settled[data-result="2"] { transform: rotateX(-8deg) rotateY(-90deg); }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-cube.is-settled[data-result="3"] { transform: rotateX(-98deg) rotateY(0deg); }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-cube.is-settled[data-result="4"] { transform: rotateX(82deg) rotateY(0deg); }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-cube.is-settled[data-result="5"] { transform: rotateX(-8deg) rotateY(90deg); }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-cube.is-settled[data-result="6"] { transform: rotateX(-8deg) rotateY(180deg); }

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    gap: 8%;
    padding: 18%;
    border: 1px solid rgb(224 215 190 / 0.46);
    border-radius: 13%;
    background:
        radial-gradient(circle at 30% 18%, rgb(255 246 214 / 0.18), transparent 34%),
        linear-gradient(145deg, rgb(52 50 43 / 0.98), rgb(8 17 25 / 0.99) 62%);
    box-shadow:
        inset 0 0 24px rgb(214 183 108 / 0.11),
        inset 0 -12px 22px rgb(0 0 0 / 0.38),
        0 0 20px rgb(0 0 0 / 0.18);
    backface-visibility: hidden;
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="2"],
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="4"],
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="6"] {
    border-color: rgb(139 197 230 / 0.46);
    background:
        radial-gradient(circle at 30% 18%, rgb(188 229 252 / 0.18), transparent 34%),
        linear-gradient(145deg, rgb(31 58 74 / 0.98), rgb(6 16 25 / 0.99) 64%);
    box-shadow: inset 0 0 24px rgb(105 175 217 / 0.13), inset 0 -12px 22px rgb(0 0 0 / 0.38);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face.front { transform: translateZ(var(--bp-stage-dice-half)); }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face.back { transform: rotateY(180deg) translateZ(var(--bp-stage-dice-half)); }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face.right { transform: rotateY(90deg) translateZ(var(--bp-stage-dice-half)); }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face.left { transform: rotateY(-90deg) translateZ(var(--bp-stage-dice-half)); }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face.top { transform: rotateX(90deg) translateZ(var(--bp-stage-dice-half)); }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face.bottom { transform: rotateX(-90deg) translateZ(var(--bp-stage-dice-half)); }

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face i {
    display: none;
    align-self: center;
    justify-self: center;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #f0eadc;
    box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.42), 0 0 9px rgb(238 225 190 / 0.18);
}

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face i:nth-child(1) { grid-area: 1 / 1; }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face i:nth-child(2) { grid-area: 1 / 2; }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face i:nth-child(3) { grid-area: 1 / 3; }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face i:nth-child(4) { grid-area: 2 / 1; }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face i:nth-child(5) { grid-area: 2 / 2; }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face i:nth-child(6) { grid-area: 2 / 3; }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face i:nth-child(7) { grid-area: 3 / 1; }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face i:nth-child(8) { grid-area: 3 / 2; }
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face i:nth-child(9) { grid-area: 3 / 3; }

body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="1"] i:nth-child(5),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="2"] i:nth-child(1),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="2"] i:nth-child(9),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="3"] i:nth-child(1),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="3"] i:nth-child(5),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="3"] i:nth-child(9),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="4"] i:nth-child(1),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="4"] i:nth-child(3),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="4"] i:nth-child(7),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="4"] i:nth-child(9),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="5"] i:nth-child(1),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="5"] i:nth-child(3),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="5"] i:nth-child(5),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="5"] i:nth-child(7),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="5"] i:nth-child(9),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="6"] i:nth-child(1),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="6"] i:nth-child(3),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="6"] i:nth-child(4),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="6"] i:nth-child(6),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="6"] i:nth-child(7),
body.bp-observer-stage-ready:is(.bp-observer-stage-s, .bp-observer-stage-a, .bp-observer-stage-g) .bp-stage-dice-face[data-value="6"] i:nth-child(9) {
    display: block;
}

@keyframes bp-stage-dice-roll {
    from { transform: rotateX(-18deg) rotateY(0deg) rotateZ(0deg); }
    to { transform: rotateX(342deg) rotateY(540deg) rotateZ(180deg); }
}

/* S traditional public-select reveal. The online dice keeps ownership of its
   result/timing/removal; observer-stage-public-select.js starts this scene only
   after that exact dice container leaves the DOM. */
body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-select-effect {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 46%, rgb(24 43 65 / 0.34), transparent 42%),
        rgb(1 4 7 / 0.92);
    opacity: 0;
    backdrop-filter: blur(5px);
    animation: bp-stage-public-fade-in 0.3s ease forwards;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-select-effect.is-closing {
    animation: bp-stage-public-fade-out 0.5s ease forwards;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-scene {
    position: relative;
    isolation: isolate;
    width: 91.2%;
    height: 85.6%;
    overflow: hidden;
    clip-path: polygon(2.5% 0, 100% 0, 97.5% 100%, 0 100%);
    background: #07101a;
    box-shadow: 0 0 70px rgb(0 0 0 / 0.58);
    animation: bp-stage-public-scene-in 0.55s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-scene::before {
    content: "";
    position: absolute;
    z-index: 18;
    inset: 10px 12px;
    clip-path: polygon(2.1% 0, 100% 0, 97.9% 100%, 0 100%);
    border-top: 1px solid rgb(231 203 135 / 0.72);
    border-bottom: 1px solid rgb(109 178 218 / 0.42);
    pointer-events: none;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-half {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60%;
    overflow: hidden;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-half.left {
    z-index: 2;
    left: 0;
    width: 100%;
    transform-origin: left center;
    -webkit-mask-image: linear-gradient(93deg, #000 0 35%, transparent 65% 100%);
    mask-image: linear-gradient(93deg, #000 0 35%, transparent 65% 100%);
    animation: bp-stage-public-left-in 0.68s 0.08s cubic-bezier(0.16, 0.82, 0.22, 1) both;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-half.right {
    z-index: 1;
    right: 0;
    width: 100%;
    transform-origin: right center;
    -webkit-mask-image: linear-gradient(93deg, transparent 0 35%, #000 65% 100%);
    mask-image: linear-gradient(93deg, transparent 0 35%, #000 65% 100%);
    animation: bp-stage-public-right-in 0.68s 1.08s cubic-bezier(0.16, 0.82, 0.22, 1) both;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-backdrop,
body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-art,
body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-vignette {
    position: absolute;
    inset: 0;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-backdrop {
    z-index: 0;
    background-image:
        radial-gradient(circle at 50% 48%, rgb(55 95 156 / 0.12), transparent 40%),
        var(--bp-stage-public-backdrop);
    background-position: center;
    background-size: cover;
    transform: scale(1.04);
    filter: saturate(0.82) brightness(0.68);
    animation: bp-stage-public-backdrop-settle 2.2s 0.55s ease forwards;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-half.right .bp-stage-public-backdrop {
    animation-delay: 1.55s;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-art {
    z-index: 2;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-half.left .bp-stage-public-art {
    right: auto;
    width: 60%;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-half.right .bp-stage-public-art {
    right: 0;
    left: auto;
    width: 60%;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-art > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 22px 34px rgb(0 0 0 / 0.55));
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-half.left .bp-stage-public-art > img {
    object-position: 58% center;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-half.right .bp-stage-public-art > img {
    object-position: 42% center;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-vignette {
    z-index: 3;
    pointer-events: none;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-half.left .bp-stage-public-vignette {
    background: linear-gradient(90deg, rgb(2 7 13 / 0.48), transparent 32%, transparent 76%, rgb(2 7 13 / 0.28));
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-half.right .bp-stage-public-vignette {
    background: linear-gradient(270deg, rgb(2 7 13 / 0.48), transparent 32%, transparent 76%, rgb(2 7 13 / 0.28));
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-sweep {
    position: absolute;
    z-index: 10;
    top: -20%;
    bottom: -20%;
    left: -26%;
    width: 18%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgb(151 194 255 / 0.16), rgb(255 235 176 / 0.72), rgb(151 194 255 / 0.14), transparent);
    filter: blur(2px);
    animation: bp-stage-public-sweep 1.18s 1.62s cubic-bezier(0.2, 0.72, 0.2, 1) both;
    pointer-events: none;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-title {
    position: absolute;
    z-index: 20;
    top: 7.5%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    text-shadow: 0 4px 22px #000;
    animation: bp-stage-public-title-in 0.52s 0.4s both;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-title small {
    display: block;
    color: #cbd5dc;
    font-family: var(--bp-stage-font-sans);
    font-size: clamp(14px, 1vw, 20px);
    font-weight: 700;
    letter-spacing: 0.24em;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-title strong {
    display: block;
    margin-top: 8px;
    color: #f2dfa8;
    font-family: var(--bp-stage-font-serif);
    font-size: clamp(28px, 2.35vw, 46px);
    font-weight: 600;
    letter-spacing: 0.18em;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-nameplate {
    position: absolute;
    z-index: 20;
    bottom: 7.4%;
    width: min(30%, 470px);
    padding: clamp(13px, 1.2vw, 23px) clamp(24px, 2vw, 38px);
    background: linear-gradient(90deg, rgb(1 5 10 / 0.94), rgb(8 19 31 / 0.86) 78%, rgb(8 19 31 / 0.22));
    text-shadow: 0 4px 22px #000;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-nameplate.left {
    left: 5.8%;
    border-left: 3px solid #f2dfa8;
    clip-path: polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 4% 50%);
    text-align: left;
    animation: bp-stage-public-name-left-in 0.5s 0.48s both;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-nameplate.right {
    right: 5.8%;
    border-right: 3px solid #a9ddfa;
    clip-path: polygon(7% 0, 100% 0, 96% 50%, 100% 100%, 7% 100%, 0 50%);
    background: linear-gradient(270deg, rgb(1 5 10 / 0.94), rgb(8 19 31 / 0.86) 78%, rgb(8 19 31 / 0.22));
    text-align: right;
    animation: bp-stage-public-name-right-in 0.5s 1.48s both;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-nameplate small {
    display: block;
    color: #cbd5dc;
    font-family: var(--bp-stage-font-sans);
    font-size: clamp(13px, 0.9vw, 18px);
    font-weight: 700;
    letter-spacing: 0.14em;
}

body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-nameplate b {
    display: block;
    margin-top: 4px;
    color: #eee8dc;
    font-family: var(--bp-stage-font-sans);
    font-size: clamp(28px, 2.15vw, 42px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.08em;
}

@keyframes bp-stage-public-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bp-stage-public-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes bp-stage-public-scene-in {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes bp-stage-public-left-in {
    from { opacity: 0; transform: translateX(-9%) scale(1.04); filter: saturate(0.25); }
    to { opacity: 1; transform: none; filter: none; }
}
@keyframes bp-stage-public-right-in {
    from { opacity: 0; transform: translateX(9%) scale(1.04); filter: saturate(0.25); }
    to { opacity: 1; transform: none; filter: none; }
}
@keyframes bp-stage-public-backdrop-settle {
    from { transform: scale(1.04); filter: saturate(0.82) brightness(0.68) blur(0); }
    58% { transform: scale(1.012); filter: saturate(0.74) brightness(0.63) blur(4px); }
    to { transform: scale(1); filter: saturate(0.76) brightness(0.65) blur(1.5px); }
}
@keyframes bp-stage-public-sweep {
    from { left: -26%; opacity: 0; }
    15% { opacity: 1; }
    to { left: 108%; opacity: 0; }
}
@keyframes bp-stage-public-title-in {
    from { opacity: 0; transform: translate(-50%, -18px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes bp-stage-public-name-left-in {
    from { opacity: 0; transform: translateX(-34px); }
    to { opacity: 1; transform: none; }
}
@keyframes bp-stage-public-name-right-in {
    from { opacity: 0; transform: translateX(34px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-select-effect,
    body.bp-observer-stage-ready.bp-observer-stage-s.online-observer-mode .bp-stage-public-select-effect * {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
    }
}

@keyframes bp-stage-scene-in {
    from { opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    to { opacity: 1; clip-path: polygon(2.5% 0, 100% 0, 97.5% 100%, 0 100%); }
}

@keyframes bp-stage-character-in {
    from { opacity: 0; translate: 5% 2%; scale: 0.9; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes bp-stage-backdrop-settle {
    to { scale: 1; filter: blur(4px); }
}

@keyframes bp-stage-pick-color {
    0% { filter: saturate(0.78) brightness(0.82); }
    45% { filter: saturate(1.2) brightness(1.12); }
    100% { filter: saturate(1.06) brightness(1); }
}

@keyframes bp-stage-ban-grayscale {
    from { filter: grayscale(0) contrast(1); }
    to { filter: grayscale(1) contrast(1.08); }
}

@keyframes bp-stage-pick-sweep {
    from { translate: 0 0; opacity: 0; }
    20% { opacity: 1; }
    to { translate: 690% 0; opacity: 0; }
}

@keyframes bp-stage-copy-in {
    from { opacity: 0; translate: -8% 0; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes bp-stage-ban-stamp {
    from { opacity: 0; scale: 1.22; translate: -50% -50%; }
    to { opacity: 1; scale: 1; }
}

body.bp-observer-stage-ready .ban-overlay {
    font-family: var(--bp-stage-font-impact) !important;
    font-weight: 400 !important;
    font-synthesis: none;
}

body.bp-observer-stage-enabled > #character-effect-btn.bp-stage-effect-toggle {
    position: fixed;
    z-index: 80;
    bottom: clamp(7px, 0.9vh, 11px);
    left: 50%;
    display: grid !important;
    place-items: center;
    width: clamp(26px, 1.7vw, 32px);
    height: clamp(26px, 1.7vw, 32px);
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    border: 1px solid rgb(173 191 207 / 0.14);
    border-radius: 50%;
    background: rgb(4 11 18 / 0.34);
    box-shadow: inset 0 0 12px rgb(173 191 207 / 0.025);
    color: rgb(198 208 216 / 0.48) !important;
    font-size: clamp(13px, 0.85vw, 16px);
    opacity: 0.62;
    cursor: pointer;
    transition: opacity 0.16s ease, color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

body.bp-observer-stage-enabled > #character-effect-btn.bp-stage-effect-toggle:hover,
body.bp-observer-stage-enabled > #character-effect-btn.bp-stage-effect-toggle:focus-visible {
    border-color: rgb(173 191 207 / 0.28);
    background: rgb(8 18 28 / 0.58);
    color: rgb(226 231 233 / 0.78) !important;
    opacity: 0.9;
    outline: none;
}

body.bp-observer-stage-enabled > #character-effect-btn.bp-stage-effect-toggle.active {
    color: rgb(211 218 220 / 0.62) !important;
    text-shadow: none !important;
}

body.bp-observer-stage-enabled > #online-observer-resync.bp-stage-resync-toggle {
    position: fixed;
    z-index: 80;
    bottom: clamp(7px, 0.9vh, 11px);
    left: calc(50% + clamp(34px, 2.2vw, 42px));
    display: grid !important;
    place-items: center;
    width: clamp(26px, 1.7vw, 32px);
    height: clamp(26px, 1.7vw, 32px);
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    border: 1px solid rgb(173 191 207 / 0.14);
    border-radius: 50%;
    background: rgb(4 11 18 / 0.34);
    box-shadow: inset 0 0 12px rgb(173 191 207 / 0.025);
    color: rgb(198 208 216 / 0.48) !important;
    font-size: clamp(13px, 0.85vw, 16px);
    opacity: 0.62;
    cursor: pointer;
    transition: opacity 0.16s ease, color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

body.bp-observer-stage-enabled > #online-observer-resync.bp-stage-resync-toggle:hover,
body.bp-observer-stage-enabled > #online-observer-resync.bp-stage-resync-toggle:focus-visible {
    border-color: rgb(173 191 207 / 0.28);
    background: rgb(8 18 28 / 0.58);
    color: rgb(226 231 233 / 0.78) !important;
    opacity: 0.9;
    outline: none;
}

body.bp-observer-stage-enabled > #online-observer-resync.bp-stage-resync-toggle:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

body.bp-observer-stage-enabled > #online-observer-resync.bp-stage-resync-toggle.is-synced {
    color: #22c55e !important;
}

/* score_BP owns the final Line Up reveal across the explicit A/S/G Electron
   observer surfaces, so the child stage must not retain its reveal blur. */
body.bp-observer-stage-ready .online-final-bp-reveal { display: none !important; }
body.bp-observer-stage-ready.online-observer-mode.online-final-bp-reveal-active
    > :not(#online-final-bp-reveal):not(script):not(style) {
    filter: none !important;
}

/* Suppress the complete legacy page from the first paint. The head preflight
   class is URL-only; online-bp.js later exposes either the dedicated entry
   card or the ready observer stage. */
html.online-embedded-observer-requested,
html.online-embedded-observer-requested body:not(.online-embedded-observer-entry):not(.bp-observer-stage-ready) {
    background: #040b12 !important;
}

html.online-embedded-observer-requested.bp-observer-stage-root {
    background: transparent !important;
}

html.online-embedded-observer-requested body:not(.online-embedded-observer-entry):not(.bp-observer-stage-ready)
    > :not(script):not(style) {
    visibility: hidden !important;
}

/* A/S keep the entry gate inside their legacy .container while G keeps it as
   a body sibling. Neutralize the wrapper and hide every non-entry surface in
   both structures until a real observer room has made the stage ready. */
body.online-embedded-observer-entry:not(.bp-observer-stage-ready) {
    overflow: hidden !important;
    background: #040b12 !important;
}

body.online-embedded-observer-entry:not(.bp-observer-stage-ready) > .container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body.online-embedded-observer-entry:not(.bp-observer-stage-ready)
    > .container > :not(.online-role-gate),
body.online-embedded-observer-entry:not(.bp-observer-stage-ready)
    > :not(.container):not(.online-role-gate):not(script):not(style) {
    visibility: hidden !important;
}

/* Exact Electron opt-in entry. The ordinary browser role gate keeps its original DOM and styles. */
body.online-embedded-observer-entry .online-role-gate {
    position: fixed;
    z-index: 20000;
    inset: 0;
    display: grid;
    place-items: center;
    max-width: none;
    margin: 0;
    padding: clamp(20px, 4vw, 64px);
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(ellipse at 12% 18%, rgb(214 183 108 / 0.12), transparent 28%),
        radial-gradient(ellipse at 88% 20%, rgb(105 175 217 / 0.13), transparent 30%),
        rgb(0 0 0 / 0.72);
    box-shadow: none;
}

body.online-embedded-observer-entry:not(.bp-observer-stage-ready) .bp-area {
    visibility: hidden;
}

body.online-embedded-observer-entry .observer-login {
    display: block !important;
    box-sizing: border-box;
    width: min(560px, 100%);
    margin: 0;
}

body.online-embedded-observer-entry .embedded-observer-entry-card {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: clamp(28px, 3vw, 46px);
    overflow: hidden;
    border: 1px solid rgb(173 191 207 / 0.2);
    border-radius: 0;
    background:
        linear-gradient(90deg, rgb(214 183 108 / 0.08), transparent 38%, transparent 62%, rgb(105 175 217 / 0.08)),
        rgb(5 12 20 / 0.94);
    box-shadow: 0 26px 80px rgb(0 0 0 / 0.55), inset 0 0 48px rgb(0 0 0 / 0.24);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

body.online-embedded-observer-entry .embedded-observer-entry-card::before,
body.online-embedded-observer-entry .embedded-observer-entry-card::after {
    content: "";
    position: absolute;
    top: 0;
    width: 42%;
    height: 1px;
    pointer-events: none;
}

body.online-embedded-observer-entry .embedded-observer-entry-card::before {
    left: 0;
    background: linear-gradient(90deg, var(--bp-stage-gold), transparent);
    box-shadow: 0 0 14px rgb(214 183 108 / 0.2);
}

body.online-embedded-observer-entry .embedded-observer-entry-card::after {
    right: 0;
    background: linear-gradient(270deg, var(--bp-stage-blue), transparent);
    box-shadow: 0 0 14px rgb(105 175 217 / 0.2);
}

body.online-embedded-observer-entry .embedded-observer-entry-header {
    margin-bottom: clamp(24px, 3vh, 34px);
    text-align: center;
}

body.online-embedded-observer-entry .embedded-observer-entry-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--bp-stage-gold-bright);
    font-size: clamp(10px, 0.72vw, 13px);
    font-weight: 800;
    letter-spacing: 0.22em;
}

body.online-embedded-observer-entry .embedded-observer-entry-header h2 {
    margin: 0;
    color: var(--bp-stage-ivory);
    font: 600 clamp(26px, 2.3vw, 38px) "Songti SC", "STSong", serif;
    letter-spacing: 0.1em;
    text-shadow: 0 0 24px rgb(214 183 108 / 0.16), 0 3px 14px #000;
}

body.online-embedded-observer-entry .embedded-observer-entry-header p {
    margin: 10px 0 0;
    color: var(--bp-stage-muted);
    font-size: clamp(12px, 0.86vw, 15px);
    font-weight: 700;
    letter-spacing: 0.08em;
}

body.online-embedded-observer-entry .embedded-observer-entry-fields {
    display: grid;
    gap: 16px;
}

body.online-embedded-observer-entry .embedded-observer-entry-field {
    display: grid;
    gap: 8px;
}

body.online-embedded-observer-entry .embedded-observer-entry-field > span {
    color: #c5cdd4;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

body.online-embedded-observer-entry .online-role-gate .embedded-observer-entry-field input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border: 1px solid rgb(173 191 207 / 0.24);
    border-radius: 0;
    outline: 0;
    background: rgb(2 7 13 / 0.82);
    color: var(--bp-stage-ivory);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

body.online-embedded-observer-entry .online-role-gate .embedded-observer-entry-field input:focus {
    border-color: rgb(214 183 108 / 0.78);
    box-shadow: 0 0 0 1px rgb(214 183 108 / 0.16), 0 0 20px rgb(214 183 108 / 0.08);
}

body.online-embedded-observer-entry .embedded-observer-entry-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

body.online-embedded-observer-entry .online-role-gate .embedded-observer-entry-actions button {
    min-width: 180px;
    height: 46px;
    padding: 0 24px;
    border: 1px solid rgb(214 183 108 / 0.58);
    border-radius: 0;
    background: linear-gradient(90deg, rgb(214 183 108 / 0.2), rgb(105 175 217 / 0.14));
    color: var(--bp-stage-ivory);
    font-size: 15px;
    font-weight: 850;
    letter-spacing: 0.12em;
    box-shadow: inset 0 -2px 0 rgb(214 183 108 / 0.44);
}

body.online-embedded-observer-entry .embedded-observer-entry-status {
    display: block;
    min-height: 1.4em;
    margin-top: 16px;
    color: var(--bp-stage-muted) !important;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

body.online-embedded-observer-entry .embedded-observer-entry-offline {
    display: block;
    margin: 8px auto 0;
    padding: 4px 10px;
    border: 0;
    background: transparent;
    color: rgb(184 196 205 / 0.68);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: underline;
    text-decoration-color: rgb(184 196 205 / 0.25);
    text-underline-offset: 3px;
    cursor: pointer;
}

body.online-embedded-observer-entry .embedded-observer-entry-offline:hover,
body.online-embedded-observer-entry .embedded-observer-entry-offline:focus-visible {
    color: var(--bp-stage-ivory);
    text-decoration-color: rgb(214 183 108 / 0.62);
    outline: 0;
}

@media (max-width: 1200px), (max-height: 720px) {
    body.bp-observer-stage-ready .observer-info-main {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 25%) minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.bp-observer-stage-ready .slot-highlight,
    body.bp-observer-stage-ready .character-grid .character-card::before {
        animation: none !important;
    }
}