/* =============================================================================
   ALMA · The Codex  (apps/web/public/css/codex.css)
   The build guide at /docs/build, in the game-menu theme. Loaded after /css/game-system.css,
   whose tokens, panels, buttons, chips, dialogs and motion it uses.
   Motion: entries rise in as they scroll into view (codex.js adds .cx-wait, then .cx-in), the
   contents fill a reading bar, the recipe tabs slide one gold ink line, the wonder view opens with a
   rise and its pictures crossfade. Transform and opacity only; reduced motion turns it all off.
   ============================================================================= */

/* the entrance slides (the kit's and ours) travel sideways; clip them so a phone never widens its layout viewport (clip keeps sticky working) */
.gm-body--guide .gm-main { overflow-x: clip; }
.codex { display: grid; grid-template-columns: 240px minmax(0, 860px); grid-template-areas: "hero hero" "nav body"; gap: var(--s5) var(--s6); padding: var(--s5) var(--s6) var(--s8); justify-content: center; }

/* --- hero ------------------------------------------------------------------- */
.codex-hero { --cut: var(--cut-lg); grid-area: hero; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s5) var(--s6); padding: var(--s6); overflow: hidden; isolation: isolate; }
.codex-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(80% 120% at 100% 0%, oklch(0.85 0.09 85 / 0.10), transparent 60%); }
.cx-hero-copy { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.codex-hero .t-hero { text-wrap: balance; }
.codex-hero .lead { font-size: 17px; line-height: 1.6; color: var(--fg-2); max-width: 60ch; }
.cx-hero-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.at-glance { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); align-content: start; }
.at-glance li { display: grid; gap: 4px; align-content: start; padding: var(--s3) var(--s4); box-shadow: inset 0 0 0 1px var(--line); background: oklch(0.12 0.024 262 / 0.5); }
.at-glance strong { font: 400 22px/1.1 var(--f-display); letter-spacing: 0.02em; color: var(--gold); }
.at-glance span { font-size: 13px; color: var(--fg-2); }

/* --- contents with reading progress ----------------------------------------- */
.contents { grid-area: nav; position: sticky; top: calc(68px + var(--s5)); align-self: start; display: grid; gap: var(--s3); padding: var(--s4); max-height: calc(100vh - 68px - var(--s5) * 2); overflow: auto; scrollbar-width: thin; }
.cx-toc-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.cx-read { font: 600 11px/1 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.cx-read b { color: var(--gold); font-variant-numeric: tabular-nums; }
.cx-progress { position: relative; display: block; height: 2px; background: var(--line); overflow: hidden; }
.cx-progress i { position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.85 0.09 85 / 0.6), var(--gold)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 120ms linear; }
.contents ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.contents a { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 6px; min-height: 34px; padding: 6px; color: var(--fg-2); text-decoration: none; font-size: 14px; transition: background var(--t-quick), color var(--t-quick); }
.contents a .n { font: 400 12px/1 var(--f-display); letter-spacing: 0.14em; color: var(--fg-3); transition: color var(--t-quick); }
.contents a:hover { color: var(--fg); background: var(--gold-tint); }
.contents a[aria-current="true"] { color: var(--fg); background: var(--gold-tint); box-shadow: inset 2px 0 0 var(--gold); }
.contents a[aria-current="true"] .n { color: var(--gold); }

/* --- entries ---------------------------------------------------------------- */
.codex-body { grid-area: body; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8); min-width: 0; }
.entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); min-width: 0; scroll-margin-top: calc(68px + var(--s4)); }
.cx-kick { display: flex; align-items: center; gap: var(--s3); }
.cx-kick::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.entry .lead { font-size: 16.5px; line-height: 1.65; color: var(--fg-2); max-width: 70ch; }
.entry h3.sub { font: 400 21px/1.2 var(--f-display); letter-spacing: 0.02em; margin-top: var(--s3); }
.entry code { overflow-wrap: anywhere; }
.note { font-size: 13.5px; color: var(--fg-2); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px var(--s3); padding: var(--s3) var(--s4); box-shadow: inset 0 0 0 1px var(--line); background: var(--layer-1); transition: box-shadow var(--t-quick), background var(--t-quick); }
.steps li:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.steps li::before { content: counter(s, upper-roman); grid-row: span 2; font: 400 18px/1.3 var(--f-display); color: var(--gold); }
.steps h3 { font: 600 15px/1.4 var(--f-body); }
.steps p { color: var(--fg-2); font-size: 14px; }

