/* How to Play: boxes on a sideways track, the dots and buttons under them, and the small boards. */

#how-to-play-dialog { --card-width: min(82vw, 420px); width: 100%; max-width: 100%; max-height: 100dvh; padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }

/* the track and the buttons under it are only as wide as a box plus a sliver of its neighbors, centered, so on a wide screen too just
   the edges of the previous and next boxes show */
.how-track {
  box-sizing: border-box; width: min(100%, calc(var(--card-width) + 112px)); margin: 0 auto; display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 56px min(56px, calc((100% - var(--card-width)) / 2)) 14px;   /* the % is of the stage, so the sliver is at most 56px, and on a phone whatever room is left */
  /* the slivers of the previous and next boxes fade out toward the sides instead of being cut off (the fade is as wide as the sliver,
     so the middle box is untouched) */
  --fade: min(30px, calc((100% - var(--card-width)) / 2));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.how-track::-webkit-scrollbar { display: none; }

.how-card {
  --card-color: var(--panel-background);
  flex: 0 0 var(--card-width); scroll-snap-align: center; scroll-snap-stop: always; position: relative; box-sizing: border-box; display: flex; flex-direction: column;
  padding: 40px 18px 18px; border-radius: 14px; background: var(--card-color); color: var(--text-color);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.25);
  /* A box is never taller than the window leaves room for (the track's padding, the dots and the buttons are the 180px). The part under
     the title scrolls if the content is longer (no scroll bar drawn). */
  max-height: calc(100dvh - 180px);
}
.how-card[data-player="1"] { --card-color: var(--player-1-color); }
.how-card[data-player="2"] { --card-color: var(--player-2-color); }
.how-card[data-player="3"] { --card-color: var(--player-3-color); }
.how-card.colored { color: #fff; }
.how-card.colored .card-words svg { --player-1-color: #fff; --player-2-color: #fff; --player-3-color: #fff; }   /* white symbols in the text of a colored box */

/* the title hangs over the top edge like the other modals', outlined in the box's color; it can wrap to two lines */
.how-card h2 {
  font-size: 44px; line-height: 1.05; white-space: normal; width: max-content; max-width: calc(100% - 16px); text-align: center;
  color: var(--text-color); -webkit-text-stroke: 10px var(--card-color);
}
@media (max-width: 959.9px) { .how-card h2 { font-size: 40px; } }   /* when the page is one column */
.how-card.colored h2 { color: #fff; }
.how-card h2::before { background: var(--card-color); }
.how-card h2 .symbol { width: 1.05em; height: 1.05em; vertical-align: -0.12em; margin: 0 1px; overflow: visible; stroke: var(--card-color); stroke-width: 760px; stroke-linejoin: round; paint-order: stroke fill; }

.how-card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; display: flex; flex-direction: column; }
.how-card-body::-webkit-scrollbar { display: none; }

/* the words are mixed case (the display font is made for capitals, but a paragraph is easier to read this way) */
.card-text, .card-text *, .card-caption, .card-caption * { font-feature-settings: normal; }
.card-text, .card-text * { text-transform: none; line-height: 1.28; }
.card-text { font-size: 20px; font-weight: 700; text-align: center; }
.card-text p { text-wrap: balance; margin: 0 0 10px; }
.card-text .points-row, .card-text .power-row { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.card-text .power-row { justify-content: center; }
.power-row .symbol { width: 28px; height: 28px; }
.card-text .symbol, .card-caption .symbol { width: 1.3em; height: 1.3em; vertical-align: -0.3em; }
.no-wrap { white-space: nowrap; }
/* the three symbols as the logo, with the space between them the header logo's picture has (about 18% of a symbol's width) */
.symbol-logo { display: inline-flex; gap: 0.23em; vertical-align: -0.3em; }
.symbol-logo .symbol { vertical-align: baseline; }

/* a sentence with its table under it, in one column */
.sentence-and-table { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 16px; }   /* the room under the box makes up for the leading a paragraph's text has above it, so the gap matches the one between two paragraphs */
.sentence-and-table p { margin: 0; }
.points-table { flex: none; padding: 10px 12px 8px; border: 2px solid rgba(0, 0, 0, 0.25); border-radius: 10px; }
.points-table .points-row { gap: 12px; margin-bottom: 2px; }
.points-table .points-row:last-child { margin-bottom: 0; }
.points-squares { display: flex; gap: 3px; width: 99px; }
.points-squares i { width: 14px; height: 14px; border-radius: 3px; background: var(--text-color); }
@media (max-width: 360px) {   /* on a very narrow phone the table is made smaller to fit the box */
  .points-table { padding: 8px 8px 6px; }
  .points-squares { gap: 2px; width: 76px; } .points-squares i { width: 11px; height: 11px; border-radius: 2px; }
}

.how-card .how-play-button { align-self: center; margin-top: 30px; padding: 14px 30px; font-size: 22px; background: #161618; border-color: #161618; color: #fff; }
.how-card .how-play-button:hover, .how-card .how-play-button:focus-visible { background: #000; }
.card-caption { min-height: 2.6em; margin-top: 8px; text-align: center; font-size: 15px; font-weight: 700; text-transform: none; }
.card-caption, .card-caption * { text-transform: none; line-height: 1.25; }

/* ---- the small boards: the real board's squares, pieces, lines and walls, as a picture (it steps through a few positions) ---- */
.mini-board {
  --page-background: #161618; --panel-background: #202024; --text-color: #eeeeee; --muted-text-color: #9a9aa2; --line-color: #37373d;
  color-scheme: dark; color: var(--text-color);
  width: min(100%, 240px); margin: 16px auto 0; padding: 10px; border-radius: 12px; background: var(--page-background); box-sizing: border-box;
}
.mini-board .square { pointer-events: none; cursor: default; }
/* a cropped board shows only its top --visible-rows rows: the clip is that many squares and gaps tall (and half a gap more, like the
   board's own padding), with room around it for what overhangs */
.mini-board.cropped { container-type: inline-size; padding-bottom: 5px; }
.mini-board.cropped .mini-board-clip {
  overflow: hidden; box-sizing: content-box; padding: 12px 12px 0; margin: -12px -12px 0;
  height: calc(var(--visible-rows) * (100cqw - 50px) / 6 + (var(--visible-rows) - 1) * 10px + 5px);
}
/* the "not allowed" X: as big as the square, white, flashing off and on twice as it appears, then staying */
.mini-board .not-allowed {
  position: absolute; left: -45%; top: -45%; width: 190%; height: 190%; z-index: 3; pointer-events: none; overflow: visible; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7));
  fill: none; stroke: #fff; stroke-width: 13; stroke-linecap: round; animation: not-allowed-flash 1s ease-out both;
}
@keyframes not-allowed-flash { 0%, 30%, 55% { opacity: 0; } 15%, 42%, 70%, 100% { opacity: 1; } }

/* the small boards (these and the replay) have squares about half the size of the real board's, so they get about half the corner, and
   the ✓ slab's clip and the last-move dashes follow it */
.replay-board .square, .mini-board .square { border-radius: 6px; }
.replay-board .square .check-slab-clip, .mini-board .square .check-slab-clip { border-radius: 6px; }
.replay-board .square.bonus-square .check-slab-clip, .mini-board .square.bonus-square .check-slab-clip { border-radius: 3px; }
.replay-board .square.latest::before, .replay-board .square.latest::after, .mini-board .square.latest::before, .mini-board .square.latest::after { border-radius: 3px; }
.mini-board .square.latest::before, .mini-board .square.latest::after { inset: 1px; }   /* the tutorial boards' dashes sit out near the square's edge, not up against the piece */

/* ---- under the boxes: the dots on one row, then Back, Close and Next on another ---- */
.how-nav {
  position: relative; isolation: isolate;
  width: min(100%, calc(var(--card-width) + 112px)); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; row-gap: 4px;
  padding: 0 calc(min(56px, (100% - var(--card-width)) / 2) + 14px); box-sizing: border-box;
}
/* the dots and buttons sit on a dark rounded dock as wide as the middle box and shaped like it, so they read as part of the carousel and
   the game behind doesn't compete */
.how-nav::before {
  content: ""; position: absolute; z-index: -1; left: 50%; width: var(--card-width); transform: translateX(-50%); top: -4px; bottom: -10px; pointer-events: none;
  border-radius: 14px; background: rgba(18, 18, 20, 0.94); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.25);
}
.how-nav .button { min-width: 84px; background: #fff; border-color: #fff; color: #1d1d1f; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45); }
.how-back { justify-self: start; grid-row: 2; grid-column: 1; }
.how-next { justify-self: end; grid-row: 2; grid-column: 3; }
.how-nav .button[disabled] { opacity: 0.35; }
.how-dots { grid-row: 1; grid-column: 1 / 4; justify-self: center; position: relative; display: flex; align-items: center; }
.how-dot { width: 24px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.how-dot span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
.how-dot[data-player="1"] span { background: var(--player-1-color); }   /* the X, O and ✓ boxes' dots are their colors */
.how-dot[data-player="2"] span { background: var(--player-2-color); }
.how-dot[data-player="3"] span { background: var(--player-3-color); }
.how-pill { position: absolute; left: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: #fff; pointer-events: none; transition: background-color 0.25s ease; }
.how-pill[data-player="1"] { background: var(--player-1-color); }   /* over a colored box's dot it turns that color */
.how-pill[data-player="2"] { background: var(--player-2-color); }
.how-pill[data-player="3"] { background: var(--player-3-color); }
.how-close {
  grid-row: 2; grid-column: 2; padding: 6px 10px; border: 0; background: none; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7);
  font-size: 14px; text-decoration: underline; cursor: pointer;
}

@media (prefers-reduced-motion: reduce) { .mini-board .not-allowed { animation: none; } }