/* Nexodyne Library page. Uses the site's palette and the chunky offset-shadow style. */
.nx-lib {
  --navy: #282858;
  --ink: #1a1a1a;
  --muted: #4a4a68;
  --paper: #f5f5f0;
  --yellow: #fedb71;
  --mint: #bfffe6;
  --edge: 2px solid var(--navy);
  --lift: 4px 4px 0 var(--navy);
  font-family: Geist, Inter, sans-serif;
  color: var(--ink);
  background: #fff;
}
.nx-lib *, .nx-lib *::before, .nx-lib *::after { box-sizing: border-box; }
.nx-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.nx-display { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; color: var(--navy); letter-spacing: -0.01em; line-height: 1.05; margin: 0; }

/* ---------- Hero ---------- */
.nx-hero { background: var(--yellow); padding: 72px 0 64px; border-bottom: var(--edge); }
.nx-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.nx-soon { display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: var(--yellow); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; margin-bottom: 20px; }
.nx-soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); animation: nx-pulse 1.6s ease-in-out infinite; }
@keyframes nx-pulse { 50% { opacity: 0.25; } }
.nx-hero h1 { font-size: clamp(40px, 6vw, 76px); }
.nx-hero-lead { font-size: 19px; line-height: 1.6; color: var(--navy); max-width: 540px; margin: 20px 0 28px; }
.nx-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.nx-btn { display: inline-flex; align-items: center; gap: 10px; font: 600 16px/1 Geist, Inter, sans-serif; padding: 15px 22px; border-radius: 999px; border: var(--edge); box-shadow: var(--lift); background: var(--navy); color: var(--yellow); text-decoration: none; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.nx-btn.light { background: #fff; color: var(--navy); }
.nx-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--navy); }
/* No cursor flicker: things that lift on hover can slide out from under a mouse resting on their edge, drop back,
   lift again, and the cursor flips between the arrow and the hand. While hovered (and pressed), an invisible area
   stretches back over the spot they moved from, so the mouse stays on them. */
