/* The public board: top five, the "where do I sit" card, and the hand feed.
   Self-contained under #board, so the section can be dropped into any page
   that also loads site.css. */

#board { display: grid; gap: 20px; }

/* One column, the width of a phone, until there is room for two. */
.board-cols { display: grid; gap: 20px; max-width: 620px; width: 100%; margin: 0 auto; }
.board-main, .board-you, .board-side, .board-feed { display: grid; gap: 20px; align-content: start; min-width: 0; }
/* On a phone the two columns step aside and the sections keep the reading order. */
.board-col { display: contents; }
.board-main { order: 1; }
.board-you { order: 2; }
.board-side { order: 3; }
.board-feed { order: 4; }
/* Wide screens only: the board and its recent hands on the left; your place
   and the season on the right. */
@media (min-width: 980px) {
  .board-cols { max-width: none; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .board-col { display: grid; gap: 20px; align-content: start; min-width: 0; }
}

/* ---------- board switch ---------- */

.tiers {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
}
/* The two boards are two tiles: the face up is the one you are looking at. */
.tiers button {
  font: inherit;
  border: 1px solid var(--tile-edge);
  background: var(--tile);
  color: var(--ink-2);
  border-radius: 7px 7px 6px 6px;
  box-shadow: 0 3px 0 var(--tile-base);
  padding: 9px 10px 8px;
  cursor: pointer;
  line-height: 1.25;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tiers button b { display: block; font-weight: 500; font-size: 15px; }
.tiers button small { font-size: 12px; color: var(--ink-3); }
.tiers button:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--tile-base); }
.tiers button[aria-selected="true"] {
  background: linear-gradient(var(--felt-edge), var(--felt) 45%);
  border-color: var(--felt-2);
  box-shadow: 0 3px 0 var(--felt-2);
  color: #f3efe2;
}
.tiers button[aria-selected="true"] small { color: var(--felt-ink-2); }

/* ---------- ranked rows (ivory tiles on the felt) ---------- */

.ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rank-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--tile);
  border-radius: 9px;
  padding: 11px 14px 11px 10px;
  box-shadow: 0 2px 0 var(--tile-base);
  color: var(--ink);
}
/* The rank is a small tile with its Chinese numeral, the way a character tile reads. */
.pos {
  display: grid; place-items: center;
  width: 30px; height: 40px;
  background: var(--tile);
  border: 1px solid var(--tile-edge);
  border-radius: 5px 5px 4px 4px;
  box-shadow: 0 2px 0 var(--tile-base);
  font-family: var(--serif);
  font-size: 18px; line-height: 1;
  color: var(--ink-2);
}
.rank-row .pos { box-shadow: 0 2px 0 var(--tile-base), 0 0 0 1px rgb(62 38 20 / 0.05); }
.rank-row:nth-child(1) .pos { color: var(--cinnabar); font-size: 20px; }
.rank-row:nth-child(2) .pos, .rank-row:nth-child(3) .pos { color: var(--bamboo); }
.rank-row .who { min-width: 0; }
.rank-row .name {
  font-size: 15.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank-row .meta { font-size: 12.5px; color: var(--ink-3); }
.rank-row .pts {
  font-family: var(--num);
  font-weight: 500;
  font-size: 16.5px;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.rank-row .pts.neg { color: var(--cinnabar); }

/* rank change since the previous meet */
.move { font-size: 11.5px; font-family: var(--sans); margin-left: 6px; white-space: nowrap; }
.move.up { color: var(--bamboo); }
.move.down { color: var(--cinnabar); }

/* ---------- the "where do I sit" card ---------- */

.finder {
  background: var(--paper-2);
  border: 1px solid var(--paper-edge);
  border-radius: 10px;
  box-shadow: 0 2px 0 var(--paper-edge);
  padding: 18px 18px 20px;
}
.finder h3 { margin: 0 0 8px; font-size: 19px; }
.finder p { margin: 0 0 13px; font-size: 14px; color: var(--ink-2); max-width: 46ch; }
.finder-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* The Kahoot-style ladder: who is above you, you, who is below you. */
.ladder { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0; }
.ladder li {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--paper-edge);
  background: var(--paper);
}
.ladder li:first-child { border-radius: 11px 11px 0 0; }
.ladder li:last-child { border-radius: 0 0 11px 11px; }
.ladder li + li { border-top: 0; }
.ladder .pos { justify-self: center; width: 26px; height: 34px; font-size: 15px; }
.ladder .name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ladder .pts { font-family: var(--num); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; font-size: 15px; }

.ladder .you {
  background: var(--felt);
  color: var(--felt-ink);
  border-color: var(--felt);
  padding: 15px 14px;
}
.ladder .you .pos { color: var(--cinnabar); }
.ladder .you .name { color: #fff; font-weight: 500; font-size: 16.5px; }
.ladder .you .pts { color: #fff; font-size: 16px; }
.ladder .you .sub { font-size: 12.5px; color: var(--felt-ink-2); }

/* the gap between two rungs */
.gap {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 0 14px;
  font-size: 12.5px;
  color: var(--ink-3);
  border-inline: 1px solid var(--paper-edge);
  background: var(--paper);
}
.gap span:first-child { text-align: center; color: var(--paper-edge); }
.gap b { font-family: var(--num); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-2); }

.finder-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
.finder-error { margin: 14px 0 0; font-size: 14px; color: var(--cinnabar); }

/* ---------- season strip ---------- */

.season {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--paper-edge);
  border-radius: 12px;
  background: var(--paper-2);
  overflow: hidden;
}
.season div { padding: 13px 14px; }
.season div + div { border-left: 1px solid var(--paper-edge); }
.season dt { font-size: 13px; color: var(--ink-3); }
.season dd { margin: 3px 0 0; font-family: var(--serif); font-size: 21px; line-height: 1.1; }

/* ---------- recent hands: the showcase ---------- */

.showcase .strip-head { margin-bottom: 12px; }
/* Every hand sits in the same cell, so the card is as tall as the tallest and
   nothing below it jumps as they change. */
.slides { display: grid; touch-action: pan-y; }
.slide {
  grid-area: 1 / 1;
  border: 1px solid var(--paper-edge);
  border-radius: 14px;
  background: var(--paper-2);
  padding: 15px 16px 14px;
  visibility: hidden;
  opacity: 0;
}
.slide.is-active, .slide.is-leaving { visibility: visible; opacity: 1; }
.slide-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slide .fan {
  display: inline-block;
  font-family: var(--num); font-weight: 500; font-size: 12.5px;
  color: var(--cinnabar);
  border: 1px solid #e6cbc5; background: #fbf0ed;
  border-radius: 999px; padding: 1px 9px;
}
.slide .when { font-size: 12.5px; color: var(--ink-3); }
.slide-winner { margin-top: 9px; font-family: var(--serif); font-size: 21px; line-height: 1.15; }
.slide-how { margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.slide .hand-row { margin: 12px 0 9px; }
.slide .patterns { margin: 0; font-size: 13px; color: var(--ink-2); }

.showcase-nav { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.slide-btn {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--paper-edge);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: pointer;
}
.slide-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.slide-btn svg { width: 16px; height: 16px; }
.slide-btn path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.dots { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.dot {
  position: relative; overflow: hidden;
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 999px;
  background: var(--paper-edge);
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease;
}
.dot.is-active { width: 26px; background: #cfe2d7; }
/* The current dot fills while its hand is up; the next comes on when it is full. */
.dot.is-active::after {
  content: ""; position: absolute; inset: 0;
  background: var(--bamboo);
  transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .dot.is-active::after { animation: showcase-clock 7s linear both; }
  .showcase:hover .dot.is-active::after,
  .showcase:focus-within .dot.is-active::after,
  .showcase.is-paused .dot.is-active::after { animation-play-state: paused; }
}
@keyframes showcase-clock { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The hand itself, in small tiles: concealed first, then each declared set,
   then the flowers, with a little air between the groups. */
.hand-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 7px;
  margin: 10px 0 2px;
}
.hand-group { display: inline-flex; flex-wrap: wrap; gap: 1.5px; min-width: 0; }
/* A full hand is fourteen tiles or more; at 28 px they overrun a phone. Sized
   so the concealed tiles of an ordinary hand still fit one line at 375 px. */
.hand-row .tile-sm { width: 19.5px; height: 27px; border-radius: 4px 4px 3px 3px; box-shadow: 0 1.5px 0 var(--tile-base); }
.hand-row .tile-sm.win { box-shadow: 0 0 0 1.5px var(--cinnabar), 0 1.5px 0 var(--tile-base); }
@media (min-width: 420px) { .hand-row .tile-sm { width: 23px; height: 31px; } }
@media (min-width: 980px) { .hand-row .tile-sm { width: 24px; height: 33px; } }
.headline .hand-row { margin: 10px 0 6px; }

.headline {
  border: 1px solid var(--gold);
  border-radius: 12px;
  background: #fbf5e7;
  padding: 14px 16px;
}
.headline dt { font-size: 14px; color: var(--gold); }
.headline dd { margin: 4px 0 0; }
.headline .big { font-family: var(--serif); font-size: 19px; }
.headline .patterns { font-size: 13px; color: var(--ink-2); margin-top: 3px; }

/* ---------- section headings on the paper ---------- */

.strip-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 4px 0 -8px;
}
.strip-head h3 { margin: 0; font-size: 17px; }
.strip-head span { font-size: 12.5px; color: var(--ink-3); }

.skeleton {
  border-radius: 9px;
  background: rgb(255 255 255 / 0.12);
  height: 46px;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } }

@media (max-width: 420px) {
  .rank-row { grid-template-columns: 28px 1fr auto; gap: 9px; padding: 10px 11px 10px 7px; }
  .season { grid-template-columns: 1fr 1fr; }
  .season div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--paper-edge); }
}