/* The Sypher battle player, as it lives inside the front page's battle box. */
:root { --sx-blue: #2350B5; --sx-paper: #EEE7DA; --sx-ink: #121212; --sx-light: #FBF8F1; }

/* MCs: framed hips-up, the one on the mic lit and nodding to the beat */
.sx-mc { position: absolute; top: 0; transition: filter .3s, opacity .3s; }
.sx-mc img { display: block; height: 100%; width: auto; }
.sx-mc.on { z-index: 2; filter: drop-shadow(0 0 22px rgba(255, 236, 200, .2)); animation: sx-bump var(--beat, .66s) ease-in-out infinite; }
.sx-mc.off { filter: grayscale(.5) brightness(.55); }
.sx-mc.idle { filter: grayscale(.25) brightness(.85); }
@keyframes sx-bump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .sx-mc.on { animation: none; } }
.sx-mouth { position: absolute; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.sx-mouth g { display: none; }
.sx-mouth[data-f=mid] .f-mid, .sx-mouth[data-f=wide] .f-wide, .sx-mouth[data-f=o] .f-o { display: inline; }

/* lyrics: one bar at a time, pasted up word by word */
.sx-onmic { font-family: 'Azeret Mono', monospace; font-weight: 800; font-size: 10px; letter-spacing: .04em; color: var(--sx-paper); text-transform: uppercase; min-height: 14px; }
.sx-onmic .t { margin-left: 8px; color: #8E887C; font-variant-numeric: tabular-nums; }
.sx-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 4px; align-content: flex-start; min-height: 30px; }
.sx-strip { display: inline-block; padding: 2px 6px 3px; background: var(--sx-paper); color: var(--sx-ink); font-family: 'Schibsted Grotesk', Arial, sans-serif; font-weight: 800; font-size: 18px; line-height: 1.1; letter-spacing: -.02em; box-shadow: 2px 2px 0 rgba(0, 0, 0, .45); transform: rotate(var(--r)); }
.sx-strip.wait { visibility: hidden; }
.sx-strip.in { animation: sx-pop .16s ease-out; }
.sx-strip.now { background: var(--sx-blue); color: var(--sx-light); }
.sx-strip.bleep { background: var(--sx-ink); color: transparent; position: relative; }
.sx-strip.bleep::after { content: "#!@%"; position: absolute; inset: 0; display: grid; place-items: center; color: #6F8FE6; }
@keyframes sx-pop { from { transform: scale(.6) rotate(var(--r)); opacity: 0; } to { transform: scale(1) rotate(var(--r)); opacity: 1; } }

/* round cards and the 3-2-1 */
.sx-card { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) scale(.92); z-index: 5; text-align: center; pointer-events: none; opacity: 0; transition: opacity .3s, transform .3s; }
.sx-card.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sx-card .t1 { display: inline-block; background: var(--sx-blue); color: var(--sx-light); font-family: 'Schibsted Grotesk', Arial, sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -.03em; text-transform: uppercase; padding: 4px 14px; border: 2px solid var(--sx-ink); transform: rotate(-1.5deg); white-space: nowrap; }
.sx-card .t2 { display: block; margin: 10px auto 0; width: max-content; max-width: 80vw; background: var(--sx-paper); color: var(--sx-ink); font-family: 'Schibsted Grotesk', Arial, sans-serif; font-weight: 700; font-size: 17px; padding: 3px 10px; transform: rotate(1deg); }
.sx-card .t3 { display: none; font-family: 'Schibsted Grotesk', Arial, sans-serif; font-weight: 800; font-size: 104px; line-height: 1; color: var(--sx-light); text-shadow: 0 4px 0 var(--sx-blue), 0 6px 0 rgba(0, 0, 0, .6); margin-top: 4px; }
.sx-card.counting .t2 { display: none; }
.sx-card.counting .t3 { display: block; }
.sx-card .t3.tick { animation: sx-tick .45s ease-out; }
@keyframes sx-tick { from { transform: scale(1.5); opacity: .2; } to { transform: scale(1); opacity: 1; } }

/* between battles: the countdown to the next Main Event, and today's replays */
.sx-idle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); z-index: 4; text-align: center; color: var(--sx-paper); display: none; }
.sx-idle.show { display: block; }
.sx-idle .lbl { font-family: 'Azeret Mono', monospace; font-weight: 800; font-size: 10px; letter-spacing: .08em; text-wrap: balance; }
.sx-idle .clock { display: inline-block; margin: 8px 0 4px; background: var(--sx-paper); color: var(--sx-ink); font-family: 'Azeret Mono', monospace; font-weight: 800; font-size: 40px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; padding: 4px 12px; border: 2px solid var(--sx-ink); transform: rotate(-1deg); box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); }
.sx-idle .sub { font-family: 'Schibsted Grotesk', Arial, sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.sx-idle .today { font-family: 'Azeret Mono', monospace; font-size: 9px; letter-spacing: .08em; color: #B9B2A5; margin-bottom: 6px; }
.sx-replays { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sx-btn { min-height: 32px; padding: 0 12px; border: 1px solid var(--sx-ink); background: var(--sx-paper); color: var(--sx-ink); font-family: 'Azeret Mono', monospace; font-weight: 800; font-size: 9.5px; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; text-transform: uppercase; }
.sx-btn:hover { background: var(--sx-blue); color: var(--sx-light); }
.sx-btn.dark { background: var(--sx-ink); color: var(--sx-paper); border-color: var(--sx-paper); }
.sx-btn small { font-weight: 500; letter-spacing: .02em; opacity: .75; }

@media (max-width: 760px) {
  .sx-card .t1 { font-size: 22px; } .sx-card .t2 { font-size: 14px; } .sx-card .t3 { font-size: 72px; }
  .sx-strip { font-size: 15px; } .sx-idle .clock { font-size: 30px; }
}