/* ---- Rock Paper Scissors board ---------------------------------------------
   Shared by the post "There are loopholes in the method" and by the landing
   page band. Ported from html_for_viewing/rps_solution.html, the same way the
   segment tree figure was ported into the round B post: every rule is scoped
   under .rps-widget, because the original was a standalone page whose bare
   class names (.cell, .bar, .track, .fill, .stat, .hint, .pick, .sel) would
   collide with the page chrome, and .markdown-body's own p / ul / li rules
   would reach back in.

   Two token systems have to reach this file. Post pages load post.css, which
   defines --surface / --border / --text / --amber and friends; the landing page
   loads design-system.css, which defines the --ds-* family and none of those.
   So every colour goes through a local alias that prefers the post token and
   falls back to the design-system one. Neither stylesheet defines the bare
   names, so on the landing page the fallback is what resolves, and on a post it
   is the first argument. Nothing downstream needs to know which page it is on.

   The three move colours stay as they are: R/P/S is categorical data and three
   separable hues are the encoding, not decoration. They are deliberately not
   the amber accent, which would rank Scissors above the other two. Letters are
   the page's near-black for the same reason.
   --------------------------------------------------------------------------- */
.rps-widget{
  /* post tokens first, design-system tokens as the fallback */
  --rps-ground:var(--bg,var(--ds-surface));
  --rps-surface:var(--surface,var(--ds-surface-elevated));
  --rps-border:var(--border,var(--ds-border));
  --rps-border-firm:var(--border-firm,var(--ds-border-light));
  --rps-text:var(--text,var(--ds-text-primary));
  --rps-text2:var(--text2,var(--ds-text-secondary));
  --rps-text3:var(--text3,var(--ds-text-tertiary));
  --rps-accent:var(--amber,var(--ds-accent));
  --rps-sans:var(--sans,var(--font-body));
  --rps-mono:var(--mono,var(--font-mono));

  --rps-r:#d4737f;
  --rps-p:#5aa8b8;
  --rps-s:#b08a3e;
  margin:2em 0;padding:1.2rem 1.25rem 1.05rem;
  background:var(--rps-surface);border:1px solid var(--rps-border-firm);border-radius:0;
  font-family:var(--rps-sans);font-size:.92rem;line-height:1.5;color:var(--rps-text);
}
.rps-head{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;align-items:baseline;justify-content:space-between;margin-bottom:1.1rem;}
.rps-picks{display:flex;flex-wrap:wrap;gap:.4rem;}
.rps-pick{
  font-family:var(--rps-mono);font-size:.78rem;color:var(--rps-text2);
  background:none;border:1px solid var(--rps-border-firm);border-radius:0;
  padding:.22rem .7rem;margin:0;cursor:pointer;
  transition:color .12s,border-color .12s,background-color .12s;
}
.rps-pick:hover{color:var(--rps-text);border-color:var(--rps-text3);}
.rps-pick:focus-visible{outline:2px solid var(--rps-accent);outline-offset:2px;}
.rps-pick[aria-pressed="true"]{color:var(--rps-ground);background:var(--rps-accent);border-color:var(--rps-accent);}
.rps-hint{font-size:.8rem;color:var(--rps-text3);margin:0;}
.rps-strip{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:10px 2px;}
.rps-rnd{display:flex;flex-direction:column;min-width:0;}
.rps-cell{
  height:26px;border:0;border-radius:0;padding:0;margin:0;cursor:pointer;
  font-family:var(--rps-mono);font-size:11px;font-weight:700;line-height:26px;
  color:var(--rps-ground);transition:transform .1s;
}
.rps-cell:active{transform:scale(.92);}
.rps-cell[data-m="R"]{background:var(--rps-r);}
.rps-cell[data-m="P"]{background:var(--rps-p);}
.rps-cell[data-m="S"]{background:var(--rps-s);}
.rps-cell.sel{outline:2px solid var(--rps-text);outline-offset:1px;}
.rps-cell:focus-visible{outline:2px solid var(--rps-text);outline-offset:2px;}
.rps-slot{height:50px;display:flex;align-items:flex-end;margin-top:4px;}
.rps-bar{
  display:block;width:100%;min-height:2px;opacity:.8;
  transition:height .28s cubic-bezier(.2,.7,.3,1);
}
.rps-bar[data-m="R"]{background:var(--rps-r);}
.rps-bar[data-m="P"]{background:var(--rps-p);}
.rps-bar[data-m="S"]{background:var(--rps-s);}
.rps-rnd.sel .rps-bar{opacity:1;}
.rps-readout{
  display:flex;flex-wrap:wrap;gap:.9rem 2rem;align-items:flex-end;justify-content:space-between;
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--rps-border);
}
.rps-stat{display:flex;flex-direction:column;gap:2px;}
.rps-stat .k{font-size:.74rem;color:var(--rps-text3);}
.rps-stat .v{font-family:var(--rps-mono);font-size:1.2rem;font-weight:700;line-height:1.25;color:var(--rps-text);}
.rps-stat .v small{font-size:.68em;font-weight:400;color:var(--rps-text3);}
.rps-odds{display:flex;gap:1rem;flex-wrap:wrap;}
.rps-odd{display:flex;flex-direction:column;gap:3px;min-width:64px;}
.rps-odd .k{font-family:var(--rps-mono);font-size:.72rem;color:var(--rps-text3);}
.rps-odd .track{height:6px;background:var(--rps-border);}
.rps-odd .fill{display:block;height:100%;width:0;transition:width .28s cubic-bezier(.2,.7,.3,1);}
.rps-odd .fill[data-m="R"]{background:var(--rps-r);}
.rps-odd .fill[data-m="P"]{background:var(--rps-p);}
.rps-odd .fill[data-m="S"]{background:var(--rps-s);}
.rps-odd .n{font-family:var(--rps-mono);font-size:.72rem;color:var(--rps-text3);}
.rps-widget figcaption{font-size:.82rem;color:var(--rps-text3);margin-top:.95rem;line-height:1.6;}
@media (max-width:620px){.rps-strip{grid-template-columns:repeat(20,minmax(0,1fr));}}
@media (max-width:440px){
  .rps-strip{grid-template-columns:repeat(15,minmax(0,1fr));}
  .rps-slot{height:38px;}
  .rps-cell{height:24px;line-height:24px;font-size:10px;}
}
@media (prefers-reduced-motion:reduce){.rps-widget *{transition:none!important;}}