/* Copyright by Emilio Orione September 2026 */
/*
 * guide.css — geometry for the shared "Online rules" page, on top of
 * _shared/base.css. Layout and shape only: every colour comes from the --gc-*
 * theme variables, so the page follows the app's day/night appearance without
 * knowing anything about it.
 *
 * The figures here are deliberately SCHEMATIC — seats, coins, a pool, a
 * bracket. They explain an arrangement of money and time, not a table of
 * cards, so there is nothing to photograph and no card face to get wrong.
 */

/* A row of things, centred and wrapping — the base of most figures here. */
.ol-table,
.ol-make,
.ol-wait,
.ol-flow,
.ol-agree,
.ol-away,
.ol-threshold,
.ol-forfeit,
.ol-parity {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(8px, 3vw, 18px);
  width: 100%;
  min-height: 92px;
}

/* A seat: a filled disc when somebody holds it, an outline when it is open. */
.ol-seat {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gc-accent);
  border: 2px solid var(--gc-accent);
  flex: none;
}
.ol-seat.ol-empty { background: transparent; border-style: dashed; opacity: .6; }
.ol-seat.ol-held { background: var(--gc-glass); }
.ol-seat.ol-gone { background: transparent; border-color: var(--gc-error); opacity: .5; }

/* A seat held by a person carries a small head, so "people not devices" reads
   at a glance without a caption. */
.ol-seat.ol-person { position: relative; }
.ol-seat.ol-person::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--gc-bg);
}

/* The felt in the middle of a table. */
.ol-felt {
  width: clamp(60px, 22vw, 110px);
  height: 44px;
  border-radius: var(--gc-radius);
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}

/* A join code: six dots, monospaced, clearly a placeholder and not a real one. */
.ol-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .3em;
  padding: 6px 12px;
  border-radius: var(--gc-radius-sm);
  border: 1px dashed var(--gc-border);
  color: var(--gc-text);
  opacity: .8;
}

/* A coin, a hold and a pool: the three states an entry passes through. */
.ol-coin,
.ol-hold,
.ol-pool {
  border-radius: 50%;
  flex: none;
  border: 2px solid var(--gc-accent);
}
.ol-coin { width: 26px; height: 26px; background: var(--gc-accent); }
.ol-hold { width: 30px; height: 30px; background: transparent; border-style: dashed; }
.ol-pool {
  width: 52px;
  height: 52px;
  background: var(--gc-accent);
  opacity: .85;
}
.ol-arrow { opacity: .55; font-size: 1.2em; }

/* A device that has agreed: the mark it agreed on sits inside it. */
.ol-device {
  width: 40px;
  height: 54px;
  border-radius: var(--gc-radius-sm);
  border: 2px solid var(--gc-accent);
  background: var(--gc-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--gc-accent);
  flex: none;
}

/* The waiting clock, and the returning arrow. */
.ol-clock {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px dashed var(--gc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  opacity: .75;
  flex: none;
}
.ol-return { font-size: 1.6em; color: var(--gc-success); }

/* The house, where a forfeited entry goes. Never another player. */
.ol-house {
  padding: 6px 12px;
  border-radius: var(--gc-radius-sm);
  border: 1px solid var(--gc-border);
  background: var(--gc-bg-2);
  font-size: .82em;
  opacity: .85;
}

/* The threshold line: before it there is no contest to abandon. */
.ol-line {
  width: 2px;
  height: 46px;
  background: var(--gc-border);
  flex: none;
}

/* The stake ladder: four rungs, each taller than the last. */
.ol-ladder {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 4vw, 20px);
  width: 100%;
  min-height: 96px;
}
.ol-rung {
  width: 30px;
  border-radius: var(--gc-radius-sm) var(--gc-radius-sm) 0 0;
  background: var(--gc-accent);
  opacity: .55;
}
.ol-rung:nth-child(1) { height: 30px; }
.ol-rung:nth-child(2) { height: 48px; opacity: .7; }
.ol-rung:nth-child(3) { height: 66px; opacity: .85; }
.ol-rung:nth-child(4) { height: 84px; opacity: 1; }

/* The bracket: two rounds narrowing to one. */
.ol-bracket {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(100%, 320px);
  margin-inline: auto;
}
.ol-slot {
  height: 22px;
  border-radius: var(--gc-radius-sm);
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
.ol-slot.ol-r2 { grid-column: span 2; }
.ol-slot.ol-r3 { grid-column: span 4; background: var(--gc-accent); opacity: .85; }
.ol-slot.ol-gone { border-color: var(--gc-error); opacity: .45; }

/* The parity rate, stated once as a plate rather than inside a sentence. */
.ol-rate {
  padding: 8px 14px;
  border-radius: var(--gc-radius-sm);
  border: 1px solid var(--gc-accent);
  background: var(--gc-glass);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Every coin in the parity figure is identical on purpose — that IS the point,
   so none of them may differ in size or opacity. */
.ol-parity .ol-coin { opacity: 1; }

/* A real illustration filling the figure slot: the five online_* pictures and
   the existing Arena art, resolved by data-piece. Rounded like every other
   figure, never wider than the column. */
.ol-photo {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin-inline: auto;
  border-radius: var(--gc-radius);
}

/* A real phone screenshot in the figure slot: tall, so it is height-capped and
   letterboxed rather than allowed to run the length of the page. */
.ol-shot {
  display: block;
  max-height: 460px;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--gc-radius);
  border: 1px solid var(--gc-border);
}