/* The homepage's inline widget styles, moved out so the six chapter pages
   share one cached copy. Extracted verbatim from index.html when the six
   numbered features became chapters; edit here for every page at once. */
  /* Omen nav wordmark: the poster art is taller than the DemoThemis wordmark
     the shared .brand-nav-wordmark width rule was tuned for, so pin height. */
  .brand-nav-wordmark--omen { width: auto; height: 2.15rem; }

  /* parimutuel demo */
  .pmsplit { display: flex; height: 44px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); font-family: var(--sans); font-weight: 700; color: #fff; margin-bottom: .9rem; }
  .pmsplit .yes { background: var(--good-ink); display: grid; place-items: center; transition: width .25s ease; min-width: 0; font-size: .9rem; overflow: hidden; }
  .pmsplit .no { background: var(--bad-ink); display: grid; place-items: center; transition: width .25s ease; min-width: 0; font-size: .9rem; overflow: hidden; }
  .pmsplit.empty { opacity: .45; }
  .pmbtns { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
  .pmbtns .btn.no { background: var(--bad-ink); }
  .pmbtns .btn.ghost { background: var(--faint); }
  .pmnarr { font-family: var(--sans); font-size: .9rem; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; min-height: 3.4rem; }

  /* mandatory resolution handoff */
  .resolution-diagram { position: relative; left: 50%; width: min(58rem, calc(100vw - 3rem)); translate: -50% 0; }
  .resolution-bridge { display: grid; grid-template-columns: minmax(11rem, 1fr) minmax(4.5rem, .42fr) minmax(11rem, 1fr) minmax(4.5rem, .42fr) minmax(11rem, 1fr); align-items: stretch; gap: clamp(.7rem, 1.25vw, 1rem); font-family: var(--sans); }
  .resolution-step { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: clamp(1rem, 1.5vw, 1.3rem); border: 1px solid color-mix(in srgb, var(--line-strong) 82%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 16px 32px -28px rgba(0,0,0,.5); overflow: hidden; }
  .resolution-step::after { content: ""; position: absolute; inset: auto 12% 0; height: 2px; border-radius: 999px; opacity: .72; }
  .resolution-step[data-brand="omen"] { border-color: color-mix(in srgb, #00f078 52%, var(--line)); background: linear-gradient(145deg, rgba(0,240,120,.09), rgba(255,255,255,.78)); }
  .resolution-step[data-brand="omen"]::after { background: #00d96c; box-shadow: 0 0 12px rgba(0,240,120,.58); }
  .resolution-step[data-brand="demothemis"] { border-color: color-mix(in srgb, #00e5ff 58%, var(--line)); background: linear-gradient(145deg, rgba(0,229,255,.1), rgba(255,255,255,.8)); }
  .resolution-step[data-brand="demothemis"]::after { background: #00e5ff; box-shadow: 0 0 13px rgba(0,229,255,.62); }
  .resolution-step .bridge-kicker { display: block; max-width: 100%; margin-bottom: .45rem; color: var(--muted); font: 700 .66rem/1.25 var(--mono); letter-spacing: .075em; text-transform: uppercase; }
  .resolution-step strong { display: block; color: var(--ink); font-size: 1rem; line-height: 1.2; }
  .resolution-step p { margin: .45rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
  .resolution-chip { display: inline-flex; align-self: flex-start; box-sizing: border-box; max-width: 100%; margin-top: auto; padding: .32rem .58rem; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); border-radius: 999px; color: var(--ink-soft); background: rgba(255,255,255,.56); font: 700 .68rem/1.15 var(--mono); }
  .resolution-connector { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; min-width: 0; text-align: center; color: var(--muted); font: 700 .62rem/1.35 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
  .resolution-connector .bridge-line { position: relative; width: 100%; height: 2px; border-radius: 999px; background: linear-gradient(90deg, #00d96c, #00e5ff, #00d96c); background-size: 200% 100%; box-shadow: 0 0 9px rgba(0,229,255,.34); animation: resolution-flow 5.5s linear infinite; }
  .resolution-connector .bridge-line::after { content: ""; position: absolute; top: 50%; right: -1px; width: 7px; height: 7px; border-top: 2px solid #00e5ff; border-right: 2px solid #00e5ff; transform: translateY(-50%) rotate(45deg); }
  @keyframes resolution-flow { to { background-position: -200% 0; } }
  @media (max-width: 920px) {
    .resolution-bridge { grid-template-columns: 1fr; gap: .55rem; }
    .resolution-step { min-height: 0; padding: 1.15rem 1.2rem 1.1rem; }
    .resolution-step p { max-width: 58ch; font-size: .88rem; }
    .resolution-chip { margin-top: .8rem; }
    .resolution-connector { display: grid; grid-template-columns: max-content minmax(4.5rem, 8rem); justify-content: center; min-height: 2.7rem; gap: .8rem; }
  }
  @media (max-width: 560px) {
    .resolution-diagram { width: calc(100vw - 2rem); }
    .resolution-connector { display: flex; min-height: 3.2rem; }
    .resolution-connector .bridge-line { width: 2px; height: 2.1rem; background: linear-gradient(180deg, #00d96c, #00e5ff); }
    .resolution-connector .bridge-line::after { top: auto; right: 50%; bottom: -1px; transform: translateX(50%) rotate(135deg); }
  }
  @media (prefers-reduced-motion: reduce) { .resolution-connector .bridge-line { animation: none; } }

  .robustness-cards { display: grid; gap: .8rem; margin-bottom: 1rem; font-family: var(--sans); }
  .robustness-card { border: 1px solid var(--line-strong); border-radius: 10px; padding: 1rem; }
  .robustness-card:nth-child(1) { border-color: var(--triad-mint-border); background: var(--triad-mint); }
  .robustness-card:nth-child(2) { border-color: var(--triad-lavender-border); background: var(--triad-lavender); }
  .robustness-card:nth-child(3) { border-color: var(--triad-amber-border); background: var(--triad-amber); }
  .robustness-card:nth-child(4) { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface)); }

  /* pool vs book table */
  .parts-wrap { overflow-x: auto; }
  .parts { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .85rem; }
  .parts th { text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: .4rem .6rem; border-bottom: 2px solid var(--line-strong); }
  .parts td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); }
  .parts td:first-child { font-weight: 600; white-space: nowrap; }
  .economics-parts .parts td:first-child { white-space: normal; }
  @media (max-width: 640px) {
    /* Any table marked .parts-stack becomes labelled cards instead of a
       sideways-scrolling grid; each cell prints its column from data-th. */
    .parts-stack { overflow: visible; }
    .parts-stack .parts,
    .parts-stack .parts tbody { display: block; }
    .parts-stack .parts thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .parts-stack .parts tr { display: block; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, var(--omm-mint-soft)); }
    .parts-stack .parts tr + tr { margin-top: .7rem; }
    .parts-stack .parts td { display: block; padding: 0; border: 0; line-height: 1.5; }
    .parts-stack .parts td:first-child { white-space: normal; overflow-wrap: anywhere; color: var(--ink); font-size: .93rem; }
    .parts-stack .parts td + td { margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--line); }
    .parts-stack .parts td[data-th]::before { content: attr(data-th); display: block; margin-bottom: .18rem; color: var(--faint); font: 700 .64rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
    .economics-parts { overflow: visible; }
    .economics-parts .parts,
    .economics-parts .parts tbody { display: block; }
    .economics-parts .parts thead {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .economics-parts .parts tr {
      display: block;
      padding: .9rem 1rem;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: color-mix(in srgb, var(--surface) 92%, var(--omm-mint-soft));
    }
    .economics-parts .parts tr + tr { margin-top: .7rem; }
    .economics-parts .parts td {
      display: block;
      padding: 0;
      border: 0;
      line-height: 1.5;
    }
    .economics-parts .parts td:first-child {
      padding-left: .7rem;
      white-space: normal;
      overflow-wrap: anywhere;
      color: var(--ink);
      font-size: .93rem;
    }
    .economics-parts .parts td + td {
      margin-top: .65rem;
      padding-top: .65rem;
      border-top: 1px solid var(--line);
    }
    .economics-parts .parts td:nth-child(2)::before,
    .economics-parts .parts td:nth-child(3)::before {
      display: block;
      margin-bottom: .18rem;
      color: var(--faint);
      font: 700 .64rem/1.3 var(--mono);
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .economics-parts .parts td:nth-child(2)::before { content: "Rule set before trading"; }
    .economics-parts .parts td:nth-child(3)::before { content: "Destination or fallback"; }
  }

  /* private-room gross terms and resolution-time net payout */
  .private-payout-card {
    margin: 1.25rem 0;
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid color-mix(in srgb, var(--omm-green) 42%, var(--line));
    border-radius: 16px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--omm-mint-soft) 72%, var(--surface)), var(--surface));
    box-shadow: var(--shadow);
    font-family: var(--sans);
  }
  .private-payout-card h3 { margin: .2rem 0 .35rem; }
  .private-payout-card > p { margin: 0; color: var(--muted); font-size: .9rem; }
  .private-payout-kicker { color: var(--omm-green-dark); font: 700 .66rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
  .private-payout-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; }
  .private-payout-item { min-width: 0; padding: .75rem .8rem; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.72); }
  .private-payout-item span { display: block; color: var(--faint); font: 700 .62rem/1.35 var(--mono); letter-spacing: .055em; text-transform: uppercase; }
  .private-payout-item strong { display: block; margin-top: .22rem; color: var(--ink); font-size: 1rem; overflow-wrap: anywhere; }
  .private-fee-disclosure { margin-top: .7rem; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.64); }
  .private-fee-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .75rem .85rem; cursor: pointer; color: var(--ink-soft); font-size: .83rem; font-weight: 650; }
  .private-fee-disclosure summary span small { display: block; margin-top: .12rem; color: var(--faint); font: 500 .68rem/1.3 var(--sans); }
  .private-fee-disclosure summary strong { color: var(--omm-green-dark); text-align: right; }
  .private-fee-math { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; padding: 0 .85rem .85rem; color: var(--muted); font-size: .82rem; }
  .private-fee-math b { min-width: 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; }
  @media (max-width: 640px) {
    .private-payout-grid { grid-template-columns: 1fr 1fr; }
    .private-fee-disclosure summary { align-items: flex-start; flex-direction: column; }
    .private-fee-disclosure summary strong { text-align: left; }
    .private-fee-math { grid-template-columns: minmax(0, 1fr); gap: .12rem; }
    .private-fee-math b { margin-bottom: .35rem; text-align: left; }
  }

  /* oracle evidence */
  .oracle-case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 1.4rem 0; }
  @media (max-width: 700px) { .oracle-case-grid { grid-template-columns: 1fr; } }
  .oracle-case { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); padding: 1rem 1.05rem; font-family: var(--sans); }
  .oracle-case.hot {
    border-color: color-mix(in srgb, var(--bad) 30%, var(--line));
    background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 13%, var(--surface)) 0, var(--surface) 48%);
  }
  .oracle-case.sys {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, var(--surface)) 0, var(--surface) 48%);
  }
  .oracle-case.fact {
    border-color: color-mix(in srgb, var(--good) 30%, var(--line));
    background: linear-gradient(180deg, color-mix(in srgb, var(--good) 13%, var(--surface)) 0, var(--surface) 48%);
  }
  .oracle-case.platform {
    margin-top: 1rem;
    border-color: color-mix(in srgb, #2362a4 30%, var(--line));
    background: linear-gradient(180deg, color-mix(in srgb, #2362a4 13%, var(--surface)) 0, var(--surface) 48%);
  }
  .oracle-case h3 { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: .45rem; }
  .oracle-case p { margin: .45rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
  .oracle-case .lab { font-size: .68rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: .16rem .5rem; white-space: nowrap; }
  .oracle-case.hot .lab { background: var(--bad-soft); color: var(--bad-ink); }
  .oracle-case.sys .lab { background: var(--accent-soft); color: var(--accent-ink); }
  .oracle-case.fact .lab { background: var(--good-soft); color: var(--good-ink); }
  .oracle-case.platform .lab { background: #e3eef9; color: #2362a4; }
  .oracle-sources { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
  .oracle-sources a { border: 1px solid var(--line); border-radius: 999px; background: var(--bg); padding: .16rem .55rem; font-size: .76rem; font-weight: 650; text-decoration: none; }
  .oracle-note { border: 2px solid color-mix(in srgb, var(--bad) 54%, var(--line)); border-radius: 12px; background: var(--bad-soft); color: #7e2f22; padding: 1rem 1.1rem; margin: 1.3rem 0 0; font-family: var(--sans); font-size: .94rem; line-height: 1.55; }


  /* ---- the appeal ladder game, moved here with the standoff widget ---- */
  /* Short "what this is / how to use it" note under a widget title. Carried
     over with the chapter: this site's stylesheet never needed it before. */
  .widget-intro { margin: 0 0 1.25rem; padding: .8rem .95rem; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: calc(var(--radius) - 6px); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); font-family: var(--sans); font-size: .88rem; line-height: 1.5; color: var(--ink); }
  .widget-intro b { color: var(--accent); font-weight: 700; }
  details.widget-intro { padding: 0; }
  details.widget-intro > summary { display: flex; align-items: center; gap: .4rem; padding: .52rem .8rem; border-radius: inherit; font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--accent); cursor: pointer; list-style: none; }
  details.widget-intro > summary::-webkit-details-marker { display: none; }
  details.widget-intro > summary::after { content: "\25BE"; display: inline-block; margin-left: auto; font-size: .78rem; line-height: 1; transition: transform .18s ease; }
  details.widget-intro[open] > summary::after { transform: rotate(180deg); }
  details.widget-intro > summary:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
  details.widget-intro > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  details.widget-intro > p { margin: 0; padding: 0 .8rem .68rem; }
  .standoff { display: grid; grid-template-areas: "yes log no"; grid-template-columns: minmax(9.5rem, 1fr) minmax(0, 2.4fr) minmax(9.5rem, 1fr); gap: .9rem; margin-top: 1rem; }
  .fighter { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: .75rem .7rem; text-align: center; align-self: start; }
  .fighter[data-side="yes"] { --side: var(--good); grid-area: yes; }
  .fighter[data-side="no"] { --side: var(--bad); grid-area: no; }
  .fighter .face { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--side); background: color-mix(in srgb, var(--side) 16%, var(--surface)); color: var(--side); font-family: var(--mono); font-size: .78rem; font-weight: 700; }
  .fighter b { display: block; font-family: var(--sans); font-size: .95rem; color: var(--ink); margin: .4rem 0 .5rem; }
  .fighter .row { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; margin: .55rem 0 .05rem; text-align: left; }
  .fighter .row label { font-family: var(--sans); font-size: .73rem; line-height: 1.3; color: var(--muted); }
  .fighter .row b { font-family: var(--sans); font-size: .82rem; color: var(--ink); }
  .fighter input[type="range"] { width: 100%; margin: 0; }
  .corner-badge { display: inline-block; margin-left: .3rem; font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .08em; padding: .08rem .4rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent); vertical-align: middle; }
  .fighter .holding { display: block; font-family: var(--sans); font-size: .74rem; color: var(--muted); margin-top: .1rem; }
  .fighter .hpbar { height: 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--side) 30%, var(--line)); background: color-mix(in srgb, var(--side) 12%, var(--surface)); overflow: hidden; margin-top: .45rem; }
  .fighter .hpbar i { display: block; height: 100%; width: 80%; background: var(--side); border-radius: 999px; transition: width .45s ease; }
  .fighter .hpnow { display: block; font-family: var(--sans); font-size: .72rem; color: var(--muted); margin-top: .25rem; }
  .fighter .corner-play { margin-top: .55rem; font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: linear-gradient(180deg, #fff, var(--accent-soft)); border: 1px solid var(--accent); border-radius: 10px; padding: .45rem .9rem; cursor: pointer; box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 42%, var(--line)), 0 4px 10px rgba(0, 0, 0, .08); transform: translateY(0); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
  .fighter .corner-play:hover { background: color-mix(in srgb, var(--accent) 14%, #fff); transform: translateY(-1px); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 42%, var(--line)), 0 6px 14px rgba(0, 0, 0, .1); }
  .fighter .corner-play:active { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 42%, var(--line)), 0 2px 5px rgba(0, 0, 0, .08); }
  .fighter .corner-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .fighter .corner-play:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
  .fighter .face { transition: transform .3s ease, filter .3s ease, opacity .3s ease; }
  .fighter.is-up .face { transform: scale(1.12) rotate(-3deg); }
  .fighter.is-down .face { transform: scale(.94) rotate(2deg); filter: saturate(.55); opacity: .8; }
  .widget.is-locked .controls, .widget.is-locked .fighter .row, .widget.is-locked .fighter input[type="range"], .widget.is-locked .fighter .corner-play { opacity: .55; }
  .rd-btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
  .rd-btns .rd-btn.fund { flex: 1 1 100%; }
  .rd-btn { font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 10px; padding: .62rem 1.1rem; cursor: pointer; border: 1px solid transparent; transform: translateY(0); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
  .rd-btn.fund { background: linear-gradient(180deg, #0cf07c, var(--omm-green)); color: var(--omm-black); border-color: color-mix(in srgb, var(--omm-green) 55%, var(--omm-black)); box-shadow: 0 3px 0 color-mix(in srgb, var(--omm-green) 52%, var(--omm-black)), 0 6px 16px rgba(4, 226, 109, .35); }
  .rd-btn.fund:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 4px 0 color-mix(in srgb, var(--omm-green) 52%, var(--omm-black)), 0 9px 20px rgba(4, 226, 109, .45); }
  .rd-btn.fund:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--omm-green) 52%, var(--omm-black)), 0 2px 6px rgba(4, 226, 109, .3); }
  .rd-btn.fold { background: linear-gradient(180deg, #4a201a, #36140e); color: #ffb3a6; border-color: rgba(255, 107, 87, .55); box-shadow: 0 3px 0 #200b07, 0 5px 12px rgba(0, 0, 0, .45); }
  .rd-btn.fold:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 4px 0 #200b07, 0 8px 16px rgba(0, 0, 0, .5); }
  .rd-btn.fold:active { transform: translateY(2px); box-shadow: 0 1px 0 #200b07, 0 2px 5px rgba(0, 0, 0, .4); }
  .rd-btn.plain { background: linear-gradient(180deg, #16331f, #0f2517); color: var(--omm-mint); border-color: rgba(4, 226, 109, .42); box-shadow: 0 3px 0 #081810, 0 4px 10px rgba(0, 0, 0, .35); }
  .rd-btn.plain:hover { filter: brightness(1.15); transform: translateY(-1px); box-shadow: 0 4px 0 #081810, 0 7px 14px rgba(0, 0, 0, .4); }
  .rd-btn.plain:active { transform: translateY(2px); box-shadow: 0 1px 0 #081810, 0 2px 5px rgba(0, 0, 0, .3); }
  .rd-btn:focus-visible { outline: 2px solid var(--omm-green); outline-offset: 2px; }
  .rd-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
  .dots { display: inline-block; margin-left: .2rem; }
  .dots i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--omm-mint); margin-left: 3px; opacity: .2; animation: bDot 1.1s infinite; }
  .dots i:nth-child(2) { animation-delay: .18s; }
  .dots i:nth-child(3) { animation-delay: .36s; }
  @keyframes bDot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
  .rd .score-line { display: block; margin-top: .2rem; }
  .rd .score-line b { display: inline; font-family: var(--mono); font-size: .85rem; text-transform: none; letter-spacing: 0; color: var(--omm-mint); margin: 0; }
  .bout { grid-area: log; display: flex; flex-direction: column; gap: .5rem; height: clamp(15rem, 44vh, 23rem); height: clamp(15rem, 44dvh, 23rem); overflow-y: auto; overscroll-behavior: contain; padding: .65rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--omm-green) 62%, var(--omm-black)); background-image: url("brand/omenmarketmaker/card-grid.svg"), radial-gradient(circle at 88% 0, rgba(4, 226, 109, .18), transparent 16rem); background-size: 34px 34px, auto; background-repeat: repeat, no-repeat; background-attachment: local, scroll; background-color: var(--omm-black); box-shadow: 0 1px 2px rgba(0, 4, 2, .12), 0 24px 54px -30px rgba(0, 89, 42, .75); scrollbar-width: thin; scrollbar-color: rgba(4, 226, 109, .45) transparent; }
  .bout .rd { position: relative; flex: 0 0 auto; border: 1px solid rgba(4, 226, 109, .28); border-radius: 10px; background: var(--omm-surface); padding: .55rem .7rem; font-family: var(--sans); font-size: .85rem; line-height: 1.45; color: #d7e3db; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
  .bout .rd.in { opacity: 1; transform: none; }
  .bout .rd b { display: block; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--omm-mint); margin-bottom: .15rem; }
  .bout .rd b .tag-good, .bout .rd b .tag-bad, .bout .rd b .tag-bond { display: inline-block; white-space: nowrap; margin-left: .45rem; }
  .bout .rd[data-side="yes"] { border-color: rgba(4, 226, 109, .6); }
  .bout .rd[data-side="no"] { border-color: rgba(255, 107, 87, .55); }
  .bout .tag-good { background: rgba(4, 226, 109, .16); color: var(--omm-mint); }
  .bout .tag-bad { background: rgba(255, 107, 87, .16); color: #ffb3a6; }
  .bout .tag-bond { font-family: var(--mono); font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; border: 1px dashed rgba(4, 226, 109, .65); background: rgba(4, 226, 109, .12); color: var(--omm-mint); }
  .standoff-run { font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: linear-gradient(180deg, #fff, var(--accent-soft)); border: 1px solid var(--accent); border-radius: 10px; padding: .55rem 1.15rem; cursor: pointer; margin-top: .75rem; box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 42%, var(--line)), 0 4px 10px rgba(0, 0, 0, .08); transform: translateY(0); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
  .standoff-run:hover { background: color-mix(in srgb, var(--accent) 14%, #fff); transform: translateY(-1px); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 42%, var(--line)), 0 6px 14px rgba(0, 0, 0, .1); }
  .standoff-run:active { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 42%, var(--line)), 0 2px 5px rgba(0, 0, 0, .08); }
  .standoff-run:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .standoff-run:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
  .court-meter { position: relative; text-align: center; margin: 1rem 0 .15rem; }
  .cm-label { display: block; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dt-emission-ink); }
  .cm-value { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: clamp(1.7rem, 5.2vw, 2.3rem); line-height: 1.15; color: var(--ink); text-shadow: 0 0 14px rgba(var(--dt-emission-rgb), .35); }
  .court-meter.is-bump .cm-value { animation: cm-shake .42s cubic-bezier(.36, .07, .19, .97); }
  .cm-sub { display: block; font-family: var(--sans); font-size: .78rem; color: var(--muted); margin-top: .1rem; }
  .cm-fx { position: absolute; inset: 0; pointer-events: none; }
  .cm-dollar { position: absolute; left: 50%; top: 22%; font-family: var(--mono); font-weight: 700; font-size: 1rem; color: var(--dt-emission-ink); text-shadow: 0 0 9px rgba(var(--dt-emission-rgb), .85); opacity: 0; animation: cm-pop .9s ease-out forwards; }
  .cm-plus { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); font-family: var(--mono); font-weight: 700; font-size: .95rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--dt-emission) 45%, var(--line)); background: color-mix(in srgb, var(--dt-emission) 12%, var(--surface)); color: var(--dt-emission-ink); opacity: 0; animation: cm-rise .95s ease-out forwards; }
  @keyframes cm-shake {
    10%, 90% { transform: translate(-1px, 0) rotate(-.6deg) scale(1.02); }
    20%, 80% { transform: translate(2px, 0) rotate(.6deg) scale(1.05); }
    30%, 50%, 70% { transform: translate(-3px, 1px) rotate(-1deg) scale(1.07); }
    40%, 60% { transform: translate(3px, -1px) rotate(1deg) scale(1.07); }
  }
  @keyframes cm-pop {
    0% { transform: translate(-50%, 0) scale(.6); opacity: 0; }
    14% { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, -60px)) scale(1.15) rotate(var(--rot, 0deg)); opacity: 0; }
  }
  @keyframes cm-rise {
    0% { transform: translate(-50%, 8px) scale(.85); opacity: 0; }
    16% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { transform: translate(-50%, -34px) scale(1); opacity: 0; }
  }
  .standoff-ref { margin: 1.05rem 0 0; text-align: center; }
  .standoff-ref a { position: relative; display: inline-block; padding: .1rem .15rem .35rem; font-family: var(--sans); font-weight: 600; font-size: .95rem; letter-spacing: .01em; color: var(--dt-emission-ink); text-decoration: none; }
  .standoff-ref a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--dt-emission-rgb), .12), var(--dt-emission) 38%, var(--dt-emission) 62%, rgba(var(--dt-emission-rgb), .12)); transform: scaleX(.24); transition: transform .32s ease, filter .32s ease; filter: drop-shadow(0 0 3px rgba(var(--dt-emission-rgb), .35)); }
  .standoff-ref a:hover::after, .standoff-ref a:focus-visible::after { transform: scaleX(1); filter: drop-shadow(0 0 4px rgba(var(--dt-emission-rgb), .9)) drop-shadow(0 0 10px rgba(var(--dt-emission-rgb), .55)); }
  .standoff-ref a:focus-visible { outline: 2px solid var(--dt-emission); outline-offset: 3px; border-radius: 6px; }
  @media (max-width: 700px) { .standoff { grid-template-areas: "yes no" "log log"; grid-template-columns: 1fr 1fr; } }

  /* The standoff game is meant to be read without scrolling, so every band is
     sized against the viewport rather than against its own content. Scoped to
     this widget: the fee calculator below keeps the roomier defaults. */
  /* One invariant holds the whole panel: it is always 95% of the viewport and
     never grows past it. The transcript fills the slack and scrolls inside its
     own box, so a long game can never push the board off screen. */
  /* 95% of what the reader can actually see. The sticky nav covers the top
     3.4rem of the viewport, so a panel measured against the full height either
     tucks under the nav or hangs below the fold. Deliberately a constant and
     not --sticky-header-bottom: that value also counts the work-in-progress
     banner and drops from 97px to 54px as it scrolls away, which would resize
     the panel mid-scroll. By the time this section is on screen the banner is
     long gone and the nav alone is left. */
  .standoff-widget { --sitenav-h: 3.4rem; --usable-h: calc(100dvh - var(--sitenav-h)); --panel-h: calc(var(--usable-h) * .95); display: flex; flex-direction: column; height: var(--panel-h); max-height: var(--panel-h); overflow-y: auto; scroll-margin-top: calc(var(--sitenav-h) + .5rem); padding: 1.15rem 1.2rem; }
  .standoff-widget .widget-head { margin-bottom: .6rem; }
  .standoff-widget .widget-intro { margin-bottom: .7rem; }
  .standoff-widget .court-meter { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .1rem .55rem; margin: .5rem 0 .1rem; }
  .standoff-widget .cm-label { font-size: .64rem; letter-spacing: .12em; }
  .standoff-widget .cm-value { font-size: clamp(1.3rem, 3.2vw, 1.7rem); }
  .standoff-widget .cm-sub { flex: 1 0 100%; font-size: .72rem; margin-top: 0; }
  .standoff-widget .controls { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: .3rem .95rem; margin-bottom: .7rem; }
  .standoff-widget .controls .ctl { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
  .standoff-widget .controls .row { margin: 0; font-size: .82rem; }
  .standoff-widget .controls .standoff-run { grid-column: 1 / -1; justify-self: center; margin-top: .45rem; }
  /* minmax(0, 1fr), not a fixed minimum: a row floor larger than the space left
     spills the board over the readout instead of scrolling. Zero lets the row
     take exactly what remains, and .bout scrolls inside it. */
  .standoff-widget .standoff { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); gap: .7rem; margin-top: .7rem; }
  .standoff-widget .fighter { padding: .6rem .55rem; text-align: left; }
  /* Identity on one line, and the live figure beside its bar, so the card costs
     two rows instead of five. */
  .standoff-widget .f-top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
  .standoff-widget .f-id { display: block; min-width: 0; }
  .standoff-widget .fighter .face { flex: 0 0 auto; width: 34px; height: 34px; font-size: .64rem; }
  .standoff-widget .fighter b { font-size: .86rem; margin: 0; }
  .standoff-widget .fighter .holding { margin-top: 0; }
  .standoff-widget .fighter .row { margin: .4rem 0 .05rem; }
  .standoff-widget .f-hp { display: flex; align-items: center; gap: .45rem; margin-top: .4rem; }
  .standoff-widget .f-hp .hpbar { flex: 1 1 auto; margin-top: 0; }
  .standoff-widget .f-hp .hpnow { flex: 0 0 auto; margin-top: 0; white-space: nowrap; }
  .standoff-widget .fighter .corner-play { display: block; width: 100%; margin-top: .5rem; padding: .38rem .6rem; }
  /* min-height:0 is what actually lets a grid item scroll: without it the item
     floors at its content height and the panel grows instead. */
  .standoff-widget .bout { height: auto; min-height: 0; overflow-y: auto; padding: .55rem; }
  .standoff-widget .readout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .7rem; }
  .standoff-widget .readout .stat { padding: .5rem .7rem; }
  .standoff-widget .standoff-ref { margin-top: .7rem; }
  .standoff-widget .standoff-ref a { font-size: .86rem; }

  @media (max-width: 700px) {
    /* Fill the phone screen and stop there: the bands keep their natural height
       and the transcript takes whatever is left over. */
    .standoff-widget { padding: .8rem .75rem; }
    /* Buy height for the transcript: the title sets tighter, and the meter's
       caption already appears almost word for word in the note above it. */
    .standoff-widget .widget-head { font-size: .74rem; margin-bottom: .45rem; }
    .standoff-widget .cm-sub { display: none; }
    .standoff-widget .controls .standoff-run { margin-top: .3rem; }
    /* Two rows here: the cards keep their height, the transcript takes the rest
       and scrolls. Same invariant as desktop, different grid. */
    .standoff-widget .standoff { grid-template-rows: auto minmax(0, 1fr); gap: .5rem; margin-top: .55rem; }
    .standoff-widget .court-meter { margin: .35rem 0 .1rem; }
    .standoff-widget .cm-sub { font-size: .68rem; }
    .standoff-widget .controls { gap: .25rem .6rem; margin-bottom: .5rem; }
    .standoff-widget .controls .row { font-size: .76rem; }
    /* Too narrow for a side-by-side identity row: stack and centre it again. */
    .standoff-widget .fighter { padding: .5rem .4rem; text-align: center; }
    .standoff-widget .f-top { flex-direction: column; align-items: center; gap: .2rem; }
    .standoff-widget .fighter .face { width: 32px; height: 32px; font-size: .62rem; }
    .standoff-widget .fighter b { font-size: .8rem; }
    .standoff-widget .fighter .holding { font-size: .68rem; }
    .standoff-widget .fighter .row label { font-size: .68rem; }
    .standoff-widget .f-hp { gap: .35rem; margin-top: .3rem; }
    /* One dense line rather than three boxes. Boxed stats grew mid-game when a
       result like "YES conceded" wrapped to a second line, stealing height from
       the transcript exactly as it filled up. The reserved min-height keeps the
       strip a fixed size whether the values are placeholders or results. */
    .standoff-widget .readout { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: .1rem .8rem; min-height: 2.9rem; margin-top: .55rem; }
    .standoff-widget .readout .stat { display: flex; align-items: baseline; gap: .32rem; min-height: 0; padding: .1rem .2rem; border-color: transparent; background: none; box-shadow: none; }
    .standoff-widget .readout .stat .k { font-size: .56rem; letter-spacing: .04em; white-space: nowrap; }
    .standoff-widget .readout .stat .v { font-size: .82rem; white-space: nowrap; }
    .standoff-widget .fighter .row { margin: .3rem 0 .02rem; }
    .standoff-widget .fighter .row b { font-size: .76rem; }
    .standoff-widget .fighter .hpnow { font-size: .64rem; margin-top: .1rem; }
    .standoff-widget .fighter .corner-play { margin-top: .35rem; padding: .32rem .6rem; font-size: .64rem; }
    .standoff-widget .fighter input[type="range"] { --range-thumb-size: 18px; }
    .standoff-widget .standoff-ref { margin-top: .45rem; }
    .standoff-widget .standoff-ref a { font-size: .74rem; }
  }

  /* Short viewports cannot hold every band plus a readable transcript inside 95%
     of the screen. Rather than crush the transcript to a line, give it a fixed
     height it scrolls inside and let the panel run a little past the fold. It
     still cannot grow with the game, which was the actual fault. */
  @media (max-height: 719px) {
    .standoff-widget { height: auto; min-height: var(--panel-h); max-height: none; }
    .standoff-widget .standoff { flex: 0 0 auto; }
    .standoff-widget .bout { height: clamp(7rem, 26dvh, 14rem); }
    .standoff-widget .fighter .face { width: 28px; height: 28px; font-size: .58rem; }
    .standoff-widget .fighter .corner-play { margin-top: .28rem; padding: .26rem .5rem; }
    .standoff-widget .readout .stat { padding: .35rem .35rem; }
    .standoff-widget .standoff-ref { margin-top: .35rem; }
  }

  /* A short phone is the tightest case: the bands alone outgrow the space under
     the nav. Go back to the flex model, which cannot overflow by construction,
     and pay for the transcript by trimming type and the one static line the
     board repeats. Nothing live is hidden. */
  @media (max-width: 700px) and (max-height: 719px) {
    /* Claim nearly all of the space under the nav here; 5% of a small screen is
       height the transcript cannot spare. */
    .standoff-widget { --panel-h: calc(var(--usable-h) * .98); height: var(--panel-h); max-height: var(--panel-h); min-height: 0; }
    .standoff-widget .fighter .hpnow { display: none; }
    .standoff-widget .fighter .row { margin: .28rem 0 .02rem; }
    .standoff-widget .f-hp { margin-top: .3rem; }
    .standoff-widget .court-meter { margin: .25rem 0 .05rem; }
    .standoff-widget .standoff { flex: 1 1 auto; min-height: 0; margin-top: .4rem; }
    .standoff-widget .bout { height: auto; }
    .standoff-widget .widget-head { font-size: .68rem; margin-bottom: .3rem; }
    .standoff-widget .widget-intro { margin-bottom: .5rem; }
    .standoff-widget details.widget-intro > summary { padding: .4rem .6rem; font-size: .74rem; }
    .standoff-widget .controls { gap: .2rem .5rem; margin-bottom: .35rem; }
    .standoff-widget .controls .row { font-size: .7rem; }
    .standoff-widget .controls .standoff-run { margin-top: .2rem; padding: .38rem .85rem; font-size: .66rem; }
    .standoff-widget input[type="range"] { --range-thumb-size: 16px; }
    .standoff-widget .fighter .holding { display: none; }
    .standoff-widget .readout { min-height: 2.6rem; gap: .1rem .7rem; }
    .standoff-widget .readout .stat .k { font-size: .54rem; }
    .standoff-widget .readout .stat .v { font-size: .78rem; }
    .standoff-widget .standoff-ref { margin-top: .3rem; }
    .standoff-widget .standoff-ref a { font-size: .68rem; line-height: 1.25; padding-bottom: .2rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bout .rd { transition: none; opacity: 1; transform: none; }
    .standoff-ref a::after { transition: none; }
    .court-meter.is-bump .cm-value { animation: none; }
    .cm-dollar, .cm-plus { animation: none; display: none; }
    .fighter .hpbar i, .fighter .face { transition: none; }
    .dots i { animation: none; opacity: .8; }
    .rd-btn, .fighter .corner-play { transition: none; }
  }