body.bws-screen-mode {
    margin: 0;
    overflow: hidden;
    background: #f1eadc;
    color: #29251e;
}

body.bws-screen-mode .bws-footer { display: none; }

.bws-live-screen {
    /* Size unit for avatars and names; portrait phones rotate the board, so it switches to vw there. */
    --u: 1vh;
    position: relative;
    --bws-screen-bg: #f1eadc;
    --bws-screen-ink: #29251e;
    --bws-screen-muted: #776f61;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 320px;
    padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 55%, rgba(218, 198, 163, .42), transparent 51%),
        radial-gradient(ellipse at 50% 120%, rgba(213, 195, 161, .33), transparent 45%),
        var(--bws-screen-bg);
    color: var(--bws-screen-ink);
    font-family: Inter, "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.bws-screen-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    flex: 0 0 auto;
    align-items: center;
    gap: 16px;
    min-height: 42px;
}

.bws-screen-event {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #30291f;
    font-size: clamp(18px, 2.7vh, 28px);
    font-weight: 800;
    letter-spacing: .035em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bws-screen-live {
    display: inline-flex;
    grid-column: 3;
    justify-self: end;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: #554b3b;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .14em;
}

.bws-screen-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8e6740;
    box-shadow: 0 0 0 4px rgba(142, 103, 64, .12), 0 0 14px rgba(142, 103, 64, .4);
    animation: bws-screen-pulse 2.2s ease-in-out infinite;
}

.bws-screen-arena {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: clamp(8px, 3vw, 54px);
    min-height: 0;
    padding: 8px 0 18px;
}

