/* ============================================================================ eurocup-predict.css — the twelve-second prediction. Twelve seconds is a nod to the shot clock, and it is also the reason the running split stays hidden while the window is open: a visible tally in the last four seconds of a twelve-second vote is a bandwagon, not a prediction. Three surfaces share this sheet — the wall, the phone, and the broadcast overlay that runs the same activation as a corner graphic over the live feed so the operator never has to choose between the game and the activation. ========================================================================== */ /* ------------------------------------------------------------- the wall */ .ec-q { font-size: var(--ec-font-size, 9vmin); font-weight: 900; line-height: 0.95; text-transform: uppercase; } .ec-opts { display: flex; gap: 2vmin; margin-top: 3vmin; } .ec-opt { flex: 1; border: 0.6vmin solid var(--ec-rule); padding: 3vmin; font-size: var(--ec-font-size-2, 5vmin); font-weight: 900; text-transform: uppercase; } .ec-opt.win { background: var(--ec-hot); color: var(--ec-on-hot); } .ec-opt.lose { opacity: 0.42; } .ec-count { position: fixed; right: var(--ec-pad); top: 10vmin; font-size: 14vmin; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ec-hot); line-height: 1; } .ec-count.warn { color: var(--ec-warn); } /* --------------------------------------------------------------- phone */ .ec-choice { width: 100%; padding: 18px; margin-bottom: 8px; background: var(--ec-surface); border: 1px solid var(--ec-line); color: var(--ec-text); font: inherit; font-size: var(--ec-font-size, 17px); font-weight: 700; text-align: left; cursor: pointer; } .ec-choice.sel { background: var(--ec-hot); color: var(--ec-on-hot); border-color: var(--ec-hot); } .ec-choice[disabled] { opacity: 0.5; cursor: default; } /* ------------------------------------------------------------- overlay Keyable browser input for vMix / OBS. One slot, ever: a second card competing for attention over live basketball is worse than no card. */ /* The element has to go transparent too. eurocup.css paints `html, body { background: var(--ec-field) }` for every other surface, and overriding only leaves the root painted — which in vMix is a solid charcoal rectangle over the entire feed rather than an overlay. */ html:has(body.ec-overlay), html.ec-overlay-root { background: transparent; } body.ec-overlay { background: transparent; overflow: hidden; } body.ec-overlay.key-green, html.ec-overlay-root:has(body.key-green) { background: #00B140; } body.ec-overlay.key-magenta, html.ec-overlay-root:has(body.key-magenta) { background: #FF00FF; } body.ec-overlay #ecSlot { position: fixed; width: var(--ec-ov-w, 34vw); min-width: 380px; } body.ec-overlay.corner-bl #ecSlot { left: var(--ec-safe); bottom: var(--ec-safe); } body.ec-overlay.corner-br #ecSlot { right: var(--ec-safe); bottom: var(--ec-safe); } body.ec-overlay.corner-tl #ecSlot { left: var(--ec-safe); top: var(--ec-safe); } body.ec-overlay.corner-tr #ecSlot { right: var(--ec-safe); top: var(--ec-safe); } .ec-ov-card { background: var(--ec-ink); border-top: 0.55vmin solid var(--ec-hot); padding: 1.9vmin 2.1vmin 2.1vmin; opacity: 0; transform: translateY(1.6vmin); } .ec-ov-card.in { opacity: 1; transform: none; transition: opacity 0.18s steps(3), transform 0.18s steps(3); } @media (prefers-reduced-motion: reduce) { .ec-ov-card.in { transition: none; } } .ec-ov-eyebrow { display: flex; align-items: center; gap: 1vmin; font-size: var(--ec-font-size-2, 1.35vmin); letter-spacing: 0.26em; color: var(--ec-dim); font-weight: 700; margin-bottom: 0.9vmin; text-transform: uppercase; } .ec-ov-eyebrow b { color: var(--ec-hot); } .ec-ov-eyebrow .sp { flex: 1; } .ec-ov-card h2 { font-size: var(--ec-font-size, 3.1vmin); line-height: 1.02; font-weight: 900; letter-spacing: -0.005em; text-transform: uppercase; margin-bottom: 1.4vmin; } .ec-ov-opt { display: flex; align-items: center; gap: 1.2vmin; height: 4.6vmin; margin-top: 0.7vmin; background: var(--ec-tint-1); position: relative; overflow: hidden; } .ec-ov-opt i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ec-tint-3); transition: width 0.4s steps(8); } .ec-ov-opt span { position: relative; padding-left: 1.4vmin; font-size: var(--ec-font-size-2, 2.3vmin); font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ec-ov-opt em { position: relative; margin-left: auto; padding-right: 1.4vmin; font-style: normal; font-size: 2.3vmin; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ec-dim); } .ec-ov-opt.win { background: var(--ec-hot); color: var(--ec-on-hot); } .ec-ov-opt.win i { background: var(--ec-shade); } .ec-ov-opt.win em { color: var(--ec-on-hot); } .ec-ov-opt.lose { opacity: 0.42; } /* The countdown is a ring: a number alone does not read as urgency at 80 m, and the last three seconds are the whole point. */ .ec-ring { width: 6.4vmin; height: 6.4vmin; flex: none; position: relative; } .ec-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ec-ring circle { fill: none; stroke-width: 1.15vmin; } .ec-ring .bg { stroke: var(--ec-line); } .ec-ring .fg { stroke: var(--ec-hot); stroke-linecap: butt; } .ec-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.8vmin; font-weight: 900; font-variant-numeric: tabular-nums; } .ec-ring.warn .fg { stroke: var(--ec-warn); } .ec-ring.warn b { color: var(--ec-warn); } .ec-ov-head { display: flex; align-items: flex-start; gap: 1.6vmin; } .ec-ov-head .txt { flex: 1; min-width: 0; } /* Per-nation accuracy rows, sized for a corner rather than a wall. */ .ec-ov-row { display: flex; align-items: center; gap: 1.1vmin; height: 3.9vmin; margin-top: 0.55vmin; } .ec-ov-row img.fg { width: 5.2vmin; height: 3.3vmin; flex: none; border: 0.22vmin solid var(--ec-keyline); } .ec-ov-row .cd { width: 5.4vmin; font-size: 2.1vmin; font-weight: 900; letter-spacing: 0.04em; } .ec-ov-row .bar { flex: 1; height: 2.5vmin; background: var(--ec-tint-1); position: relative; } .ec-ov-row .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ec-tint-3); transition: width 0.4s steps(8); } .ec-ov-row .vl { width: 6.6vmin; text-align: right; font-size: 2vmin; font-weight: 900; font-variant-numeric: tabular-nums; } .ec-ov-row.lead .bar i { background: var(--ec-hot); } .ec-ov-row.lead .vl { color: var(--ec-hot); } .ec-ov-foot { margin-top: 1.2vmin; font-size: var(--ec-font-size-2, 1.3vmin); letter-spacing: 0.2em; color: var(--ec-dim); font-weight: 700; text-transform: uppercase; }