.budgets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.budget { --cut: 8px; display: grid; gap: 4px; align-content: start; padding: var(--s3) var(--s4); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.budget.is-default { box-shadow: inset 0 0 0 1px var(--gold); background: var(--gold-tint); }
.budget .label em { font-style: normal; color: var(--gold); }
.budget strong { font: 400 22px/1.1 var(--f-display); }
.budget .hint-line { font-size: 12.5px; color: var(--fg-2); }
.budget .hint-line::first-letter { text-transform: uppercase; }

.gcards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.gcard { --cut: 8px; display: grid; gap: 6px; align-content: start; padding: var(--s4); background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: box-shadow var(--t-quick), background var(--t-quick); }
.gcard:hover { background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.gcard h3 { font: 400 17px/1.25 var(--f-display); letter-spacing: 0.02em; }
.gcard p { font-size: 14px; color: var(--fg-2); }
.gcard .n { font: 400 12px/1 var(--f-display); letter-spacing: 0.2em; color: var(--gold); }

.pairs { display: grid; gap: var(--s5); }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--s3); }
.pair .kind { grid-column: 1 / -1; font: 600 12px/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.ask { --cut: 8px; display: grid; gap: var(--s2); align-content: start; padding: var(--s4); background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); font-size: 14.5px; }
.ask.weak p { color: var(--fg-2); font-style: italic; }
.ask.strong { box-shadow: inset 0 0 0 1px oklch(0.80 0.12 165 / 0.35); }
.ask .btn { justify-self: start; }
.ask .tag { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; }
.ask .tag .ico { width: 14px; height: 14px; }
.ask .tag.bad { color: var(--bad); }
.ask .tag.good { color: var(--good); }
.pair .why { grid-column: 1 / -1; font-size: 13.5px; color: var(--fg-2); }
.pair .why b { color: var(--fg); }
.pair-mini { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }

.callout { --cut: var(--cut); display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s3); padding: var(--s4) var(--s5); }
.callout .dia { margin-top: 7px; }
.callout h3 { font: 600 15px/1.4 var(--f-body); }
.callout p { color: var(--fg-2); font-size: 14px; }

