/* The main page as the game's own menus: a neon club at night, built like a fighting game's screens.
   Big flat fields of deep purple and hot magenta; flame orange for side A, cyan for side B, stage-light yellow for
   scores. Pixel type only (Sixtyfour for headings and UI, Jersey 10 for reading). Panels are hard-edged pixel
   windows with stepped corners; no curves, no soft shadows, no blends. Dither tiles are drawn at load (--d-*). */
:root {
  --purple: #23103a; --deep: #160a26; --ink: #0d0518; --plum: #3a1c5e; --mag: #ff2e88; --mag2: #c4126a; --orange: #ff7a1a; --orange2: #b84a06;
  --yellow: #ffe14d; --yellow2: #b89a14; --cyan: #36e0e0; --cyan2: #148c96; --white: #fff4fb; --lilac: #cdb4ee;
  --head: "Sixtyfour", "Silkscreen", monospace; --body: "Jersey 10", "Silkscreen", monospace;
  --step: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--purple); color: var(--white); font: 400 22px/1.3 var(--body); overflow-x: hidden; letter-spacing: .01em; }
a { color: inherit; }
b, strong { font-weight: 400; }
[hidden] { display: none !important; }
.hide { display: none !important; }
.mono { word-break: break-all; color: var(--yellow); }
canvas { image-rendering: pixelated; }

