/* The same display components serve phone, TV, and Settings previews. */
[data-display-style]{font-variant-numeric:tabular-nums}
.display-row{display:inline-flex;align-items:center;justify-content:center;gap:.065em;vertical-align:middle;line-height:1;font-size:.84em;letter-spacing:0;white-space:nowrap}
.display-row>*{flex:none}
.display-colon{font:700 .85em/1 ui-monospace,monospace;width:.2em;text-align:center;margin:0 .02em}
.display-led{display:block;stroke:none;fill:currentColor;flex:none}
.display-led.matrix-led{width:.63em;height:.91em}
.display-led.segment-led{width:.52em;height:1em}
.display-led .lamp-off{opacity:.085}
.display-led .lamp-on{opacity:1}
[data-display-style=stadium]{color:#ffce59;text-shadow:none;filter:drop-shadow(0 0 .045em #ffa82b55)}
[data-display-style=gym]{color:#ff503a;text-shadow:none;filter:drop-shadow(0 0 .025em #ff26175c)}
[data-display-style=neon]{font-family:ui-sans-serif,system-ui,sans-serif;font-weight:800;letter-spacing:-.05em;color:#d1ffff;text-shadow:0 0 .045em #6de6ed,0 0 .14em #28c9ee66}
[data-display-style=flip]{font-family:"Arial Narrow",Arial,sans-serif;font-weight:800;letter-spacing:0;color:#f8efd6}
.flip-cell{position:relative;display:inline-block;width:.65em;height:1.05em;background:linear-gradient(#33332e 49.5%,#252722 50.5%);border-radius:.065em;perspective:3em;box-shadow:0 .025em .04em #000a,inset 0 .012em .009em #ffffff1a;line-height:1.05em;text-align:center}
.flip-base{display:block;line-height:1.05em}
.flip-seam{position:absolute;z-index:5;top:calc(50% - 1px);left:0;right:0;height:2px;background:#080b09;box-shadow:0 1px #ffffff10;pointer-events:none}
.flip-seam:before,.flip-seam:after{content:"";position:absolute;top:-.025em;height:.06em;width:.035em;background:#92938a;border-radius:1px;box-shadow:0 1px 2px #0008}
.flip-seam:before{left:.02em}.flip-seam:after{right:.02em}
.flip-half{position:absolute;left:0;width:100%;height:50%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;z-index:3}
.flip-half>span{display:block;width:100%;height:1.05em;line-height:1.05em}
.flip-old-top{top:0;background:#33332e;border-radius:.065em .065em 0 0;transform-origin:center bottom;animation:flip-top .42s ease-in forwards}
.flip-old-bottom,.flip-new-bottom{top:50%;background:#252722;border-radius:0 0 .065em .065em}
.flip-old-bottom>span,.flip-new-bottom>span{transform:translateY(-50%)}
.flip-old-bottom{animation:flip-hide .42s step-end forwards;z-index:2}
.flip-new-bottom{transform-origin:center top;animation:flip-bottom .42s ease-out forwards;z-index:4}
@keyframes flip-top{0%{transform:rotateX(0)}50%,100%{transform:rotateX(-90deg)}}
@keyframes flip-bottom{0%,50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes flip-hide{0%{opacity:1}50%,100%{opacity:0}}

/* Cabinet styles retain each team's chosen colour as an identifying rail. */
[data-score-style]:not([data-score-style=classic]) .team-card{--ink:#edf0ee!important;color:#edf0ee;border-top:5px solid var(--team)}
[data-score-style]:not([data-score-style=classic]) .score-tap{background:none}
[data-score-style]:not([data-score-style=classic]) .team-name{color:#edf0ee}
[data-score-style=stadium] .team-card{background:radial-gradient(#ffffff06 1px,transparent 1px) 0 0/5px 5px,#101510;border-radius:12px;border-bottom:3px solid #495143;box-shadow:inset 0 0 0 7px #0004}
[data-score-style=stadium] .team-heading{border-bottom:1px solid #596041;padding-bottom:9px}
[data-score-style=stadium] .clock-panel,[data-score-style=stadium] .tv-clock-panel{background:#101510;border-color:#656342}
[data-score-style=flip] .team-card{background:linear-gradient(140deg,#292820,#151813);border-radius:16px;box-shadow:inset 0 0 0 1px #a9a38930}
[data-score-style=flip] .score-number{padding:.06em 0;letter-spacing:0}
[data-score-style=flip] .clock-panel,[data-score-style=flip] .tv-clock-panel{background:#171a16;border-color:#555647}
[data-score-style=gym] .team-card{background:#090b10;border-radius:9px;box-shadow:inset 0 0 0 5px #323c49,inset 0 0 0 7px #090b10}
[data-score-style=gym] .team-heading{border-bottom:1px solid #4a5260;padding-bottom:9px}
[data-score-style=gym] .clock-panel,[data-score-style=gym] .tv-clock-panel{background:#080b0f;border-color:#485563;border-radius:7px}
[data-score-style=neon] .team-card{background:radial-gradient(ellipse at top,#222040,#101121 75%);box-shadow:inset 0 0 0 1px #9ca7ff3b}
[data-score-style=neon] .clock-panel,[data-score-style=neon] .tv-clock-panel{background:#141429;border-color:#7374a2}
[data-score-style]:not([data-score-style=classic]) .score-number{letter-spacing:0;padding-right:0}
[data-score-style]:not([data-score-style=classic]) .score-number.pop{animation:none}
.clock-digits .display-row{font-size:.76em;gap:.04em}
.tv-clock-panel .display-row{font-size:.84em;gap:.06em}
.clock-panel.expired [data-display-style],.tv-clock-panel[data-expired=true] [data-display-style]{color:#ff8b76}

.style-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.style-choice{position:relative;cursor:pointer;min-width:0}
.style-options .style-choice>input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;border:0;margin:0}
.style-choice-body{display:flex;flex-direction:column;padding:13px 12px 11px;border:1px solid #3d4653;border-radius:14px;background:#0d131b;height:100%;transition:border-color .15s,box-shadow .15s}
.style-choice-title{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:750;line-height:1.3;color:#eaf0f8;gap:5px}
.style-check{display:grid;place-items:center;font-size:13px;width:20px;height:20px;border:1px solid #515d68;border-radius:50%;color:transparent;flex:none}
.style-choice-detail{font-size:12px;line-height:1.4;color:#adb8c7;margin-top:10px}
.style-choice>input:checked+.style-choice-body{border-color:#dafa69;box-shadow:0 0 0 1px #dafa69}
.style-choice>input:checked+.style-choice-body .style-check{background:#dafa69;border-color:#dafa69;color:#16210a}
.style-choice>input:focus-visible+.style-choice-body{outline:3px solid #dafa69;outline-offset:4px}
.style-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin-top:12px;min-height:89px;pointer-events:none}
.style-preview-clock{font:700 18px/1.1 ui-monospace,monospace}
.style-preview-scores{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font:900 32px/1.1 Impact,"Arial Narrow",sans-serif}
.style-preview-scores>span:not(.style-preview-divider){min-width:0;display:flex;justify-content:center}
.style-preview-divider{font:600 16px/1 ui-monospace,monospace;color:#66727f}
[data-score-style=classic] .style-preview-scores>span:not(.style-preview-divider){background:#1769e8;color:#fff;border-radius:6px;padding:7px}
[data-score-style=classic] .style-preview-scores>span:last-child{background:#cf362d}
[data-score-style=stadium].style-choice-body{background:#11170f}
[data-score-style=flip].style-choice-body{background:#1e211a}
[data-score-style=gym].style-choice-body{background:#080b10}
[data-score-style=neon].style-choice-body{background:#17152b}
@media(max-width:380px){.style-choice-body{padding:12px 9px}.style-choice-title{font-size:14px}.style-preview-scores{font-size:28px;gap:7px}.style-options{gap:10px}}
@media(orientation:portrait) and (max-width:900px){[data-score-style=stadium] .team-heading,[data-score-style=gym] .team-heading{padding-bottom:5px}[data-score-style]:not([data-score-style=classic]) .clock-digits{min-width:95px}}
@media(prefers-reduced-motion:reduce){.flip-half{display:none!important}.style-choice-body{transition:none}}

/* Artwork and score own separate grid cells. Container sizes follow the space
   actually left by the heading, clock, result and controls, not viewport height. */
.score-tap,.tv-card-content{gap:12px}
.score-tap>.team-heading,.score-tap>.tap-hint,.tv-card-content>.team-heading,.tv-card-content>.tv-games{flex-shrink:0}
.score-stage{display:block;flex:1 1 0;align-self:stretch;position:relative;width:100%;min-width:0;min-height:0;container:score-stage / size}
.score-layout{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);grid-template-rows:minmax(0,1fr);align-items:stretch;gap:clamp(8px,1.1vw,18px);width:100%;height:100%;min-width:0;min-height:0}
.sport-slot{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden}
.score-layout .sport-slot .serve-visual{position:static;inset:auto;transform:none;aspect-ratio:auto;width:100%;height:100%;max-width:none;max-height:none;opacity:1;z-index:auto}
.sport-slot>.serve-visual>.serve-scene,.sport-slot>.serve-visual>.sport-scene{width:100%;height:100%;overflow:hidden}
.score-value{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;width:100%;height:100%;container:score-value / size}
.score-value>.score-number{--score-units:1.46;--score-height:1.1;white-space:nowrap;flex:none;max-width:none;line-height:1}
.score-value>.score-number[data-digits="1"]{--score-units:.78}
.score-value>.score-number[data-digits="3"]{--score-units:2.2}
.score-value>[data-display-style=stadium]{--score-units:1.23;--score-height:.96}
.score-value>[data-display-style=stadium][data-digits="3"]{--score-units:1.82}
.score-value>[data-display-style=flip]{--score-units:1.25;--score-height:1.08}
.score-value>[data-display-style=flip][data-digits="3"]{--score-units:1.86}
.score-value>[data-display-style=gym]{--score-units:1.08;--score-height:1.03}
.score-value>[data-display-style=gym][data-digits="3"]{--score-units:1.59}
.score-value>[data-display-style=neon]{--score-units:1.6;--score-height:1.22}
.score-value>[data-display-style=neon][data-digits="3"]{--score-units:2.33}
:is(.app,.tv-match)[data-score-style] .score-stage .score-value>.score-number{margin:0;padding:0;transform:none;font-size:min(calc(18vw / var(--score-units)),calc(35vh / var(--score-height)),300px)}
@supports (container-type:size){
  :is(.app,.tv-match)[data-score-style] .score-stage .score-value>.score-number{font-size:min(calc(94cqw / var(--score-units)),calc(91cqh / var(--score-height)),320px)}
}
/* Panel/LED faces need more horizontal room. Stack only when the actual score
   area is tall enough; showing a clock or shortening a window can switch back. */
@container score-stage (min-width:330px) and (min-height:380px){
  :is([data-score-style=flip],[data-score-style=stadium],[data-score-style=gym]) .score-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.4fr) minmax(0,.6fr);row-gap:12px}
  :is([data-score-style=flip],[data-score-style=stadium],[data-score-style=gym]) .sport-slot{width:min(88%,340px);justify-self:center}
}
[data-score-style=neon] .score-layout{column-gap:clamp(12px,1.5vw,24px)}
@media(orientation:portrait) and (max-width:900px){.score-tap{gap:5px}.score-layout{gap:8px}.app .score-tap{padding-top:11px}.app .team-bottom{padding-bottom:7px}}
@media(orientation:landscape) and (max-height:650px){.score-tap{gap:5px}.score-layout{gap:8px}}