/* --- wonders ---------------------------------------------------------------- */
.wonders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.wonder { --cut: 10px; position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0; border: 0; overflow: hidden; text-align: left; color: var(--fg); background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); cursor: zoom-in; font: inherit; transition: background var(--t-quick), box-shadow var(--t-quick), translate var(--t-panel) var(--ease-panel); }
.wonder:hover { background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--line-2); translate: 0 -3px; }
.wonder:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.wonder .shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--void-2); }
.wonder .shot picture { display: contents; }
.wonder .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease-panel), opacity var(--t-panel) var(--ease-soft); }
.wonder .shot img.cx-loading { opacity: 0; }
.wonder:hover .shot img { transform: scale(1.04); }
.wonder .shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, oklch(0.92 0.08 85 / 0.18) 50%, transparent 70%); translate: -110% 0; }
.wonder:hover .shot::after { animation: gm-sweep 820ms var(--ease-soft) both; }
.wonder .kindtag { position: absolute; left: 8px; top: 8px; z-index: 1; }
.wonder .w-info { display: grid; gap: 6px; align-content: start; padding: var(--s3) var(--s4) var(--s4); }
.wonder .w-info > b { font: 400 17px/1.25 var(--f-display); letter-spacing: 0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wonder .w-line { font-size: 13px; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scores { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 600 11px/1 var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.scores b { color: var(--fg); font: 600 13px/1 var(--f-label); letter-spacing: 0.04em; }

/* the wonder view */
.cx-scrim { grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--s5) var(--s4); }
.wonder-dlg { width: min(1120px, 100%); max-height: calc(100vh - var(--s5) * 2); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.wonder-dlg:focus { outline: none; }
.wonder-dlg .dialog-head { flex-wrap: nowrap; }
.wonder-dlg .dialog-head .t-h2 { flex: 1; min-width: 0; font-size: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wonder-dlg .dialog-body { grid-template-columns: minmax(0, 1fr); overflow: auto; overscroll-behavior: contain; }
.wonder-dlg .dialog-foot { align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--s3); }
.wonder-dlg .flip { transform: scaleX(-1); }
.w-view { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s5); }
.w-pic { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.w-pic .seg-mini { justify-self: start; }
.w-pic .frame-img { --cut: 8px; position: relative; display: grid; overflow: hidden; background: var(--void-2); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); aspect-ratio: var(--ar, 16 / 10); transition: max-width var(--t-panel) var(--ease-panel); }
.w-pic .frame-img > picture, .w-pic .frame-img > img { grid-area: 1 / 1; }
.w-pic .frame-img picture { display: contents; }
.w-pic .frame-img img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; animation: cx-pic-in var(--t-panel) var(--ease-panel) both; }
.w-pic .frame-img img.cx-out { animation: cx-pic-out 220ms var(--ease-in) both; }
.w-pic .frame-img.tall { max-width: 320px; justify-self: center; width: 100%; }
@keyframes cx-pic-in { from { opacity: 0; transform: translateX(calc(var(--dir, 0) * 24px)) scale(0.985); } }
@keyframes cx-pic-out { to { opacity: 0; transform: translateX(calc(var(--dir, 0) * -24px)); } }
.w-side { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.w-side p { font-size: 14px; color: var(--fg-2); white-space: pre-line; }
.w-side .w-said { font: 600 11px/1.3 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.w-side .btn { justify-self: start; }
.w-scores { display: grid; gap: var(--s2); }
.w-scores .statbar { grid-template-columns: 92px minmax(0, 1fr) 44px; }
.w-scores .track i { width: 100%; transform-origin: 0 50%; transform: scaleX(0); transition: transform 640ms var(--ease-panel); transition-delay: calc(var(--i, 0) * 70ms); }
.w-scores.is-on .track i { transform: scaleX(var(--v, 0)); }
.cx-scrim:not([hidden]) .wonder-dlg { animation: cx-dlg-in var(--t-panel) var(--ease-panel) both; }
.cx-scrim.is-closing { animation: cx-fade-out 200ms var(--ease-in) both; }
.cx-scrim.is-closing .wonder-dlg { animation: cx-dlg-out 200ms var(--ease-in) both; }
@keyframes cx-dlg-in { from { opacity: 0; transform: translateY(18px) scale(0.975); } }
@keyframes cx-dlg-out { to { opacity: 0; transform: translateY(10px) scale(0.985); } }
@keyframes cx-fade-out { to { opacity: 0; } }
html.cx-locked, html.cx-locked body { overflow: hidden; }

/* --- recipes: tabs with a sliding ink line ---------------------------------- */
.rtabs-wrap { position: relative; }
.rtabs { position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; }
.rtabs .chip { height: 36px; }
.rtabs .chip[aria-selected="true"] { color: var(--fg); background: var(--gold-tint); box-shadow: inset 0 0 0 1px var(--line-2); }
.rtabs .chip[aria-selected="true"] .ico { color: var(--gold); }
.cx-ink { position: absolute; left: 0; top: 0; width: 1px; height: 2px; background: var(--gold); pointer-events: none; transform-origin: 0 0; transform: translate(var(--ix, 0), var(--iy, 0)) scaleX(var(--iw, 0)); transition: transform var(--t-base) var(--ease-panel); }
.cx-ink.is-still { transition: none; }
.recipe { --cut: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s5); background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.recipe:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--gold); }
.recipe.cx-show { animation: gm-in-up var(--t-panel) var(--ease-panel) backwards; }
.recipe.cx-show.from-right { animation-name: gm-in-right; }
.recipe.cx-show.from-left { animation-name: gm-in-left; }
.recipe-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.recipe-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--gold); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--gold-tint); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.recipe-icon .ico { width: 20px; height: 20px; }
.recipe-h h3 { font: 400 26px/1.15 var(--f-display); letter-spacing: 0.02em; }
.recipe-h .badge { margin-left: auto; }
.recipe-h p { flex-basis: 100%; color: var(--fg-2); }
.recipe-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.recipe h4 { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--s2); }
.recipe h4 .ico { width: 15px; height: 15px; color: var(--warn); }
.dlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; color: var(--fg-2); }
.dlist li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
.dlist li::before { content: ""; width: 6px; height: 6px; margin-top: 8px; border: 1px solid var(--gold); transform: rotate(45deg); }
.dlist.auto li::before { background: var(--gold); }
.example { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); background: oklch(0.12 0.024 262 / 0.6); box-shadow: inset 2px 0 0 var(--gold); }
.example-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.example-h h4 { margin: 0; }
.example p { font-size: 14.5px; }
.shot-fig { display: grid; gap: var(--s2); }
.shot-fig picture { display: contents; }
.shot-fig img { width: 100%; height: auto; box-shadow: 0 0 0 1px var(--line); background: var(--void-2); }
.shot-fig figcaption { font-size: 13px; color: var(--fg-2); }
.watch ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--fg-2); }
.watch li::marker { color: var(--warn); }

