#match-bull-off[hidden], #match-bull-throw[hidden] { display: none !important; }
#match-bull-off {
    position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center;
    padding: 16px; box-sizing: border-box; overflow-y: auto;
    background: radial-gradient(ellipse at 50% 0%, #1b3744, #09151f 64%); color: #fff;
}
.match-bull-card {
    width: min(100%, 940px); max-height: calc(100svh - 32px); overflow-y: auto;
    box-sizing: border-box; padding: 18px 24px 22px; text-align: center;
    border: 1px solid #4e8794; border-radius: 14px; background: #10283a;
    box-shadow: 0 24px 65px rgba(0, 0, 0, .5);
}
#match-bull-backstage { margin-bottom: 5px; color: #83d6b8; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.match-bull-card h3 { margin: 0 0 3px; color: #fff; font-size: clamp(23px, 5vw, 31px); }
#match-bull-round { color: #72d3b8; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
#match-bull-instruction { margin: 8px 0 10px; color: #c2d4dc; font-size: 14px; }
.match-bull-view-controls { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 auto 10px; }
.match-bull-view-controls span { color: #c2d4dc; font-size: 13px; margin-right: 4px; }
.match-bull-view-controls button {
    min-width: 48px; padding: 7px 12px; border: 1px solid #52778a; border-radius: 6px;
    background: #17384b; color: #e7f1f4; font: inherit; font-weight: 700; cursor: pointer;
}
.match-bull-view-controls button[aria-pressed="true"] { border-color: #52d0a4; background: #116c59; color: #fff; }
.match-bull-view-controls button:hover { border-color: #8de7cf; }
.match-bull-view-controls button:focus-visible, #match-bull-throw:focus-visible { outline: 2px solid #f1c40f; outline-offset: 3px; }
.match-bull-view-controls button:disabled { opacity: .5; cursor: default; }
.match-bull-board { display: grid; place-items: center; min-height: 0; }
#match-bull-board-2d, #match-bull-board-3d { grid-area: 1 / 1; }
#match-bull-board-2d { display: grid; place-items: center; width: min(58svh, 510px, 82vw); aspect-ratio: 1;
    border: 2px solid #222b2d; border-radius: 50%; box-sizing: border-box;
    background: radial-gradient(circle, #101719 0 63%, #202627 63.5%, #111719 68%, #161c1e 93%, #080d0f 100%);
    box-shadow: 0 5px 18px #0008, inset 0 0 20px #0009;
}
#match-bull-board-2d #dartboard { display: block; width: 76%; height: auto; max-width: none; margin: 0;
    border-radius: 50%; box-shadow: 0 0 0 3px #080b0c, 0 3px 13px #000a; }
#match-bull-board-3d { width: min(58svh, 510px, 82vw); aspect-ratio: 1; }
#match-bull-board-3d #dartboard-3d { display: block; width: 100%; height: 100%;
    margin: auto; overflow: hidden; border: 1px solid #34546c; border-radius: 12px;
    box-sizing: border-box; background: radial-gradient(ellipse at 45% 30%, #233c4a, #080f17 85%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
#match-bull-board-3d #dartboard-3d canvas { display: block; width: 100%; height: 100%; margin: 0; border: 0; background: transparent; }
#match-bull-board-2d[hidden], #match-bull-board-3d[hidden],
#match-bull-board-2d #dartboard[hidden], #match-bull-board-3d #dartboard-3d[hidden] { display: none !important; }
.match-bull-results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 790px; margin: 12px auto 0; text-align: left; }
.match-bull-results > div { min-width: 0; padding: 10px 12px; border: 1px solid #365c70; border-radius: 7px; background: #163449; }
.match-bull-results strong { display: block; overflow-wrap: anywhere; font-size: 14px; }
.match-bull-results span { display: block; margin-top: 4px; color: #c1d8e3; font-size: 13px; }
#match-bull-prompt { min-height: 20px; margin: 11px 0 8px; color: #e4f4f3; font-weight: 700; }
#match-bull-throw { width: 100%; max-width: 260px; padding: 11px 15px; border: 1px solid #44c993; border-radius: 7px;
    background: #169463; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
#match-bull-throw:hover { background: #1ab777; }
@media (max-width: 600px) {
    .match-bull-card { padding: 15px 12px; }
    #match-bull-board-2d { width: min(78vw, 46svh); }
    #match-bull-board-3d { width: min(78vw, 46svh); }
    .match-bull-results { gap: 6px; }
}