/* 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, transform .4s; transform-origin: 50% 100%; }
/* leaning in at each other, like a real face-off */
.sx-mc[data-side=L] { --lean: 2deg; } .sx-mc[data-side=R] { --lean: -2deg; }
.sx-mc, .sx-mc.idle, .sx-mc.off { transform: rotate(var(--lean, 0deg)); }
.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: rotate(var(--lean, 0deg)) translateY(0); } 50% { transform: rotate(var(--lean, 0deg)) 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; }

/* the front row: everyone not on stage, from behind (sypher-player.js fills it) */
.sx-crowd > div { position: relative; width: 86px; height: 94px; overflow: hidden; }
.sx-crowd img { position: absolute; left: 0; top: 0; width: 86px; height: auto; }

/* 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%; width: min(680px, 90%); 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: fit-content; max-width: 100%; text-wrap: balance; 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; } }

/* the verdict: the winner, one judge's reason wrapped to fit, and who said it */
.sx-card.verdict .t2 { font-weight: 600; font-size: 16px; line-height: 1.38; padding: 7px 14px 8px; transform: rotate(.6deg); }
.sx-card .t4 { display: block; margin-top: 9px; font-family: 'Azeret Mono', monospace; font-weight: 800; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--sx-paper); }
.sx-card .t4:empty { display: none; }

