/* Game pages (games/<id>.html). Builds on library.css. */
.nx-game-hero { background: var(--tint); border-bottom: 2px solid #282858; padding: 40px 0 36px; }
.nx-crumbs { font-size: 14px; color: #4a4a68; margin-bottom: 22px; }
.nx-crumbs a { color: #282858; font-weight: 600; text-decoration: none; }
.nx-crumbs a:hover { text-decoration: underline; }
.nx-game-head { display: flex; gap: 22px; align-items: center; }
.nx-game-icon { width: 96px; height: 96px; border-radius: 26px; flex: none; }
.nx-game-hero h1 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 14px; }
.nx-game-builds { font-size: 18px; line-height: 1.55; color: #282858; margin: 22px 0 0; max-width: 720px; }

.nx-game-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.nx-parent-card { position: relative; background: #fff; border: 2px solid #282858; border-radius: 22px; box-shadow: 8px 8px 0 #282858; padding: 30px 32px 26px; font-size: 17px; line-height: 1.6; color: #1a1a1a; }
.nx-parent-card::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 8px; border-radius: 0 6px 6px 0; background: var(--track); }
.nx-parent-card-head { border-bottom: 1.5px dashed #9a9ab5; padding-bottom: 14px; margin-bottom: 16px; }
.nx-card-kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #4a4a68; }
.nx-parent-card h2 { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; color: #282858; font-size: 30px; margin: 6px 0; }
.nx-card-line { margin: 0; font-size: 15px; color: #4a4a68; }
.nx-parent-card h3 { font: 700 15px Geist, Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #282858; margin: 22px 0 6px; }
.nx-parent-card p { margin: 0 0 10px; }
.nx-parent-card ol, .nx-parent-card ul { margin: 0 0 10px; padding-left: 22px; }
.nx-parent-card li { margin-bottom: 6px; }
.nx-intro { font-size: 18px; color: #282858; }
.nx-rules { background: #fff6d6; border: 1.5px solid #282858; border-radius: 12px; padding: 10px 14px; }
.nx-say { list-style: none; padding-left: 0 !important; }
.nx-say li { background: #f4edff; border-radius: 12px; padding: 8px 12px; font-style: italic; }
.nx-adjust { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.nx-adjust p { background: #f5f5f0; border-radius: 12px; padding: 10px 14px; margin: 0; font-size: 16px; }
.nx-close-q { margin-top: 18px !important; font-size: 18px; color: #282858; }
.nx-sets { list-style: none; padding-left: 0 !important; display: grid; gap: 8px; }
.nx-sets li { display: grid; gap: 2px; border: 1.5px solid #e4e4ee; border-radius: 12px; padding: 10px 14px; }
.nx-sets span { font-size: 15px; color: #4a4a68; }
.nx-num-cards { list-style: none; padding-left: 0 !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nx-num-cards li { position: relative; display: grid; place-items: center; aspect-ratio: 1.4; border: 2px dashed #9a9ab5; border-radius: 14px; margin: 0 !important; }
.nx-num-cards span { font-family: Geist, Inter, system-ui, sans-serif; font-weight: 800; font-size: 26px; letter-spacing: 0.12em; color: #282858; }
.nx-num-cards .is-challenge { background: #fff6d6; }
.nx-tag-cards { list-style: none; padding-left: 0 !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nx-tag-cards li { display: grid; place-items: center; gap: 2px; padding: 14px 8px; border: 2px dashed #9a9ab5; border-radius: 14px 14px 14px 32px; margin: 0 !important; text-align: center; }
.nx-tag-cards small { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4a4a68; }
.nx-tag-cards span { font-family: Geist, Inter, system-ui, sans-serif; font-size: 32px; font-weight: 800; color: #282858; }
.nx-text-cards { list-style: none; padding-left: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; counter-reset: card; }
.nx-text-cards li { position: relative; padding: 14px 16px 14px 46px; border: 2px dashed #9a9ab5; border-radius: 14px; margin: 0 !important; font-size: 16px; line-height: 1.5; counter-increment: card; }
.nx-text-cards li::before { content: counter(card); position: absolute; left: 16px; top: 13px; font-family: Geist, Inter, system-ui, sans-serif; font-weight: 800; color: #282858; } /* plain numerals: the display font's 7 looks like ㄱ */
.nx-text-cards .is-challenge { background: #fff6d6; }
.nx-text-cards em { display: block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #282858; margin-bottom: 4px; }
.nx-figures { list-style: none; padding-left: 0 !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.nx-figures li { display: grid; justify-items: center; gap: 6px; margin: 0 !important; }
.nx-figures svg { width: 100%; max-width: 150px; height: auto; }
.nx-figures span { font-weight: 700; color: #282858; }
.nx-template { margin: 0; border: 1.5px solid #282858; border-radius: 14px; overflow: hidden; }
.nx-template div { display: grid; grid-template-columns: 210px 1fr; min-height: 52px; border-bottom: 1.5px solid #d8d8e4; }
.nx-template div:last-child { border-bottom: 0; }
.nx-template dt { padding: 14px; font-weight: 700; color: #282858; background: #f5f5f0; border-right: 1.5px solid #d8d8e4; }
.nx-template dd { margin: 0; }
.nx-num-cards em { position: absolute; top: 6px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #282858; }
.nx-answers { margin-top: 16px; border-top: 1.5px dashed #9a9ab5; padding-top: 12px; font-size: 15px; }
.nx-answers summary { cursor: pointer; font-weight: 700; color: #282858; }
.nx-answers ol { columns: 2; margin-top: 10px; }
.nx-answers li span { display: inline-block; min-width: 64px; font-weight: 700; }
.nx-card-foot { margin: 22px 0 0 !important; font-size: 13px; color: #4a4a68; text-align: right; }

.nx-game-side { position: sticky; top: 24px; display: grid; gap: 16px; }
.nx-game-side .nx-btn { justify-content: center; text-decoration: none; }
.nx-side-note { margin: -6px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted, #4a4a68); }
.nx-side-box { background: #bfffe6; border: 2px solid #282858; border-radius: 18px; padding: 20px; }
.nx-side-box h2 { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; color: #282858; font-size: 20px; margin: 0 0 8px; }
.nx-side-box p { font-size: 15px; line-height: 1.55; margin: 0 0 14px; color: #282858; }
.nx-side-link { color: #282858; font-weight: 600; text-decoration: none; }
.nx-side-link:hover { text-decoration: underline; }
/* Games that practise a chapter of our book, Steady */
.nx-book-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; background: #fffbea; border: 1.5px solid #282858; border-radius: 12px; font-size: 15px; line-height: 1.5; color: #282858; }
.nx-book-note svg { flex: none; margin-top: 2px; }
.nx-book-note em { font-style: normal; font-weight: 700; }
.nx-book-note a { color: #282858; font-weight: 700; }
/* A locked game's preview (members only, or free after the assessment): a hint of the card, then how to open it */
.nx-ghost { display: grid; gap: 10px; margin: 18px 0 4px; -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent); mask-image: linear-gradient(180deg, #000 20%, transparent); }
.nx-ghost span { height: 12px; border-radius: 6px; background: #e6e6ef; }
.nx-ghost span:nth-child(2) { width: 86%; }
.nx-ghost span:nth-child(3) { width: 93%; }
.nx-ghost span:nth-child(4) { width: 62%; }
.nx-lock { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 18px 18px 16px; background: #fff6d6; border: 2px solid #282858; border-radius: 16px; }
.nx-lock-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #282858; color: #fedb71; }
.nx-parent-card .nx-lock h3 { margin: 2px 0 6px; font-size: 18px; letter-spacing: 0; text-transform: none; }
.nx-lock p { font-size: 16px; line-height: 1.55; color: #282858; }
.nx-lock-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.nx-lock-actions .nx-btn { text-decoration: none; }
.nx-parent-card .nx-lock-small { margin: 0; font-size: 14px; color: #4a4a68; }
.nx-lock-small a { color: #282858; font-weight: 700; }

@media (max-width: 900px) {
  .nx-game-grid { grid-template-columns: minmax(0, 1fr); }
  .nx-game-side { position: static; }
}
@media (max-width: 560px) {
  .nx-game-head { align-items: flex-start; }
  .nx-game-icon { width: 72px; height: 72px; border-radius: 20px; }
  .nx-parent-card { padding: 22px 18px 18px 22px; font-size: 16px; }
  .nx-adjust { grid-template-columns: 1fr; }
  .nx-num-cards { grid-template-columns: repeat(2, 1fr); }
  .nx-answers ol { columns: 1; }
  .nx-tag-cards, .nx-figures { grid-template-columns: repeat(2, 1fr); }
  .nx-text-cards { grid-template-columns: 1fr; }
  .nx-template div { grid-template-columns: 1fr; }
  .nx-template dt { border-right: 0; border-bottom: 1.5px dashed #d8d8e4; padding: 10px 14px; }
  .nx-template dd { min-height: 44px; }
  .nx-lock { flex-direction: column; }
}

/* Print: only the parent card, on plain paper */
@media print {
  @page { margin: 14mm; }
  body * { visibility: hidden; }
  .nx-parent-card, .nx-parent-card * { visibility: visible; }
  .nx-parent-card { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border-width: 1.5px; font-size: 13pt; }
  .nx-answers { break-before: page; }
  .nx-answers[open] summary, .nx-answers summary { list-style: none; }
  .nx-answers ol { display: block; }
  .nx-num-cards li, .nx-tag-cards li, .nx-text-cards li, .nx-figures li, .nx-template div { break-inside: avoid; }
  .nx-template div { min-height: 18mm; }
  .nx-related { display: none; }
}


/* More games under the card (scripts/build-site-pages.js): three links beside the text on wide screens, in a row under
   it below 1200px, one per line on phones. A meta line ("Ages 4–7 · 10 min · Free") breaks only between its parts. */
.nx-related .nx-go-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-related .nx-go-meta > span { white-space: nowrap; }
@media (max-width: 1200px) { .nx-related { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .nx-related .nx-go-list { grid-template-columns: minmax(0, 1fr); }
  .nx-related .nx-go-item { flex-direction: row; align-items: center; padding: 10px 12px; }
}

/* Small phones (about 280 to 360px wide) and big text: a long title moves under the icon only when its longest word
   can't fit beside it; the parent card's title and Make 24's number cards shrink a little instead of spilling. */
.nx-game-head { flex-wrap: wrap; }
.nx-game-head > div { flex: 1 1 0%; min-width: min-content; }
.nx-parent-card h2 { font-size: min(30px, 11vw); }
@media (max-width: 560px) {
  .nx-num-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-num-cards span { font-size: min(26px, calc(11vw - 9px)); }
}