/* --- tables, library numbers, limits --------------------------------------- */
.gtable-wrap { overflow-x: auto; box-shadow: inset 0 0 0 1px var(--line); background: var(--layer-1); }
.gtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.gtable th, .gtable td { text-align: left; vertical-align: top; padding: 11px var(--s4); border-bottom: 1px solid var(--line); }
.gtable tbody tr:last-child > * { border-bottom: 0; }
.gtable thead th { font: 600 11px/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); border-bottom-color: var(--line-2); }
.gtable tbody th { font-weight: 600; white-space: nowrap; }
.gtable tbody tr { transition: background var(--t-quick); }
.gtable tbody tr:hover { background: var(--gold-tint); }
.gtable td { color: var(--fg-2); }
.gtable .say { color: var(--gold); }
/* "More kinds it knows how to make", under the recipes. */
.cx-sub { margin: var(--s6) 0 var(--s3); font: 400 22px/1.2 var(--f-display); letter-spacing: 0.02em; }
.gcard .say { color: var(--gold); font-style: italic; }
.libstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.libstats div { display: grid; gap: 4px; padding: var(--s3) var(--s4); box-shadow: inset 0 0 0 1px var(--line); }
.libstats strong { font: 400 24px/1 var(--f-display); color: var(--gold); font-variant-numeric: tabular-nums; }
.libstats span { font-size: 12.5px; color: var(--fg-2); }
.limits { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.limits li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) var(--s4); box-shadow: inset 0 0 0 1px var(--line); }
.limits li > .ico { width: 18px; height: 18px; color: var(--bad); margin-top: 2px; }
.limits h3 { font: 600 15px/1.4 var(--f-body); }
.limits p { font-size: 14px; color: var(--fg-2); }

/* --- questions -------------------------------------------------------------- */
.qa { display: grid; gap: var(--s2); }
.qa details { box-shadow: inset 0 0 0 1px var(--line); background: var(--layer-1); transition: box-shadow var(--t-quick), background var(--t-quick); }
.qa details:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.qa details[open] { background: var(--layer-2); }
.qa summary { list-style: none; display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 8px var(--s4); cursor: pointer; font: 400 17px/1.3 var(--f-display); letter-spacing: 0.02em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: ""; flex: none; width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); transition: background var(--t-quick), transform var(--t-base) var(--ease-panel); }
.qa details[open] summary::before { background: var(--gold); transform: rotate(225deg); }
.qa summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.qa details p { padding: 0 var(--s4) var(--s4) 38px; color: var(--fg-2); font-size: 14px; }
.qa details[open] p { animation: gm-in-up var(--t-base) var(--ease-panel) backwards; }

.codex-end { --cut: var(--cut-lg); display: grid; gap: var(--s3); justify-items: start; padding: var(--s6); }

/* --- entrances as entries scroll in (codex.js) ------------------------------ */
.cx-wait > * { opacity: 0; }
.cx-in > * { animation: gm-in-right var(--t-panel) var(--ease-panel) backwards; animation-delay: calc(var(--cx-i, 0) * var(--stagger)); }
.cx-in > :nth-child(2) { --cx-i: 1; } .cx-in > :nth-child(3) { --cx-i: 2; } .cx-in > :nth-child(4) { --cx-i: 3; }
.cx-in > :nth-child(5) { --cx-i: 4; } .cx-in > :nth-child(n+6) { --cx-i: 5; }
.cx-in .wonders > *, .cx-in .gcards > *, .cx-in .steps > * { animation: gm-in-up var(--t-panel) var(--ease-panel) backwards; animation-delay: calc(120ms + var(--cx-j, 0) * 40ms); }
.cx-in .wonders > :nth-child(2), .cx-in .gcards > :nth-child(2), .cx-in .steps > :nth-child(2) { --cx-j: 1; }
.cx-in .wonders > :nth-child(3), .cx-in .gcards > :nth-child(3), .cx-in .steps > :nth-child(3) { --cx-j: 2; }
.cx-in .wonders > :nth-child(4), .cx-in .gcards > :nth-child(4), .cx-in .steps > :nth-child(4) { --cx-j: 3; }
.cx-in .wonders > :nth-child(5), .cx-in .gcards > :nth-child(5), .cx-in .steps > :nth-child(5) { --cx-j: 4; }
.cx-in .wonders > :nth-child(n+6), .cx-in .gcards > :nth-child(n+6), .cx-in .steps > :nth-child(n+6) { --cx-j: 5; }

