/* What Comes Next? (patterns) game: assets/play/patterns.js */
.pt-loading { text-align: center; color: var(--navy); padding: 40px 0; }
.pt-stage { padding: 16px 2px 12px; min-height: 120px; display: flex; align-items: center; justify-content: center; overflow-x: clip; }
.pt-row { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 92px)); gap: clamp(3px, 1vw, 8px); justify-content: center;
  align-items: end; width: 100%; }
.pt-cell, .pt-engine, .pt-head { min-width: 0; }
.pt-cell { position: relative; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 3px var(--line); padding: 7%;
  animation: pt-in .35s ease-out both; transition: transform .2s, box-shadow .2s, background-color .3s; }
.pt-pic { aspect-ratio: 1; min-width: 0; overflow: hidden; }
.pt-pic svg { display: block; width: 100%; height: 100%; }
.pt-q { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 3px dashed var(--blue);
  background: var(--soft); color: var(--blue); font: 800 clamp(1.3rem, 5vw, 2.6rem)/1 var(--display); animation: pt-pulse 1.1s ease-in-out infinite; }
.pt-cell.pt-blank { background: transparent; box-shadow: none; padding: 0; }
.pt-cell.pt-filled { background: #e6f7ee; box-shadow: inset 0 0 0 3px var(--green); padding: 7%; }
.pt-cell.pt-lit { transform: translateY(-6px) scale(1.12); box-shadow: inset 0 0 0 3px var(--yellow), 0 0 0 4px var(--yellow); z-index: 2; }
.pt-cell.pt-blank.pt-lit .pt-q { border-color: var(--red); color: var(--red); }
.pt-cell.pt-u0 { background-color: #fff3cc; }
.pt-cell.pt-u1 { background-color: #dcecff; }
.pt-stage.pt-out .pt-row { animation: pt-leave .42s ease-in forwards; }
@keyframes pt-in { 0% { opacity: 0; transform: translateY(14px) scale(.85); } 100% { opacity: 1; transform: none; } }
@keyframes pt-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(18, 161, 220, .35); } 50% { transform: scale(1.05); box-shadow: 0 0 0 7px rgba(18, 161, 220, 0); } }
@keyframes pt-leave { 100% { opacity: 0; transform: translateX(-40px); } }
@keyframes pt-drive { 0% { transform: translateX(110vw); } 75% { transform: translateX(-8px); } 100% { transform: none; } }
@keyframes pt-trainout { 100% { transform: translateX(-110vw); } }
@keyframes pt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* train: an engine pulls the cars in from the right; every picture rides on a car */
.pt-train .pt-row { animation: pt-drive 1.1s cubic-bezier(.2, .7, .3, 1) both; padding-bottom: 10px;
  background: linear-gradient(#8d6e63, #8d6e63) left bottom / 100% 5px no-repeat; grid-template-columns: repeat(var(--n, 8), minmax(0, 86px)); }
.pt-train .pt-cell { background: transparent; box-shadow: none; padding: 0; animation: none; display: flex; flex-direction: column; }
.pt-train .pt-cell .pt-pic { padding: 6%; }
.pt-train .pt-cell.pt-filled { background: transparent; box-shadow: none; padding: 0; }
.pt-train .pt-cell.pt-filled .pt-pic { border-radius: 12px; background: #e6f7ee; box-shadow: inset 0 0 0 3px var(--green); }
.pt-train .pt-cell.pt-lit { box-shadow: none; }
.pt-train .pt-cell.pt-lit .pt-pic { border-radius: 12px; box-shadow: 0 0 0 4px var(--yellow); background: #fffbe6; }
.pt-train .pt-cell.pt-u0, .pt-train .pt-cell.pt-u1 { background: transparent; }
.pt-train .pt-cell.pt-u0 .pt-pic { border-radius: 12px; background: #fff3cc; }
.pt-train .pt-cell.pt-u1 .pt-pic { border-radius: 12px; background: #dcecff; }
.pt-car { display: block; position: relative; height: clamp(10px, 2.6vw, 20px); margin: 3px 2px 9px; border: 2px solid #222; border-radius: 4px; }
.pt-car::before, .pt-car::after { content: ""; position: absolute; bottom: -9px; width: clamp(9px, 2.2vw, 16px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #bdbdbd 0 25%, #424242 30%); border: 2px solid #222; }
.pt-car::before { left: 12%; } .pt-car::after { right: 12%; }
.pt-car.pt-c0 { background: var(--red); } .pt-car.pt-c1 { background: var(--blue); } .pt-car.pt-c2 { background: var(--green); } .pt-car.pt-c3 { background: var(--yellow); }
.pt-engine { align-self: end; margin-bottom: -2px; }
.pt-engine svg { display: block; width: 100%; height: auto; transform: scaleX(1); }
.pt-stage.pt-out.pt-train .pt-row { animation: pt-trainout .5s ease-in forwards; }

/* caterpillar: body balls overlap a little behind a smiling head */
.pt-caterpillar .pt-row { gap: 0; grid-template-columns: repeat(var(--n, 8), minmax(0, 76px)); align-items: center; }
.pt-caterpillar .pt-cell, .pt-caterpillar .pt-cell.pt-filled { background: transparent; box-shadow: none; padding: 0; margin-left: -12%; border-radius: 50%; }
.pt-caterpillar .pt-cell:nth-child(odd) { margin-top: 10%; }
.pt-caterpillar .pt-cell.pt-lit { box-shadow: 0 0 0 4px var(--yellow); }
.pt-caterpillar .pt-cell.pt-u0, .pt-caterpillar .pt-cell.pt-u1 { background: transparent; }
.pt-caterpillar .pt-cell.pt-u0 { box-shadow: 0 6px 0 -1px #ffd23f; }
.pt-caterpillar .pt-cell.pt-u1 { box-shadow: 0 6px 0 -1px var(--blue); }
.pt-caterpillar .pt-q { border-radius: 50%; }
.pt-head { position: relative; z-index: 1; }
.pt-head svg { display: block; width: 125%; height: auto; margin-top: -40%; }

/* beads on a string */
.pt-beads .pt-row { background: linear-gradient(#8d6e63, #8d6e63) left center / 100% 4px no-repeat; align-items: center; }
.pt-beads .pt-cell { background: transparent; box-shadow: none; padding: 10%; }
.pt-beads .pt-cell.pt-filled { background: rgba(34, 181, 115, .15); box-shadow: none; border-radius: 50%; }
.pt-beads .pt-q { border-radius: 50%; }

/* the three answer pictures */
.pt-choices { display: flex; gap: clamp(10px, 3vw, 22px); justify-content: center; flex-wrap: wrap; margin: 8px 0 6px; }
.pt-choices.pt-in .pt-choice { animation: pt-in .35s ease-out both; }
.pt-choices.pt-in .pt-choice:nth-child(2) { animation-delay: .08s; }
.pt-choices.pt-in .pt-choice:nth-child(3) { animation-delay: .16s; }
.pt-choice { width: clamp(88px, 25vw, 132px); aspect-ratio: 1; border: 0; border-radius: 24px; cursor: pointer; padding: 12px; background: #fff;
  box-shadow: 0 6px 0 #c9d3e2, inset 0 0 0 3px #d4dce8; transition: transform .12s, background-color .2s; }
.pt-choice:active { transform: translateY(3px); }
.pt-choice:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
@media (hover: hover) { .pt-choice:not(:disabled):hover { box-shadow: 0 6px 0 #c9d3e2, inset 0 0 0 3px var(--blue); } }
.pt-choice:disabled { cursor: default; }
.pt-choice.pt-right { background: #e6f7ee; box-shadow: 0 6px 0 #168a56, inset 0 0 0 4px var(--green); }
.pt-choice.pt-wrong { background: #ffe1de; opacity: .55; }
.pt-choice.pt-hint { animation: pt-bob 1s ease-in-out infinite; box-shadow: 0 6px 0 #c9d3e2, inset 0 0 0 5px var(--green); }
.pt-stage.pt-lines .pt-cell { padding: 9%; }
@media (max-width: 600px) { .pt-stage { padding: 10px 0 8px; } .pt-cell { border-radius: 9px; } .pt-q { border-width: 2px; border-radius: 8px; } }
@media (prefers-reduced-motion: reduce) { .pt-row, .pt-cell, .pt-q, .pt-choice { animation: none !important; } }