/* Emerald identifies a chosen side or a changing value. The primary action and
   crossing in the brand are the two explicit identity exceptions. */
.bout-phone-band { display: contents; }
.bout-phone-only { display: none; }
.bout-tape__corner--A { grid-column: 1; }
.bout-tape__corner--B { grid-column: 2; }
.bout-blades { touch-action: pan-y; }
.bout-blades::after { content: none; }
.bout-sword-fallback[hidden] { display: none; }
.bout-fallback-lean, .bout-fallback-sway { transform-origin: 200px 260px; }
.bout-fallback-lean { transition: transform 600ms ease-in-out; }
.bout-fallback-lean--A { transform: rotate(var(--blade-lean-a, 0deg)); }
.bout-fallback-lean--B { transform: rotate(var(--blade-lean-b, 0deg)); }
.bout-fallback-sway { animation: bout-sword-sway 6s ease-in-out infinite; }
.bout-fallback-sway--B { animation-delay: -3s; }
.bout-fallback-glint { opacity: 0; animation: bout-sword-glint 7s ease-in-out infinite; }
.bout-fallback-sway--B .bout-fallback-glint { animation-delay: -3.5s; }
.bout-fallback-grip { fill: var(--ink-soft); }
.bout-sword-fallback[data-side=A] .bout-fallback-grip--A,
.bout-sword-fallback[data-side=B] .bout-fallback-grip--B { fill: var(--accent); }
.bout-fallback-pulse { fill: var(--accent); opacity: 0; transform-origin: 200px 260px; }
.bout-sword-fallback.is-price-tick .bout-fallback-pulse { animation: bout-sword-pulse 900ms ease-in-out; }
@keyframes bout-sword-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes bout-sword-glint { 0%, 65% { opacity: 0; transform: translateY(0); } 70% { opacity: .6; } 92%, 100% { opacity: 0; transform: translateY(-360px); } }
@keyframes bout-sword-pulse { 0%, 100% { opacity: 0; transform: scale(.8); } 35% { opacity: .7; transform: scale(1.4); } }
#boutPause { width: 44px; height: 44px; min-height: 44px; padding: 12px; display: inline-flex; justify-content: center; }
#boutPause[hidden] { display: none; }
#boutPause::before, #boutPause::after { content: none; }
#boutPause > svg[aria-hidden=true] { display: block; }
#boutPause .bout-play-triangle { display: none; }
#boutPause[aria-pressed=true] .bout-play-triangle { display: block; }
#boutPause[aria-pressed=true] .bout-pause-bars { display: none; }
.bout-nav__dark .bout-cta-secondary, .bout-sheet-head .bout-cta-secondary { color: var(--card); border-color: currentColor; }
.bout-nav__dark .bout-cta-secondary:hover, .bout-sheet-head .bout-cta-secondary:hover { background: transparent; color: var(--card); }
.bout-sheet-wallet .bout-wallet { width: 100%; }
.bout-nav-sheet .bout-sheet-wallet .bout-cta-primary { background: var(--accent); color: var(--ink); }
.bout-sheet-links a:nth-child(1), .bout-sheet-links a:nth-child(2) { text-align: right; }
.bout-sheet-links a:nth-child(3), .bout-sheet-links a:nth-child(4) { text-align: left; }
.bout-sheet-links a[data-nav-key] { white-space: normal; }
@media (max-width: 767px) {
  .bout-nav { background: var(--card); color: var(--ink); }
  .bout-nav.is-condensed { --bout-nav-lift: 0px; }
  .bout-nav.is-condensed::before { transform: none; }
  .bout-menu-toggle.bc-button { top: calc(14px + env(safe-area-inset-top)); font-size: 12px; }

  :root { --bout-inset: 16px; }
  html { scrollbar-gutter: auto; }
  #main { display: flex; flex-direction: column; }
  #main > .bout-demo { order: 1; }
  #main a, .bout-footer a { min-height: 44px; min-width: 44px; }
  .bout-contract { gap: 8px; }
  .bout-arena, .bout-document { display: flex; flex-direction: column; width: 100%; grid-template-columns: none; grid-template-rows: none; padding: 0; gap: 0; }
  .bout-phone-band { display: block; width: 100%; min-height: 120px; padding: 24px 16px; }
  .bout-phone-band--light { min-height: 240px; background: var(--card); color: var(--ink); }
  .bout-phone-band--dark { min-height: 300px; background: var(--bout-steel); color: var(--card); text-align: right; }
  .bout-seam-field, .bout-crossing::before { display: none; }
  .bout-arena__heading, .bout-arena h1, .bout-tape { display: block; width: 100%; padding: 0; transform: none; }
  .bout-arena__heading, .bout-tape, .bout-arena__foot { min-width: 16ch; font-size: 16px; }
  .bout-round-label { display: inline-block; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font: 400 12px/1.4 var(--font-body); letter-spacing: 0; }
  .bout-arena h1, .bout-phone-title { display: block; width: 100%; padding: 20px 0 24px; font: 500 clamp(40px, 12vw, 56px)/1.1 var(--font-display); }
  .bout-arena h1 span { display: block; padding: 0; color: var(--ink); background: transparent; }
  .bout-arena h1 span:last-child { display: none; }
  .bout-phone-title { min-width: 0; padding-top: 0; text-align: right; color: var(--card); }
  .bout-tape__corner { display: block; width: 100%; min-width: 16ch; padding: 0; background: transparent; }
  .bout-tape__corner--A { text-align: left; }
  .bout-tape__corner--B { text-align: right; }
  .bout-tape__corner > .kicker, .bout-tape__corner > [data-caption] { display: none; }
  .bout-tape h2 { font: 500 16px/1.4 var(--font-body); margin-bottom: 12px; }
  .bout-tape dl { display: block; width: 100%; }
  .bout-tape dl > div { display: block; min-width: 16ch; padding: 12px 0; border: 0; text-align: left; }
  .bout-tape__corner--B dl > div { text-align: right; }
  .bout-tape dl > div:nth-child(3), .bout-tape dl > div:nth-child(4) { display: none; }
  .bout-tape dt { font-size: 14px; }
  .bout-tape .bc-number, .bout-tape .bc-readout { font-size: 22px; text-align: inherit; }
  .bout-tape .bc-tape-meaning { display: block; font-size: 14px; white-space: normal; }
  .bout-crossing { grid-area: auto; left: 0; width: 100%; height: 360px; min-height: 360px; margin: 0; transform: none; overflow: hidden; background: linear-gradient(var(--card) 50%, var(--bout-steel) 50%); }
  .bout-blades { inset: 0 16px; transform: none; }
  .bout-blades canvas, .bout-blades .object-still { width: 100%; min-height: 300px; height: 360px; }
  .bout-blades .object-still { object-fit: contain; }
  /* A taller SVG viewport gives the actual blades over 300px of height. */
  .bout-blades .bout-sword-fallback { height: 400px; top: -20px; }
  .bout-crossing figcaption { display: block; top: auto; bottom: 8px; left: 16px; width: calc(100% - 32px); padding: 0; }
  .bout-crossing .bout-live-note, .bout-crossing .bout-fallback-note { display: none; }
  .bout-crossing #boutPause { right: 0; left: auto; top: auto; bottom: 0; color: var(--card); }
  .bout-arena__foot { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 24px 0 0; background: transparent; color: var(--card); }
  .bout-arena__foot p { display: none; }
  .bout-arena__foot .btn { display: flex; width: 100%; min-height: 48px; justify-content: space-between; }
  .bout-document > div { width: 100%; min-width: 16ch; min-height: 120px; padding: 24px 16px; }
  .bout-doc-crossing { width: 100%; min-height: 340px; background: linear-gradient(var(--card) 50%, var(--bout-steel) 50%); }
  .bout-doc-crossing::before { display: none; }
  .bout-doc-crossing img { width: 100%; height: 340px; min-height: 300px; object-fit: contain; }
  .bout-ticket-controls, .bc-ticket-results { display: flex; flex-direction: column; width: 100%; }
  .bout-step, .bc-ticket-results > * { width: 100%; min-width: 16ch; }
  .bout-side-choices.bc-choice { grid-template-columns: repeat(2, minmax(44px, 1fr)); gap: 8px; border: 0; }
  .bc-choice__indicator { display: none; }
  .bc-choice .bout-side { min-width: 44px; }
  .bc-choice [data-output] { font: 500 22px/1.4 var(--font-body); }
  .bc-amount__head { flex-direction: column; align-items: stretch; gap: 8px; }
  .bc-amount__entry, .bc-amount__entry .bc-input { width: 100%; }
  .bc-amount__entry .bc-input { font-size: 16px; text-align: left; }
  .bc-rule .bc-summary { min-height: 56px; padding-block: 12px; }
  .bout-rule-row { display: block; }
  .bout-rule-row .bout-diagram { display: none; }
  .bc-tabs, .bout-state-steps.bc-choice, .bout-footer { gap: 8px; }
  .bout-state-steps.bc-choice { grid-template-columns: repeat(2, minmax(44px, 1fr)); }
  .bout-state-marker { display: none; }
  .bout-state-steps [aria-checked=true] { background: var(--band); color: var(--ink); }
  code, .mono, .mono-label, .bout-contract, .wallet-picker__row-rdns { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
  .bout-print > div, .bout-publication > div, .bout-judge, .bout-doc-tape > div { padding-inline: 16px; }
  .bout-arena [data-reveal] { min-width: 16ch; }
  .js-ready .bout-arena h1 span { animation: none; }

}
@media (prefers-reduced-motion: reduce) {
  .bout-fallback-sway { animation: none; transform: none; }
  .bout-fallback-glint { animation: none; opacity: 0; transform: none; }
  .bout-sword-fallback.is-price-tick .bout-fallback-pulse { animation: none; opacity: 0; transform: none; }
  .bout-fallback-lean { transition: none; }
  #boutPause { display: none; }
}

/* Live fight card: facing accounts around one local seam. */
.bout-card-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); align-items: center; gap: 24px; min-height: 132px; padding: 12px 16px; position: relative; cursor: pointer; background: transparent; color: var(--ink); border-bottom: 1px solid var(--line); }
.bout-card-row.is-selected { outline: 1px solid var(--accent-deep); outline-offset: -1px; }
.bout-card-row:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.bout-card-side { display: grid; gap: 3px; min-width: 0; }
.bout-card-side--A { text-align: right; justify-items: end; }
.bout-card-side--B { text-align: left; justify-items: start; }
.bout-card-name { margin: 0; font: 500 24px/1.2 var(--font-display); overflow-wrap: anywhere; }
.bout-card-name.is-address { font: 500 20px/1.4 var(--font-body); white-space: nowrap; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums; }
.bout-card-addr { display: inline-flex; align-items: center; gap: 4px; font: 400 12px/1.4 var(--font-body); color: inherit; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.bout-external { font-size: 12px; }
.bout-card-stats { display: flex; flex-wrap: wrap; gap: 5px 12px; }
.bout-card-side--A .bout-card-stats { justify-content: flex-end; }
.bout-card-stat { display: flex; align-items: baseline; gap: 3px; margin: 0; font: 400 12px/1.6 var(--font-body); white-space: nowrap; }
.bout-card-label, .bout-card-direction { color: var(--ink-soft); }
.bout-card-amount { color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.bout-card-stat.is-window .bout-card-amount { font-weight: 600; border-bottom: 1px solid var(--accent-deep); }
.bout-spark { display: block; width: 120px; height: 28px; color: var(--ink-soft); }
.bout-card-seam { position: relative; display: grid; align-content: center; gap: 8px; min-width: 0; text-align: center; padding-block: 12px; }
.bout-card-seam::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); z-index: -1; }
.bout-card-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font: 500 24px/1.2 var(--font-body); font-variant-numeric: lining-nums tabular-nums; }
.bout-card-price:first-child { text-align: right; }
.bout-card-price:last-child { text-align: left; }
.bout-card-price.is-leading { color: var(--accent-deep); }
.bout-card-tug { height: 3px; background: var(--ink); width: 100%; }
.bout-card-tug-a { display: block; height: 100%; width: var(--price-a); background: var(--accent-deep); }
.bout-card-lead { font: 400 12px/1.5 var(--font-body); white-space: nowrap; }
.bout-card-selected { font: 500 12px/1.4 var(--font-body); color: var(--accent-deep); }
.bout-card-selected[hidden], .bout-card-live[hidden], .bout-card-skel[hidden] { display: none; }
.bout-readings { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 0; border-block: 1px solid var(--line); font: 400 12px/1.5 var(--font-body); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bout-readings p { margin: 0; }
.bout-readings > p + p::before { content: '\00b7'; margin-right: 12px; }
#readingsChain { margin-left: auto; }
.bout-readings details { flex-basis: 100%; }
.bout-readings .bc-summary { padding: 8px 0; font-size: 12px; min-height: 44px; }
#readingsCopy { min-height: 44px; padding: 4px 8px; font-size: 12px; }
.bout-board-window { display: flex; align-items: center; gap: 8px; padding-block: 16px; }
.bout-board-window button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 13px/1.4 var(--font-body); cursor: pointer; }
.bout-board-window button[aria-pressed=true] { border-color: var(--accent-deep); color: var(--accent-deep); }
.bout-board-window > span { margin-left: auto; font-size: 12px; color: var(--ink-soft); }
.bout-tape h2.is-address { font: 500 clamp(16px, 1.5vw, 24px)/1.4 var(--font-body); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.bout-tape-address { pointer-events: auto; min-width: 0; }
.bout-live-disclosure { grid-column: 1/-1; padding: 12px var(--bout-inset); background: var(--card); color: var(--ink-soft); font: 400 12px/1.5 var(--font-body); }
@media (min-width: 768px) {
  .bout-wordmark { --mark-seam: 50%; }
  .bout-wordmark__half--light { clip-path: inset(0 calc(100% - var(--mark-seam)) 0 0); }
  .bout-wordmark__half--dark { clip-path: inset(0 0 0 var(--mark-seam)); }
}
@media (max-width: 1100px) and (min-width: 768px) {
  .bout-card-row { gap: 12px; padding-inline: 8px; }
  .bout-card-stats { gap: 4px 8px; }
  .bout-card-name { font-size: 21px; }
}
@media (max-width: 767px) {
  .bout-card-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 16px; }
  .bout-card-side--A, .bout-card-side--B { text-align: left; justify-items: stretch; }
  .bout-card-side--A .bout-card-stats { justify-content: flex-start; }
  .bout-card-addr { min-height: 44px; }
  .bout-spark { width: 100%; height: 40px; }
  .bout-card-seam { padding: 12px 0; border-block: 1px solid var(--line); }
  .bout-card-prices { font-size: 28px; }
  .bout-card-lead { font-size: 12px; }
  .bout-board-window { flex-wrap: wrap; }
  .bout-board-window > span { flex-basis: 100%; margin-left: 0; }
  #readingsChain { margin-left: 0; flex-basis: 100%; }
}

.bout-board-window button::before, .bout-board-window button::after { content: none; }
.bout-card-seam { isolation: isolate; }
.bout-tape-address:empty { display: none; }

.bout-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Selection keeps each clay sword in its own colour. */
.bout-fallback-ring { opacity: 0; }
.bout-sword-fallback[data-side=A] .bout-fallback-ring--A,
.bout-sword-fallback[data-side=B] .bout-fallback-ring--B { opacity: 1; }