/* The crossing and every reading belong to one of two facing corners. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.bout-nav { position: relative; display: grid; grid-template-columns: minmax(120px, calc(50% + var(--nav-shift, 0px))) minmax(120px, 1fr); min-height: 88px; background: var(--card); }
.bout-nav__light, .bout-nav__dark { display: flex; align-items: center; gap: 28px; padding: 16px; min-width: 0; }
.bout-nav__light { justify-content: flex-end; padding-right: 112px; }
.bout-nav__dark { padding-left: 112px; background: var(--bout-steel); color: var(--card); }
.bout-nav a:not(.bout-wordmark) { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; position: relative; white-space: nowrap; }
.bout-nav a:not(.bout-wordmark)::after { content: ''; position: absolute; inset: auto 0 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform 240ms var(--bout-ease); }
.bout-nav a:hover::after, .bout-nav a[aria-current]::after { transform: scaleX(1); }
.bout-wordmark { position: absolute; left: calc(50% + var(--nav-shift, 0px)); top: 0; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 10px; width: 176px; white-space: nowrap; overflow-wrap: normal; color: var(--card); font: 500 32px/1 "Bodoni Moda", serif; text-decoration: none; }
.bout-wordmark svg { flex: none; }
.bout-wordmark__half { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.bout-wordmark__half--light { clip-path: inset(0 50% 0 0); color: var(--ink); }
.bout-wordmark__half--dark { clip-path: inset(0 0 0 50%); color: var(--card); }
.bout-wallet { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.bout-wallet button { min-height: 44px; padding: 10px 14px; border: 1px solid currentColor; background: transparent; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 12px/1.4 var(--font-mono); }
.wallet-icon { width: 20px; height: 20px; }
.bout-menu-toggle { display: none; }
.bout-nav-sheet { position: fixed; inset: 0; z-index: 999; display: grid; align-content: start; gap: 20px; padding: 24px; background: var(--bout-steel); color: var(--card); }
.bout-nav-sheet .bout-menu-close { justify-self: end; }
.bout-arena { --seam-offset: 0px; position: relative; isolation: isolate; display: grid; grid-template-rows: auto 636px auto auto; background: var(--card); }
.bout-seam-field { position: absolute; inset: 0 0 auto; height: 100%; overflow: hidden; z-index: -1; pointer-events: none; }
.bout-seam { height: 100%; width: 100%; background: var(--bout-steel); transform: translateX(50%); }
.bout-arena__heading { grid-row: 1; padding: 24px var(--bout-inset) 16px; }
.bout-round-label { display: inline-block; color: var(--ink); font: 400 var(--bout-small)/1.5 var(--font-mono); letter-spacing: .08em; }
.bout-arena h1 { display: grid; grid-template-columns: 1fr 1fr; padding-top: 24px; gap: 40px; transform: translateX(var(--seam-offset)); }
.bout-arena h1 span:first-child { justify-self: end; color: var(--ink); }
.bout-arena h1 span:last-child { color: var(--card); justify-self: start; }
.bout-tape { grid-area: 2/1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 52%; padding: 16px var(--bout-inset); pointer-events: none; }
.bout-tape__corner { min-width: 0; display: grid; grid-template-rows: 18px 48px 18px 34px 1fr; gap: 12px; align-content: start; color: var(--ink); }
.bout-tape__corner--B { color: var(--card); text-align: right; }
.bout-tape h2 { font: 500 var(--bout-subhead)/1.2 "Jost", sans-serif; letter-spacing: -.02em; }
.bout-tape dl { display: grid; grid-template-rows: 64px 104px 64px 64px; gap: 12px; }
.bout-tape dl > div { display: grid; align-content: start; gap: 6px; }
.bout-tape dt { font-size: 14px; }
.bout-tape dd { font-size: var(--bout-small); line-height: 1.65; }
.bout-crossing { position: relative; grid-area: 2/1; align-self: start; left: 50%; width: 48%; height: 580px; min-height: 580px; transform: translateX(calc(-50% + var(--seam-offset))); }
.bout-blades { position: absolute; inset: 0; }
.bout-blades canvas, .bout-blades .object-still { width: 100%; height: 100%; object-fit: contain; }
.bout-blades canvas { cursor: grab; touch-action: pan-y; }
.bout-blades canvas:active { cursor: grabbing; }
.bout-blades::after { content: ''; position: absolute; left: 25%; right: 25%; bottom: 4%; height: 10px; border-radius: 50%; box-shadow: -36px 0 14px 5px var(--ink), 36px 0 14px 5px var(--card); opacity: .16; pointer-events: none; }
.bout-crossing figcaption { position: absolute; top: 100%; left: 0; width: calc(50% - 24px); display: grid; justify-items: end; gap: 8px; padding: 0; color: var(--ink); text-align: right; font: 400 var(--bout-small)/1.5 var(--font-mono); }
.bout-crossing button { position: absolute; top: 0; left: calc(100% + 48px); width: max-content; max-width: none; font: inherit; padding: 8px 12px; min-height: 44px; background: transparent; color: var(--card); border: 1px solid currentColor; }
.bout-fallback-note { display: none; }
.is-still .bout-fallback-note { display: inline; }
.is-still .bout-live-note { display: none; }
.bout-arena__foot { grid-row: 3; display: grid; grid-template-columns: minmax(120px, calc(50% + var(--seam-offset) - 40px)) minmax(120px, 1fr); gap: 80px; padding: 24px var(--bout-inset) 40px; }
.bout-arena__foot p { background: var(--card); color: var(--ink); padding: 12px; max-width: 52ch; }
.bout-arena__foot .btn { align-self: center; justify-self: end; }
#boutDemoMount { margin-block: var(--bout-section); }
#boutDemoMount:empty { min-height: 0; }
.bout-contract { padding: 24px var(--bout-inset); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.bout-section-title { display: grid; gap: 16px; padding-bottom: 40px; }
.bout-fight, .bout-ticket, .bout-rulebook, .bout-decision { padding: var(--bout-section) var(--bout-inset); }
.bout-fight { padding-top: 0; container-type: inline-size; }
.bout-fight .bout-section-title { text-align: center; justify-items: center; }
.bout-round-clock { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; align-items: baseline; padding-block: 16px; border-block: 1px solid var(--line); }
.bout-round-clock > span { font-size: .875rem; }
.bout-match { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: center; width: 100%; padding: 24px 16px; border: 0; border-bottom: 1px solid var(--line); font-size: var(--bout-subhead); background: var(--card); text-align: center; }
.bout-match > span:first-child { text-align: right; }
.bout-match > span:nth-child(3) { text-align: left; }
.bout-match__versus { font-family: "Bodoni Moda", serif; }
.bout-match__quote { grid-column: 1/-1; padding-top: 12px; font: 400 var(--bout-small)/1.5 var(--font-mono); }
.bout-match[aria-pressed=true] { background: var(--tint); }
.bout-match:hover { background: var(--band); text-decoration: none; }
.bout-ticket { background: var(--ground); border-block: 1px solid var(--line); }
.bout-ticket__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: clamp(40px, 10vw, 160px); }
.bout-ticket-controls { display: grid; gap: 12px; }
.bout-ticket-controls > label { font-size: .875rem; }
.bout-ticket-controls > p { padding-block: 8px; }
.bout-ticket__terms { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; padding-top: 24px; }
.bout-ticket__terms details { width: 100%; }
.bout-reserves { display: grid; gap: 16px; }
.bout-reserves > div { display: flex; justify-content: space-between; gap: 16px; }
.bout-print { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 64px var(--bout-inset); background: var(--bout-steel); color: var(--card); line-height: 1.62; }
.bout-print > div { display: grid; align-content: start; gap: 16px; min-width: 0; }
.bout-print { position: relative; isolation: isolate; background: var(--card); color: var(--ink); }
.bout-print::before { content: ''; position: absolute; inset: 0 50% 0 0; background: var(--bout-steel); z-index: -1; }
.bout-print > div:first-child { color: var(--card); }
.bout-fight, .bout-rulebook, .bout-decision, .bout-doc-ruling { position: relative; }
.bout-print ol { display: grid; gap: 12px; list-style: none; padding: 0; }
.bout-print li { padding: 24px; background: var(--card); color: var(--ink); border-top: 1px dashed var(--ink); font: 400 var(--bout-small)/1.65 var(--font-mono); }
.bout-rulebook .bout-section-title { width: 50%; margin-left: 50%; padding-left: 32px; }
.bout-rule-row { display: grid; grid-template-columns: 114px minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 32px; border-top: 1px solid var(--line); }
.bout-rule-row:nth-child(odd) { background: var(--ground); }
.bout-diagram { width: 114px; height: 110px; color: var(--ink); }
.bout-publication, .bout-doc-ruling { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 64px var(--bout-inset); }
.bout-publication { background: var(--band); }
.bout-publication { position: relative; isolation: isolate; }
.bout-publication::before { content: ''; position: absolute; inset: 0 0 0 50%; background: var(--bout-steel); z-index: -1; }
.bout-publication > div:last-child { color: var(--card); line-height: 1.62; }
.bout-publication > div, .bout-doc-ruling > div { display: grid; gap: 24px; justify-items: start; }
.bout-publication dl { display: grid; gap: 16px; }
.bout-document { display: grid; grid-template-columns: 1fr 1fr; }
.bout-document > div { display: grid; align-content: center; gap: 24px; padding: 80px var(--bout-inset); }
.bout-document > div:nth-child(2) { background: var(--bout-steel); color: var(--card); line-height: 1.62; }
.bout-doc-crossing { grid-column: 1/-1; display: grid; place-items: center; position: relative; isolation: isolate; padding-bottom: 32px; }
.bout-doc-crossing::before { content: ''; position: absolute; inset: 0 0 0 50%; background: var(--bout-steel); z-index: -1; }
.bout-doc-crossing img { width: min(64vw, 720px); height: 580px; min-height: 580px; object-fit: contain; }
.bout-doc-crossing figcaption { justify-self: start; width: calc(50% - 24px); padding: 8px 24px; text-align: right; font: 400 var(--bout-small)/1.5 var(--font-mono); }
.bout-doc-tape { display: grid; grid-template-columns: 1fr 1fr; padding: 48px var(--bout-inset); gap: 48px; border-block: 1px solid var(--line); }
.bout-doc-tape > div { display: grid; align-content: start; gap: 24px; }
.bout-doc-tape > div:last-child { text-align: right; }
.bout-doc-tape dl { display: grid; gap: 8px; }
.bout-doc-tape dd { padding-bottom: 16px; }
.bout-document h2 { font-size: var(--bout-display); }
.bout-doc-ruling { border-top: 1px solid var(--line); }
.bout-footer { display: grid; grid-template-columns: 1fr 2fr auto; align-items: start; gap: 48px; padding: 48px var(--bout-inset); border-top: 1px solid var(--line); }
.bout-footer__name { font: 500 var(--bout-heading)/1 "Bodoni Moda", serif; text-decoration: none; }
.bout-footer > div { display: grid; gap: 16px; font-size: .875rem; }
.bout-footer > a:last-child { min-height: 44px; }
.bout-judges { display: grid; gap: 32px; padding-block: 32px 48px; }
.bout-judges header { display: grid; gap: 16px; }
.bout-judges__readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.bout-judge { display: grid; align-content: start; gap: 24px; padding: 32px 16px; text-align: center; min-width: 0; }
.bout-judge--middle { background: var(--bout-steel); color: var(--card); line-height: 1.62; }
.bout-call-stamp { display: inline-block; justify-self: center; padding: 8px 16px; border: 1px solid currentColor; transform: rotate(-5deg); font: 400 var(--bout-small)/1.5 var(--font-mono); text-transform: uppercase; }
.bout-decision-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; }
.bout-decision-form .field:nth-child(3), .bout-decision-form .lab-out { grid-column: 1/-1; }
.bout-state-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.bout-state-steps button { position: relative; background: transparent; z-index: 1; padding-inline: 8px; }
.bout-state-steps [aria-checked=true] { color: var(--card); }
.bout-state-marker { position: absolute; inset: 0 auto 0 0; width: 25%; background: var(--bout-steel); }
.bout-ledger, .lab-history, .bout-chain, .bout-ledger-group { padding: 48px var(--bout-inset); border-top: 1px solid var(--line); display: grid; gap: 24px; }
.bout-ledger-group { padding: 0; }
.bout-ledger-title { display: grid; gap: 16px; }
.bout-ledger-title > div { display: grid; gap: 16px; }
.stake-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; }
.stake-controls label { grid-column: 1/-1; }
.bout-chain-reads { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.bout-chain-reads dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; align-content: start; }
.bout-chain-reads dd { text-align: right; }
.bout-chain { background: var(--bout-steel); color: var(--card); line-height: 1.62; }
.bench-log__list, #labHistoryList { display: grid; gap: 16px; padding: 0; list-style: none; }
.bench-entry, #labHistoryList li { border-block: 1px dashed var(--line); padding: 24px; background: var(--ground); }
.bench-entry__line { display: flex; flex-wrap: wrap; gap: 16px; }
.bench-entry__n, .bench-entry__line--meta { font: 400 var(--bout-small)/1.5 var(--font-mono); }
.bout-board__net, .bout-board td:last-child { text-align: right; }
.bout-board caption { text-align: left; padding-block: 16px; }
.bout-entry__progress, .bout-entry__wallet { display: grid; gap: 24px; }
.bout-entry__amount { display: grid; gap: 8px; }
.bout-receipts ol { display: grid; gap: 16px; list-style: none; padding: 0; }
.bout-receipts li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 24px; border-block: 1px dashed var(--line); background: var(--ground); }
.wallet-picker { position: fixed; inset: 0; z-index: 1000; background: var(--bout-steel); display: grid; place-items: center; padding: 24px; }
.wallet-picker__card { width: min(100%, 480px); max-height: calc(100dvh - 48px); overflow: auto; background: var(--card); color: var(--ink); padding: 32px; display: grid; gap: 16px; }
.wallet-picker__head { display: flex; gap: 24px; justify-content: space-between; align-items: center; }
.wallet-picker__list { display: grid; gap: 8px; }
.wallet-picker__row { display: flex; width: 100%; align-items: center; gap: 16px; text-align: left; }
.wallet-picker__row img { width: 28px; height: 28px; }
.wallet-picker__row small, .wallet-picker__meta { font-size: .875rem; }
.wallet-picker__row-text { display: grid; gap: 4px; }
.wallet-picker__row-rdns, .wallet-picker__note { font-size: .875rem; }
.wallet-glyph { display: block; width: 28px; height: 28px; flex: none; }
.wallet-glyph svg { width: 100%; height: 100%; }
@container (max-width: 480px) { .bout-match { grid-template-columns: 1fr 32px 1fr; padding-inline: 8px; } }
@media (min-width: 768px) and (max-width: 1100px) {
  .bout-nav { min-height: 80px; }
  .bout-nav__light, .bout-nav__dark { gap: 16px; font-size: 14px; }
  .bout-nav__light { padding-right: 100px; }
  .bout-nav__dark { padding-left: 100px; }
  .bout-wallet button { padding-inline: 8px; }
  .bout-tape { column-gap: 48%; }
  .bout-tape h2 { font-size: 22px; }
}
@media (max-width: 767px) {
  .bout-nav { min-height: 72px; grid-template-columns: 1fr auto; background: var(--bout-steel); color: var(--card); padding: 0 16px; }
  .bout-wordmark { position: relative; left: auto; transform: none; width: 112px; min-height: 44px; font-size: 26px; }
  .bout-wordmark__half--light { clip-path: none; color: var(--card); justify-content: start; }
  .bout-wordmark__half--dark { display: none; }
  .bout-nav__light, .bout-nav__dark > a { display: none; }
  .bout-nav__dark { padding: 0 76px 0 12px; gap: 0; }
  .bout-wallet { margin: 0; }
  .bout-wallet button { font-size: 12px; padding: 8px; }
  .bout-wallet #navCa, .bout-wallet .wallet-icon { display: none; }
  .bout-menu-toggle { display: block; position: absolute; right: 16px; top: 14px; min-height: 44px; padding: 8px; background: transparent; color: var(--card); border: 1px solid currentColor; }
  .bout-arena { display: flex; flex-direction: column; grid-template-columns: none; grid-template-rows: none; }
  .bout-seam-field { display: none; }
  .bout-arena__heading { padding: 24px 20px; }
  .bout-arena h1 { gap: 0; padding-top: 20px; font-size: clamp(32px, 8vw, 56px); transform: none; }
  .bout-arena h1 span { padding: 16px 8px; }
  .bout-arena h1 span:first-child { justify-self: stretch; }
  .bout-arena h1 span:last-child { justify-self: stretch; }
  .bout-tape { display: block; }
  .bout-tape__corner { grid-column: 1; gap: 12px; padding: 24px 20px; grid-template-rows: auto auto auto auto auto; }
  .bout-tape__corner--A { grid-row: 2; }
  .bout-tape__corner--B { grid-row: 4; background: var(--bout-steel); }
  .bout-tape dl { grid-template-columns: 1fr 1fr; grid-template-rows: 104px 64px; gap: 16px; }
  .bout-crossing { grid-area: 3/1; left: 0; width: 100%; height: 392px; min-height: 392px; transform: none; }
  .bout-blades { inset: 0 12px 52px; }
  .bout-crossing figcaption { top: auto; bottom: 8px; left: 20px; width: calc(100% - 40px); justify-items: start; text-align: left; color: var(--card); padding-right: 144px; }
  .bout-crossing button { left: auto; right: 0; top: auto; bottom: 0; }
  .bout-arena__foot { grid-row: 5; grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; background: var(--card); }
  .bout-arena__foot p { padding: 0; }
  .bout-arena__foot .btn { justify-self: start; }
  .bout-ticket__body, .bout-print, .bout-publication, .bout-doc-ruling { grid-template-columns: 1fr; gap: 32px; }
  .bout-print, .bout-publication { padding: 0; gap: 0; }
  .bout-print::before, .bout-publication::before { display: none; }
  .bout-print > div, .bout-publication > div { padding: 40px 20px; }
  .bout-print > div:first-child, .bout-publication > div:last-child { background: var(--bout-steel); }
  .bout-ticket__terms { padding-top: 0; }
  .bout-rulebook .bout-section-title { width: 100%; margin: 0; padding-left: 0; }
  .bout-rule-row { grid-template-columns: 80px 1fr; gap: 16px; padding-block: 24px; }
  .bout-rule-row .bout-diagram { width: 80px; height: 80px; }
  .bout-rule-row p { grid-column: 2; }
  .bout-document > div { padding: 48px 20px; }
  .bout-document h1, .bout-document h2 { font-size: clamp(2rem, 8vw, 3rem); }
  .bout-document .kicker { font-size: .75rem; }
  .bout-judge { padding: 24px 8px; gap: 20px; }
  .bout-judge .kicker { font-size: .75rem; letter-spacing: 0; }
  .bout-call-stamp { padding: 8px; font-size: .75rem; }
  .bout-decision-form { grid-template-columns: 1fr; gap: 24px; }
  .stake-controls { grid-template-columns: 1fr auto; }
  .bout-chain-reads { grid-template-columns: 1fr; }
  .bout-footer { grid-template-columns: 1fr; gap: 24px; }
}

/* Keep the guided ticket in the same arena as the blades it controls. */
.bout-arena > .bout-ticket { grid-row: 4; min-width: 0; }
.bout-ticket__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.bout-ticket-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 32px; }
.bout-step { display: grid; gap: 16px; min-width: 0; }
.bout-step h3 { font-size: var(--bout-subhead); }
.bout-step select, .bout-step input { width: 100%; min-width: 0; }
.bout-side-choices { display: grid; gap: 12px; }
.bout-side { min-height: 88px; padding: 16px; border: 1px solid var(--ink); background: var(--card); text-align: left; line-height: 1.6; }
.bout-side--dark { color: var(--card); background: var(--bout-steel); }
.bout-side[aria-pressed=true] { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.bout-outcomes { display: grid; gap: 16px; font-size: var(--bout-body); }
.bout-blades canvas, .bout-blades .object-still { position: absolute; inset: 0; }
.bout-tape [data-caption] { font-size: .875rem; }
#boutDemo { margin-block: var(--bout-section); }
@media (max-width: 767px) {
  .bout-ticket-controls { grid-template-columns: minmax(0, 1fr); }
  .bout-arena > .bout-ticket { grid-row: 6; }
}

@media (max-width: 767px) {
  .bout-document { grid-template-columns: 1fr; }
  .bout-document > div { padding: 32px 20px; }
  .bout-document > div:nth-child(2) { grid-row: 3; }
  .bout-doc-crossing { grid-row: 2; min-height: 340px; }
  .bout-doc-crossing::before { inset: 50% 0 0; }
  .bout-doc-crossing img { width: 100%; height: 340px; min-height: 340px; }
  .bout-doc-crossing figcaption { width: 100%; color: var(--card); text-align: center; }
  .bout-doc-tape { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .bout-doc-tape > div { padding: 32px 20px; }
  .bout-doc-tape > div:last-child { color: var(--card); background: var(--bout-steel); }
}

.bout-card-note, #boutCardNote { padding: 12px 16px; font-size: 12px; }
.bout-card-skel { display: grid; }
.bout-card-skel__row { min-height: 88px; border-bottom: 1px solid var(--line); background: var(--tint); }
.bout-card-live { min-width: 0; }
.bout-card-row { min-width: 0; border-bottom: 1px solid var(--line); }