/* the copied-to-clipboard note when the kit's GM.toast is not there */
.cx-toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; }

/* ================================ example games ================================ */
.games { display: grid; gap: var(--s4); }
.game-card { --cut: 10px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.game-shot { position: relative; display: block; min-height: 100%; overflow: hidden; background: var(--void-2); border-right: 1px solid var(--line); }
.game-shot img { width: 100%; height: 100%; aspect-ratio: 1200 / 630; object-fit: cover; transition: transform 1.2s var(--ease-panel); }
.game-shot:hover img { transform: scale(1.04); }
.game-shot:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.game-shot .kindtag { position: absolute; left: 8px; top: 8px; z-index: 1; }
.game-play { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font: 600 12px/1 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--void); background: var(--gold); }
.game-play .ico { width: 16px; height: 16px; }
.game-copy { display: grid; gap: var(--s2); align-content: start; padding: var(--s4); min-width: 0; }
.game-copy h3 { margin: 0; font: 400 21px/1.2 var(--f-display); letter-spacing: 0.02em; }
.game-facts { display: flex; flex-wrap: wrap; gap: 4px var(--s4); margin: 0; }
.game-facts div { display: flex; gap: 6px; align-items: baseline; }
.game-facts dt { font: 600 11px/1 var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.game-facts dd { margin: 0; font-size: 14px; color: var(--fg); }
.game-prompt { margin: 0; font-size: 14px; color: var(--fg-2); }
.game-prompt .label { display: block; margin-bottom: 4px; }
.game-made { box-shadow: inset 0 0 0 1px var(--line); background: var(--layer-2); }
.game-made summary { list-style: none; display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 6px var(--s3); cursor: pointer; font: 400 15px/1.3 var(--f-display); letter-spacing: 0.02em; }
.game-made summary::-webkit-details-marker { display: none; }
.game-made summary::before { content: ""; flex: none; width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); transition: background var(--t-quick), transform var(--t-base) var(--ease-panel); }
.game-made[open] summary::before { background: var(--gold); transform: rotate(225deg); }
.game-made summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.game-made ol { margin: 0; padding: 0 var(--s4) var(--s3) calc(var(--s4) + 14px); display: grid; gap: 6px; font-size: 14px; color: var(--fg-2); }