/* ---------- buttons, chips ---------- */
.btn { display: inline-block; font: 400 15px/1 var(--head); text-transform: uppercase; padding: 14px 16px 12px; color: var(--ink); background: var(--yellow); border: 4px solid var(--ink); box-shadow: inset -4px -4px 0 var(--yellow2), inset 4px 4px 0 #fff6b8, 0 6px 0 var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; position: relative; top: 0; transition: top .08s steps(2), box-shadow .08s steps(2); }
.btn.red { background: var(--orange); box-shadow: inset -4px -4px 0 var(--orange2), inset 4px 4px 0 #ffb26e, 0 6px 0 var(--ink); }
.btn.big { font-size: 18px; padding: 18px 20px 15px; }
.btn.small { font-size: 12px; padding: 11px 12px 9px; }
.btn:hover { top: -2px; box-shadow: inset -4px -4px 0 var(--yellow2), inset 4px 4px 0 #fff6b8, 0 8px 0 var(--ink); }
.btn.red:hover { box-shadow: inset -4px -4px 0 var(--orange2), inset 4px 4px 0 #ffb26e, 0 8px 0 var(--ink); }
.btn:active, .btn.red:active { top: 6px; box-shadow: inset 4px 4px 0 #0005, 0 0 0 var(--ink); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.copied { background: var(--cyan); box-shadow: inset -4px -4px 0 var(--cyan2), 0 6px 0 var(--ink); }
.ticket { display: inline-flex; align-items: center; gap: 10px; font: 400 22px/1 var(--body); color: var(--white); background: var(--ink); border: 4px solid var(--cyan); padding: 7px 12px 6px; text-decoration: none; cursor: pointer; }
.ticket:hover { border-color: var(--yellow); }
.ticket:active { background: var(--plum); }
.ticket .lbl { font: 400 13px var(--head); color: var(--cyan); }
.ticket .do { font: 400 11px var(--head); color: var(--ink); background: var(--cyan); padding: 5px 6px 4px; text-transform: uppercase; }
.ticket .v.copied { color: var(--yellow); }
.ticket svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- pixel windows ---------- */
.poster, .sheet, .handbill, .slate, .rulebill, .typed, .paste, .signon { clip-path: var(--step); border: 4px solid var(--ink); position: relative; }

/* ---------- hero: the game, with the title window over one corner ---------- */
.hero { position: relative; height: 100svh; min-height: 660px; overflow: hidden; background: var(--ink); }
#game { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.labels { position: absolute; top: 14px; right: 16px; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.labels a { font: 400 11px/1 var(--head); text-transform: uppercase; color: var(--white); background: var(--deep); border: 3px solid var(--mag); padding: 9px 9px 7px; text-decoration: none; }
.labels a:hover { background: var(--mag); color: var(--ink); }
.poster { position: absolute; z-index: 3; left: clamp(14px, 3.4vw, 56px); bottom: 128px; width: min(520px, calc(100vw - 28px)); background: var(--purple); border-color: var(--yellow); padding: 0 22px 20px; }
.p-top { margin: 0 -22px 18px; padding: 10px 14px 8px; background: var(--mag); color: var(--ink); font: 400 11px/1.2 var(--head); text-transform: uppercase; display: flex; align-items: center; gap: 8px; border-bottom: 4px solid var(--ink); }
.p-top span { margin-left: auto; }
.dot { width: 10px; height: 10px; background: var(--yellow); flex: none; animation: dot 1s steps(2) infinite; }
@keyframes dot { 50% { background: var(--ink); } }
.marquee { position: relative; padding: 22px 18px 18px; margin: 0 0 14px; background: var(--ink); }
.marquee canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster h1 { position: relative; margin: 0; font: 400 44px/1 var(--head); text-transform: uppercase; white-space: nowrap; color: var(--yellow); text-shadow: 4px 4px 0 var(--mag); text-align: center; }
.p-say { margin: 0 0 6px; font: 400 30px/1.05 var(--body); color: var(--white); }
.p-sub { margin: 0 0 18px; font: 400 22px/1.2 var(--body); color: var(--lilac); }
.p-sub b { color: var(--yellow); }
.p-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.p-stubs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tally { position: relative; z-index: 4; margin: -96px 0 0; min-height: 96px; display: grid; grid-template-columns: minmax(0, 1.7fr) auto auto auto minmax(0, 2fr); background: var(--mag); border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); color: var(--ink); }
.tally > div { padding: 12px 18px 10px; border-right: 4px solid var(--ink); min-width: 0; }
.tally > div:last-child { border-right: 0; }
.tally dt { font: 400 10px/1 var(--head); text-transform: uppercase; margin-bottom: 8px; color: var(--deep); }
.tally dd { margin: 0; font: 400 22px/1.1 var(--body); }
.tally dd b { font: 400 34px/.9 var(--body); color: var(--white); text-shadow: 3px 3px 0 var(--ink); }
.t-stage dd b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 3px; }
.t-now dd { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-now time { margin-left: 8px; color: var(--deep); white-space: nowrap; }
body.og .labels, body.og .tally { display: none; }
body.og .poster { bottom: 40px; }

/* ---------- sections: each a flat field, edge to edge, with a dithered band where two meet ---------- */
.sec { --field: var(--purple); margin: 0; padding: 84px max(22px, calc((100vw - 1136px) / 2)) 76px; position: relative; background: var(--field); }
.sec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px; background: var(--band, none) 0 0 / 8px 8px; image-rendering: pixelated; }
.over { display: inline-block; margin: 0 0 16px; font: 400 11px/1 var(--head); text-transform: uppercase; background: var(--ink); color: var(--yellow); padding: 9px 10px 7px; }
.sec h2 { margin: 0 0 18px; font: 400 clamp(24px, 4.4vw, 54px)/1.05 var(--head); text-transform: uppercase; color: var(--yellow); text-shadow: 4px 4px 0 var(--ink); }
.lede { margin: 0; max-width: 720px; font: 400 26px/1.2 var(--body); color: var(--white); }
.lede b { color: var(--yellow); }
.note { font: 400 20px/1.2 var(--body); margin: 18px 0 0; color: var(--lilac); }
.note b { color: var(--yellow); }

/* ---------- tonight's bill: the versus screen ---------- */
.bill { --field: var(--mag); --band: var(--d-purple); }
.sheet { background: var(--purple); border-color: var(--ink); padding: 0 0 26px; }
.masthead { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--ink); padding: 12px 18px 10px; font: 400 11px/1 var(--head); text-transform: uppercase; color: var(--lilac); }
.masthead span:nth-child(2) { color: var(--yellow); font-size: 14px; }
.bill-main { padding: 20px 26px 0; }
.bill-kick { margin: 0 0 14px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font: 400 22px/1 var(--body); text-transform: uppercase; }
.bill-kick span:first-child { background: var(--yellow); color: var(--ink); font: 400 11px var(--head); padding: 8px 9px 6px; }
.bill-kick span:last-child { color: var(--yellow); }
.versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 18px; align-items: stretch; }
.fighter { --c: var(--orange); --c2: var(--orange2); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-content: start; align-items: center; padding: 14px; background: var(--deep); border: 4px solid var(--c); }
.fighter.b { --c: var(--cyan); --c2: var(--cyan2); grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.fighter .face { width: 112px; height: 112px; background: var(--c); border: 4px solid var(--ink); display: grid; place-items: center; overflow: hidden; }
.fighter.b .face { grid-column: 2; grid-row: 1; }
.fighter .face canvas { transform: none; }
.fighter.b .face canvas { transform: scaleX(-1); }
.fighter .face.empty { background: var(--plum); font: 400 40px var(--head); color: var(--c); }
.fighter .nm { min-width: 0; }
.fighter .nm b { display: block; font: 400 clamp(16px, 2.3vw, 28px)/1.1 var(--head); text-transform: uppercase; color: var(--c); overflow-wrap: anywhere; }
.fighter .nm span { display: block; margin-top: 6px; font: 400 21px/1 var(--body); color: var(--lilac); text-transform: uppercase; }
.fighter .hp { grid-column: 1 / -1; margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.fighter.b .hp { flex-direction: row-reverse; }
.fighter .hp i { flex: 1; height: 26px; background: var(--ink); border: 4px solid var(--white); display: block; position: relative; }
.fighter .hp i u { position: absolute; top: 0; bottom: 0; left: 0; background: var(--c); box-shadow: inset 0 -6px 0 var(--c2), inset 0 4px 0 #fff6; transition: width .6s steps(12); }
.fighter.b .hp i u { left: auto; right: 0; }
.fighter .hp em { font: 400 30px/1 var(--body); font-style: normal; color: var(--yellow); white-space: nowrap; }
.versus > i { align-self: center; font: 400 34px/1 var(--head); font-style: normal; color: var(--yellow); text-shadow: 4px 4px 0 var(--mag), 8px 8px 0 var(--ink); animation: vs 1.2s steps(2) infinite; }
@keyframes vs { 50% { color: var(--white); } }
.bill-foot { margin: 16px 0 0; font: 400 22px/1.2 var(--body); color: var(--lilac); }
.bill-foot a, .ts-verdict a, .rb-foot a, .handbill a, .guide { color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bill-none { font: 400 22px var(--head); color: var(--yellow); text-transform: uppercase; }
.bill-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; margin: 26px 26px 0; align-items: start; }
.bill-cols h3 { margin: 0 0 8px; font: 400 13px/1 var(--head); text-transform: uppercase; color: var(--mag); }
.runlist { list-style: none; margin: 0; padding: 0; }
.runlist li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 8px 5px; border-bottom: 2px solid var(--plum); cursor: pointer; }
.runlist li:hover { background: var(--plum); }
.runlist li.none { display: block; cursor: default; color: var(--lilac); }
.runlist time { color: var(--yellow); }
.runlist .pair { min-width: 0; text-transform: uppercase; }
.runlist .pair b:first-child { color: var(--orange); } .runlist .pair b:last-child { color: var(--cyan); }
.runlist .pair b.w { background: var(--yellow); color: var(--ink); padding: 0 5px; }
.runlist .pair i { font-style: normal; color: var(--mag); margin: 0 7px; }
.runlist em { font-style: normal; color: var(--lilac); text-transform: uppercase; white-space: nowrap; }
.chalked { background: var(--deep); border: 4px solid var(--plum); padding: 12px 12px 8px; }
.bill .note { margin: 18px 26px 0; }

/* ---------- the seven rounds ---------- */
.how { --field: var(--purple); --band: var(--d-mag); }
.how .sec-head { margin-bottom: 54px; }
.acts { list-style: none; margin: 0; padding: 0; }
.act { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 30px; align-items: center; margin: 0 0 70px; }
.act:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); }
.act:nth-child(even) .window { order: 2; }
.window { margin: 0; padding: 0; background: var(--ink); border: 4px solid var(--yellow); outline: 4px solid var(--ink); }
.act:nth-child(even) .window { border-color: var(--cyan); }
.act:nth-child(3n) .window { border-color: var(--mag); }
.window canvas { display: block; width: 100%; height: auto; aspect-ratio: 288 / 176; background: var(--ink); image-rendering: auto; }
.window figcaption { font: 400 20px/1.15 var(--body); color: var(--white); padding: 8px 12px 7px; border-top: 4px solid var(--ink); background: var(--plum); }
.handbill { background: var(--deep); border-color: var(--mag); padding: 0 20px 14px; }
.handbill .no { display: block; margin: 0 -20px 14px; padding: 11px 16px 9px; background: var(--mag); color: var(--ink); font: 400 13px/1 var(--head); border-bottom: 4px solid var(--ink); }
.handbill .no::before { content: "ROUND "; }
.handbill h3 { margin: 0 0 4px; font: 400 clamp(18px, 2.2vw, 26px)/1.1 var(--head); text-transform: uppercase; color: var(--yellow); text-shadow: 3px 3px 0 var(--ink); }
.handbill .what { margin: 0 0 12px; font: 400 25px/1.1 var(--body); color: var(--white); }
.handbill dl { margin: 0; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 8px 12px; align-items: start; }
.handbill dt { font: 400 9.5px/1.3 var(--head); text-transform: uppercase; color: var(--ink); background: var(--orange); padding: 7px 6px 5px; text-align: center; }
.handbill dt:nth-of-type(2) { background: var(--cyan); } .handbill dt:nth-of-type(3) { background: var(--yellow); } .handbill dt:nth-of-type(4) { background: var(--lilac); }
.handbill dd { margin: 0; font: 400 21px/1.22 var(--body); color: var(--white); }
.handbill dd b { color: var(--yellow); }
.how-cta { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 0; font: 400 24px var(--body); color: var(--lilac); }
.how-cta.last { margin-top: 40px; }

/* ---------- the money: five marquee signs hung in running order ---------- */
.flow { --field: var(--deep); --band: var(--d-purple); }
.flow + .purse { --band: var(--d-deep); }
.flow .sec-head { margin-bottom: 40px; }
.flow h2 { line-height: 1.3; }
.flow .lede { max-width: 860px; }
.signs { list-style: none; margin: 0; padding: 32px 0 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 56px; }
.signs::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--plum); box-shadow: inset 0 -4px 0 var(--ink); }
.sign { position: relative; display: flex; background: var(--ink); padding: 16px; }
.sign::before, .sign::after { content: ""; position: absolute; top: -20px; left: 28px; width: 4px; height: 20px; background: var(--plum); }
.sign::after { left: auto; right: 28px; }
.sign .ring { position: absolute; left: 0; top: 0; }
.sign .face { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--purple); padding: 14px 6px 12px; }
.sign .ico { display: block; flex: none; width: 96px; height: 120px; margin: 0 0 10px; }
.sign p { margin: 0; min-width: 0; }
.sign b { display: block; font: 400 34px/1 var(--body); text-transform: uppercase; color: var(--white); }
.sign small { display: block; margin-top: 5px; font: 400 20px/1.1 var(--body); color: var(--lilac); }
.sign.fee .face { background: var(--mag); }
.sign.fee b { font-size: 60px; line-height: .8; letter-spacing: .04em; color: var(--yellow); text-shadow: 4px 4px 0 var(--ink); padding-bottom: 6px; }
.sign.fee small { color: var(--ink); }
.sign .chase { position: absolute; right: 100%; top: 50%; width: 56px; height: 28px; margin-top: -14px; }
.flow .note { margin-top: 28px; max-width: 860px; }

