/* Poohsticks. The river is drawn on a canvas in ink and wash; everything else uses site tokens. */
.ps-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1rem, 4vw, 3rem); align-items: center; }
.ps-intro-copy { display: grid; gap: 0.8rem; min-width: 0; }
.ps-intro-copy > p:not(.label):not(.small) { font-style: italic; }
.ps-intro-art { width: clamp(120px, 18vw, 210px); background: var(--plate); border-radius: 50% 50% 46% 54% / 52% 48% 52% 48%; padding: 1.2rem; box-sizing: content-box; }
@media (max-width: 640px) { .ps-intro { grid-template-columns: 1fr; } .ps-intro-art { display: none; } }

.ps-game { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(1.2rem, 4vw, 2.5rem); align-items: start; padding-block: 0.5rem 3.5rem; }
@media (max-width: 860px) { .ps-game { grid-template-columns: 1fr; } }
.ps-board { display: grid; gap: 0.6rem; min-width: 0; }
#river {
  width: 100%; max-width: 620px; height: auto; aspect-ratio: 600 / 720; margin-inline: auto; display: block;
  border-radius: 8px; background: #f3ead0; touch-action: manipulation; cursor: crosshair;
  box-shadow: 0 0 0 1px var(--rule), 0 24px 50px -30px rgba(40, 25, 0, 0.6);
}
@media (max-width: 860px) { #river { max-height: 70vh; width: auto; max-width: 100%; } }
.ps-caption { text-align: center; font: italic 1.08rem/1.4 var(--f-display); min-height: 2.8em; color: var(--ink); text-wrap: balance; }

.ps-side { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.ps-friends label { display: inline-flex; align-items: center; gap: 0.35rem; }
.ps-friends .dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
.ps-friends input:disabled + label { opacity: 0.45; cursor: not-allowed; }
.ps-score { font: 400 1.05rem/1.5 var(--f-body); }
.ps-score b { font: 600 1.35rem/1 var(--f-body); color: var(--honey); font-variant-numeric: lining-nums tabular-nums; }
.ps-results { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; counter-reset: place; }
.ps-results li { display: grid; grid-template-columns: 1.8rem 0.8rem minmax(0, 1fr); gap: 0.5rem; align-items: center; padding: 0.45rem 0.6rem; border-radius: 6px; background: var(--paper-2); font-size: 0.98rem; }
.ps-results li::before { counter-increment: place; content: counter(place); font: 600 1rem var(--f-body); font-variant-numeric: lining-nums; color: var(--ink-soft); text-align: center; }
.ps-results li.you { box-shadow: inset 0 0 0 1.5px var(--honey); }
.ps-results li.first::before { content: "1st"; color: var(--honey); font-size: 1rem; }
.ps-results .dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }

.ps-book { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.ps-book .prose p:first-child::first-letter { float: none; font: inherit; color: inherit; padding: 0; }
.ps-book .prose p:first-child { font: italic var(--step-1)/1.45 var(--f-display); }
.ps-book img { background: var(--plate); border-radius: 6px; padding: 1rem; width: 100%; }
@media (max-width: 760px) { .ps-book { grid-template-columns: 1fr; } }