/* ================================ narrower desktops ================================ */
@media (max-width: 1240px) {
  .codex { grid-template-columns: 210px minmax(0, 1fr); padding: var(--s4) var(--s5) var(--s7); gap: var(--s4) var(--s5); }
  .codex-hero { grid-template-columns: minmax(0, 1fr); }
  .at-glance { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wonders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .budgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .w-view { grid-template-columns: minmax(0, 1fr); }
  .game-card { grid-template-columns: minmax(0, 1fr); }
  .game-shot { border-right: 0; border-bottom: 1px solid var(--line); }
  .at-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================ phones ================================ */
@media (max-width: 760px) {
  .codex { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "nav" "body"; gap: var(--s4); padding: var(--s3) var(--s3) var(--s6); }
  .codex-hero { padding: var(--s5) var(--s4); gap: var(--s4); }
  .codex-hero .lead { font-size: 15.5px; }
  .cx-hero-row .btn { flex: 1 1 auto; }
  .at-glance li { padding: var(--s2) var(--s3); }
  .at-glance strong { font-size: 18px; }
  .at-glance span { font-size: 12px; }

  /* contents become a sticky strip under the top bar, with the reading bar along its foot */
  .contents { --cut: 0px; position: sticky; top: 58px; z-index: 15; margin: 0 calc(var(--s3) * -1); padding: 0; gap: 0; max-height: none; overflow: visible; clip-path: none; background: oklch(0.12 0.024 262 / 0.88); box-shadow: inset 0 -1px 0 var(--line); backdrop-filter: blur(14px); }
  .cx-toc-head { display: none; }
  .cx-progress { order: 2; height: 2px; }
  .contents ol { grid-auto-flow: column; grid-auto-columns: max-content; gap: 0; padding: 0 var(--s2); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  .contents ol::-webkit-scrollbar { display: none; }
  .contents li { scroll-snap-align: start; }
  .contents a { grid-template-columns: auto auto; gap: 6px; min-height: 44px; padding: 0 10px; white-space: nowrap; font-size: 13.5px; }
  .contents a[aria-current="true"] { background: none; box-shadow: inset 0 -2px 0 var(--gold); }

  .codex-body { gap: var(--s7); }
  .entry { scroll-margin-top: calc(58px + 48px + var(--s3)); gap: var(--s3); }
  .entry .lead { font-size: 15px; }
  .steps li { grid-template-columns: 30px minmax(0, 1fr); padding: var(--s3); }
  .budgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcards, .pair, .pair-mini, .recipe-cols { grid-template-columns: minmax(0, 1fr); }
  .gcard { padding: var(--s3); }
  .libstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callout { padding: var(--s3) var(--s4); }

  .wonders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .wonder .w-info { padding: var(--s2) var(--s3) var(--s3); }
  .wonder .w-info > b { font-size: 14.5px; }
  .wonder .w-line { display: none; }
  .wonder .scores { gap: 3px 8px; font-size: 10px; }
  .wonder .scores b { font-size: 12px; }
  .wonder .kindtag { left: 6px; top: 6px; }

  /* recipe tabs: one scrolling row, the ink under the chosen one */
  .rtabs-wrap { margin: 0 calc(var(--s3) * -1); }
  .rtabs-wrap::after { content: ""; position: absolute; right: 0; top: 0; bottom: 6px; width: 32px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--void)); }
  .rtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 var(--s3) 6px; overscroll-behavior-x: contain; }
  .rtabs::-webkit-scrollbar { display: none; }
  .rtabs .chip { flex: none; }
  .recipe { padding: var(--s4) var(--s3); }
  .recipe-h h3 { font-size: 22px; }
  .recipe-h .badge { margin-left: 0; }

  /* tables become stacked rows */
  .gtable thead { display: none; }
  .gtable, .gtable tbody, .gtable tr, .gtable th, .gtable td { display: block; }
  .gtable tr { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
  .gtable tbody tr:last-child { border-bottom: 0; }
  .gtable th, .gtable td { padding: 2px 0; border: 0; }
  .gtable tbody th { white-space: normal; margin-bottom: 4px; color: var(--fg); }
  .gtable td[data-label]::before { content: attr(data-label) " · "; font: 600 11px/1.6 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }

  .qa summary { font-size: 16px; padding: 8px var(--s3); }
  .qa details p { padding: 0 var(--s3) var(--s3) 32px; }
  .codex-end { padding: var(--s5) var(--s4); }

  /* the wonder view fills the phone */
  .cx-scrim { padding: 0; place-items: stretch; }
  .wonder-dlg { --cut: 0px; width: 100%; max-height: none; height: 100%; height: 100dvh; clip-path: none; }
  .wonder-dlg .dialog-head { padding: var(--s3) var(--s4); }
  .wonder-dlg .dialog-head .label { display: none; }
  .wonder-dlg .dialog-head .t-h2 { font-size: 18px; }
  .wonder-dlg .dialog-body { padding: var(--s3) var(--s4); }
  .wonder-dlg .dialog-foot { padding: var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom)); }
  .w-pic .frame-img.tall { max-width: 230px; }
  .w-pic .seg-mini button { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-wait > * { opacity: 1; }
  .cx-in > *, .cx-in .wonders > *, .cx-in .gcards > *, .cx-in .steps > *, .recipe.cx-show, .qa details[open] p, .w-pic .frame-img img, .cx-scrim:not([hidden]) .wonder-dlg { animation: none !important; }
  .w-pic .frame-img img.cx-out { display: none; }
  .cx-ink, .cx-progress i, .w-scores .track i, .wonder, .wonder .shot img { transition: none; }
  .wonder:hover { translate: none; }
  .wonder:hover .shot img { transform: none; }
  .wonder:hover .shot::after { animation: none; }
}
.gm-lite .wonder:hover .shot::after { animation: none; }