/* the judges' scorecards, held up in the front row after each verse */
.sx-placard { position: absolute; z-index: 4; pointer-events: none; transform: translate(-50%, -100%) rotate(var(--r, -3deg)); background: var(--sx-light); color: var(--sx-ink); border: 2px solid var(--sx-ink); padding: 4px 9px 5px; text-align: center; box-shadow: 2px 3px 0 rgba(0, 0, 0, .5); animation: sx-raise .4s ease-out backwards; transition: opacity .4s, transform .4s; }
.sx-placard::after { content: ''; position: absolute; left: 50%; top: 100%; width: 4px; height: 26px; margin-left: -2px; background: #8a7a62; border: 1px solid var(--sx-ink); border-top: 0; }
.sx-placard b { display: block; font-family: 'Schibsted Grotesk', Arial, sans-serif; font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -.04em; }
.sx-placard span { display: block; margin-top: 2px; font-family: 'Azeret Mono', monospace; font-weight: 800; font-size: 7.5px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.sx-placard.down { opacity: 0; transform: translate(-50%, -40%) rotate(var(--r, -3deg)); }
@keyframes sx-raise { from { opacity: 0; transform: translate(-50%, -30%) rotate(var(--r, -3deg)); } }

/* the bracket so far: where this battle sits in today's day */
.sx-placards { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sx-path { position: absolute; left: 12px; top: 36px; z-index: 3; display: flex; align-items: center; gap: 6px; font-family: 'Azeret Mono', monospace; font-weight: 800; font-size: 8.5px; letter-spacing: .06em; color: #B9B2A5; pointer-events: auto; }
.sx-path:empty { display: none; }
/* Below about 1000px the nameplates reach the top-left corner, so the strip moves to the bottom-left. */
@media (max-width: 1000px) { .sx-path { top: auto; bottom: 14px; } }
.sx-path .seg { display: inline-flex; align-items: center; gap: 3px; }
.sx-path .seg b { margin-right: 2px; font-weight: 800; }
.sx-path i { display: inline-block; width: 9px; height: 9px; border: 1.5px solid #8E887C; }
.sx-path i.done { background: var(--sx-paper); border-color: var(--sx-paper); }
.sx-path i.now { background: var(--sx-blue); border-color: var(--sx-light); box-shadow: 0 0 0 2px rgba(35, 80, 181, .45); animation: sx-pulse 1.4s ease-in-out infinite; }
.sx-path i.next { border-color: var(--sx-paper); border-style: dashed; }
.sx-path .arr { color: #6E685E; font-size: 11px; }
@keyframes sx-pulse { 50% { box-shadow: 0 0 0 4px rgba(35, 80, 181, .15); } }

/* the judges' huddle: three judges, backs to us, heads together, then their votes */
.sx-crowd { transition: opacity .4s; } .sx-crowd.hush { opacity: .25; }
.sx-huddle { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: none; background: radial-gradient(ellipse at 50% 70%, rgba(18, 18, 18, .2), rgba(18, 18, 18, .62)); }
.sx-huddle.show { display: block; }
.sx-huddle .hd-top { position: absolute; left: 0; right: 0; top: 24%; text-align: center; }
.sx-huddle .hd-lbl { display: inline-block; background: var(--sx-blue); color: var(--sx-light); font-family: 'Schibsted Grotesk', Arial, sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.03em; text-transform: uppercase; padding: 4px 14px; border: 2px solid var(--sx-ink); transform: rotate(-1.5deg); }
.sx-huddle .hd-n { display: block; font-family: 'Schibsted Grotesk', Arial, sans-serif; font-weight: 800; font-size: 76px; 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: 6px; min-height: 76px; }
.sx-huddle .hd-n.tick { animation: sx-tick .45s ease-out; }
.sx-huddle .hd-crew { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); display: flex; align-items: flex-end; }
.sx-huddle .hd-j { position: relative; width: 196px; margin: 0 -40px; transform-origin: 50% 100%; animation: hd-lean 1.7s ease-in-out infinite; animation-delay: calc(var(--i) * -.57s); }
.sx-huddle .hd-j:nth-child(1) { z-index: 1; } .sx-huddle .hd-j:nth-child(2) { z-index: 2; margin-bottom: -8px; } .sx-huddle .hd-j:nth-child(3) { z-index: 1; }
.sx-huddle .hd-j img { display: block; width: 100%; height: auto; }
.sx-huddle .hd-tag { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); white-space: nowrap; background: var(--sx-ink); color: var(--sx-paper); font-family: 'Azeret Mono', monospace; font-weight: 800; font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; padding: 2px 5px; }
.sx-huddle .hd-say { position: absolute; left: 50%; top: 4px; white-space: nowrap; background: var(--sx-paper); color: var(--sx-ink); font-family: 'Schibsted Grotesk', Arial, sans-serif; font-weight: 800; font-size: 14px; padding: 3px 9px; box-shadow: 2px 2px 0 rgba(0, 0, 0, .45); opacity: 0; transform: translate(-50%, -100%); }
.sx-huddle .hd-say.pop { animation: hd-say 2s ease-out forwards; }
.sx-huddle.voting .hd-say { display: none; }
.sx-huddle .hd-votes { position: absolute; left: 0; right: 0; top: 40%; display: flex; justify-content: center; gap: 14px; }
.sx-huddle .hd-vote { background: var(--sx-light); color: var(--sx-ink); border: 2px solid var(--sx-ink); padding: 6px 12px 7px; text-align: center; transform: rotate(var(--r)); box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); animation: hd-stamp .35s ease-out; }
.sx-huddle .hd-vote span { display: block; font-family: 'Azeret Mono', monospace; font-weight: 800; font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; }
.sx-huddle .hd-vote b { display: block; font-family: 'Schibsted Grotesk', Arial, sans-serif; font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--sx-blue); }
.sx-huddle .hd-vote small { font-family: 'Azeret Mono', monospace; font-weight: 700; font-size: 10px; }
.sx-huddle.many .hd-j { width: 132px; margin: 0 -26px; } .sx-huddle.many .hd-vote { padding: 5px 9px 6px; } .sx-huddle.many .hd-vote b { font-size: 19px; } .sx-huddle.many .hd-votes { flex-wrap: wrap; gap: 10px; max-width: 92%; margin: 0 auto; }
@keyframes hd-lean { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-7px); } }
@keyframes hd-say { 0% { opacity: 0; transform: translate(-50%, -70%) scale(.7) rotate(-2deg); } 12% { opacity: 1; transform: translate(-50%, -100%) scale(1) rotate(-2deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -110%) rotate(-2deg); } }
@keyframes hd-stamp { from { opacity: 0; transform: rotate(var(--r)) scale(1.8); } to { opacity: 1; transform: rotate(var(--r)) scale(1); } }
@media (prefers-reduced-motion: reduce) { .sx-huddle .hd-j { animation: none; } }

