---
const x = (f: number) => 48 + 290 * f
const y = (value: number) => 220 - 86 * value
---

<div class='pikurn-geometry-frame'>
  <p class='geometry-scroll-hint'>↔ Scroll each chart sideways to see its full range.</p>
  <div class='pikurn-geometry'>
    <figure>
      <figcaption>Maximum average: bet nothing</figcaption>
      <div class='chart-scroll' tabindex='0' role='region' aria-label='Maximum average chart'>
        <svg
          viewBox='0 0 380 280'
          role='img'
          aria-label='Expected multiplier decreases from 1.5 at a zero wager to 1 at an all-in wager.'
        >
          <path d='M48 28V220H350' class='geometry-axis'></path>
          {
            [0, 1, 2].map((v) => (
              <>
                <path d={`M48 ${y(v)}H350`} class='geometry-grid' />
                <text x='38' y={y(v) + 5} text-anchor='end'>
                  {v}
                </text>
              </>
            ))
          }
          <path d={`M${x(0)} ${y(1.5)}L${x(1)} ${y(1)}`} class='geometry-value'></path>
          <circle cx={x(0)} cy={y(1.5)} r='6' class='geometry-dot'></circle>
          <text x='65' y={y(1.5) - 13}>E = 3/2</text>
          <text x='48' y='19'>Wealth multiplier</text>
          <text x={x(0)} y='245' text-anchor='middle'>0</text><text
            x={x(1)}
            y='245'
            text-anchor='middle'>1</text
          >
          <text x='194' y='272' text-anchor='middle'>Wager fraction f</text>
        </svg>
      </div>
    </figure>
    <figure>
      <figcaption>Maximum guarantee: equalize the branches</figcaption>
      <div class='chart-scroll' tabindex='0' role='region' aria-label='Maximum guarantee chart'>
        <svg
          viewBox='0 0 380 280'
          role='img'
          aria-label='The green continuation is 1 plus f; the red continuation is 2 minus 2f. Their minimum peaks at f one third, with multiplier four thirds.'
        >
          <path d='M48 28V220H350' class='geometry-axis'></path>
          {
            [0, 1, 2].map((v) => (
              <>
                <path d={`M48 ${y(v)}H350`} class='geometry-grid' />
                <text x='38' y={y(v) + 5} text-anchor='end'>
                  {v}
                </text>
              </>
            ))
          }
          <path d={`M${x(0)} ${y(1)}L${x(1)} ${y(2)}`} class='geometry-branch'></path>
          <path d={`M${x(0)} ${y(2)}L${x(1)} ${y(0)}`} class='geometry-branch'></path>
          <path
            d={`M${x(0)} ${y(1)}L${x(1 / 3)} ${y(4 / 3)}L${x(1)} ${y(0)}`}
            class='geometry-value'></path>
          <path d={`M${x(1 / 3)} ${y(4 / 3)}V220`} class='geometry-guide'></path>
          <circle cx={x(1 / 3)} cy={y(4 / 3)} r='6' class='geometry-dot'></circle>
          <text x={x(1 / 3) + 12} y={y(4 / 3) - 32}>H = 4/3</text>
          <text x='260' y='41'>1 + f</text><text x='251' y='155'>2 − 2f</text>
          <text x='48' y='19'>Wealth multiplier</text>
          <text x={x(0)} y='245' text-anchor='middle'>0</text><text
            x={x(1 / 3)}
            y='245'
            text-anchor='middle'>⅓</text
          ><text x={x(1)} y='245' text-anchor='middle'>1</text>
          <text x='194' y='272' text-anchor='middle'>Wager fraction f</text>
        </svg>
      </div>
    </figure>
  </div>
</div>

<style>
  .pikurn-geometry-frame {
    container-name: pikurn-geometry;
    container-type: inline-size;
  }
  .pikurn-geometry {
    display: grid;
    grid-template-columns: minmax(0, 25rem);
    gap: 1.5rem;
    justify-content: center;
    margin: 1.5rem 0;
  }
  .geometry-scroll-hint {
    display: none;
    font-size: 0.8rem;
  }
  @container pikurn-geometry (max-width: 362px) {
    .geometry-scroll-hint {
      display: block;
    }
  }
  figure {
    display: block;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--wow-border);
    border-radius: 0.5rem;
    background: var(--wow-back-alt);
    min-width: 0;
  }
  figcaption {
    font: inherit;
    font-weight: bold;
    font-size: 0.82rem;
    text-align: left;
    padding: 0;
    margin: 0 0 1rem;
  }
  svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--wow-text);
  }
  .chart-scroll {
    max-width: 100%;
    overflow-x: auto;
    outline-offset: 3px;
  }
  .chart-scroll:focus-visible {
    outline: 2px solid var(--wow-text);
  }
  .chart-scroll svg {
    min-width: 320px;
  }
  text {
    fill: currentColor;
    font: 16px monospace;
  }
  path {
    fill: none;
  }
  .geometry-axis {
    stroke: currentColor;
    stroke-width: 1;
  }
  .geometry-grid {
    stroke: currentColor;
    opacity: 0.12;
  }
  .geometry-value {
    stroke: var(--wow-link);
    stroke-width: 3.5;
    stroke-linejoin: round;
  }
  .geometry-branch {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-dasharray: 5 5;
    opacity: 0.5;
  }
  .geometry-guide {
    stroke: currentColor;
    stroke-dasharray: 3 4;
    opacity: 0.4;
  }
  .geometry-dot {
    fill: var(--wow-text);
    stroke: var(--wow-back-alt);
    stroke-width: 2;
  }
  @container pikurn-geometry (min-width: 49.5rem) {
    figcaption {
      min-height: 3.3em;
    }
    .pikurn-geometry {
      grid-template-columns: repeat(2, minmax(24rem, 25rem));
    }
  }
</style>