.nx-btn, .nx-today, .nx-go-item, a.nx-quiz { position: relative; }
.nx-btn:hover::before, .nx-today:hover::before, .nx-go-item:hover::before, a.nx-quiz:hover::before { content: ""; position: absolute; inset: -4px -6px -6px -4px; }
.nx-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--navy); }
.nx-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Phone mock in the hero: a preview of the home screen */
.nx-phone { justify-self: center; width: min(340px, 100%); background: var(--paper); border: 3px solid var(--navy); border-radius: 40px; box-shadow: 10px 10px 0 var(--navy); padding: 22px 18px 18px; }
.nx-phone-bar { display: flex; justify-content: space-between; font: 600 12px Geist, sans-serif; color: var(--navy); padding: 0 6px 14px; }
.nx-phone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; list-style: none; margin: 0; padding: 0; }
.nx-phone-grid li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: var(--navy); text-align: center; line-height: 1.15; }
.nx-phone-grid .nx-app-icon { width: 54px; height: 54px; border-radius: 15px; box-shadow: 3px 3px 0 var(--navy); }
.nx-phone-dock { margin-top: 18px; background: #fff; border: var(--edge); border-radius: 22px; display: flex; justify-content: space-around; padding: 10px 6px; font-size: 10px; font-weight: 600; color: var(--navy); }

/* ---------- Toolbar ---------- */
.nx-toolbar { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid #e4e4ee; backdrop-filter: blur(6px); }
.nx-toolbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 14px 20px; max-width: 1160px; margin: 0 auto; }
.nx-filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nx-filter-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.nx-chip { font: 600 14px/1 Geist, Inter, sans-serif; padding: 9px 13px; border-radius: 999px; border: 1.5px solid var(--navy); background: #fff; color: var(--navy); cursor: pointer; }
.nx-chip[aria-pressed="true"] { background: var(--navy); color: #fff; }
.nx-chip:hover { background: #f0f0f8; }
.nx-chip[aria-pressed="true"]:hover { background: var(--navy); }
.nx-result-count { margin-left: auto; font-size: 14px; color: var(--muted); }

/* ---------- Today ---------- */
.nx-section { padding: 48px 0; }
.nx-today { width: 100%; display: flex; align-items: center; gap: 18px; text-align: left; background: #fff; border: var(--edge); border-radius: 22px; box-shadow: 6px 6px 0 var(--navy); padding: 18px 22px; cursor: pointer; font: inherit; color: inherit; transition: transform 0.12s, box-shadow 0.12s; }
.nx-today:hover { transform: translate(-1px, -1px); box-shadow: 7px 7px 0 var(--navy); }
.nx-today-icon { width: 68px; height: 68px; border-radius: 18px; flex: none; }
.nx-today-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nx-today-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.nx-today-title { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 22px; color: var(--navy); }
.nx-today-meta { font-size: 14px; color: var(--muted); }
.nx-today-cta { margin-left: auto; font-weight: 700; color: var(--navy); white-space: nowrap; }

/* ---------- Shelves & app grid ---------- */
.nx-shelves { display: grid; gap: 28px; }
.nx-shelf { background: var(--tint); border: var(--edge); border-radius: 28px; padding: 26px 26px 30px; }
.nx-shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 22px; }
.nx-shelf-title { display: flex; align-items: center; gap: 10px; font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 26px; color: var(--navy); margin: 0; }
.nx-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--track); border: 2px solid var(--navy); }
.nx-shelf-blurb { margin: 0; font-size: 16px; color: var(--muted); }
.nx-shelf-count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--navy); background: #fff; border: 1.5px solid var(--navy); border-radius: 999px; padding: 5px 11px; }
.nx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 26px 14px; }
.nx-app { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 9px; background: none; border: 0; padding: 4px; cursor: pointer; font: inherit; color: inherit; border-radius: 16px; }
.nx-app-icon { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 21px; border: var(--edge); box-shadow: var(--lift); color: var(--navy); transition: transform 0.12s, box-shadow 0.12s; }
.nx-app:hover .nx-app-icon { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--navy); }
.nx-app:active .nx-app-icon { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--navy); }
.nx-app-title { font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nx-app-meta { font-size: 12px; color: var(--muted); margin-top: -4px; }
.nx-empty { margin: 0; color: var(--muted); }

/* ---------- How it will work ---------- */
.nx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 28px 0 0; padding: 0; }
.nx-step { background: #fff; border: var(--edge); border-radius: 20px; box-shadow: var(--lift); padding: 24px; }
.nx-step-num { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 34px; color: var(--navy); }
.nx-step h3 { font: 700 20px Geist, Inter, sans-serif; color: var(--navy); margin: 10px 0 8px; }
.nx-step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.nx-section-title { font-size: clamp(30px, 4vw, 46px); }
.nx-section-lead { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 640px; margin: 14px 0 0; }

/* ---------- Beta ---------- */
.nx-beta { background: var(--navy); color: #fff; padding: 72px 0; }
.nx-beta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.nx-beta .nx-display { color: var(--yellow); font-size: clamp(32px, 4.4vw, 52px); }
.nx-beta-lead { font-size: 18px; line-height: 1.65; color: #e6e6f2; margin: 18px 0 22px; }
.nx-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nx-perks li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: #fff; }
.nx-perks li::before { content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); color: var(--navy); font-weight: 800; display: grid; place-items: center; font-size: 13px; }
.nx-form { background: #fff; color: var(--ink); border: 3px solid var(--yellow); border-radius: 24px; padding: 28px; box-shadow: 8px 8px 0 var(--yellow); display: grid; gap: 16px; }
.nx-field { display: grid; gap: 6px; }
.nx-field label, .nx-fieldset legend { font-size: 14px; font-weight: 700; color: var(--navy); }
.nx-field input, .nx-field textarea { font: 16px Geist, Inter, sans-serif; padding: 13px 14px; border: var(--edge); border-radius: 12px; background: #fff; color: var(--ink); width: 100%; }
.nx-field textarea { min-height: 88px; resize: vertical; }
.nx-field input:focus, .nx-field textarea:focus { outline: 3px solid var(--yellow); outline-offset: 1px; }
.nx-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.nx-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-checks label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--navy); border: 1.5px solid var(--navy); border-radius: 999px; padding: 8px 13px; cursor: pointer; }
.nx-checks input { accent-color: var(--navy); width: 16px; height: 16px; margin: 0; }
.nx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nx-form-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; }
.nx-form-status { font-size: 14px; margin: 0; color: var(--navy); min-height: 1em; }
.nx-form-status.is-error { color: #b42318; }
.nx-done { background: #fff; color: var(--ink); border: 3px solid var(--yellow); border-radius: 24px; padding: 32px; box-shadow: 8px 8px 0 var(--yellow); }
.nx-done h3 { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; color: var(--navy); font-size: 26px; margin: 0 0 10px; }
.nx-done p { margin: 0; font-size: 16px; line-height: 1.6; }

/* ---------- Game sheet (dialog) ---------- */
.nx-sheet { width: min(640px, calc(100% - 24px)); max-height: calc(100% - 48px); border: 3px solid var(--navy); border-radius: 28px; padding: 0; box-shadow: 10px 10px 0 var(--navy); color: var(--ink); font-family: Geist, Inter, sans-serif; overflow: auto; }
.nx-sheet::backdrop { background: rgba(26, 26, 60, 0.55); }
.nx-sheet-inner { padding: 28px; display: grid; gap: 20px; }
.nx-sheet-head { display: flex; gap: 18px; align-items: center; }
.nx-sheet-icon { display: grid; place-items: center; width: 84px; height: 84px; flex: none; border-radius: 23px; background: var(--track); border: var(--edge); box-shadow: var(--lift); color: var(--navy); }
.nx-sheet-track { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.nx-sheet h2 { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; color: var(--navy); font-size: 28px; line-height: 1.1; margin: 4px 0 0; }
.nx-sheet-close { margin-left: auto; align-self: flex-start; width: 40px; height: 40px; border-radius: 50%; border: var(--edge); background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; flex: none; }
.nx-sheet-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nx-sheet-facts li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--navy); background: var(--paper); border: 1.5px solid var(--navy); border-radius: 999px; padding: 6px 12px; }
.nx-status { display: flex; gap: 12px; align-items: flex-start; background: #fff6d6; border: 1.5px dashed var(--navy); border-radius: 14px; padding: 12px 14px; font-size: 15px; line-height: 1.5; color: var(--navy); }
.nx-status svg { flex: none; margin-top: 2px; }
.nx-sheet dl { margin: 0; display: grid; gap: 14px; }
.nx-sheet dt { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.nx-sheet dd { margin: 4px 0 0; font-size: 17px; line-height: 1.55; }
/* Printable card preview */
.nx-card-preview { display: grid; gap: 10px; }
.nx-card-label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.nx-card { position: relative; background: #fff; border: 2px dashed #9a9ab5; border-radius: 14px; padding: 18px 20px; aspect-ratio: 1.6; max-width: 380px; overflow: hidden; }
.nx-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 10px; background: var(--track); }
.nx-card-title { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; color: var(--navy); font-size: 18px; margin: 0 0 4px 8px; }
.nx-card-meta, .nx-card-needs { font-size: 12px; color: var(--muted); margin: 0 0 8px 8px; }
.nx-card-lines { margin: 10px 0 0 8px; display: grid; gap: 7px; }
.nx-card-lines span { height: 8px; border-radius: 4px; background: #e8e8f0; }
.nx-card-lines span:nth-child(2) { width: 82%; }
.nx-card-lines span:nth-child(3) { width: 64%; }
.nx-card-stamp { position: absolute; right: 14px; bottom: 14px; transform: rotate(-6deg); border: 2px solid var(--navy); color: var(--navy); background: var(--yellow); font: 700 12px Geist, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; }
.nx-sheet-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.nx-lib :focus-visible { outline: 3px solid #4f46e5; outline-offset: 3px; }

@media (max-width: 900px) {
  .nx-hero-grid, .nx-beta-grid { grid-template-columns: 1fr; }
  .nx-phone { display: none; }
  .nx-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nx-hero { padding: 48px 0 44px; }
  .nx-toolbar { position: static; }
  .nx-wrap { padding: 0 16px; }
  .nx-toolbar-inner { padding: 10px 16px; gap: 8px; }
  .nx-filter-group { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
  .nx-chip { white-space: nowrap; padding: 8px 11px; font-size: 13px; }
  .nx-result-count { display: none; }
  .nx-shelf { padding: 20px 14px 24px; border-radius: 22px; }
  .nx-grid { grid-template-columns: repeat(3, 1fr); gap: 22px 6px; }
  .nx-app-icon { width: 64px; height: 64px; border-radius: 18px; }
  .nx-app-title { font-size: 13px; }
  .nx-today { padding: 14px; gap: 14px; }
  .nx-today-icon { width: 56px; height: 56px; }
  .nx-today-title { font-size: 18px; }
  .nx-today-cta { display: none; }
  .nx-sheet { width: 100%; max-width: 100%; max-height: 92%; margin: auto 0 0; border-radius: 26px 26px 0 0; box-shadow: none; }
  .nx-sheet-inner { padding: 22px 18px 28px; }
  .nx-sheet h2 { font-size: 22px; }
  .nx-sheet-icon { width: 68px; height: 68px; }
  .nx-form { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  /* nothing moves; colours and shadows still ease */
  .nx-lib *, .nx-lib *::before { animation: none !important; transition-property: color, background-color, border-color, box-shadow, opacity !important; }
}

/* Ready-to-play games */
.nx-app-icon { position: relative; }
.nx-app-badge { position: absolute; top: -8px; right: -10px; background: #282858; color: #fedb71; font: 700 11px/1 Geist, Inter, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 6px; border-radius: 999px; border: 2px solid #fff; }
.nx-sheet-actions .nx-btn { text-decoration: none; }

/* ---------- Play on this device ---------- */
.nx-go { margin-top: 28px; border: var(--edge); border-radius: 22px; box-shadow: var(--lift); background: var(--mint); padding: 24px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 24px; align-items: start; }
.nx-go-title { font: 700 24px/1.2 Geist, Inter, sans-serif; color: var(--navy); margin: 0 0 8px; }
.nx-go-text p { margin: 0; color: var(--navy); font-size: 16px; line-height: 1.55; }
.nx-go-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.nx-go-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: var(--edge); border-radius: 14px; background: #fff; color: var(--navy); text-decoration: none; transition: transform 0.12s, box-shadow 0.12s; }
.nx-go-item:hover, .nx-go-item:focus-visible { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--navy); }
.nx-go-item .nx-app-icon { width: 40px; height: 40px; border-radius: 11px; flex: none; box-shadow: 2px 2px 0 var(--navy); }
.nx-go-item strong { display: block; font-size: 15px; line-height: 1.25; }
.nx-go-meta { display: block; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .nx-go { grid-template-columns: 1fr; padding: 20px; } }
@media (max-width: 560px) {
  .nx-go { padding: 16px; gap: 16px; }
  .nx-go-list { grid-template-columns: 1fr 1fr; gap: 8px; }
  .nx-go-item { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; }
  .nx-go-item strong { font-size: 14px; }
}

/* ---------- Quizzes ---------- */
.nx-track-chips { display: contents; }
.nx-hero-link { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.nx-quizzes { border-top: 2px solid var(--navy); }
.nx-quiz-group { margin-top: 30px; }
.nx-quiz-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 14px; }
.nx-quiz-group-head h3 { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 22px; color: var(--navy); margin: 0; }
.nx-quiz-group-head p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 680px; }
.nx-quiz-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.nx-quiz-grid > li { display: flex; }
.nx-quiz { flex: 1; display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: start; padding: 16px; background: #fff; border: var(--edge); border-radius: 20px; box-shadow: var(--lift); color: var(--navy); text-decoration: none; transition: transform 0.12s, box-shadow 0.12s; }
.nx-quiz:hover, .nx-quiz:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--navy); }
.nx-quiz-icon { width: 60px; height: 60px; border-radius: 17px; }
.nx-quiz-text strong { display: block; font-size: 17px; line-height: 1.25; }
.nx-quiz-blurb { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: #3a3a5a; }
.nx-quiz-meta { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
@media (max-width: 560px) {
  .nx-quiz { grid-template-columns: 52px 1fr; padding: 14px; gap: 12px; }
  .nx-quiz-icon { width: 52px; height: 52px; border-radius: 15px; }
}

/* ---------- From the book (Steady) ---------- */
.nx-chip-book { display: inline-flex; align-items: center; gap: 6px; background: var(--yellow); }
.nx-chip-book:hover { background: #ffe9a3; }
.nx-chip-book svg { flex: none; }
.nx-book-banner { display: flex; gap: 16px; align-items: flex-start; background: var(--yellow); border: var(--edge); border-radius: 24px; box-shadow: var(--lift); padding: 20px 22px; }
.nx-book-icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #fff; border: var(--edge); color: var(--navy); }
.nx-book-title { margin: 0 0 6px; font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 22px; line-height: 1.2; color: var(--navy); }
.nx-book-title em { font-style: normal; }
.nx-book-banner p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); max-width: 760px; }
.nx-book-banner a { color: var(--navy); font-weight: 700; }
.nx-shelf-chapter { --tint: #fffbea; }
.nx-shelf-chapter .nx-shelf-title { font-size: 22px; line-height: 1.2; }
.nx-ch-num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--yellow); font: 800 16px/1 Geist, Inter, sans-serif; }
.nx-sheet-book { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 14px; background: #fffbea; border: 1.5px solid var(--navy); border-radius: 14px; font-size: 14.5px; line-height: 1.5; color: var(--navy); }
.nx-sheet-book[hidden] { display: none; }
.nx-sheet-book svg { flex: none; margin-top: 2px; }
.nx-sheet-book em { font-style: normal; font-weight: 700; }
.nx-sheet-book a { color: var(--navy); font-weight: 700; }
.nx-quiz-book { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 3px 9px; border-radius: 999px; background: #fffbea; border: 1.5px solid var(--navy); font-size: 12px; font-weight: 700; color: var(--navy); }
.nx-hero-link em { font-style: normal; }
button.nx-hero-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
@media (max-width: 560px) {
  .nx-book-banner { padding: 16px; gap: 12px; }
  .nx-book-icon { width: 46px; height: 46px; border-radius: 14px; }
  .nx-book-title { font-size: 19px; }
  .nx-shelf-chapter .nx-shelf-title { font-size: 19px; }
}

/* ---------- Games / Quizzes toggle (top of the filter bar) ---------- */
.nx-view-row { display: flex; justify-content: center; padding: 14px 20px 0; }
.nx-view { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(360px, 100%); padding: 4px; border: 2px solid var(--navy); border-radius: 999px; background: #fff; box-shadow: 3px 3px 0 var(--navy); transition: box-shadow .4s ease; }
.nx-view-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--navy); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.nx-view.is-right .nx-view-pill { transform: translateX(100%); }
.nx-view.is-peek .nx-view-pill { transform: translateX(28%); }
.nx-view-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; background: none; border-radius: 999px; font: 700 16px Geist, Inter, sans-serif; color: var(--navy); cursor: pointer; transition: color .3s ease, background-color .45s ease, box-shadow .45s ease; }
.nx-view-tab[aria-selected="true"] { color: #fff; }
.nx-view-tab:focus-visible { outline: 3px solid #4f46e5; outline-offset: 2px; }
.nx-view-n { min-width: 26px; padding: 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--yellow); color: var(--navy); }
.nx-view-n:empty { display: none; }
/* Reduce Motion: nothing slides; the Quizzes side glows twice instead */
.nx-view.is-glow #nx-tab-quizzes { background-color: #fff3c4; box-shadow: 0 0 0 4px rgba(254, 219, 113, .9); }
.nx-lib.is-quizzes .nx-track-chips .nx-chip:not(.nx-chip-book) { display: none; }
.nx-quizzes { border-top: 0; }
@media (max-width: 560px) {
  .nx-view-row { padding: 12px 16px 0; }
  .nx-view-tab { font-size: 15px; }
}

/* ---------- Library page (2026-10-15): hero, Start here, tile labels, lock sheet, members' section ---------- */
/* Everything the page shows and hides with the hidden attribute stays hidden, whatever display it has */
.nx-lib [hidden] { display: none !important; }

/* Hero: the count, the price line and three plain facts */
.nx-eyebrow { display: inline-block; margin: 0 0 20px; padding: 8px 14px; border-radius: 18px; background: var(--navy); color: var(--yellow); font-weight: 600; font-size: 14px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; }
.nx-price-line { margin: 16px 0 0; max-width: 540px; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--navy); }
.nx-price-line:empty { display: none; }
.nx-hero-trust { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.nx-hero-trust li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--navy); }
.nx-hero-trust li::before { content: "✓"; flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--yellow); font-size: 11px; font-weight: 800; }
.nx-hero-trust .nx-hero-link { margin-top: 0; }

/* Start here: the age question once, then tonight's game for that age */
@keyframes nx-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes nx-fade { from { opacity: 0; } }
.nx-start-here { scroll-margin-top: 150px; }
.nx-start-here:focus { outline: none; }
.nx-start-ask, .nx-start-picks { background: var(--mint); border: var(--edge); border-radius: 26px; box-shadow: 6px 6px 0 var(--navy); padding: 26px 28px 28px; animation: nx-rise 0.32s ease-out both; }
.nx-start-title { margin: 0; font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 28px; line-height: 1.15; color: var(--navy); }
.nx-start-text { margin: 8px 0 0; max-width: 620px; font-size: 17px; line-height: 1.55; color: var(--navy); }
.nx-age-pick { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.nx-age-btn { position: relative; min-width: 112px; min-height: 56px; padding: 0 24px; border-radius: 999px; border: var(--edge); background: #fff; color: var(--navy); box-shadow: var(--lift); font: 700 20px/1 Geist, Inter, sans-serif; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.nx-age-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--navy); }
.nx-age-btn:hover::before, .nx-start-main:hover::before { content: ""; position: absolute; inset: -4px -6px -6px -4px; }
.nx-age-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--navy); }
.nx-age-btn.is-me { background: var(--yellow); font-size: 17px; }
.nx-age-btn[aria-pressed="true"] { background: var(--navy); color: #fff; }
.nx-start-picks { display: grid; gap: 18px; padding-top: 22px; }
.nx-start-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.nx-start-for { margin: 0; font-size: 16px; font-weight: 700; color: var(--navy); }
.nx-start-change { background: none; border: 0; padding: 4px 2px; font: inherit; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nx-start-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.nx-start-grid > :only-child { grid-column: 1 / -1; }
.nx-start-main { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px; align-items: start; padding: 20px; background: #fff; border: var(--edge); border-radius: 22px; box-shadow: 6px 6px 0 var(--navy); color: var(--navy); text-decoration: none; transition: transform 0.12s, box-shadow 0.12s; }
.nx-start-main:hover { transform: translate(-1px, -1px); box-shadow: 7px 7px 0 var(--navy); }
.nx-start-main:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--navy); }
.nx-start-icon { width: 84px; height: 84px; border-radius: 23px; }
.nx-start-main-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nx-start-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.nx-start-name { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 26px; line-height: 1.15; color: var(--navy); overflow-wrap: break-word; }
.nx-start-meta { font-size: 14px; font-weight: 600; color: var(--muted); }
.nx-start-intro { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--ink); }
.nx-start-cta { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--navy); color: var(--yellow); font-size: 16px; font-weight: 700; line-height: 1; }
.nx-start-sub { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.nx-start-side .nx-go-list { grid-template-columns: 1fr; }
.nx-start-count { margin: 0; font-size: 15px; line-height: 1.5; color: var(--navy); }
/* the family week (same look as play.html, laid out in one row here) */
.nx-start-week .nx-week { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border: 2px solid #d6d6e2; border-radius: 16px; background: #fff; }
.nx-start-week .nx-week-title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.nx-start-week .nx-week-days { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.nx-start-week .nx-week-days li { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #c9c9d8; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #8a8aa3; background: #fff; }
.nx-start-week .nx-week-days li.is-done { background: var(--mint); border-color: var(--navy); color: var(--navy); }
.nx-start-week .nx-week-days li.is-today { box-shadow: 0 0 0 3px var(--yellow); }
.nx-start-week .nx-week-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nx-start-week .nx-week-line { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--navy); }
.nx-start-week .nx-week-goal { margin-left: 4px; padding: 4px 10px; border-radius: 999px; border: 2px solid var(--navy); background: var(--paper); font: 700 13px Geist, Inter, sans-serif; color: var(--navy); cursor: pointer; }

/* Tiles: Free or Members in words, and a tick with the best stars once played on this device */
.nx-app-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; margin-top: -3px; }
.nx-app-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; border: 1.5px solid var(--navy); font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.nx-app-tag.is-free { background: var(--mint); color: var(--navy); }
.nx-app-tag.is-members { background: #fff; color: var(--muted); border-color: #a5a5bd; }
.nx-app-tag svg { flex: none; }
.nx-app-stars { display: inline-flex; gap: 1px; font-size: 13px; line-height: 1; }
.nx-app-stars span { color: #e3e3ec; -webkit-text-stroke: 1px #9a9ab5; }
.nx-app-stars span.is-on { color: var(--yellow); -webkit-text-stroke: 1px var(--navy); }
.nx-app-done { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--mint); color: var(--navy); border: 2px solid var(--navy); }

/* Game sheet: the price under a locked game, and a free game like it */
.nx-sheet-price { margin: -8px 0 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--navy); }
.nx-sheet-alt { display: grid; gap: 10px; padding: 14px 16px 16px; background: var(--mint); border: var(--edge); border-radius: 18px; }
.nx-sheet-alt-label { margin: 0; font-size: 15px; font-weight: 700; color: var(--navy); }
.nx-sheet-alt .nx-go-item { justify-self: start; min-width: min(300px, 100%); }

/* What members get (not shown to members) */
.nx-end { background: var(--navy); color: #fff; padding: 72px 0; }
.nx-end:focus { outline: none; }
.nx-end-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.nx-end .nx-display { color: var(--yellow); font-size: clamp(30px, 4.2vw, 50px); }
.nx-end-lead { margin: 18px 0 0; max-width: 520px; font-size: 18px; line-height: 1.65; color: #e6e6f2; }
.nx-end-box { display: grid; gap: 20px; padding: 28px; background: #fff; color: var(--ink); border: 3px solid var(--yellow); border-radius: 24px; box-shadow: 8px 8px 0 var(--yellow); }
.nx-end-box .nx-perks li { color: var(--navy); }
.nx-end-box .nx-perks li::before { border: 1.5px solid var(--navy); }
.nx-end-price { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--navy); }
.nx-end-price:empty { display: none; }

/* Quizzes: the family assessment first (not for members), and Free on the open quizzes */
.nx-assess { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 20px; align-items: center; margin-top: 26px; padding: 22px 24px; background: var(--yellow); border: var(--edge); border-radius: 24px; box-shadow: 6px 6px 0 var(--navy); }
.nx-assess-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 17px; background: #fff; border: var(--edge); color: var(--navy); }
.nx-assess-text h3 { margin: 0 0 4px; font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 22px; line-height: 1.2; color: var(--navy); }
.nx-assess-text p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.nx-assess .nx-btn { white-space: nowrap; }
.nx-quiz-free { display: inline-flex; align-items: center; margin: 8px 6px 0 0; padding: 3px 9px; border-radius: 999px; background: var(--mint); border: 1.5px solid var(--navy); font-size: 12px; font-weight: 700; color: var(--navy); }

@media (max-width: 900px) {
  .nx-end-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .nx-start-grid { grid-template-columns: 1fr; }
  .nx-assess { grid-template-columns: auto minmax(0, 1fr); }
  .nx-assess .nx-btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
  .nx-eyebrow { margin-bottom: 16px; font-size: 12px; letter-spacing: 0.06em; }
  .nx-hero-trust { flex-direction: column; gap: 8px; }
  .nx-start-here { scroll-margin-top: 16px; }
  .nx-start-ask, .nx-start-picks { padding: 20px 16px 22px; border-radius: 22px; box-shadow: 4px 4px 0 var(--navy); }
  .nx-start-title { font-size: 22px; }
  .nx-start-text { font-size: 16px; }
  .nx-age-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .nx-age-btn { min-width: 0; padding: 0 10px; font-size: 19px; }
  .nx-age-btn.is-me { font-size: 16px; }
  /* the intro and the button run the full width under the icon, not down a narrow column beside it */
  .nx-start-main { grid-template-rows: auto auto 1fr; padding: 16px; gap: 4px 14px; box-shadow: 4px 4px 0 var(--navy); }
  .nx-start-main-text { display: contents; }
  .nx-start-icon { grid-row: 1 / 4; align-self: start; width: 64px; height: 64px; border-radius: 18px; }
  .nx-start-icon svg { width: 32px; height: 32px; }
  .nx-start-kicker, .nx-start-name, .nx-start-meta { grid-column: 2; }
  .nx-start-name { font-size: 20px; }
  .nx-start-intro { grid-column: 1 / -1; margin-top: 10px; font-size: 15px; }
  .nx-start-cta { grid-column: 1 / -1; justify-self: stretch; justify-content: center; min-height: 48px; margin-top: 10px; }
  .nx-start-side .nx-go-list { grid-template-columns: 1fr; }
  .nx-start-side .nx-go-item, .nx-sheet-alt .nx-go-item { flex-direction: row; align-items: center; padding: 10px 12px; }
  .nx-start-week .nx-week { flex-direction: column; text-align: center; padding: 12px 10px; }
  .nx-start-week .nx-week-days { width: 100%; max-width: 280px; justify-content: space-between; gap: 4px; }
  .nx-start-week .nx-week-days li { flex: 0 1 34px; width: auto; height: auto; aspect-ratio: 1 / 1; min-width: 0; }
  .nx-app-done { top: -7px; right: -7px; width: 22px; height: 22px; }
  /* the Free / Members label stays on one line: three tiles across from 360px wide, two below */
  .nx-shelf .nx-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .nx-app-tag { padding: 3px 7px; font-size: 10.5px; letter-spacing: 0.03em; }
  .nx-app-tag svg { width: 11px; height: 11px; }
  .nx-sheet-price { margin-top: -10px; }
  .nx-end { padding: 52px 0; }
  .nx-end-box { padding: 20px; box-shadow: 6px 6px 0 var(--yellow); }
  .nx-assess { padding: 18px 16px; gap: 14px; box-shadow: 4px 4px 0 var(--navy); }
  .nx-assess-icon { width: 48px; height: 48px; border-radius: 14px; }
  .nx-assess-text h3 { font-size: 19px; }
  .nx-assess .nx-btn { justify-self: stretch; justify-content: center; text-align: center; white-space: normal; line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) {
  /* Reduce Motion: Start here fades in instead of rising */
  .nx-lib .nx-start-ask, .nx-lib .nx-start-picks { animation: nx-fade 0.3s ease-out both !important; }
}

/* ---------- Quizzes tab: “What’s hardest right now?” (js/quiz-picker.js) ---------- */
.nx-qpick { margin-top: 22px; padding: 22px 24px; background: #fff; border: var(--edge); border-radius: 24px; box-shadow: var(--lift); }
.nx-qpick-title { margin: 0; font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 22px; line-height: 1.2; color: var(--navy); }
.nx-qpick-lead { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.nx-qpick-topics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.nx-qpick-topic { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: var(--edge); background: #fff; color: var(--navy); font: 700 15px/1.2 Geist, Inter, sans-serif; cursor: pointer; transition: background 0.12s; }
.nx-qpick-topic:hover { background: #f0f0f8; }
.nx-qpick-topic[aria-pressed="true"] { background: var(--navy); color: #fff; }
.nx-qpick-out { margin-top: 20px; }
.nx-qpick-out:empty { display: none; }
.nx-qpick-out > * { animation: nx-rise 0.25s ease-out both; }
.nx-qpick-kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.nx-qpick-main { max-width: 560px; }
.nx-qpick-go { display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 12px; padding: 9px 16px; border-radius: 999px; background: var(--navy); color: var(--yellow); font-size: 15px; font-weight: 700; line-height: 1.2; }
.nx-qpick-also { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.nx-qpick-also a { color: var(--navy); font-weight: 700; }
.nx-qpick-also-meta { color: var(--muted); }
@media (max-width: 560px) {
  .nx-qpick { padding: 18px 16px; box-shadow: 4px 4px 0 var(--navy); }
  .nx-qpick-title { font-size: 19px; }
  .nx-qpick-topics { gap: 8px; }
  .nx-qpick-topic { padding: 8px 13px; font-size: 14.5px; }
  .nx-qpick-go { width: auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  /* Reduce Motion: the suggestion fades in instead of rising (overrides the Library's "no animation" rule above) */
  .nx-lib .nx-qpick-out > * { animation: nx-fade 0.25s ease-out both !important; }
}