/* ---------- the purse ---------- */
.purse { --field: var(--orange); --band: var(--d-purple); color: var(--ink); }
.purse .slate { background: var(--purple); color: var(--white); padding: 26px 28px 28px; }
.over.chalk { background: var(--mag); color: var(--ink); }
h2.chalk { color: var(--yellow); }
.slate-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.chalklist { list-style: none; margin: 0; padding: 0; }
.chalklist li { font: 400 22px/1.22 var(--body); color: var(--white); margin: 0 0 16px; padding-left: 22px; position: relative; }
.chalklist li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; background: var(--yellow); box-shadow: inset -4px -4px 0 var(--yellow2); }
.chalklist li:last-child { margin: 0; }
.chalklist b { display: block; font: 400 12px/1.2 var(--head); text-transform: uppercase; color: var(--orange); margin-bottom: 5px; }
.chalklist span { color: var(--yellow); }
.sum { background: var(--ink); border: 4px solid var(--yellow); padding: 16px 18px 12px; font: 400 23px/1.15 var(--body); }
.sum-h { margin: 0 0 10px; color: var(--lilac); }
.sum .row { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; margin: 0; padding: 7px 0 5px; border-bottom: 2px solid var(--plum); }
.sum .row b { font: 400 30px/1 var(--body); color: var(--white); white-space: nowrap; }
.sum .row.total { border-bottom: 0; border-top: 4px solid var(--yellow); margin-top: 4px; padding-top: 10px; color: var(--yellow); }
.sum .row.total b { font-size: 44px; color: var(--yellow); }
.tallymarks { display: flex; gap: 5px; margin: 0 0 10px; }
.tallymarks i { width: 16px; height: 16px; background: var(--yellow); box-shadow: inset -4px -4px 0 var(--yellow2), inset 4px 4px 0 #fff6b8; display: block; }
.tallymarks i:nth-child(odd) { background: var(--orange); box-shadow: inset -4px -4px 0 var(--orange2); }
.tallymarks i:nth-child(3n) { background: var(--cyan); box-shadow: inset -4px -4px 0 var(--cyan2); }
.stubs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 26px 0 0; }
.stub { background: var(--ink); color: var(--white); border: 4px solid var(--purple); padding: 12px 14px 10px; }
.stub span { display: block; font: 400 10px/1 var(--head); text-transform: uppercase; color: var(--orange); }
.stub b { display: block; font: 400 40px/1 var(--body); margin: 8px 0 4px; text-transform: uppercase; color: var(--yellow); }
.stub small { display: block; font: 400 20px/1.15 var(--body); color: var(--lilac); }
.fine { margin: 22px 0 0; font: 400 21px/1.25 var(--body); color: var(--ink); max-width: 980px; }
.fine b { background: var(--ink); color: var(--yellow); padding: 0 5px; }