/* live: join a battle that's on air, or tap once to have each battle play at its time */
.sx-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #E5484D; margin-right: 6px; vertical-align: 1px; animation: sx-blink 1.2s steps(2, start) infinite; }
@keyframes sx-blink { to { visibility: hidden; } }
.sx-btn.live { background: var(--sx-blue); color: var(--sx-light); border-color: var(--sx-ink); min-height: 40px; padding: 0 18px; font-size: 11px; }
.sx-btn.live:hover { background: var(--sx-light); color: var(--sx-ink); }
.sx-idle .sub.big { font-size: 24px; letter-spacing: -.02em; margin: 6px 0 14px; }
.sx-idle .tuned { max-width: 440px; margin: 0 auto 12px; font-family: 'Azeret Mono', monospace; font-weight: 700; font-size: 10px; line-height: 1.55; letter-spacing: .04em; text-wrap: balance; }
.sx-idle .hint { max-width: 440px; margin: 7px auto 14px; font-family: 'Azeret Mono', monospace; font-size: 9.5px; line-height: 1.5; letter-spacing: .02em; color: #B9B2A5; text-wrap: balance; }
.sx-idle .linkish { background: none; border: 0; padding: 0 0 0 8px; color: #9DB4F0; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sx-idle .simbar { display: inline-block; margin-bottom: 12px; padding: 4px 9px; border: 1px dashed #8E887C; background: rgba(18, 18, 18, .7); font-family: 'Azeret Mono', monospace; font-size: 9.5px; letter-spacing: .04em; }
.sx-idle .simbar b { font-variant-numeric: tabular-nums; }

/* the day's bracket, small, between battles */
.sx-idle .mb { display: flex; gap: 10px; justify-content: center; margin: 12px auto 0; text-align: left; }
.sx-idle .mb-c { display: flex; flex-direction: column; min-width: 0; flex: 1 1 0; max-width: 160px; }
.sx-idle .mb-h { font-family: 'Azeret Mono', monospace; font-weight: 800; font-size: 8.5px; letter-spacing: .08em; color: #B9B2A5; text-transform: uppercase; margin-bottom: 4px; }
.sx-idle .mb-cells { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 4px; }
.sx-idle .mb-s { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 6px; border: 1px solid #4A453D; background: rgba(238, 231, 218, .04); color: var(--sx-paper); font: inherit; text-align: left; }
.sx-idle button.mb-s { cursor: pointer; border-color: #8E887C; }
.sx-idle button.mb-s:hover { background: var(--sx-blue); border-color: var(--sx-light); }
.sx-idle .mb-s.live { border-color: #E5484D; }
.sx-idle .mb-ns { flex: 1; min-width: 0; display: flex; flex-direction: column; font-family: 'Azeret Mono', monospace; font-size: 10.5px; line-height: 1.35; letter-spacing: .01em; }
.sx-idle .mb-ns span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-idle .mb-ns .w { font-weight: 800; color: var(--sx-light); }
.sx-idle .mb-ns .l { opacity: .55; }
.sx-idle .mb-ns .tbd { opacity: .45; }
.sx-idle .mb-s em { font-style: normal; font-family: 'Azeret Mono', monospace; font-weight: 800; font-size: 9px; letter-spacing: .03em; white-space: nowrap; }
.sx-idle .mb-s em.go { color: var(--sx-paper); } .sx-idle .mb-s em.at { color: #8E887C; } .sx-idle .mb-s em.lv { color: #FBF8F1; }

/* 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; max-width: min(560px, 94%); padding: 14px 20px 16px; background: rgba(14, 14, 14, .8); border: 1px solid rgba(238, 231, 218, .18); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.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; }
  .sx-card.verdict .t2 { font-size: 13px; } .sx-huddle .hd-lbl { font-size: 16px; } .sx-huddle .hd-n { font-size: 52px; min-height: 52px; }
  .sx-huddle .hd-j { width: 118px; margin: 0 -22px; } .sx-huddle.many .hd-j { width: 78px; margin: 0 -14px; } .sx-huddle.many .hd-vote b { font-size: 14px; } .sx-huddle.many .hd-vote span { font-size: 7px; } .sx-idle { padding: 10px 10px 12px; } .sx-huddle .hd-say { font-size: 11px; } .sx-huddle .hd-votes { gap: 6px; top: 38%; } .sx-huddle .hd-vote b { font-size: 16px; }
  .sx-path { top: auto; bottom: 36px; left: 10px; font-size: 7.5px; } .sx-path i { width: 7px; height: 7px; }
  .sx-placard b { font-size: 18px; } .sx-placard span { display: none; } .sx-idle .sub.big { font-size: 18px; }
  .sx-idle { width: 92%; } .sx-idle .sub:not(.big) { display: none; } .sx-idle .mb { gap: 5px; } .sx-idle .mb-s { padding: 2px 4px; gap: 3px; } .sx-idle .mb-ns { font-size: 8.5px; } .sx-idle .mb-h { font-size: 7.5px; } .sx-idle .sx-btn small { display: none; } .sx-idle .sx-replays { gap: 5px; }
}

/* the crowd (sypher-crowd.js): cheers and boos floating up the stage, the buttons, the taunt drawer */
.sx-float { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.sx-fl { position: absolute; bottom: 6%; color: #F2A65A; opacity: 0; transform: scale(var(--s, 1)); animation: sx-rise 2.2s ease-out forwards; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }
.sx-fl.boo { color: #9DB4F0; }
.sx-fl.own { color: #FFD18A; } .sx-fl.boo.own { color: #C9D6FA; }
.sx-fl svg { width: 18px; height: 20px; display: block; }
@keyframes sx-rise { 0% { opacity: 0; transform: translate(0, 0) scale(var(--s, 1)); } 12% { opacity: .95; } 70% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--dx, 0), -260px) scale(calc(var(--s, 1) * .8)); } }
@media (prefers-reduced-motion: reduce) { .sx-fl { animation-duration: 1.2s !important; } @keyframes sx-rise { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } } }
.sx-react { display: flex; }
.sx-react[hidden], .sx-taunt-btn[hidden], .sx-taunts[hidden] { display: none !important; }
.sx-react .n { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: left; }
.sx-react .widget:active { transform: scale(.95); }
.sx-taunt-btn.on { background: #1A1A1A; color: #EEE7DA; }
.sx-onmic .sx-assist { display: block; width: fit-content; margin: 5px auto 0; padding: 1px 7px; background: #F2A65A; color: var(--sx-ink); letter-spacing: .05em; white-space: nowrap; }
.sx-card .t5 { display: block; margin: 8px auto 0; width: fit-content; max-width: 100%; font-family: 'Azeret Mono', monospace; font-weight: 700; font-size: 10px; letter-spacing: .04em; color: var(--sx-paper); background: rgba(18, 18, 18, .75); padding: 3px 8px; text-transform: uppercase; }
.sx-card .t5[hidden] { display: none; }

.sx-taunts { margin-top: 8px; border: 1px solid #1A1A1A; padding: 12px 16px 6px; columns: 2 300px; column-gap: 33px; column-rule: 1px solid #1A1A1A; }
.sx-taunts .tz-form { break-inside: avoid; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.sx-taunts .tz-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; }
.sx-taunts .tz-lbl { font-family: 'Azeret Mono', monospace; font-weight: 800; font-size: 11px; letter-spacing: .03em; }
.sx-taunts .tz-at { display: flex; flex-wrap: wrap; align-items: center; }
.sx-taunts .tz-at span { font-family: 'Azeret Mono', monospace; font-size: 10px; letter-spacing: .03em; color: #4A453D; margin-right: 8px; }
.sx-taunts .tz-at button { min-height: 26px; padding: 0 7px; margin: 0 -1px -1px 0; border: 1px solid #1A1A1A; background: transparent; color: #1A1A1A; font-family: 'Azeret Mono', monospace; font-weight: 700; font-size: 9.5px; cursor: pointer; }
.sx-taunts .tz-at button.on, .sx-taunts .tz-at button:hover { background: #1A1A1A; color: #EEE7DA; }
.sx-taunts input { flex: 1; min-width: 0; min-height: 38px; box-sizing: border-box; border: 1px solid #1A1A1A; background: #FBF8F1; padding: 0 11px; font-family: 'Literata', Georgia, serif; font-size: 15px; color: #1A1A1A; border-radius: 0; }
.sx-taunts .tz-small input { min-height: 30px; font-size: 13px; max-width: 220px; }
.sx-taunts .tz-send { min-height: 38px; padding: 0 14px; border: none; background: #1A1A1A; color: #EEE7DA; font-family: 'Azeret Mono', monospace; font-weight: 800; font-size: 11px; letter-spacing: .02em; cursor: pointer; }
.sx-taunts .tz-send:disabled { opacity: .55; cursor: wait; }
.sx-taunts .tz-count { font-family: 'Azeret Mono', monospace; font-size: 10px; color: #4A453D; }
.sx-taunts .tz-hint { margin: 0; font-size: 12px; line-height: 1.45; color: #4A453D; }
.sx-taunts .tz-hint a { color: #1D45A3; }
.sx-taunts .tz-msg { margin: 0; min-height: 1em; font-family: 'Azeret Mono', monospace; font-weight: 700; font-size: 10.5px; letter-spacing: .02em; color: #1D45A3; }
.sx-taunts .tz-msg.bad { color: #B3261E; }
/* After a taunt: the Sypher Weekly sign-up (footer.js runs it). */
.sx-taunts .tz-weekly { break-inside: avoid; margin: 0 0 12px; padding-top: 10px; border-top: 1px solid #C9C1B2; display: flex; flex-direction: column; gap: 6px; }
.sx-taunts .tz-weekly .tz-row { flex-wrap: nowrap; }
.sx-taunts .tz-weekly .tz-msg { font-family: 'Literata', Georgia, serif; font-weight: 400; font-size: 12px; letter-spacing: 0; color: #4A453D; }
.sx-taunts .tz-weekly .tz-msg a { color: #1D45A3; }
.sx-taunts .tz-weekly .tz-msg.is-bad { color: #B3261E; }
.sx-taunts .tz-weekly .tz-msg.is-done { font-family: 'Azeret Mono', monospace; font-weight: 700; font-size: 10.5px; color: #1D45A3; }
.sx-taunts .tz-hp { position: absolute; left: -10000px; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }
[data-sy-field][hidden] { display: none !important; }
#subscribe [data-sy-signup-msg].is-bad { color: #FFB4A2; }
#subscribe [data-sy-signup-msg].is-done { color: #EEE7DA; font-size: 16px; }
.sx-taunts .tz-head { break-inside: avoid; break-after: avoid; border-top: 2px solid #1A1A1A; padding: 8px 0 6px; font-family: 'Azeret Mono', monospace; font-weight: 800; font-size: 11px; letter-spacing: .03em; }
.sx-taunts .tz-item { break-inside: avoid; display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid #C9C1B2; padding: 8px 0 10px; }
.sx-taunts .tz-heat { flex: none; width: 46px; min-height: 40px; border: 1px solid #1A1A1A; background: transparent; color: #1A1A1A; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; font-family: 'Azeret Mono', monospace; font-weight: 700; font-size: 10px; }
.sx-taunts .tz-heat.on { background: #1A1A1A; color: #F2A65A; cursor: default; }
.sx-taunts .tz-heat:disabled { opacity: .35; cursor: default; }
.sx-taunts .tz-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx-taunts .tz-meta { font-family: 'Azeret Mono', monospace; font-size: 10px; letter-spacing: .02em; color: #4A453D; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.sx-taunts .tz-meta b { color: #1A1A1A; }
.sx-taunts .tz-body p { margin: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.sx-taunts .tz-st { border: 1px solid #8E887C; color: #4A453D; font-family: 'Azeret Mono', monospace; font-weight: 700; font-size: 8.5px; padding: 1px 5px; }
.sx-taunts .tz-st.ok { border-color: #1D45A3; color: #1D45A3; }
.sx-taunts .tz-st.woven { border-color: #1A1A1A; background: #1A1A1A; color: #F2A65A; }
.sx-taunts .tz-st.no { border-color: #B3261E; color: #B3261E; }
.sx-taunts .tz-empty { margin: 0; padding: 8px 0 10px; font-size: 13px; color: #4A453D; }
@media (max-width: 760px) { .sx-taunts { padding: 10px 12px 4px; } .sx-taunts .tz-small input { max-width: none; } .sx-react .widget { padding: 0 8px; } }
/* Turnstile's one-click box, only when Cloudflare isn't sure you're a person */
.sx-ts { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 50; display: none; padding: 8px; background: #FBF8F1; border: 1px solid #1A1A1A; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.sx-ts.show { display: block; }