.bws-screen-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.bws-screen-total {
    display: grid;
    place-items: center;
    min-width: 1.7em;
    min-height: 1.1em;
    margin: 0 0 clamp(7px, 1.5vh, 17px);
    color: #302b23;
    font-size: clamp(38px, 7vh, 86px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.065em;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(255, 255, 255, .45);
}

.bws-screen-orb-stage {
    position: relative;
    display: grid;
    flex: 0 1 auto;
    place-items: center;
    width: min(62vh, 42vw, 760px);
    max-width: 100%;
    aspect-ratio: 1;
    transform: scale(var(--sphere-scale, 1));
    transition: transform 900ms cubic-bezier(.2, .75, .2, 1);
    filter: drop-shadow(0 20px 38px rgba(78, 59, 32, .2));
}

.bws-screen-orb-halo,
.bws-screen-orb-rim,
.bws-screen-orb {
    position: absolute;
    border-radius: 50%;
}

.bws-screen-orb-halo {
    inset: -7%;
    background: conic-gradient(from 25deg, transparent 0 13%, rgba(125, 101, 64, .08) 17%, rgba(153, 124, 78, .28) 23%, transparent 30% 43%, rgba(153, 124, 78, .2) 49%, transparent 56% 72%, rgba(125, 101, 64, .1) 79%, transparent 86%);
    filter: blur(16px);
    opacity: .74;
    animation: bws-screen-orbit 18s linear infinite, bws-screen-glow 4.5s ease-in-out infinite alternate;
}

.bws-screen-orb-rim {
    inset: -1.5%;
    border: 2px solid rgba(113, 91, 57, .38);
    box-shadow: 0 0 18px rgba(113, 91, 57, .18), inset 0 0 12px rgba(113, 91, 57, .08);
    animation: bws-screen-rim 5.2s ease-in-out infinite alternate;
}

.bws-screen-orb {
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    animation: bws-screen-float 7.2s ease-in-out infinite, bws-screen-liquid 8.6s ease-in-out infinite alternate;
}

.bws-screen-team-black .bws-screen-orb {
    color: #f6f0e5;
    background:
        radial-gradient(ellipse at 34% 22%, rgba(255, 255, 255, .2), transparent 31%),
        radial-gradient(ellipse at 67% 72%, rgba(170, 180, 198, .1), transparent 37%),
        radial-gradient(circle at 42% 40%, #282721, #11110f 70%, #070706);
    box-shadow: inset -18px -24px 46px rgba(0, 0, 0, .7), inset 10px 8px 30px rgba(255, 255, 255, .06);
}

.bws-screen-team-black .bws-screen-orb-rim {
    border-color: transparent;
    box-shadow: none;
}

.bws-screen-team-black .bws-screen-orb-halo {
    background: conic-gradient(from 25deg, transparent 0 13%, rgba(103, 81, 48, .07) 17%, rgba(143, 111, 65, .25) 23%, transparent 30% 43%, rgba(143, 111, 65, .18) 49%, transparent 56% 72%, rgba(103, 81, 48, .08) 79%, transparent 86%);
}

.bws-screen-team-white .bws-screen-orb {
    color: #39352d;
    background:
        radial-gradient(ellipse at 35% 23%, #fffdf8, transparent 35%),
        radial-gradient(ellipse at 70% 76%, rgba(141, 119, 84, .16), transparent 38%),
        radial-gradient(circle at 44% 38%, #faf6ec, #e7ddcb 73%, #c8b99f);
    box-shadow: inset -17px -22px 40px rgba(82, 66, 42, .2), inset 12px 9px 28px rgba(255, 255, 255, .82);
}

.bws-screen-crowd {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
}

.bws-screen-crowd-bubble {
    position: absolute;
    top: var(--bubble-y);
    left: var(--bubble-x);
    display: grid;
    /* --w: 0..1 share of the night's top score */
    width: calc(var(--u) * (2.1 + 2.2 * var(--w, 0)));
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(241, 224, 190, .64);
    border-radius: 50%;
    color: #f6f0e5;
    background: radial-gradient(circle at 32% 24%, rgba(246, 232, 208, .48), rgba(164, 151, 130, .24) 42%, rgba(36, 34, 30, .82));
    box-shadow: inset -3px -4px 8px rgba(0, 0, 0, .28), 0 0 12px rgba(144, 116, 69, .13);
    transition: width 900ms cubic-bezier(.2, .75, .2, 1);
    animation: bws-screen-bubble 5.8s ease-in-out var(--bubble-delay, 0s) infinite alternate;
}

.bws-screen-team-white .bws-screen-crowd-bubble {
    border-color: rgba(110, 91, 61, .32);
    color: #453d31;
    background: radial-gradient(circle at 32% 24%, #fffdf7, #e2d6c2 48%, #b8a88e);
    box-shadow: inset -3px -4px 8px rgba(75, 59, 36, .17), 0 0 12px rgba(157, 128, 80, .16);
}

.bws-screen-orb-content {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: calc(var(--u) * .9);
    width: 86%;
    /* Text follows only the square root of the sphere size (set by screen.js). */
    transform: translateY(1%) scale(var(--content-counter, 1));
    transition: transform 900ms cubic-bezier(.2, .75, .2, 1);
}

.bws-screen-leader,
.bws-screen-players {
    width: 100%;
}

.bws-screen-leader { display: grid; justify-items: center; }

/* Avatars, names and scores grow with --w (0..1 share of the night's top score). */
.bws-screen-player {
    --w: 0;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: calc(var(--u) * .35);
    min-width: 0;
    text-align: center;
}

.bws-screen-player-leader {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: calc(var(--u) * (.8 + .6 * var(--w)));
    width: fit-content;
    max-width: 100%;
    margin-bottom: calc(var(--u) * .6);
    justify-self: center;
    text-align: left;
}

.bws-screen-player-avatar {
    display: grid;
    width: calc(var(--u) * (2.8 + 5.2 * var(--w)));
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .66);
    border-radius: 50%;
    color: #fff;
    background: radial-gradient(circle at 35% 27%, #a9b1bd, #626b79 48%, #2a3039);
    box-shadow: inset -4px -5px 9px rgba(0, 0, 0, .22), 0 3px 9px rgba(0, 0, 0, .18);
    transition: width 900ms cubic-bezier(.2, .75, .2, 1);
}

.bws-screen-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.bws-screen-team-white .bws-screen-player-avatar {
    border-color: rgba(100, 82, 55, .25);
    background: radial-gradient(circle at 35% 27%, #fffdf7, #d9c9ab 52%, #a99779);
    box-shadow: inset -4px -5px 9px rgba(75, 59, 36, .16), 0 3px 9px rgba(87, 67, 38, .13);
}

.bws-screen-player-leader .bws-screen-player-avatar {
    width: calc(var(--u) * (5.6 + 6.4 * var(--w)));
}

.bws-screen-player-details {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 1px;
}

.bws-screen-player-leader .bws-screen-player-details { justify-items: start; }

.bws-screen-player-name {
    display: block;
    max-width: calc(var(--u) * (9 + 9 * var(--w)));
    overflow: hidden;
    font-size: calc(var(--u) * (1.1 + 1.4 * var(--w)));
    font-weight: 650;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bws-screen-player-score {
    font-size: calc(var(--u) * (1.25 + 1.9 * var(--w)));
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    opacity: .9;
}

.bws-screen-player-leader .bws-screen-player-name {
    max-width: calc(var(--u) * (14 + 12 * var(--w)));
    font-size: calc(var(--u) * (1.8 + 1.8 * var(--w)));
    font-weight: 750;
}

.bws-screen-player-leader .bws-screen-player-score {
    font-size: calc(var(--u) * (2.1 + 2.5 * var(--w)));
    font-weight: 750;
    opacity: 1;
}

.bws-screen-players {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: calc(var(--u) * .6) calc(var(--u) * 1.3);
    /* Narrow enough to wrap into the sphere's middle, inside the crowd ring. */
    width: 76%;
}

.bws-screen-empty {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    font-size: clamp(12px, 1.7vh, 18px);
}

.bws-screen-status {
    flex: 0 0 auto;
    min-height: 1em;
    margin: 0;
    color: var(--bws-screen-muted);
    font-size: 11px;
    text-align: center;
}

@keyframes bws-screen-orbit { to { transform: rotate(360deg); } }
@keyframes bws-screen-glow { from { opacity: .44; filter: blur(18px); } to { opacity: .88; filter: blur(9px); } }
@keyframes bws-screen-rim {
    0% { border-radius: 49% 51% 48% 52% / 51% 47% 53% 49%; transform: scale(.985) rotate(-1deg); }
    35% { border-radius: 55% 45% 53% 47% / 44% 57% 43% 56%; transform: scale(1.015) rotate(1deg); }
    68% { border-radius: 43% 57% 44% 56% / 58% 42% 55% 45%; transform: scale(1.005) rotate(-.7deg); }
    100% { border-radius: 54% 46% 57% 43% / 43% 57% 44% 56%; transform: scale(1.02) rotate(.7deg); }
}
@keyframes bws-screen-liquid {
    0% { border-radius: 49% 51% 48% 52% / 51% 47% 53% 49%; }
    30% { border-radius: 55% 45% 53% 47% / 44% 57% 43% 56%; }
    65% { border-radius: 43% 57% 44% 56% / 58% 42% 55% 45%; }
    100% { border-radius: 54% 46% 57% 43% / 43% 57% 44% 56%; }
}
@keyframes bws-screen-float {
    0%, 100% { translate: 0 0; rotate: -.3deg; }
    50% { translate: 0 -6px; rotate: .4deg; }
}
@keyframes bws-screen-bubble {
    from { translate: -50% -50%; scale: .92; }
    to { translate: calc(-50% + 3px) calc(-50% - 6px); scale: 1.06; }
}
@keyframes bws-screen-pulse { 50% { opacity: .42; transform: scale(.8); } }

@media (max-width: 760px) and (orientation: landscape) {
    .bws-live-screen { padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
    .bws-screen-header { min-height: 28px; }
    .bws-screen-event { font-size: clamp(15px, 3.8vh, 20px); }
    .bws-screen-live { gap: 5px; font-size: 9px; }
    .bws-screen-live-dot { width: 6px; height: 6px; }
    .bws-screen-arena { gap: 1%; padding: 3px 0 5px; }
    .bws-screen-team { justify-content: flex-start; }
    .bws-screen-orb-stage { width: min(50vh, 42vw); transform-origin: center top; }
    .bws-screen-total { margin-bottom: 10px; font-size: clamp(23px, 7.4vh, 40px); }
    .bws-screen-orb-content { width: 92%; }
    .bws-screen-status { font-size: 9px; }
}

@media (max-width: 760px) and (orientation: portrait) {
    .bws-live-screen {
        --u: 1vw;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100vh;
        width: 100dvh;
        height: 100vw;
        min-height: 0;
        transform: translate(-50%, -50%) rotate(90deg);
        transform-origin: center;
    }
    .bws-screen-header { min-height: 28px; }
    .bws-screen-event { font-size: clamp(15px, 4vw, 20px); }
    .bws-screen-live { gap: 5px; font-size: 9px; }
    .bws-screen-live-dot { width: 6px; height: 6px; }
    .bws-screen-arena { gap: 1%; padding: 3px 0 5px; }
    .bws-screen-team { justify-content: flex-start; }
    .bws-screen-orb-stage { width: min(50vw, 42vh); }
    .bws-screen-total { margin-bottom: 10px; font-size: clamp(23px, 7.4vw, 40px); }
    .bws-screen-orb-content { width: 92%; }
    .bws-screen-status { font-size: 9px; }
}

@media (max-height: 460px) and (orientation: landscape) {
    .bws-screen-orb-stage { width: min(50vh, 42vw); }
    .bws-screen-arena { padding-top: 0; padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bws-live-screen *,
    .bws-live-screen *::before,
    .bws-live-screen *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Many players: keep the crowd still so TV sticks and phones stay smooth. */
.bws-screen-crowd-calm .bws-screen-crowd-bubble {
    animation: none;
    translate: -50% -50%;
}

.bws-live-screen .bws-score-bump {
    animation: bws-screen-score-bump 900ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes bws-screen-score-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* Ink mode (screen-ink.js): WebGL paints the spheres behind the page;
   the DOM orbs only place avatars and names. */
.bws-screen-ink-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.bws-screen-header,
.bws-screen-arena,
.bws-screen-status {
    position: relative;
    z-index: 1;
}

.bws-screen-team { position: relative; z-index: 1; }
.bws-screen-team[data-depth="front"] { z-index: 2; }

.bws-screen-ink-on .bws-screen-orb-stage { filter: none; }
.bws-screen-ink-on .bws-screen-orb-halo,
.bws-screen-ink-on .bws-screen-orb-rim { display: none; }
.bws-screen-ink-on .bws-screen-orb {
    background: none;
    box-shadow: none;
}

/* A sphere can grow over its own total and the title; keep them on paper. */
.bws-screen-ink-on .bws-screen-total,
.bws-screen-ink-on .bws-screen-event,
.bws-screen-ink-on .bws-screen-live {
    position: relative;
    z-index: 3;
    padding: 0 .3em;
    border-radius: 999px;
    background: rgba(241, 234, 220, .74);
}

/* Event logo in place of the title on the big screen. */
.bws-screen-event .bws-event-logo {
    display: inline-block;
    width: auto;
    max-width: 100%;
    max-height: clamp(28px, 6.5vh, 76px);
    vertical-align: middle;
    object-fit: contain;
}