/* Play library, play pages, age + format hubs. Loaded via layout({ css: ["plays"] }). Tokens come from site.css. */

/* ranked "start with these" list */
.start-block { margin: 28px 0 8px; padding: 18px 20px 8px; background: var(--band); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--ink); }
.start-block h2 { margin: 2px 0 10px; }
.start-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px 22px; }
main .start-list li { margin: 0 0 10px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; }
.start-thumb { display: block; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--card); }
.start-thumb:hover { border-color: var(--orange); }
.start-rank { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); border: 2px solid var(--ink); font-family: var(--display); font-size: .9rem; color: var(--ink); }
.start-name { font-family: var(--display); font-weight: 400; font-size: 1.12rem; color: var(--ink); text-decoration: none; }
.start-name:hover { color: var(--orange); }
.start-list p { margin: 4px 0 0; font-size: .95rem; line-height: 1.5; }

/* jump chips (type filter on /plays/, on-this-page on long play pages, concepts on format hubs) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 10px; }
.chip { display: inline-block; font-weight: 800; font-size: .92rem; padding: 4px 14px; border-radius: 999px; border: 3px solid var(--ink); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: 0 3px 0 var(--ink); }
.chip:hover { background: var(--band); color: var(--ink); }
.chip-pass { background: #d6e7fb; } .chip-run { background: #ffe9ad; } .chip-trick { background: #ffd3df; }
h2 .count { font-family: var(--body); font-size: .6em; }
[id] { scroll-margin-top: 16px; }

/* age hubs: card + why-it-works line */
.age-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.age-play { display: flex; flex-direction: column; gap: 10px; }
.age-play .why { margin: 0 4px; font-size: .92rem; line-height: 1.5; }
.age-play .why strong { display: block; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.rules-note { background: #fff1b8; }
.rules-note h2 { font-size: 1.3rem; }

/* variants on play pages + concepts on format hubs: diagram beside text */
.variant, .concept, .play-section, .faq { margin-top: 30px; }
.variant-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 22px; align-items: start; }
.variant-layout h3 { margin: 4px 0 6px; font-size: 1.1rem; }
.variant-meta { margin: 0 0 6px; }
@media (max-width: 760px) { .variant-layout { grid-template-columns: 1fr; } main .start-list li { grid-template-columns: 92px minmax(0, 1fr); } }
.concept h2 .muted { font-family: var(--body); font-size: .55em; font-weight: 800; }
.faq h3 { font-family: var(--body); font-weight: 900; font-size: 1.05rem; margin: 18px 0 4px; }
.faq p { margin: 0 0 8px; }
.format-note { background: var(--card); border-left: 6px solid var(--sky); padding: 10px 16px; border-radius: 0 14px 14px 0; }