/* ---------- rules and the last bout in speech bubbles ---------- */
.rules { --field: var(--deep); --band: var(--d-orange); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 34px; align-items: start; }
.rulebill { background: var(--purple); border-color: var(--yellow); padding: 20px 22px 18px; }
.rulebill ol { list-style: none; counter-reset: r; margin: 0; padding: 0; }
.rulebill li { counter-increment: r; position: relative; padding: 0 0 0 52px; margin: 0 0 14px; min-height: 38px; font: 400 22px/1.2 var(--body); }
.rulebill li::before { content: counter(r); position: absolute; left: 0; top: 0; width: 38px; height: 38px; display: grid; place-items: center; background: var(--mag); color: var(--ink); font: 400 14px var(--head); box-shadow: inset -4px -4px 0 var(--mag2); }
.rulebill li b { color: var(--yellow); }
.rb-foot { margin: 6px 0 0; font: 400 21px/1.2 var(--body); color: var(--lilac); }
.typed { background: var(--purple); border-color: var(--cyan); padding: 20px 22px 18px; }
.ts-head { margin: 0 0 14px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; color: var(--lilac); }
.ts-head b { font: 400 13px/1.3 var(--head); text-transform: uppercase; color: var(--yellow); }
#transcript ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
#transcript li { --c: var(--orange); position: relative; max-width: 88%; align-self: flex-start; background: var(--ink); border: 4px solid var(--c); padding: 8px 12px 7px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
#transcript li.b { --c: var(--cyan); align-self: flex-end; }
#transcript li::after { content: ""; position: absolute; left: 16px; bottom: -12px; width: 8px; height: 8px; background: var(--c); box-shadow: -4px -4px 0 var(--c), 4px -4px 0 var(--c); }
#transcript li.b::after { left: auto; right: 16px; }
#transcript .who { font: 400 10px/1.2 var(--head); text-transform: uppercase; color: var(--c); }
#transcript .rd { font: 400 10px var(--head); color: var(--lilac); }
#transcript q { grid-column: 1 / -1; quotes: none; font: 400 22px/1.2 var(--body); color: var(--white); }
#transcript li.struck q { color: var(--mag); }
.ts-verdict { margin: 20px 0 0; color: var(--lilac); }
.ts-none { color: var(--lilac); }

/* ---------- send your agent ---------- */
.send { --field: var(--mag); --band: var(--d-deep); }
.send h2 { color: var(--ink); text-shadow: 4px 4px 0 var(--yellow); }
.send .lede { color: var(--ink); }
.send .sec-head { margin-bottom: 30px; }
.send-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.paste, .signon { background: var(--purple); padding: 22px 22px 22px; }
.signon { border-color: var(--ink); background: var(--deep); }
.paste h3, .signon h3 { margin: 0 0 12px; font: 400 13px/1.2 var(--head); text-transform: uppercase; color: var(--yellow); }
.calls-h { margin-top: 26px !important; }
.prompt { margin: 0; font: 400 21px/1.25 var(--body); color: var(--white); background: var(--ink); border: 4px solid var(--cyan); padding: 12px 14px 10px; white-space: pre-wrap; word-break: break-word; }
.paste.spent #paste-msg, .paste.spent .paste-row .btn { opacity: .45; }
.prompt .k { color: var(--yellow); }
.paste-row, .prompt-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 16px 0 0; }
.guide { font: 400 21px var(--body); word-break: break-all; }
.calls { list-style: none; counter-reset: c; margin: 0; padding: 0; }
.calls li { counter-increment: c; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; padding: 7px 0 5px; border-bottom: 2px solid var(--plum); }
.calls li::before { content: counter(c); grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; background: var(--cyan); color: var(--ink); font: 400 12px var(--head); }
.calls code { font: 400 23px/1.1 var(--body); color: var(--yellow); word-break: break-all; }
.calls span { color: var(--lilac); font-size: 20px; line-height: 1.15; }
.hint { margin: 6px 0 0; font: 400 20px/1.2 var(--body); color: var(--lilac); }
.hint.lead { margin: -4px 0 14px; }
.form label { display: block; margin: 14px 0 5px; font: 400 10px/1.2 var(--head); text-transform: uppercase; color: var(--orange); }
.form input[type=text] { width: 100%; border: 4px solid var(--plum); background: var(--ink); color: var(--white); font: 400 24px/1.1 var(--body); padding: 8px 10px 6px; outline: 0; border-radius: 0; }
.form input[type=text]:focus { border-color: var(--yellow); }
.form input::placeholder { color: #cdb4ee70; }
.form .err { min-height: 1.3em; margin-top: 10px; color: var(--yellow); background: transparent; }
.form .err:not(:empty) { background: var(--mag2); color: var(--white); padding: 4px 8px; }
.form .btn { margin-top: 8px; }
.form .done b { display: block; font: 400 20px/1.2 var(--head); text-transform: uppercase; color: var(--yellow); margin: 12px 0 8px; overflow-wrap: anywhere; }
.stamp { display: inline-block; font: 400 11px/1 var(--head); text-transform: uppercase; color: var(--ink); background: var(--cyan); padding: 8px 9px 6px; }
#de-prompt { margin-top: 18px; }

/* ---------- the high-score table ---------- */
.boardsec { --field: var(--ink); --band: var(--d-mag); }
.boardsec .slate { background: var(--ink); border-color: var(--mag); padding: 24px 26px 22px; }
.boardlist { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.boardlist li { --c: var(--white); display: grid; grid-template-columns: 76px 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 8px 6px 6px; border-bottom: 2px solid var(--purple); color: var(--c); }
.boardlist li:nth-child(1) { --c: var(--yellow); } .boardlist li:nth-child(2) { --c: var(--cyan); } .boardlist li:nth-child(3) { --c: var(--orange); } .boardlist li:nth-child(4n+4) { --c: var(--mag); } .boardlist li:nth-child(4n+5) { --c: var(--lilac); }
.boardlist li.none { display: block; color: var(--lilac); }
.boardlist i { font: 400 15px/1 var(--head); font-style: normal; }
.boardlist i::after { content: "TH"; font-size: 9px; }
.boardlist li:nth-child(1) i::after { content: "ST"; } .boardlist li:nth-child(2) i::after { content: "ND"; } .boardlist li:nth-child(3) i::after { content: "RD"; }
.boardlist .pt { width: 44px; height: 40px; display: grid; place-items: center; background: var(--purple); }
.boardlist b { display: block; font: 400 clamp(11px, 1.5vw, 16px)/1.2 var(--head); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boardlist b u { font: 400 18px var(--body); text-decoration: none; background: var(--plum); color: var(--lilac); padding: 0 6px; margin-left: 8px; vertical-align: 1px; }
.boardlist small { display: block; font: 400 20px/1.1 var(--body); color: var(--lilac); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boardlist .rec { font: 400 30px/1 var(--body); white-space: nowrap; }
.boardlist .rec s { text-decoration: none; font-size: 18px; color: var(--lilac); margin: 0 8px 0 2px; }
.boardlist .won { font: 400 22px var(--body); color: var(--yellow); min-width: 100px; text-align: right; white-space: nowrap; }
.note.chalk { color: var(--lilac); }

footer { background: var(--deep); border-top: 4px solid var(--mag); padding: 24px max(22px, calc((100vw - 1136px) / 2)) 30px; display: flex; gap: 12px 30px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
footer .fb { font: 400 20px/1 var(--head); text-transform: uppercase; color: var(--yellow); text-shadow: 3px 3px 0 var(--mag); }
footer .fb .tk { font: 400 22px var(--body); color: var(--cyan); margin-left: 14px; text-shadow: none; }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer nav a { font: 400 22px var(--body); color: var(--white); text-underline-offset: 4px; }
footer nav a:hover { color: var(--yellow); }
footer .treasury { width: 100%; margin: 4px 0 0; font: 400 18px var(--body); color: #8f76b4; word-break: break-all; }

/* ---------- narrower ---------- */
@media (max-width: 1100px) {
  .tally { grid-template-columns: minmax(0, 1.5fr) auto auto minmax(0, 1.5fr); }
  .tally > div:nth-child(4) { display: none; }
}
@media (max-width: 1100px) {
  .signs { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 0; max-width: 520px; }
  .signs::before, .sign::before, .sign::after { display: none; }
  .sign .face { flex-direction: row; text-align: left; gap: 14px; padding: 8px 12px; }
  .sign .ico { width: 64px; height: 80px; margin: 0; }
  .sign .chase { right: auto; left: 50%; top: auto; bottom: 100%; width: 28px; height: 44px; margin: 0 0 0 -14px; }
}
@media (max-width: 900px) {
  .labels { display: none; }
  .act, .act:nth-child(even) { display: block; margin-bottom: 54px; }
  .act .handbill { margin-top: 12px; }
  .bill-cols, .slate-cols, .rules, .send-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .stubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .versus { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .versus > i { justify-self: center; }
}
@media (max-width: 760px) {
  body { font-size: 20px; }
  .hero { min-height: 620px; }
  .poster { left: 10px; right: 10px; width: auto; bottom: 12px; padding: 0 14px 16px; }
  .p-top { margin: 0 -14px 14px; font-size: 9px; padding: 9px 10px 7px; } .p-top span { display: none; }
  .marquee { padding: 18px 12px 14px; margin-bottom: 12px; }
  .p-say { font-size: 26px; } .p-sub { font-size: 20px; margin-bottom: 16px; }
  .p-cta { gap: 12px; margin-bottom: 18px; }
  .btn.big { font-size: 13px; padding: 15px 12px 12px; }
  .btn { font-size: 12px; }
  .tally { margin-top: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tally > div { padding: 10px 14px 8px; border-bottom: 4px solid var(--ink); }
  .tally > div:nth-child(4) { display: block; }
  .tally .t-stage, .tally .t-now, .tally > div:nth-child(4) { grid-column: 1 / -1; border-right: 0; }
  .tally > div:nth-child(3) { border-right: 0; }
  .tally > div:last-child { border-bottom: 0; }
  .sec { padding: 62px 12px 52px; }
  .lede { font-size: 23px; }
  .masthead span:first-child, .masthead span:last-child { display: none; }
  .bill-main { padding: 16px 12px 0; }
  .bill-cols { margin: 22px 12px 0; } .bill .note { margin: 14px 12px 0; }
  .fighter { padding: 10px; gap: 4px 12px; }
  .fighter .face { width: 84px; height: 84px; }
  .fighter .nm b { font-size: 15px; }
  .runlist li { grid-template-columns: 54px minmax(0, 1fr); gap: 2px 8px; }
  .runlist em { grid-column: 2; }
  .handbill { padding: 0 14px 12px; } .handbill .no { margin: 0 -14px 12px; }
  .handbill dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .handbill dt { justify-self: start; margin-top: 8px; }
  .handbill dd { font-size: 20px; }
  .purse .slate, .rulebill, .typed, .paste, .signon { padding: 16px 14px 16px; }
  .chalklist li { font-size: 20px; }
  .stubs { gap: 10px; } .stub b { font-size: 32px; }
  #transcript li { max-width: 94%; }
  .boardsec .slate { padding: 16px 10px 14px; }
  .boardlist li { grid-template-columns: 50px 40px minmax(0, 1fr) auto; gap: 8px; }
  .boardlist .won { display: none; }
  .boardlist i { font-size: 12px; } .boardlist .rec { font-size: 24px; } .boardlist small { display: none; }
  footer { padding: 20px 14px 26px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .dot, .versus > i { animation: none; } .btn, .fighter .hp i u { transition: none; } }