#wikibtn {
  width: 46px;
  padding: 0;
  justify-content: center;
  border: 2px solid #fc5b0a;
  color: #fc5b0a;
}
#wikimodal {
  --wiki-bg: #121212;
  --wiki-card: #1d1d1d;
  --wiki-line: #2e2c29;
  --wiki-yellow: #ffc700;
  --wiki-text: #f5f2ec;
  --wiki-muted: #a39d93;
  --wiki-display: "Oldschool Grotesk Condensed", "Arial Narrow", sans-serif;
  width: calc(100vw - 24px);
  height: calc(100dvh - 24px);
  max-width: 1800px;
  max-height: none;
  /* Sized like IP School's and the AI Studio's views, border included, so the mastheads line up. */
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--wiki-line);
  border-radius: 20px;
  background: var(--wiki-bg);
  color: var(--wiki-text);
  color-scheme: dark;
  overflow: hidden;
  box-shadow: 0 24px 100px #0009;
}
#wikimodal *, #wikimodal *::before, #wikimodal *::after { box-sizing: border-box; }
#wikimodal::backdrop { background: #070709ba; backdrop-filter: blur(7px); }
/* The whole shell scrolls, so the masthead and section tabs move up with the page instead of staying pinned. */
.wiki-shell { display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.wiki-nav {
  position: relative;
  z-index: 3;
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--wiki-line);
  background: var(--wiki-bg);
}
.wiki-nav input,
.wiki-form input,
.wiki-form select,
.wiki-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 1px solid #49494f;
  border-radius: 9px;
  background: #131315;
  color: #fdf9ef;
  font: inherit;
}
.wiki-nav input:focus,
.wiki-form input:focus,
.wiki-form textarea:focus {
  outline: 2px solid #fc5b0a;
  outline-offset: 1px;
}
.wiki-sections,
.wiki-actions,
.wiki-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wiki-btn {
  background: #222221;
  border: 1px solid #393630;
  color: var(--wiki-text);
  border-radius: 999px;
  padding: 8px 14px;
  font: 900 14px/1.3 var(--wiki-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.wiki-btn:hover {
  background: #35353b;
}
.wiki-btn.primary,
.wiki-btn[aria-pressed="true"] {
  background: var(--wiki-yellow);
  border-color: var(--wiki-yellow);
  color: #121212;
}
.wiki-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.wiki-btn.danger {
  color: #ffaba3;
}
#wiki-list {
  display: none;
  position: absolute;
  left: 28px;
  top: calc(100% + 8px);
  width: min(360px, calc(100% - 56px));
  max-height: min(480px, 60dvh);
  overflow: auto;
  padding: 10px;
  border: 1px solid #454036;
  border-radius: 14px;
  background: #1d1d1d;
  box-shadow: 0 16px 40px #0009;
}
.wiki-nav.browse-open #wiki-list { display: block; }
.wiki-nav-item {
  width: 100%;
  border: 0;
  background: none;
  color: #c9c5bd;
  text-align: left;
  border-radius: 8px;
  padding: 13px 10px;
  cursor: pointer;
  font-size: 15px;
}
.wiki-nav-item small {
  display: block;
  color: #98918a;
  margin-top: 5px;
  font-size: 11px;
}
.wiki-nav-item[aria-current="page"] {
  background: #fc5b0a1c;
  color: #ff9a66;
}
.wiki-search-group-title { margin: 10px 10px 4px; color: #ff9a66; font: 800 12px/1.4 -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.wiki-search-ninja { display: flex; align-items: center; gap: 8px; min-width: 0; border-radius: 8px; }
.wiki-search-ninja .wiki-nav-item { flex: 1; min-width: 0; width: auto; }
.wiki-search-ninja strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-search-sale { flex: none; margin-right: 8px; padding: 6px 9px; border: 1px solid #754530; border-radius: 999px; color: #ff9a66; font: 800 11px/1.2 -apple-system, "Segoe UI", sans-serif; text-decoration: none; text-transform: uppercase; }
.wiki-search-sale:hover, .wiki-search-sale:focus-visible { border-color: #ff9a66; background: #fc5b0a1c; }
.wiki-search-more { width: 100%; text-align: left; }
.wiki-main { position:relative; display:flex; flex:1 0 auto; flex-direction:column; min-width:0; }
#wiki-ai-account { display:none; font-size:12px; min-width:0; }
#wiki-ai-account[open] {
  /* Pinned to the modal's corner, since the page under it scrolls with the shell. */
  position:fixed;
  z-index:5;
  top:32px;
  right:max(36px, calc((100vw - 1800px) / 2 + 24px));
  display:block;
  box-sizing:border-box;
  width:min(420px, calc(100vw - 72px));
  max-height:calc(100dvh - 64px);
  overflow-y:auto;
  padding:18px 20px 20px;
  background: var(--wiki-card);
  border: 1px solid #454036;
  border-radius: 14px;
  box-shadow: 0 16px 40px #0009;
}
#wiki-ai-settings { padding-top:10px; }
#wiki-ai-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  list-style:none;
  cursor: pointer;
  color: #ff9a66;
}
#wiki-ai-summary::-webkit-details-marker { display:none; }
#wiki-ai-summary::after { content:'×'; color:var(--wiki-muted); font-size:20px; line-height:1; }

#wiki-ai-settings p {
  line-height: 1.5;
  margin: 6px 0 12px;
  overflow-wrap: anywhere;
}
#wiki-ai-settings small {
  display: block;
  color: #aaa69f;
  margin-top: 12px;
  line-height: 1.4;
}
#wiki-ai-settings .wiki-ai-status {
  color: #ffbd97;
  margin-bottom: 0;
}
#wiki-ai-settings .wiki-btn {
  font-size: 12px;
  text-decoration: none;
}
#wiki-main-content:focus { outline:none; }
#wiki-main-content {
  padding: clamp(28px, 3.5vw, 56px) clamp(24px, 3.5vw, 64px) 64px;
  flex: 1 0 auto;
}
.wiki-eyebrow {
  text-transform: uppercase;
  color: #fc8b52;
  letter-spacing: 0.14em;
  font-size: 12px;
  margin: 0 0 12px;
}
.wiki-title {
  font:
    900 clamp(36px, 4.5vw, 64px) / 1.1 "Oldschool Grotesk Condensed",
    sans-serif;
  margin: 0 0 14px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.wiki-meta,
.wiki-muted {
  color: #aaa69f;
  font-size: 13px;
  line-height: 1.6;
}
.wiki-tabs {
  margin: 24px 0;
  padding-bottom: 18px;
  border-bottom: 1px solid #373739;
}
.wiki-prose {
  max-width: 1100px;
  line-height: 1.7;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.wiki-prose :is(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
  font-weight: 700;
  text-transform: none;
  line-height: 1.35;
  margin: 28px 0 12px;
  scroll-margin-top: 20px;
}
.wiki-prose h1, .wiki-prose h2 {
  font-size: 25px;
  border-bottom: 1px solid #3e3b36;
  padding-bottom: 10px;
}
.wiki-prose h3 { font-size: 21px; }
.wiki-prose :is(h4, h5, h6) { font-size: 18px; }
.wiki-prose p {
  white-space: pre-wrap;
  margin: 12px 0 20px;
}
.wiki-prose li { margin: 7px 0; }
.wiki-prose :is(ul, ol) { padding-left: 26px; }
.wiki-prose blockquote { margin: 16px 0; padding: 8px 20px; border-left: 3px solid #ffd400; color: #c9c3b9; }
.wiki-prose hr { border: 0; border-top: 1px solid #3e3b36; margin: 24px 0; }
.wiki-prose .wiki-toc { width: fit-content; max-width: 100%; min-width: min(280px, 100%); box-sizing: border-box; margin: 22px 0 28px; border: 1px solid #4d4740; border-radius: 8px; background: #1b1916; }
.wiki-toc summary { cursor: pointer; font-size: 18px; font-weight: 700; padding: 14px 18px; }
.wiki-toc nav { padding: 0 20px 10px; border-top: 1px solid #3e3b36; }
.wiki-toc a { text-decoration: none !important; }
.wiki-prose .wiki-table-wrap { overflow-x: auto; max-width: 100%; margin: 20px 0 28px; border: 1px solid #514a40; border-radius: 6px; }
.wiki-table-wrap table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.6; }
.wiki-table-wrap :is(th, td) { text-align: left; padding: 12px 14px; border: 1px solid #464038; min-width: 100px; vertical-align: top; overflow-wrap: normal; }
.wiki-table-wrap th { background: #302b25; font-weight: 700; }
.wiki-table-wrap tr:nth-child(even) { background: #ffffff04; }
.wiki-prose .wiki-inline-image img { max-width: min(100%, 440px); max-height: 440px; object-fit: contain; border-radius: 5px; vertical-align: middle; }
.wiki-prose td .wiki-inline-image img { width: 76px; height: 76px; object-fit: cover; }
.wiki-citation { font-size: 11px; line-height: 0; }
.wiki-prose .wiki-citation a { color: #ffd400; text-decoration: none; }
.wiki-references { font-size: 13px; color: #beb8ae; }
.wiki-references li, .wiki-citation { scroll-margin-top: 24px; }
.wiki-history-tag { display: inline-block; width: fit-content; padding: 4px 9px; border: 1px solid #7188a0; border-radius: 6px; background: #24303c; color: #c9e4ff; font: 600 11px/1.5 -apple-system, "Segoe UI", sans-serif; text-transform: none; vertical-align: middle; }
.wiki-entry-row .wiki-history-tag { margin-top: 6px; }
.wiki-tag-control[aria-pressed="true"] { border-color: #8bb8e3; background: #24303c; color: #c9e4ff; }
.wiki-location-figure { margin: 0 0 24px; display: flex; gap: 16px; align-items: center; }
.wiki-location-preview { position: relative; width: 120px; height: 120px; flex: none; border: 1px solid #494035; border-radius: 12px; overflow: hidden; }
.wiki-location-preview img { width: 100%; height: 100%; object-fit: cover; }
.wiki-location-figure figcaption { color: #aaa397; font-size: 13px; }
.wiki-map-draft-context { margin-bottom: 20px; color: #b8b2a7; }
.wiki-map-draft-context blockquote { margin: 8px 0 16px; padding-left: 14px; border-left: 3px solid var(--wiki-orange); }
.wiki-word-count { margin: -8px 0 4px; color: var(--wiki-yellow); font-size: 14px; }
.wiki-draft-tag { display: inline-block; margin: 4px 6px; padding: 2px 7px; border: 1px solid #c79b50; border-radius: 4px; color: #f3c780; font: 700 12px/1.4 sans-serif; text-transform: uppercase; }
.wiki-prose a,
.wiki-prose button.wiki-inline {
  color: #ff9a66;
  background: none;
  border: 0;
  text-decoration: underline;
  font: inherit;
  padding: 0;
  cursor: pointer;
}
.wiki-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  gap: 24px;
  align-items: start;
}
.wiki-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wiki-form label {
  font-size: 13px;
  color: #bbb7af;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wiki-form textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}
.wiki-form textarea.draft {
  min-height: 390px;
}
.wiki-coach {
  border: 1px solid #fc5b0a50;
  border-radius: 14px;
  background: #242426;
  padding: 22px;
}
.wiki-coach h3 {
  margin-top: 0;
  color: #ffd400;
}
.wiki-coach p,
.wiki-coach li {
  line-height: 1.6;
  font-size: 14px;
}
.wiki-concern {
  border-left: 2px solid #fc5b0a;
  padding-left: 12px;
  margin: 18px 0;
}
.wiki-concern.blocking {
  border-color: #ff7869;
}
.wiki-notice {
  border-radius: 10px;
  background: #ffd40012;
  border: 1px solid #ffd40040;
  padding: 14px 18px;
  margin: 16px 0;
  line-height: 1.5;
}
.wiki-error {
  color: #ffb1a2;
}
.wiki-card {
  border: 1px solid #3d3d42;
  border-radius: 12px;
  padding: 20px;
  margin: 16px 0;
  background: #232326;
}
.wiki-card h3 {
  margin: 0 0 10px;
}
.wiki-card pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 14px/1.6 inherit;
}
.wiki-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.wiki-diff > div {
  min-width: 0;
}
.wiki-diff pre {
  background: #161618;
  padding: 14px;
  border-radius: 8px;
  max-height: 400px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 13px/1.6 monospace;
}
.wiki-status {
  min-height: 24px;
  font-size: 14px;
  line-height: 1.5;
  margin: 14px 0;
}
.wiki-status:empty { display: none; }
.wiki-presence {
  font-size: 12px;
  color: #f5ce88;
}
.wiki-source {
  font-size: 12px;
  color: #999;
  border-top: 1px solid #39393d;
  padding-top: 20px;
  margin-top: 30px;
}
.wiki-step {
  color: #ffd400;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.wiki-highlight {
  outline: 2px solid #fc5b0a;
  outline-offset: 3px;
}

.ninja-collection-nav {
  width: 100%;
  text-align: left;
  margin-bottom: 12px;
  color: #ff9a66;
  border-color: #fc5b0a55;
}
.ninja-gallery-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 26px 0 20px;
}
.ninja-gallery-tools p { margin: 0; }
.ninja-gallery-filters { display:flex; flex-wrap:wrap; gap:12px; max-width:100%; }
.ninja-filter-label { display:flex; flex-direction:column; gap:5px; color:var(--wiki-muted); font-size:12px; min-width:0; }
.ninja-filter-label select { max-width:100%; text-transform:none; font:inherit; font-size:14px; color:var(--wiki-text); }
.ninja-tribe-badge { align-self:flex-start; margin:0 10px 5px; color:#ffab78; font-size:11px; line-height:1.5; }
.ninja-tribe-identity { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:16px; }
.ninja-tribe-identity .wiki-eyebrow { width:100%; }
.ninja-tribe-identity strong { font-size:20px; }
.ninja-tribe-link { font-size:12px; }
.ninja-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.ninja-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 0 0 20px;
  border: 1px solid var(--wiki-line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--wiki-card);
  color: #fdf9ef;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.ninja-card:hover { border-color: #fc5b0a; background: #2d2926; }
.ninja-card:focus-visible { outline: 2px solid #fc5b0a; outline-offset: 4px; }
.ninja-card strong { margin: 18px 18px 6px; font: 900 clamp(18px, 1.5vw, 23px)/1.2 var(--wiki-display); text-transform: uppercase; }
.ninja-card-identity { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; margin: 18px 18px 6px; }
.ninja-card .ninja-card-identity strong { flex: none; margin: 0; }
.ninja-card small, .ninja-character-name { margin: 0 18px; font-size: 13px; line-height: 1.5; }
.ninja-card-identity .ninja-character-name { min-width: 0; margin: 0; color: #f5d5ba; text-align: left; overflow-wrap: anywhere; }
/* Once a character has a name, that name is the identity and the collection number
   steps back to a supporting detail. The name is prepended, so it is always the
   number's previous sibling, and an unnamed Ninja keeps the number at full strength. */
.ninja-card-identity .ninja-character-name ~ strong { color: #a49c8f; }
.ninja-card-identity.is-name-wrapped .ninja-character-name ~ strong { display:none; }
.ninja-worked { color: var(--wiki-yellow); }
.ninja-portrait {
  aspect-ratio: 1;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #302d2b;
  color: #aaa69f;
  font-size: 12px;
}
.ninja-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ninja-more { display: block; margin: 26px auto 0; }
.ninja-grid ~ .wiki-source { display: block; }
.ninja-detail { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 1fr); gap: 32px; margin-top: 26px; align-items: start; }
.ninja-detail > .ninja-portrait, .ninja-page-identity > .ninja-portrait { border-radius: 14px; }
.ninja-detail .wiki-title { margin-top: 12px; }
.ninja-metadata { min-width: 0; margin-top: 18px; }
.ninja-metadata a { color: #ff9a66; font-size: 13px; line-height: 1.6; }
.ninja-inscription { overflow-wrap: anywhere; color: #aaa69f; font: 11px/1.6 monospace; }
.ninja-traits { display: flex; flex-wrap: wrap; gap: 8px; }
.ninja-traits > div { padding: 8px 12px; background: #29292e; border-radius: 8px; }
.ninja-traits dt { color: #aaa69f; font-size: 11px; }
.ninja-traits dd { margin: 4px 0 0; font-size: 13px; }
.ninja-page-identity { display: grid; grid-template-columns: minmax(120px, 240px) minmax(0, 1fr); align-items: center; gap: 24px; margin: 22px 0; }
.ninja-page-identity .ninja-metadata { margin: 0; }
@media (max-width: 900px) {
  .ninja-detail { grid-template-columns: 1fr; }
  .ninja-detail > .ninja-portrait { max-width: 360px; }
}
@media (max-width: 640px) {
  .ninja-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ninja-card strong { margin: 12px 10px 4px; font-size: 13px; }
  .ninja-card small, .ninja-character-name { margin-left: 10px; margin-right: 10px; font-size: 11px; }
  .ninja-gallery-tools { margin: 20px 0; }
  .ninja-collection-nav { margin-bottom: 0; }
  .ninja-page-identity { grid-template-columns: 100px minmax(0, 1fr); gap: 14px; }
}

/* The reference uses Oldschool Grotesk Heavy for display text, with readable
   regular body copy. Keep the real variable font at weight 900, not faux bold. */
.wiki-eyebrow, .wiki-step, .wiki-coach h3, .wiki-card h3, .wiki-nav-item {
  font-family: var(--wiki-display);
  font-weight: 900;
  text-transform: uppercase;
}
.wiki-nav-item { font-size: 17px; letter-spacing: .02em; }
.wiki-nav-item small { font: 12px/1.4 -apple-system, "Segoe UI", sans-serif; text-transform: none; }
.wiki-overview-intro .wiki-title { font-size: clamp(44px, 5.5vw, 80px); line-height: 1; margin-bottom: 18px; }
.wiki-overview-description, .ninja-gallery-heading + .wiki-prose {
  color: var(--wiki-muted);
  max-width: 68ch;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.65;
  margin: 0;
}
.wiki-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.wiki-home-introduction { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; margin: 28px 0 22px; max-width: 1240px; }
.wiki-home-introduction[hidden] { display: none; }
.wiki-home-more { margin-top: 24px; }
.wiki-home-introduction h2 { color: var(--wiki-text); font: 700 20px/1.35 -apple-system, "Segoe UI", sans-serif; margin: 0 0 12px; }
.wiki-home-introduction p { color: var(--wiki-muted); font: 15px/1.75 -apple-system, "Segoe UI", sans-serif; margin: 0; }
.wiki-home-introduction > section { min-width: 0; }
.wiki-home-art { width: 50%; margin: 0 0 16px; }
.wiki-home-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--wiki-line); box-sizing: border-box; border-radius: 10px; background: #171717; }
@media (max-width: 760px) {
  .wiki-home-introduction { grid-template-columns: minmax(0,1fr); gap: 22px; margin-top: 24px; }
}
.wiki-article-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--wiki-line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--wiki-card);
  color: var(--wiki-text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms;
}
.wiki-article-card:hover { border-color: #ff4d08; }
.wiki-article-card:focus-visible, .wiki-btn:focus-visible { outline: 2px solid var(--wiki-yellow); outline-offset: 3px; }
.wiki-cover { position: relative; flex: none; width: 100%; aspect-ratio: 1; background: #ff4d08; overflow: hidden; }
.wiki-cover img, .wiki-article-art img, .wiki-location-preview img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.wiki-cover-loading { background: #28251e; }
.wiki-cover-loading::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, #28251e 25%, #39342b 50%, #28251e 75%); background-size: 200% 100%; animation: wiki-cover-wait 1.6s ease-in-out infinite; }
.wiki-cover-loading img { opacity: 0; }
.wiki-cover-ready img { opacity: 1; transition: opacity .32s ease; }
@keyframes wiki-cover-wait { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .wiki-cover-loading::before { animation: none; }
  .wiki-cover-ready img { transition: none; }
}
.wiki-cover-text { display: grid; place-items: center; padding: 24px; background: #28251e; }
.wiki-cover-placeholder { font: 900 clamp(24px, 3vw, 42px)/1.1 var(--wiki-display); text-transform: uppercase; color: #f5d891; }
.wiki-article-card-body { padding: 20px 18px 24px; }
.wiki-article-card h2 { font: 900 clamp(18px, 1.5vw, 24px)/1.5 var(--wiki-display); text-transform: uppercase; margin: 0 0 8px; overflow-wrap: anywhere; }
.wiki-canon { display: inline-block; font: 900 13px/1.3 var(--wiki-display); text-transform: uppercase; letter-spacing: .08em; color: #121212; background: var(--wiki-yellow); border-radius: 999px; padding: 4px 10px; margin-left: 7px; vertical-align: middle; }
.wiki-card-detail { color: var(--wiki-yellow); font-size: 14px; font-weight: 600; margin: 0 0 5px; }
.wiki-card-excerpt { margin: 0; color: #9a9388; font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.wiki-article-art { position: relative; float: right; width: min(34%, 360px); aspect-ratio: 1; margin: 0 0 28px 32px; background: #ff4d08; border-radius: 18px; overflow: hidden; }
.wiki-article-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ninja-gallery-heading .wiki-title { font-size: clamp(38px, 4.7vw, 70px); line-height: 1; }
.ninja-gallery-tools { margin-top: 28px; }
@media (max-width: 1100px) {
  .wiki-nav { gap: 8px; padding: 14px 20px; }
  #wiki-browse { order: 3; }
  .wiki-overview-grid, .ninja-grid { gap: 14px; }
  .wiki-article-card-body { padding: 15px 14px 20px; }
  .wiki-canon { margin-left: 4px; font-size: 11px; padding: 3px 8px; }
}
@media (max-width: 900px) {
  .wiki-overview-grid, .ninja-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wiki-editor { grid-template-columns: 1fr; }
  .wiki-overview-intro .wiki-title { font-size: 56px; }
  .wiki-article-card h2, .ninja-card strong { font-size: 23px; }
}
@media (max-width: 640px) {
  #wikimodal { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 12px; }
  .wiki-nav { padding: 12px; gap: 8px; }
  .wiki-sections { flex: 1; flex-wrap: nowrap; padding-right: 36px; gap: 6px; }
  .wiki-sections .wiki-btn { font-size: 12px; padding: 7px 10px; white-space: nowrap; }
  #wiki-browse { order: 3; font-size: 12px; }
  #wiki-ai-account[open] { top:24px; right:24px; width:calc(100vw - 48px); max-height:calc(100dvh - 48px); font-size:11px; }
  #wiki-main-content { padding: 28px 16px 40px; }
  .wiki-overview-intro .wiki-title { font-size: clamp(36px, 10vw, 54px); }
  .wiki-overview-description, .ninja-gallery-heading + .wiki-prose { font-size: 15px; }
  .wiki-overview-grid { gap: 12px; margin-top: 26px; }
  .wiki-article-card { border-radius: 14px; }
  .wiki-article-card-body { padding: 12px; }
  .wiki-article-card h2, .ninja-card strong { font-size: 18px; }
  .wiki-card-excerpt { font-size: 12px; }
  .wiki-canon { margin: 0 0 0 5px; font-size: 11px; }
  .wiki-card-detail { font-size: 12px; }
  .wiki-article-art { float: none; width: min(100%, 360px); margin: 20px 0; }
  .wiki-diff { grid-template-columns: 1fr; }
  .wiki-prose { font-size: 15px; }
  .ninja-gallery-heading .wiki-title { font-size: 38px; }
}

/* Compact community-wiki navigation and topic directories. */
/* The masthead is IP School's and the AI Studio's (view-masthead.css); the section tabs sit under it. */
.wiki-nav { display: block; padding: 0; border-bottom: 0; }
/* Character pages keep only the masthead above their own page tabs. */
#wikimodal:has(.engine-host.engine-character-home) .wiki-sections { display:none; }
/* Every character page offers one way back to wherever its Ninja was opened. */
#wiki-home { display:none; }
#wikimodal:has(.engine-host.engine-character-home, .ninja-showcase, .wiki-restricted-character) #wiki-home { display:inline-block; }
/* Workshop steps hide the masthead, so they carry the same return control themselves. */
.wiki-wizard-back { display:none; flex:none; align-self:flex-end; margin:16px 24px 0; }
#wikimodal:has(.engine-host:not(.engine-character-home)) .wiki-nav { display:none; }
#wikimodal:has(.engine-host:not(.engine-character-home)) .wiki-wizard-back { display:block; }
#wikimodal:has(.engine-host:not(.engine-character-home)) #wiki-main-content { padding-top:16px; }
.wiki-searchbox { position:relative; grid-column:2; width:100%; min-width:0; }
.wiki-searchbox svg { position:absolute; z-index:1; left:16px; top:50%; width:17px; height:17px; transform:translateY(-50%); fill:none; stroke:var(--wiki-muted); stroke-width:1.8; stroke-linecap:round; pointer-events:none; }
.wiki-searchbox:focus-within svg { stroke:var(--wiki-text); }
.wiki-sections { display: flex; flex-wrap: nowrap; gap: 24px; padding: 0 28px; border-bottom: 1px solid var(--wiki-line); overflow-x: auto; scrollbar-width: none; }
.wiki-sections .wiki-btn { flex: none; padding: 12px 0 13px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; font-size: 14px; white-space: nowrap; color: var(--wiki-muted); letter-spacing: .03em; }
.wiki-sections .wiki-btn:hover { color: var(--wiki-text); }
.wiki-sections .wiki-btn[aria-pressed="true"] { color: var(--wiki-yellow); border-bottom-color: var(--wiki-yellow); }
#wiki-browse { order: 0; margin-left: auto; }
#wiki-main-content { padding: 26px 28px 40px; }
.wiki-overview-intro .wiki-title, .ninja-gallery-heading .wiki-title { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; margin-bottom: 10px; }
.wiki-overview-description, .ninja-gallery-heading + .wiki-prose { font-size: 15px; line-height: 1.6; max-width: 85ch; }
.wiki-eyebrow { font-size: 11px; margin-bottom: 8px; }
.wiki-home-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(440px, 1fr); align-items: start; gap: 48px; }
.wiki-home-summary { min-width: 0; }
.wiki-character-cta { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); align-items: center; gap: 28px; margin-bottom: 28px; padding: 20px 24px; border: 1px solid #5a3c26; border-radius: 14px; background: #201b16; }
.wiki-character-cta h2 { margin: 0; font: 900 28px/1.1 var(--wiki-display); text-transform: uppercase; }
.wiki-character-cta p { margin: 8px 0 14px; font-size: 14px; line-height: 1.5; color: var(--wiki-muted); }
.wiki-character-cta .primary { padding: 10px 18px; font-size: 15px; }
.wiki-character-picks { min-width: 0; }
.wiki-character-picks h3 { margin: 0 0 12px; color: #fc8b52; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.wiki-character-pick-list { display: flex; gap: 12px; overflow-x: auto; padding: 4px; margin: -4px; scrollbar-width: thin; scrollbar-color: #795236 transparent; }
.wiki-character-pick { flex: 0 0 96px; width: 96px; height: 96px; min-width: 0; padding: 0; border: 0; border-radius: 16px; background: none; }
.wiki-character-pick .ninja-portrait { width: 100%; height: 100%; margin: 0; border-radius: inherit; }
.wiki-character-pick:hover { outline: 2px solid #fc8b52; outline-offset: 2px; }
.wiki-character-cta .wiki-character-empty { margin: 0; }
@media(min-width:1101px) { .wiki-character-pick { flex: 1 1 0; width: auto; max-width: 96px; height: auto; aspect-ratio: 1; } }
/* Tablets keep the invitation and the Ninjas waiting for a story side by side, with smaller portraits. */
@media(min-width:641px) and (max-width:1100px) {
  .wiki-character-cta { grid-template-columns: minmax(240px,.8fr) minmax(0,1.2fr); gap: 24px; }
  .wiki-character-pick { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 14px; }
}
@media(max-width:640px) { .wiki-character-cta { grid-template-columns: 1fr; gap: 20px; } }
/* Phones: the section tabs already name the page, so Characters, Places & Lore, All pages and
   Recent changes drop their title and subtitle (a header left with nothing else goes too). */
@media(max-width:480px) {
  :is(.wiki-section-intro, .ninja-gallery-heading) :is(.wiki-title, .wiki-overview-description, .ninja-gallery-description) { display: none; }
  .wiki-section-intro:not(:has(> :not(.wiki-title, .wiki-overview-description))), .ninja-gallery-heading { display: none; }
  .ninja-view-repeat, .ninja-gallery-tools:not(:has(> :not(.ninja-view-repeat))) { display: none; }
}
@media(max-width:900px) { .wiki-character-cta-more { display: none; } }
/* The Ninjas waiting for a story scroll out to the card's own edge rather than stopping at its padding:
   on the right beside the invitation, and on both sides once the list runs the card's full width. */
@media(max-width:1100px) { .wiki-character-pick-list { margin-right: -24px; padding-right: 24px; } }
@media(max-width:640px) { .wiki-character-pick-list { margin-left: -24px; padding-left: 24px; scroll-padding-inline: 24px; } }
@media(max-width:620px) { .wiki-character-pick-list { margin-inline: -18px; padding-inline: 18px; scroll-padding-inline: 18px; } }
@media(max-width:620px) {
  .wiki-character-cta { padding: 18px; }
}
.wiki-home-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-top: 4px; }
.wiki-home-stats .wiki-btn { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; text-transform: none; letter-spacing: 0; }
.wiki-home-stats strong { font: 900 clamp(52px, 5vw, 72px)/1 var(--wiki-display); color: var(--wiki-yellow); }
.wiki-home-stats span { color: var(--wiki-muted); font: 18px/1.4 -apple-system, "Segoe UI", sans-serif; }
.wiki-section-title { font: 900 22px/1.2 var(--wiki-display); text-transform: uppercase; margin: 24px 0 14px; }
.wiki-discover-title { font-size: clamp(40px, 4vw, 56px); margin: 36px 0 22px; }
.wiki-overview-grid, .ninja-grid { gap: 12px; margin-top: 0; }
.wiki-overview-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.ninja-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.wiki-article-card, .ninja-card { border-radius: 10px; }
.wiki-article-card-body { padding: 11px 10px 13px; }
.wiki-article-card h2 { font-size: 17px; line-height: 1.2; margin-bottom: 7px; }
.wiki-canon { padding: 2px 6px; margin: 0 0 0 5px; font-size: 9px; letter-spacing: .04em; }
.wiki-card-detail { font-size: 11px; margin-bottom: 5px; }
.wiki-card-excerpt { font-size: 12px; line-height: 1.45; -webkit-line-clamp: 2; }
.wiki-cover-placeholder { font-size: 22px; }
.wiki-cover-text { padding: 14px; }
.wiki-home-columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 24px; margin-top: 24px; }
.wiki-home-panel { min-width: 0; border: 1px solid var(--wiki-line); border-radius: 12px; padding: 18px; background: #181818; }
.wiki-home-panel .wiki-section-title { margin-top: 0; }
.wiki-contribute .wiki-muted { margin: 10px 0 18px; }
.wiki-contribute .wiki-muted:last-child { margin-bottom: 0; }
.wiki-text-link { margin-top: 12px; }
.wiki-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.wiki-activity-intro .wiki-title { margin-bottom: 0; font-size: clamp(30px, 3vw, 42px); }
/* Recent changes lists the newest first, under a row of plain area tabs. */
.wiki-changes { width: 100%; }
.wiki-changes > .wiki-muted { margin: 18px 0 12px; }
.wiki-change-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.wiki-change-filter { padding: 5px 11px; border-radius: 999px; font-size: 13px; }
.wiki-change-filter[aria-pressed="true"] { border-color: #f3efe8; background: #f3efe8; color: #141414; }
.wiki-changes .wiki-change-filters { gap: 4px; margin: 14px 0 4px; }
.wiki-changes .wiki-btn.wiki-change-filter { padding: 6px 12px; border: 0; background: none; color: var(--wiki-muted); font: 500 14px/1.2 -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; text-transform: none; }
.wiki-changes .wiki-btn.wiki-change-filter:hover { background: #1f1e1c; color: var(--wiki-text); }
.wiki-changes .wiki-btn.wiki-change-filter[aria-pressed="true"] { background: #2b2a27; color: var(--wiki-text); }
.wiki-change-day { margin: 26px 0 0; padding: 0 8px 8px; border-bottom: 1px solid var(--wiki-line); color: var(--wiki-text); font: 600 14px/1.3 -apple-system, "Segoe UI", sans-serif; }
/* Each day's changes fill two columns, or three on a wide screen, reading left to right. */
.wiki-change-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); column-gap: 32px; list-style: none; padding: 0; margin: 0; }
/* Each change shows a picture, what happened and when, then who did it and where. The whole row opens it. */
.wiki-change { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "thumb body time" "thumb by area"; align-items: start; gap: 4px 12px; padding: 10px 8px; border-bottom: 1px solid #232220; }
.wiki-change:hover { background: #1a1918; }
.wiki-change-time { grid-area: time; justify-self: end; color: var(--wiki-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wiki-change-thumb { grid-area: thumb; position: relative; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 8px; background: #1f1e1c; }
.wiki-change-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wiki-change-thumb svg { width: 18px; height: 18px; fill: none; stroke: #8d877e; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wiki-change[data-area="character"] .wiki-change-thumb img { image-rendering: pixelated; }
.wiki-change-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; background: rgb(0 0 0 / .35); }
.wiki-change-body { grid-area: body; min-width: 0; }
.wiki-change-heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0; }
.wiki-btn.wiki-change-title, .wiki-btn.wiki-change-title:hover { flex: 0 1 auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--wiki-text); text-align: left; font: 600 15px/1.35 -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; text-transform: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wiki-change-title::after { content: ''; position: absolute; inset: 0; }
.wiki-change-kind { flex: none; color: var(--wiki-muted); font-size: 13px; }
.wiki-change-summary { margin: 2px 0 0; overflow: hidden; color: #b3ada4; font-size: 14px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.wiki-change-by { grid-area: by; display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; color: #d6d0c7; font-size: 13px; }
.wiki-change-by span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-change-avatar { width: 18px; height: 18px; flex: none; border-radius: 50%; object-fit: cover; }
.wiki-change-area { grid-area: area; color: var(--wiki-muted); font-size: 12px; text-align: right; white-space: nowrap; }
/* On a phone the changes stack in one column and a summary can take two lines. */
@media (max-width: 760px) {
  .wiki-change { padding: 10px 4px; }
  .wiki-change-day { padding-inline: 4px; }
  .wiki-change-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
}
.wiki-entry-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--wiki-line); border-radius: 0; color: var(--wiki-text); background: none; text-align: left; text-transform: none; letter-spacing: 0; }
.wiki-entry-row:hover { background: #ffffff05; color: var(--wiki-yellow); }
.wiki-entry-row > span:first-child { min-width: 0; }
.wiki-entry-row strong { font: 900 18px/1.2 var(--wiki-display); text-transform: uppercase; }
.wiki-entry-row small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 12px/1.5 -apple-system, "Segoe UI", sans-serif; display: block; max-width: 60ch; margin-top: 4px; }
.wiki-entry-arrow { color: var(--wiki-yellow); flex: none; }
.wiki-entry-row > .wiki-entry-thumb { flex: none; width: 40px; height: 40px; border-radius: 6px; font-size: 0; }
.wiki-entry-row > .wiki-entry-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wiki-entry-row > .wiki-entry-thumb + span { flex: 1; }
.wiki-directory.wiki-all-pages { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 20px; }
.wiki-all-pages .wiki-entry-row strong { font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
/* All pages: title on the left, the count and ways to narrow the list on the right, then
   a row of letters that stays in view while the A–Z list scrolls under it. */
.wiki-overview-intro.wiki-all-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 40px; }
.wiki-all-intro > .wiki-title { grid-column: 1; margin-bottom: 0; }
.wiki-all-intro > .wiki-overview-description { grid-column: 1; }
.wiki-all-intro > .wiki-all-tools { grid-column: 2; grid-row: 1 / span 2; }
.wiki-all-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.wiki-all-filter input { box-sizing: border-box; width: min(320px, 100%); height: 34px; padding: 0 14px; border: 1px solid #3a3a3f; border-radius: 999px; background: #161618; color: var(--wiki-text); font: 14px/1 -apple-system, "Segoe UI", sans-serif; }
.wiki-all-filter input:focus { outline: none; border-color: #fc5b0a; box-shadow: 0 0 0 3px #fc5b0a33; }
.wiki-all-kinds { justify-content: flex-end; margin: 0; }
.wiki-all-count { margin: 0; font-size: 14px; }
.wiki-az { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 2px; margin: 18px 0 4px; padding: 8px 0; border-bottom: 1px solid var(--wiki-line); background: var(--wiki-bg); }
.wiki-az-jump { min-width: 28px; padding: 5px 4px; border: 0; border-radius: 6px; background: none; color: var(--wiki-text); font: 900 16px/1 var(--wiki-display); }
.wiki-az-jump:hover:not(:disabled) { background: #2a2926; color: var(--wiki-yellow); }
.wiki-az-jump:disabled { color: #4a4640; cursor: default; }
/* Letters flow down and across like a printed index, so short letters don't leave gaps. */
.wiki-az-groups { columns: 4 240px; column-gap: 28px; }
.wiki-az-group { break-inside: avoid; padding-top: 16px; }
.wiki-az-group .wiki-directory.wiki-all-pages { grid-template-columns: minmax(0, 1fr); }
.wiki-az-letter { margin: 0 0 2px; color: var(--wiki-yellow); font: 900 26px/1 var(--wiki-display); }
.wiki-map-link { margin-top: 14px; }
.ninja-gallery-tools { margin: 20px 0 14px; }
.ninja-card-shell { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--wiki-line); border-radius: 10px; overflow: hidden; background: var(--wiki-card); }
.ninja-card-shell .ninja-card { width: 100%; flex: 1; border: 0; border-radius: 0; padding-bottom: 12px; }
.ninja-card strong { margin: 11px 10px 4px; font-size: 17px; }
.ninja-card small, .ninja-character-name { margin-left: 10px; margin-right: 10px; font-size: 11px; }
.wiki-lock-control { font-size: 12px; color: #ffd5b5; border-color: #775134; }
.wiki-lock-notice { padding: 10px 14px; border-left: 3px solid #ba875c; background: #ba875c12; color: #d8bea8; font-size: 13px; line-height: 1.5; }
@media (max-width: 1100px) {
  .wiki-overview-grid, .ninja-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .wiki-home-heading { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* The counts lead, above the welcome. */
  .wiki-home-stats { order: -1; padding-top: 0; }
  .wiki-overview-grid, .ninja-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wiki-searchbox { grid-column:1 / -1; grid-row:2; }
  .wiki-home-columns { grid-template-columns: 1fr; gap: 16px; }
  .wiki-entry-row small { max-width: 42ch; }
  .wiki-directory.wiki-all-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wiki-wizard-back { margin:12px 14px 0; }
  .wiki-sections { gap: 20px; padding: 0 14px; }
  .wiki-sections .wiki-btn { font-size: 13px; padding: 10px 0 11px; }
  #wiki-main-content { padding: 22px 14px 32px; }
  .wiki-overview-grid, .ninja-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wiki-home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .wiki-home-stats strong { font-size: clamp(36px, 10.8vw, 42px); }
  .wiki-home-stats .wiki-btn { gap: 6px; }
  .wiki-home-stats span { font-size: 14px; }
  .wiki-discover-title { font-size: 36px; }
  .wiki-directory, .wiki-directory.wiki-all-pages { grid-template-columns: 1fr; }
  .wiki-overview-intro.wiki-all-intro { grid-template-columns: minmax(0, 1fr); }
  .wiki-all-intro > .wiki-all-tools { grid-column: 1; grid-row: auto; align-items: stretch; }
  .wiki-az { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .wiki-az-jump { flex: none; }
  .wiki-all-filter input { width: 100%; }
  .wiki-all-kinds { justify-content: flex-start; }
  .wiki-entry-row small { max-width: 30ch; }
}

.wiki-world-filters { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.wiki-world-filters .wiki-btn { font-size:13px; }
.wiki-world-filters .wiki-btn[aria-pressed="true"] { border-color:var(--wiki-yellow); color:var(--wiki-yellow); background:#ffd40010; }

/* Character browsing, current listings, number ranges and tribes. */
.ninja-gallery-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.ninja-gallery-heading .wiki-title { margin-bottom:8px; }
.ninja-gallery-description { color:var(--wiki-muted); font-size:15px; line-height:1.5; margin:0; }
.ninja-browse-bar { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:12px; margin-bottom:24px; }
.ninja-view-nav { position:relative; display:flex; gap:5px; width:100%; height:64px; box-sizing:border-box; padding:5px; border:1px solid #34322f; border-radius:12px; background:#1d1c1a; }
.ninja-view-tabs { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:5px; flex:1; min-width:0; margin:0; overflow:hidden; }
.ninja-view-tabs .wiki-btn[hidden], .ninja-view-more[hidden], .ninja-view-menu[hidden] { display:none; }
.ninja-view-more { flex:none; display:flex; }
.ninja-view-more-button.wiki-btn { display:flex; align-items:center; gap:6px; min-height:0; padding:0 14px; border:0; border-radius:8px; background:transparent; color:#aaa69f; font:600 15px/1.4 -apple-system,"Segoe UI",sans-serif; text-transform:none; letter-spacing:0; white-space:nowrap; }
.ninja-view-more-button.wiki-btn:hover, .ninja-view-more-button[aria-expanded="true"] { color:#fff; background:#ffffff08; }
.ninja-view-more-button.is-selected.wiki-btn { background:var(--wiki-yellow); color:#171611; }
.ninja-view-more-chevron { font-size:11px; }
.ninja-view-menu { position:absolute; z-index:20; top:calc(100% + 6px); right:0; display:grid; min-width:210px; padding:5px; border:1px solid #34322f; border-radius:12px; background:#1d1c1a; box-shadow:0 12px 32px #0008; }
.ninja-view-menu .wiki-btn { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:0; padding:10px 12px; border:0; border-radius:8px; background:transparent; color:#d8d3ca; font:600 15px/1.4 -apple-system,"Segoe UI",sans-serif; text-align:left; text-transform:none; letter-spacing:0; }
.ninja-view-menu .wiki-btn:hover, .ninja-view-menu .wiki-btn:focus-visible { background:#ffffff0d; color:#fff; outline:none; }
.ninja-view-menu .wiki-btn[aria-current] { color:var(--wiki-yellow); }
.ninja-card[href] { text-decoration:none; }
.ninja-listing-price { color:var(--wiki-yellow); font-size:17px; font-weight:700; margin:8px 12px 0; }
.ninja-listing-updated { font-size:12px; margin:0 0 12px; }
.ninja-showcase { max-width:1320px; margin:0 auto; padding:0 0 56px; overflow-wrap:anywhere; }
#wikimodal:has(.ninja-showcase) #wiki-main-content { padding-top:24px; }
#wikimodal:has(.ninja-showcase) .wiki-sections { display:none; }
.ninja-showcase-back { margin-bottom:24px; }
.ninja-showcase-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(24px,5vw,72px); align-items:center; margin-bottom:40px; }
.ninja-showcase-art { position:relative; border-radius:24px; overflow:hidden; background:#ff5100; box-shadow:0 24px 70px #0005; }
.ninja-showcase-art .ninja-portrait { aspect-ratio:1; }
.ninja-showcase-eyebrow { color:#ffb278; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.ninja-showcase-intro > .ninja-showcase-eyebrow { display:flex; flex-wrap:wrap; align-items:center; gap:0 .5em; }
.ninja-showcase-intro h1 { margin:12px 0 18px; font:900 clamp(42px,5vw,80px)/1.02 var(--wiki-display); letter-spacing:-.025em; }
.ninja-showcase h2 { font:700 clamp(23px,2vw,32px)/1.2 var(--wiki-display); margin:0 0 14px; }
.ninja-showcase-intro h2 { margin-top:28px; }
.ninja-showcase-chips { display:flex; flex-wrap:wrap; gap:8px; }
.ninja-showcase-chips span { padding:7px 12px; border:1px solid #ffffff24; border-radius:99px; color:#e9ddcc; font-size:13px; }
.ninja-showcase-lead { color:#c6bfb4; font-size:18px; line-height:1.65; white-space:pre-line; }
.ninja-showcase-price { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:4px; color:var(--wiki-yellow); font-size:18px; font-weight:700; margin:28px 0 14px; }
/* The note hangs from the price line's left edge, so it never runs off a phone screen. */
.ninja-price-info-button { display:inline-grid; place-items:center; width:32px; height:32px; margin:-6px 0; padding:0; border:0; border-radius:50%; background:transparent; color:var(--wiki-muted); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ninja-price-info-button:hover,.ninja-price-info.is-open .ninja-price-info-button { color:var(--wiki-text); }
.ninja-price-info-button:focus-visible { outline:2px solid var(--wiki-yellow); outline-offset:-2px; }
.ninja-price-info-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.ninja-price-note { display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:20; box-sizing:border-box; width:min(340px,100%); padding:12px 14px; border:1px solid #ffffff24; border-radius:10px; background:#161412; box-shadow:0 8px 24px #000a; color:#e9e2d8; font-size:13px; font-weight:400; line-height:1.5; }
.ninja-price-info-button:hover + .ninja-price-note,.ninja-price-info-button:focus-visible + .ninja-price-note,.ninja-price-info.is-open .ninja-price-note { display:block; }
.ninja-showcase-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:max-content; max-width:100%; gap:12px; }
.ninja-showcase-actions .wiki-btn { display:inline-flex; justify-content:center; align-items:center; box-sizing:border-box; width:100%; min-width:0; min-height:44px; text-align:center; text-decoration:none; padding:10px 18px; }
.ninja-showcase-actions .ninja-showcase-develop { gap:8px; border:1px solid #fff; }
.ninja-showcase-develop svg { width:17px; height:17px; fill:currentColor; flex:none; }
.ninja-showcase-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ninja-showcase-section { border:1px solid #ffffff16; background:#ffffff04; border-radius:18px; padding:clamp(20px,3vw,32px); margin-bottom:18px; min-width:0; }
.ninja-showcase-section p { color:#c6bfb4; line-height:1.75; white-space:pre-line; margin:0; }
.ninja-showcase-section .ninja-showcase-eyebrow { color:#ffb278; margin-bottom:12px; }
.ninja-showcase-facts .ninja-showcase-section { background:radial-gradient(ellipse at top left,color-mix(in srgb,var(--fact-accent) 10%,transparent),transparent 75%),#ffffff04; border-color:color-mix(in srgb,var(--fact-accent) 18%,#262626); box-shadow:inset 0 1px 0 #ffffff06; }
.ninja-showcase-fact-heading { display:flex; align-items:center; gap:18px; margin-bottom:22px; }
.ninja-showcase-fact-heading > div { min-width:0; }
.ninja-showcase-fact-icon { display:grid; place-items:center; flex:none; width:64px; height:64px; border-radius:18px; color:var(--fact-accent); background:color-mix(in srgb,var(--fact-accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--fact-accent) 24%,transparent); box-shadow:0 8px 28px #0002,inset 0 1px 0 #ffffff0a; }
.ninja-showcase-fact-icon svg { width:34px; height:34px; fill:currentColor; }
.ninja-showcase-fact-heading .ninja-showcase-eyebrow { color:var(--fact-accent); margin-bottom:7px; font-size:11px; }
.ninja-showcase-fact-heading h2 { margin:0; }
.ninja-showcase-relationships { background:radial-gradient(ellipse at top left,#edb46a0b,transparent 65%),#ffffff03; }
.ninja-showcase-relationships[data-direction="incoming"] { background:radial-gradient(ellipse at top left,#baabff0e,transparent 65%),#ffffff03; }
.ninja-showcase-relationships[data-direction="incoming"] .ninja-showcase-eyebrow { color:#c3b7f4; }
.ninja-connections-heading { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:26px; }
.ninja-connections-heading > div:first-child { flex:1 1 420px; min-width:0; }
.ninja-connections-heading h2 { margin-bottom:10px; }
.ninja-connections-heading p:not(.ninja-showcase-eyebrow) { max-width:660px; font-size:15px; }
.ninja-connections-counts { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:3px; }
.ninja-connections-counts span,.ninja-connections-total { border:1px solid color-mix(in srgb,var(--bond-accent,#c3b7f4) 24%,transparent); border-radius:99px; background:color-mix(in srgb,var(--bond-accent,#c3b7f4) 7%,transparent); padding:7px 12px; color:var(--bond-accent,#c3b7f4); font-size:12px; line-height:1.4; font-weight:600; }
.ninja-showcase-bonds { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:16px; }
.ninja-showcase-bond { min-width:0; display:flex; }
.ninja-bond-card { box-sizing:border-box; width:100%; min-width:0; padding:18px; border:1px solid color-mix(in srgb,var(--bond-accent) 20%,#252420); border-radius:16px; background:#191918; color:#f3eee5; text-decoration:none; transition:transform .18s,border-color .18s,box-shadow .18s; }
a.ninja-bond-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--bond-accent) 60%,#252420); box-shadow:0 12px 28px #0003; }
.ninja-bond-identity { display:grid; grid-template-columns:104px minmax(0,1fr); gap:16px; align-items:center; }
.ninja-bond-portrait.ninja-portrait { display:grid; place-items:center; width:104px; height:104px; aspect-ratio:1; border-radius:14px; overflow:hidden; box-shadow:0 6px 20px #0003; color:#e9ddcc; font:700 22px/1 var(--wiki-display); }
.ninja-bond-who { min-width:0; }
.ninja-bond-number { display:block; color:#a9a59b; font-size:11px; letter-spacing:.07em; text-transform:uppercase; margin-bottom:6px; }
.ninja-bond-who h3 { margin:0 0 8px; font:700 23px/1.12 var(--wiki-display); }
.ninja-bond-stance { display:inline-flex; align-items:center; padding:4px 9px; border-radius:6px; color:var(--bond-accent); background:color-mix(in srgb,var(--bond-accent) 10%,transparent); font-size:11px; font-weight:650; line-height:1.4; }
.ninja-bond-role { display:block; margin-top:10px; color:var(--bond-accent); font:700 17px/1.2 var(--wiki-display); }
.ninja-connections-status p { font-size:14px; }
.ninja-connections-status .wiki-btn,.ninja-connections-more { margin-top:18px; }
@media(max-width:480px) {
  .ninja-showcase-relationships { padding:18px; }
  .ninja-connections-heading { gap:14px; margin-bottom:20px; }
  .ninja-bond-card { padding:14px; }
  .ninja-bond-identity { grid-template-columns:88px minmax(0,1fr); gap:14px; }
  .ninja-bond-portrait.ninja-portrait { width:88px; height:88px; border-radius:12px; }
  .ninja-bond-who h3 { font-size:21px; }
}
@media(prefers-reduced-motion:reduce) {
  .ninja-bond-card { transition:none; }
  a.ninja-bond-card:hover { transform:none; }
}
.ninja-showcase details { border-top:1px solid #ffffff16; padding:18px 0; }
.ninja-showcase summary { cursor:pointer; font-size:18px; font-weight:700; }
.ninja-showcase details p { margin-top:16px; }
.ninja-showcase :is(a,button,summary):focus-visible { outline:2px solid var(--wiki-yellow); outline-offset:4px; }
@media(max-width:760px) {
  .ninja-showcase-hero { grid-template-columns:1fr; gap:28px; }
  .ninja-showcase-art { max-width:480px; width:100%; margin:auto; }
  .ninja-showcase-facts { grid-template-columns:1fr; gap:0; }
  .ninja-showcase-actions { grid-template-columns:1fr; }
  .ninja-showcase-intro h1 { font-size:48px; }
}
.ninja-view-tabs .wiki-btn { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:0; padding:5px 8px; border:0; border-radius:8px; background:transparent; color:#aaa69f; font:600 15px/1.4 -apple-system,"Segoe UI",sans-serif; text-transform:none; letter-spacing:0; }
.ninja-tab-title { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:3px 6px; min-width:0; max-width:100%; }
.ninja-tab-hot { flex:none; padding:3px 5px; border-radius:4px; background:#fff; color:#171611; font-size:9px; font-weight:800; line-height:1; letter-spacing:.04em; }
.ninja-tab-count { padding:2px 7px; border-radius:6px; background:#ffffff0a; font-size:12px; line-height:1.4; font-variant-numeric:tabular-nums; }
.ninja-view-tabs .wiki-btn[aria-selected="true"] .ninja-tab-count { background:#00000012; }
.ninja-view-tabs .wiki-btn:hover { color:#fff; background:#ffffff08; }
.ninja-view-tabs .wiki-btn[aria-selected="true"] { background:var(--wiki-yellow); color:#171611; }
.ninja-view-tabs .wiki-btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }
#ninja-gallery-panel { min-width:0; }
#ninja-gallery-panel .ninja-gallery-tools { margin:0 0 18px; align-items:center; gap:16px; }
.ninja-view-title { margin:0 0 5px; font:700 21px/1.25 -apple-system,"Segoe UI",sans-serif; }
.ninja-view-description { margin:0; color:var(--wiki-muted); font-size:13px; line-height:1.5; }
.ninja-range-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ninja-range-controls .wiki-btn, .ninja-tribe-controls .wiki-btn { padding:9px 14px; border-radius:8px; font:500 13px/1.4 -apple-system,"Segoe UI",sans-serif; text-transform:none; letter-spacing:0; }
.ninja-range-controls .wiki-btn:disabled { opacity:.3; cursor:default; }
.ninja-number-browser { display:grid; grid-template-columns:minmax(210px,1.5fr) minmax(0,7fr) minmax(196px,1.5fr); align-items:center; gap:20px; width:100%; min-width:0; box-sizing:border-box; }
.ninja-number-jump, .ninja-number-paging { display:flex; align-items:center; gap:10px; margin:0; }
.ninja-number-label { color:var(--wiki-muted); font-size:16px; white-space:nowrap; margin-right:2px; }
.ninja-number-field { display:flex; align-items:center; gap:6px; padding:3px 3px 3px 9px; border:1px solid #44413b; border-radius:7px; background:#151514; color:var(--wiki-muted); }
.ninja-number-field:focus-within { outline:2px solid var(--wiki-yellow); outline-offset:2px; }
.ninja-number-field input { width:60px; min-width:0; padding:4px 0; border:0; outline:0; background:transparent; color:var(--wiki-text); font:600 17px/1.4 -apple-system,"Segoe UI",sans-serif; appearance:textfield; -moz-appearance:textfield; }
.ninja-number-field input::-webkit-inner-spin-button, .ninja-number-field input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.ninja-number-browser .wiki-btn { display:flex; align-items:center; justify-content:center; height:42px; min-width:42px; padding:0 10px; border-radius:7px; font-size:17px; }
.ninja-number-field .ninja-number-go { height:34px; min-width:38px; padding:0 9px; border:0; border-radius:4px; background:#302d25; color:var(--wiki-text); font-weight:700; }
.ninja-number-jump .ninja-number-go:hover { background:var(--wiki-yellow); border-color:var(--wiki-yellow); color:#171611; }
.ninja-number-paging { justify-self:end; gap:6px; white-space:nowrap; }
.ninja-range-current { min-width:100px; color:var(--wiki-text); text-align:center; white-space:nowrap; font:600 16px/1.4 -apple-system,"Segoe UI",sans-serif; font-variant-numeric:tabular-nums; }
.ninja-number-scrubber { display:flex; align-items:center; gap:12px; height:42px; min-width:0; box-sizing:border-box; padding:0 14px; border:1px solid #383531; border-radius:7px; background:#151514; }
.ninja-number-scrubber::before, .ninja-number-scrubber::after { display:none; }
.ninja-number-track { position:relative; isolation:isolate; flex:1; min-width:0; }
.ninja-number-track::before { content:""; position:absolute; top:8px; left:9px; right:9px; height:4px; border-radius:4px; background:linear-gradient(to right,var(--wiki-yellow) var(--range-progress),#383531 var(--range-progress)); }
.ninja-number-marks { position:absolute; z-index:1; inset:0 9px; pointer-events:none; }
.ninja-number-marks span { position:absolute; top:6px; width:8px; height:8px; border-radius:50%; background:#777169; transform:translateX(-50%); }
.ninja-number-marks span.is-passed { background:var(--wiki-yellow); }
.ninja-number-slider { position:relative; z-index:2; display:block; appearance:none; -webkit-appearance:none; width:100%; height:20px; margin:0; padding:0; background:transparent; cursor:pointer; }
.ninja-number-slider::-webkit-slider-runnable-track { height:4px; background:transparent; }
.ninja-number-slider::-moz-range-track { height:4px; background:transparent; }
.ninja-number-slider::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:18px; height:18px; margin-top:-7px; border:3px solid var(--wiki-bg); border-radius:50%; background:var(--wiki-yellow); box-shadow:0 0 0 1px var(--wiki-yellow); }
.ninja-number-slider::-moz-range-thumb { width:12px; height:12px; border:3px solid var(--wiki-bg); border-radius:50%; background:var(--wiki-yellow); box-shadow:0 0 0 1px var(--wiki-yellow); }
.ninja-number-slider:focus-visible { outline:2px solid var(--wiki-yellow); outline-offset:3px; border-radius:4px; }
.ninja-number-scrubber .ninja-number-end { flex:none; height:auto; min-width:0; padding:0; border:0; background:none; color:var(--wiki-muted); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ninja-number-scrubber .ninja-number-end:hover { color:var(--wiki-yellow); }
.ninja-grid + .ninja-range-controls { justify-content:center; margin-top:24px; }
.ninja-tribe-controls { display:flex; flex-wrap:wrap; gap:8px; }
.ninja-tribe-controls select { max-width:100%; }
#ninja-gallery-panel .ninja-card-shell { border-color:#383531; }
#ninja-gallery-panel .ninja-card-shell.is-number-target { border-color:var(--wiki-yellow); box-shadow:0 0 0 1px var(--wiki-yellow); }
#ninja-gallery-panel .ninja-card { position:relative; padding-bottom:12px; }
#ninja-gallery-panel .ninja-card-identity { margin:11px 12px 0; }
#ninja-gallery-panel .ninja-card-identity strong { font:600 15px/1.35 -apple-system,"Segoe UI",sans-serif; }
#ninja-gallery-panel .ninja-card-identity .ninja-character-name { color:inherit; font:600 15px/1.35 -apple-system,"Segoe UI",sans-serif; }
/* The level is an LV chip, the same gold-on-dark badge on the showcase eyebrow and in the top-left
   corner of gallery and candidate portraits. */
.ninja-level-badge { display:inline-flex; flex:none; align-items:center; padding:3px 7px; border:1px solid #f9cd6466; border-radius:7px; background:#211c17ed; color:#f9cd64; font:900 11px/1.2 var(--wiki-display); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.ninja-card > .ninja-level-badge { position:absolute; top:10px; left:10px; box-shadow:0 2px 6px #0003; font-size:13px; pointer-events:none; }
#ninja-gallery-panel .wiki-source { display:block; border:0; margin-top:18px; padding:0; }

/* Tribe browsing uses representative portraits and name/count captions,
   with the same spacing, surfaces and type as the character gallery. */
.ninja-tribe-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; }
.ninja-tribe-card.wiki-btn { display:block; min-width:0; overflow:hidden; padding:0; border:1px solid #383531; border-radius:10px; background:var(--wiki-card); text-align:left; text-transform:none; letter-spacing:0; transition:border-color 140ms,background 140ms; }
.ninja-tribe-card.wiki-btn:hover { border-color:#fc5b0a; background:#2d2926; }
.ninja-tribe-card.wiki-btn:focus-visible { outline:2px solid #fc5b0a; outline-offset:4px; }
.ninja-tribe-caption { display:block; padding:11px 12px 12px; color:var(--wiki-text); }
.ninja-tribe-caption strong { display:block; font:600 15px/1.35 -apple-system,"Segoe UI",sans-serif; }
.ninja-tribe-caption small { display:block; margin-top:4px; color:var(--wiki-muted); font:400 12px/1.4 -apple-system,"Segoe UI",sans-serif; }
.ninja-unassigned-link.wiki-btn { display:block; padding:0; border:0; border-radius:0; margin-top:22px; background:none; color:var(--wiki-text); font:500 13px/1.4 -apple-system,"Segoe UI",sans-serif; text-transform:none; letter-spacing:0; }
.ninja-unassigned-link.wiki-btn:hover { color:var(--wiki-yellow); }
.ninja-tribe-source { display:block; margin-top:18px; color:var(--wiki-muted); font-size:12px; }
@media (max-width:1250px) {
  .ninja-number-browser { grid-template-columns:minmax(0,1fr) auto; gap:12px; }
  .ninja-number-scrubber { grid-column:1 / -1; grid-row:2; }
}
@media (max-width:1100px) {
  .ninja-gallery-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .ninja-browse-bar { grid-template-columns:minmax(0,1fr); gap:12px; }
  .ninja-tribe-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .ninja-tribe-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .ninja-gallery-heading { margin-bottom:18px; }
  .ninja-gallery-description { font-size:14px; }
  .ninja-browse-bar { margin-bottom:22px; }
  /* One row of pills; the ones that don't fit fold into the last one, a More dropdown. */
  .ninja-view-nav { height:auto; gap:4px; padding:4px; }
  .ninja-view-tabs { display:flex; gap:4px; }
  .ninja-view-more-button.wiki-btn { height:42px; padding:0 14px; font-size:14px; }
  .ninja-view-tabs .wiki-btn { flex:none; gap:7px; height:42px; padding:0 14px; font-size:14px; white-space:nowrap; }
  .ninja-tab-title { flex-wrap:nowrap; column-gap:6px; }
  .ninja-tab-hot { padding:3px 4px; font-size:9px; }
  .ninja-tab-count { padding:2px 6px; }
  .ninja-view-title { font-size:19px; }
  .ninja-range-controls { gap:6px; }
  .ninja-number-browser { grid-template-columns:minmax(0,1fr) auto; gap:12px 8px; }
  .ninja-number-jump { gap:6px; }
  .ninja-number-label { font-size:14px; }
  .ninja-number-paging { justify-self:end; gap:2px; }
  .ninja-number-browser .wiki-btn { min-width:34px; padding:0 6px; }
  .ninja-number-field { padding:3px 3px 3px 7px; }
  .ninja-number-field input { width:42px; font-size:15px; }
  .ninja-range-current { min-width:88px; font-size:14px; }
  .ninja-number-scrubber { grid-column:1 / -1; grid-row:2; gap:10px; padding:0 12px; }
  .ninja-number-scrubber .ninja-number-end { min-width:0; padding:0; font-size:12px; }
  .ninja-tribe-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}
/* Phones: the jump box and the paging arrows share one row above the slider. */
@media (max-width:520px) {
  .ninja-number-browser { gap:10px 6px; }
  .ninja-range-current { min-width:0; padding:0 4px; }
}
@media (max-width:360px) { .ninja-number-label { display:none; } }
@media (max-width:480px) { .ninja-gallery-heading { display:none; } }

/* The character workshop: one question at a time, with the character always in view. */
.engine-host { --engine-writing-accent: #85e6c5; width: 100%; min-width: 0; max-width: none; margin: 0; }
.engine-question { position: relative; }
/* The rail owns the corner; the menu keeps position:relative purely so the dropdown below still
   anchors to the button and not to the whole step. */
/* Items hang from the rail's top edge rather than stretching to it: the menu stays its own button
   height whatever sits beside it, so a tall neighbour cannot drag the dropdown's box out of shape. */
.engine-rail { position: absolute; top: 22px; right: 0; z-index: 6; display: flex; align-items: flex-start; gap: 10px; }

.engine-layout { display: grid; grid-template-columns: minmax(0,1fr) min(500px,45%); align-items: start; gap: 40px; }
.engine-eyebrow { color: #fc8b52; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }

.engine-lead { font-size: 19px; line-height: 1.6; color: #c6c1b9; }
.engine-hint { color: var(--wiki-muted); font-size: 14px; line-height: 1.6; }
.engine-name { display: block; max-width: 520px; margin: 24px 0; font-weight: 700; }
.engine-first-name .engine-name { max-width: 560px; margin-bottom: 40px; }
/* Short names, so let them flow into as many columns as fit rather than forcing one long row each. */
.engine-name-ideas { display: grid; grid-template-columns: repeat(auto-fill,minmax(215px,1fr)); gap: 8px; margin-top: 12px; }
.engine-name-idea.wiki-btn { display: block; padding: 10px 12px; border-radius: 11px; text-align: left; white-space: normal; font-family: inherit; text-transform: none; }
.engine-name-idea strong { display: block; color: #fc8b52; font-size: 17px; overflow-wrap: anywhere; }
.engine-name-idea span { display: block; margin-top: 2px; color: #c6c1b9; font-size: 12.5px; font-weight: 400; line-height: 1.4; }
.engine-name-idea[aria-pressed=true] { border-color: #fc5b0a; background: #302116; box-shadow: inset 0 0 0 1px #fc5b0a; }
/* Name ideas. A reserved pun already held reads as unavailable rather than merely dimmed, so it
   is clear the option exists but belongs to somebody else. */
.engine-tribe-names { margin-top: 16px; overflow:hidden; }
.engine-name-picker-header { padding:24px 24px 0; }
.engine-name-picker-header h2 { margin:0 0 18px; }
.engine-name-picker-body { padding:24px; }
.engine-name-picker-body .engine-name-ideas { margin-top:0; }
.engine-name-picker-body > .engine-hint { margin:4px 0 0; }
.engine-name-picker-body > .engine-hint:empty { display:none; }
/* The search box is the first cell of the name grid, so it is one card wide and fills its row. */
.engine-name-searchbox { display:flex; align-items:center; gap:8px; min-height:40px; box-sizing:border-box; padding:2px 12px 2px 4px; border:1px solid #494037; border-radius:11px; background:#191919; }
.engine-name-searchbox:focus-within { outline:2px solid #fc5b0a; outline-offset:3px; }
.engine-name-searchbox svg { flex:none; width:32px; height:32px; box-sizing:border-box; padding:7px; fill:none; stroke:#757575; stroke-width:2.2; stroke-linecap:round; }
.engine-host .engine-tribe-names .engine-name-searchbox input[type=search] { flex:1; min-width:0; width:100%; margin:0; padding:0; border:0; outline:0; border-radius:0; background:transparent; color:var(--wiki-text); font-family:inherit; font-size:15px; font-weight:400; line-height:1.3; }
.engine-host .engine-name-searchbox input[type=search]:focus-visible { outline:0; }
.engine-name input::placeholder, .engine-name-searchbox input::placeholder { color:#757575; opacity:1; }
.engine-name-empty { margin:14px 0 0; color:var(--wiki-muted); font-size:14px; }
/* Specific enough to beat `.engine-name-idea span`, which would otherwise show the badge
   on every card as a stray line of text. */
.engine-name-idea .engine-name-taken { display: none; }
.engine-name-idea.is-taken { opacity: .5; cursor: not-allowed; }
.engine-name-idea.is-taken strong { color: #a49c8f; }
.engine-name-idea.is-taken .engine-name-taken { display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: #3a352c; color: #d8d2c7; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
/* One toolbar: category tabs and their random action read left-to-right, while the current
   subcategory and list order stay together at the far right. */
.engine-name-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.engine-name-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.engine-name-actions { flex:0 1 auto; margin-left:auto; }
.wiki-btn.engine-name-filter, .wiki-btn.engine-name-random { padding: 5px 12px; font-size: 12.5px; }
.wiki-btn.engine-name-filter[aria-pressed=true] { border-color: #fc5b0a; background: #fc5b0a; color: #1a0d05; }
.wiki-btn.engine-name-random { display:inline-flex; align-items:center; justify-content:center; gap:6px; color:#fc8b52; border-color:#775036; background:#2b2119; }
.wiki-btn.engine-name-random svg { flex:none; width:16px; height:16px; }
.wiki-btn.engine-name-random:hover:not(:disabled) { background: #3b291d; border-color: #fc8b52; }
/* Drawn like the category pills beside it rather than as the platform's native control. */
.engine-name-select { appearance:none; -webkit-appearance:none; padding:5px 32px 5px 12px; border:1px solid #393630; border-radius:999px; color:var(--wiki-text); background:#222221 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a39d93' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; font:900 12.5px/1.3 var(--wiki-display); letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
.engine-name-select:hover { background-color:#35353b; }
.engine-name-select:focus-visible { outline:2px solid #fc5b0a; outline-offset:2px; }
.engine-name-select.engine-name-subcategory { padding:4px 32px 4px 12px; border:2px solid #fc8b52; color:#fff2e8; background-color:#302116; box-shadow:0 0 0 2px #fc5b0a1f; }
.engine-name-select.engine-name-subcategory:hover { border-color:#ffad80; background-color:#3b281c; }
.engine-name-select.engine-name-subcategory:focus-visible { outline:2px solid #fc5b0a; outline-offset:3px; }

.engine-host input:not([type=radio]):not([type=checkbox]), .engine-host textarea { display: block; width: 100%; margin-top: 9px; padding: 13px 15px; border: 1px solid #494037; border-radius: 10px; color: var(--wiki-text); background: #191919; font: inherit; line-height: 1.5; resize: vertical; }
.engine-host .engine-first-name .engine-name input { margin-top: 0; padding: 16px 18px; font-size: clamp(18px, 2.2vw, 22px); }
.engine-host input:focus-visible, .engine-host textarea:focus-visible, .engine-host summary:focus-visible { outline: 2px solid #fc5b0a; outline-offset: 3px; }

.engine-preview, .engine-tribe-names { border: 1px solid #40372d; border-radius: 22px; background: linear-gradient(150deg,#282119,#191919 65%); }
.engine-preview { position: sticky; top: 0; min-width: 0; padding: 24px; }
.engine-preview > .ninja-portrait { width: 112px; height: 112px; aspect-ratio: 1; margin: 0 0 14px; border-radius: 18px; }
/* Who the card is about, carried from step one. Each part needs its own [hidden] rule because the
   display below would otherwise beat the browser's own [hidden] { display: none }. */
.engine-preview-identity { min-width: 0; }
.engine-preview-identity[hidden] { display: none; }
.engine-preview-name { display: block; color: #f5f0e6; font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; }
.engine-preview-name[hidden] { display: none; }
.engine-preview-number { display: block; margin-top: 6px; color: #c6c1b9; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.engine-preview-number[hidden] { display: none; }
.engine-preview-name[hidden] + .engine-preview-number { margin-top: 0; font-size: 16px; letter-spacing: .06em; }
/* The band beside the portrait: MBTI type on the left, moral alignment on the right. */
/* flex-end plus an auto margin on the type, rather than space-between: with both summaries the
   spacing is identical, but when the MBTI type has not been earned yet the alignment stays pinned to
   the right edge instead of sliding over to where the type would have been. */
.engine-preview-head { display: flex; align-items: flex-start; justify-content: flex-end; gap: 14px; margin: 0 0 20px; }
.engine-preview.has-portrait .engine-preview-head { position: absolute; top: 24px; right: 24px; left: 160px; margin: 0; }
.engine-preview-type { min-width: 0; margin-right: auto; text-align: left; }
.engine-preview-type[hidden] { display: none; }
.engine-preview-type-name { display: block; color: #f5f0e6; font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; }
.engine-preview-type-code { display: block; margin-top: 7px; color: #c6c1b9; font-size: 16px; font-weight: 700; letter-spacing: .12em; }
.engine-preview-alignment { min-width: 0; margin: 0; text-align: left; }
.engine-preview-alignment[hidden] { display: none; }
.engine-preview.has-portrait .engine-preview-alignment { text-align: right; }
.engine-preview-alignment-name,.engine-preview-class-name { display: block; color: #f5f0e6; line-height: 1.15; overflow-wrap: anywhere; }
.engine-preview-class-name { display: flex; align-items: center; gap: 8px; font-size: 22px; }
/* display:flex above would otherwise beat the user-agent [hidden] rule and show an empty line. */
.engine-preview-class-name[hidden] { display: none; }
.engine-preview.has-portrait .engine-preview-class-name { justify-content: flex-end; }
.engine-preview-class-icon { flex: none; display: block; width: 1.05em; height: 1.05em; }
.engine-preview-class-icon svg { display: block; width: 100%; height: 100%; }
.engine-preview-class-icon:empty { display: none; }
.engine-preview-alignment-name { margin-top: 7px; color: #c6c1b9; font-size: 16px; font-weight: 700; }
.engine-preview-class-name[hidden] + .engine-preview-alignment-name { margin-top: 0; color: #f5f0e6; font-size: 22px; }
.engine-preview-facts { font-size: 13px; line-height: 1.5; }
.engine-preview-facts div { margin-top: 16px; border-top: 1px solid #3a342b; padding-top: 12px; }
.engine-preview-facts dt { color: #fc8b52; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.engine-preview-facts dd { margin: 5px 0 0; color: #c6c1b9; }
.engine-preview-facts .engine-preview-alignment-descriptions dd { display: grid; gap: 8px; }
.engine-preview-alignment-descriptions dd p { margin: 0; }
.engine-question { min-width: 0; }
/* The alignment step wraps its title beside the portrait, so its h2 is a grandchild — match both. */
.engine-question > h2, .engine-alignment-heading h2 { font-size: clamp(26px,3vw,38px); line-height: 1.17; margin: 0 0 14px; max-width: 850px; }
/* Announce the next question after keyboard navigation without outlining prose. */
.engine-question h2[tabindex="-1"]:focus,
.engine-character-wiki h1[tabindex="-1"]:focus,
.engine-character-panel h2[tabindex="-1"]:focus { outline: none; }

/* The kingdom wheel. The artwork carries the meaning; the SVG over it is transparent hit regions,
   tinted with each kingdom's own colour on hover so the wedge under the pointer is unmistakable. */
.engine-origin-map { position: relative; margin: 20px 0 0; border-radius: 18px; overflow: hidden; background: #6fe3ef; }
.engine-origin-map img { display: block; width: 100%; height: auto; }
.engine-origin-regions { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Hover looks exactly like a pick (the dimming is driven from the wizard) but outlined in white. */
.engine-origin-region { fill: transparent; stroke: transparent; stroke-width: 8; cursor: pointer; transition: stroke .15s; }
.engine-origin-region:hover { stroke: #fff; }
.engine-origin-region.selected { stroke: #fc5b0a; }
/* The off-screen radio that owns a region is focused: show it on the map, since the radio itself is unseen. */
.engine-origin-region.focused { stroke: #fff; stroke-width: 6; stroke-dasharray: 18 12; }
/* A pick dims everything but the chosen place: a masked sheet under the regions, never in the way of clicks. */
.engine-origin-dim { fill: #0a0a0a; opacity: 0; pointer-events: none; transition: opacity .2s; }
.engine-origin-dim.active { opacity: .32; }
/* Other is a plain pill in the map's bottom-right corner, which is only sky. Its radio is unseen but
   stays focusable inside the pill, so the pill carries the focus ring. */
.engine-origin-other { position: absolute; right: 18px; bottom: 18px; }
/* Drawn like a sign from the artwork — cream fill, thick dark outline, the crust's tan on hover — so it
   reads as part of the map rather than a UI control floating over it. */
.engine-origin-other label { position: relative; display: inline-flex; align-items: center; padding: 10px 23px; border-radius: 999px; background: #fdf3e0ef; border: 2px solid #3b2a1cb8; box-shadow: 0 2px 0 #3b2a1c66, 0 4px 9px #00000045; color: #43321f; font: 900 17.5px/1.2 var(--wiki-display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; }
.engine-origin-other label:hover { background: #f7dcb4; }
.engine-origin-other label:active, .engine-origin-other label.selected { transform: translateY(2px); box-shadow: 0 1px 0 #3b2a1c66, 0 2px 7px #00000045; }
.engine-origin-other label.selected { background: #fc5b0a; color: #1a0d05; }
.engine-origin-other label:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.engine-origin-other input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
/* Broad alignment boxes and the neighboring refinements on the expanded chart. */
.engine-alignment-mode { overflow-anchor: none; --chart-width-factor: 1; --chart-height-factor: .94; --alignment-color-lawful_good: #125d67; --alignment-color-neutral_good: #236343; --alignment-color-chaotic_good: #244ba0; --alignment-color-lawful_neutral: #79591a; --alignment-color-true_neutral: #475569; --alignment-color-chaotic_neutral: #63389a; --alignment-color-lawful_evil: #953f24; --alignment-color-neutral_evil: #8c263e; --alignment-color-chaotic_evil: #862970; }
.engine-alignment-mode .engine-layout { grid-template-columns: minmax(0,1fr); }
.engine-alignment-mode .engine-preview { display: none; }
.engine-alignment-mode .engine-question > h2, .engine-alignment-heading h2 { max-width: none; }
/* The subject tile closes the heading, right-aligned beside the eyebrow, title and lead. It used
   to be absolutely positioned on the rail, where it hung below the last heading line and covered
   the top corner of the chart; in flow it is bounded by the heading and cannot reach the chart.
   Heading copy keeps its own column, so the tile stays level with the eyebrow and flush with the
   step's right edge no matter how many lines the title and lead run to. */
.engine-alignment-heading { display:flex; align-items:flex-start; gap:18px; width:calc(100% * var(--chart-width-factor)); min-width:0; }
.engine-alignment-heading-copy { flex: 1 1 auto; min-width: 0; }
.engine-alignment-heading-copy > :last-child { margin-bottom: 0; }
/* The ordinary preview card becomes a compact horizontal identity card on this screen: portrait,
   name and collection number, then the two facts already known before alignment is chosen. */
.engine-alignment-subject { --subject-portrait:112px; flex:0 1 540px; box-sizing:border-box; display:grid; grid-template-columns:var(--subject-portrait) minmax(0,1fr); align-items:center; gap:24px; width:min(540px,43vw); min-width:360px; margin:0; padding:24px; border:1px solid #40372d; border-radius:22px; background:linear-gradient(150deg,#282119,#191919 65%); overflow:hidden; }
.engine-alignment-subject > .ninja-portrait { width:var(--subject-portrait); height:var(--subject-portrait); min-width:0; margin:0; border-radius:18px; aspect-ratio:1; }
.engine-alignment-subject-copy { min-width:0; }
.engine-alignment-subject-name { display:block; min-width:0; color:#f5f0e6; font-size:22px; line-height:1.15; overflow-wrap:anywhere; }
.engine-alignment-subject-number { display:block; margin-top:6px; color:#c6c1b9; font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.engine-alignment-subject-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; margin:16px 0 0; font-size:13px; line-height:1.5; }
.engine-alignment-subject-facts > div { min-width:0; border-top:1px solid #3a342b; padding-top:12px; }
.engine-alignment-subject-facts dt { color:#fc8b52; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.engine-alignment-subject-facts dd { margin:5px 0 0; color:#c6c1b9; overflow-wrap:anywhere; }
/* Stable region colors are shared by the overview and zoomed map. */
.engine-alignment-mode [data-alignment=lawful_good] { --region-color: var(--alignment-color-lawful_good); }
.engine-alignment-mode [data-alignment=neutral_good] { --region-color: var(--alignment-color-neutral_good); }
.engine-alignment-mode [data-alignment=chaotic_good] { --region-color: var(--alignment-color-chaotic_good); }
.engine-alignment-mode [data-alignment=lawful_neutral] { --region-color: var(--alignment-color-lawful_neutral); }
.engine-alignment-mode [data-alignment=true_neutral] { --region-color: var(--alignment-color-true_neutral); }
.engine-alignment-mode [data-alignment=chaotic_neutral] { --region-color: var(--alignment-color-chaotic_neutral); }
.engine-alignment-mode [data-alignment=lawful_evil] { --region-color: var(--alignment-color-lawful_evil); }
.engine-alignment-mode [data-alignment=neutral_evil] { --region-color: var(--alignment-color-neutral_evil); }
.engine-alignment-mode [data-alignment=chaotic_evil] { --region-color: var(--alignment-color-chaotic_evil); }
/* Two rows: the top axis, then the board. There used to be a third 38px row holding a second-level
   zoom-out button; that zoom level is gone and the button now rides in the step dock, so the row
   only added a 50px dead band under the board — the step ends 20px above the dock. */
.engine-alignment-panel { width:100%; min-width:0; box-sizing:border-box; margin:24px 0; padding:clamp(10px,2vw,24px); border:1px solid #453d34; border-radius:22px; background:#191919; box-shadow:0 12px 36px #0003; }
.engine-alignment-frame { position:relative; display:grid; grid-template-columns:60px minmax(0,1fr); grid-template-rows:min-content minmax(0,1fr); gap:12px; width:calc(100% * var(--chart-width-factor)); height:calc(min(1040px,100dvh - 96px) * var(--chart-height-factor)); min-height:calc(360px * var(--chart-height-factor)); margin:0; container-type:size; }
/* A dock button like Back and Next; only the hidden state needs saying, since .wiki-btn's display
   would otherwise beat the [hidden] attribute and leave it on the bar while zoomed out. */
.engine-alignment-zoom-out[hidden] { display: none; }
.engine-alignment-frame[data-zoomed=true] { cursor: zoom-out; }
.engine-alignment-frame[data-zoomed=true] button { cursor: pointer; }
.engine-alignment-viewport { position: relative; grid-area: 2 / 2; min-width: 0; min-height: 0; height: 100%; isolation: isolate; overflow-anchor: none; }
.engine-alignment-viewport.is-zooming { overflow: clip; border-radius: 6px; }
.engine-alignment-board.engine-alignment-broad { transform-origin: 0 0; height: 100%; grid-template-rows: repeat(3,minmax(0,1fr)); }
.engine-alignment-details { position: absolute; inset: 0; }
.engine-alignment-viewport[data-zoomed=true] { cursor: zoom-out; overflow: clip; }
.engine-alignment-viewport[data-zoomed=true] .engine-alignment-refinements { cursor: zoom-out; }
.engine-alignment-camera { position: absolute; inset: 0; overflow: clip; opacity: 0; pointer-events: none; clip-path: var(--map-clip,inset(0)); }
.engine-alignment-camera > .engine-alignment-refinements { position: absolute; inset: 0 0 auto; height: 100%; transform-origin: 0 0; transform: var(--map-transform,none); display: block; }
.engine-alignment-backdrop { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); background: #101b2b; pointer-events: none; }
.engine-alignment-backdrop-region { position: relative; min-width: 0; background: var(--region-color); border: calc(1px / var(--map-zoom,1)) solid #f1f5f980; }
.engine-alignment-backdrop-region.selected { box-shadow: inset 0 0 0 calc(4px / var(--map-zoom,1)) #fff; }
.engine-alignment-backdrop-region > span { position: absolute; top: calc(8px / var(--map-zoom,1)); left: calc(10px / var(--map-zoom,1)); font-size: calc(12px / var(--map-zoom,1)); font-weight: 700; color: #f1f5f9; }
.engine-alignment-backdrop-region.selected > span { color: #fff; }
.engine-alignment-frame .axis-top { width: 100%; }
.engine-alignment-frame .axis-left { width: 60px; height: 100%; align-self: start; justify-self: start; }
.engine-alignment-viewport[data-zoomed=true] > .engine-alignment-broad { opacity: 0; pointer-events: none; }
.engine-alignment-viewport[data-zoomed=true] > .engine-alignment-camera { opacity: 1; pointer-events: auto; }
.engine-alignment-viewport.is-zooming .engine-alignment-board,.engine-alignment-viewport.is-zooming .engine-alignment-camera { will-change: transform, opacity, clip-path; pointer-events: none; }
.engine-alignment-frame[data-transitioning=true], .engine-alignment-frame[data-transitioning=true] .engine-alignment-viewport, .engine-alignment-frame[data-transitioning=true] .engine-alignment-board, .engine-alignment-frame[data-transitioning=true] button { cursor: default; }
.engine-alignment-viewport.is-zooming .engine-alignment-region:hover { background-image: none; }
.engine-alignment-refinements .engine-alignment-refinement { min-height: 0; overflow-y: auto; }
.engine-alignment-mobile-detail[hidden] { display: none; }
.engine-alignment-axis { display: flex; align-items: center; gap: 16px; color: #fff8eb; font-size: clamp(26px,2.6vw,38px); line-height: 1.1; text-transform: uppercase; letter-spacing: .05em; }
.engine-alignment-axis strong { font-weight: 900; white-space: nowrap; }
.engine-alignment-axis.axis-top { grid-area: 1 / 2; }
.engine-alignment-axis.axis-left { grid-area: 2 / 1; }
.engine-axis-line { position: relative; flex: 1; border-top: 1px solid #726859; }
.engine-axis-line::before, .engine-axis-line::after { position: absolute; top: -5px; width: 7px; height: 7px; border: solid #a4967e; content: ''; }
.engine-axis-line::before { left: 0; border-width: 0 0 1px 1px; transform: rotate(45deg); }
.engine-axis-line::after { right: 0; border-width: 1px 1px 0 0; transform: rotate(45deg); }
.axis-left { flex-direction: column; }
.axis-left strong { writing-mode: vertical-rl; transform: rotate(180deg); }
.axis-left .engine-axis-line { border-top: 0; border-left: 1px solid #726859; }
.axis-left .engine-axis-line::before { top: 0; left: -5px; transform: rotate(135deg); }
.axis-left .engine-axis-line::after { top: auto; bottom: 0; left: -5px; transform: rotate(135deg); }
.engine-alignment-board { position: relative; grid-area: 2 / 2; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(3,1fr); min-width: 0; isolation: isolate; border: 1px solid #a9bacb; border-radius: 6px; background: #101b2b; cursor: default; touch-action: pan-y; user-select: none; }
.engine-alignment-region-content { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.engine-alignment-board:focus-visible { outline: 2px solid #ffcb54; outline-offset: 4px; }
.engine-alignment-region { display: flex; flex-direction: column; min-width: 0; min-height: clamp(280px,23vw,330px); padding: clamp(14px,2vw,26px); background: var(--region-color); border-right: 1px solid #ffffff66; border-bottom: 1px solid #ffffff66; transition: background-image .15s; }
.engine-alignment-region:nth-child(3n) { border-right: 0; }
.engine-alignment-region:nth-child(n+7) { border-bottom: 0; }
.engine-alignment-region:focus-within, .engine-alignment-region:hover { z-index: 2; }
.engine-alignment-region h3 { margin: 0 0 12px; }
.wiki-btn.engine-alignment-preset { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; font-family: inherit; font-size: clamp(22px,2.4vw,34px); font-weight: 900; line-height: 1.2; white-space: normal; text-align: left; text-transform: none; color: #fbf5e6; box-shadow: none; cursor: pointer; }
.engine-alignment-preset:focus-visible { outline: 2px solid #ffc750; outline-offset: 4px; }
.engine-alignment-description { margin: 18px 0 0; color: #f1f5f9; font-size: clamp(12px,1.1vw,14px); line-height: 1.55; opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s; }
.engine-alignment-region:hover .engine-alignment-description,
.engine-alignment-region:focus-within .engine-alignment-description,
.engine-alignment-region.selected .engine-alignment-description { opacity: 1; visibility: visible; transition-delay: 0s; }
/* "Show all descriptions" pins every description open, so no hovering is needed.
   Descriptions are opacity/visibility-hidden and already occupy their space, so
   revealing them cannot reflow the board. */
.engine-alignment-show-all { display: flex; align-items: center; justify-content: center; width: fit-content; min-width: 210px; min-height: 44px; margin: 0 auto; padding: 10px 18px; border-radius: 999px; font-size: 14px; cursor: pointer; }
.wiki-btn.engine-alignment-show-all { border: 1px solid #fff; }
.engine-alignment-frame[data-show-descriptions=true] .engine-alignment-description,
.engine-alignment-frame[data-show-descriptions=true] .engine-refinement-description { opacity: 1; visibility: visible; transition-delay: 0s; }
.engine-alignment-examples { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 0; }
.wiki-btn.engine-alignment-example { position: relative; flex: none; display: block; width: 56px; height: 56px; padding: 0; border: 2px solid #e9dcc06b; border-radius: 50%; background: #181713; box-shadow: 0 2px 8px #0005; cursor: help; overflow: visible; }
.engine-alignment-example img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: inherit; pointer-events: none; filter: grayscale(1); transition: filter .18s ease; }
.engine-alignment-region:hover .engine-alignment-example img,
.engine-alignment-region:focus-within .engine-alignment-example img,
.engine-alignment-example:hover img, .engine-alignment-example:focus img { filter: none; }
.engine-alignment-example img[src$="/jabba-the-hutt.jpg"] { object-position: right top; }
.engine-alignment-example img[src$="/batman.jpg"] { object-position: center 40%; }
.engine-alignment-example:hover, .engine-alignment-example:focus-visible { border-color: #ffd167; outline: 2px solid #ffd167; outline-offset: 2px; z-index: 5; }
.engine-portrait-tooltip { display: none; position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); visibility: hidden; opacity: 0; padding: 8px 11px; border: 1px solid #817056; border-radius: 6px; background: #111; box-shadow: 0 3px 12px #0008; color: #fff3d7; font: 700 12px/1.25 sans-serif; text-transform: none; white-space: nowrap; pointer-events: none; z-index: 10; }
.engine-alignment-example:hover .engine-portrait-tooltip, .engine-alignment-example:focus .engine-portrait-tooltip { display: block; visibility: visible; opacity: 1; }
.engine-alignment-region:nth-child(3n) .engine-portrait-tooltip { left: auto; right: 0; transform: none; }
.engine-alignment-region:nth-child(3n+1) .engine-portrait-tooltip { left: 0; transform: none; }
.engine-alignment-region { cursor: pointer; }
.engine-alignment-region:hover { background-image: linear-gradient(#ffffff14,#ffffff14); }
.engine-alignment-refinements { grid-template-columns: repeat(var(--alignment-columns),minmax(0,1fr)); grid-template-rows: none; gap: 12px; border: 0; background: none; }
.engine-alignment-refinement { display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0; min-height: 190px; cursor: default; font-weight: 900; font-size: 14px; line-height: 1.3; letter-spacing: .04em; padding: clamp(16px,2vw,28px); border: 1px solid #736650; border-radius: 12px; background: #101b2bcc; color: #fff; text-align: left; text-transform: none; white-space: normal; font-family: inherit; }
.engine-refinement-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: clamp(17px,1.7vw,24px); line-height: 1.2; }
.engine-refinement-heading strong { min-width: 0; overflow-wrap: anywhere; }
.engine-refinement-description { color: #f1f5f9; font-size: 15px; font-weight: 400; letter-spacing: normal; line-height: 1.6; opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s; }
.engine-alignment-refinement:hover .engine-refinement-description,
.engine-alignment-refinement:focus-within .engine-refinement-description,
.engine-alignment-refinement.selected .engine-refinement-description { opacity: 1; visibility: visible; transition-delay: 0s; }
.engine-alignment-mobile-detail { display: none; }
.engine-alignment-refinement:hover { border-color: #fff; }
.engine-alignment-refinement.selected { border-color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.engine-alignment-refinement:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Opaque corner colors interpolate the broad regions beneath each card. The two gutters are not the
   same size on purpose: the horizontal one stays at 32px because the gap between columns is the
   click target that zooms back out, while the vertical one is spare room the descriptions need more. */
.engine-alignment-camera .engine-alignment-refinement { position: absolute; z-index: 1; transform: translate(-50%,-50%) scale(calc(1 / var(--map-scale-x)),calc(1 / var(--map-scale-y))); width: calc(100% / 6 * var(--map-scale-x) - 32px); height: calc(100% / 6 * var(--map-scale-y) - 20px); margin: 0; min-height: 0; isolation: isolate; background: linear-gradient(to right,var(--detail-tl),var(--detail-tr)); color: #fff; border-color: #ffffffcc; box-shadow: 0 calc(3px) calc(12px) #07111d40; padding: calc(clamp(16px,2vw,28px)); gap: calc(16px); border-width: calc(1px); border-radius: calc(12px); }
.engine-alignment-camera .engine-alignment-refinement::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(to right,var(--detail-bl),var(--detail-br)); mask-image: linear-gradient(to bottom,transparent,#000); pointer-events: none; }
.engine-alignment-camera .engine-alignment-refinement { transition: filter .16s ease, box-shadow .16s ease, border-color .16s ease; }
.engine-alignment-camera .engine-alignment-refinement:hover,
.engine-alignment-camera .engine-alignment-refinement:focus-within {
  z-index: 2;
  border-color: #fff;
  box-shadow: 0 0 0 4px #fff, 0 12px 28px #07111daa;
  filter: brightness(1.16) saturate(1.08);
}
.engine-alignment-camera .engine-alignment-refinement:focus-visible { outline: 0; }
.engine-alignment-camera .engine-alignment-refinement.selected { border-color: #fff; box-shadow: 0 0 0 calc(3px) #fff, 0 calc(3px) calc(12px) #07111d80; }
.engine-alignment-camera .engine-alignment-refinement.selected:hover,
.engine-alignment-camera .engine-alignment-refinement.selected:focus-within { border-color: #fff; box-shadow: 0 0 0 4px #fff, 0 12px 28px #07111daa; }
.engine-alignment-camera .engine-refinement-heading { gap: calc(8px); font-size: calc(clamp(24px,2.5vw,36px)); }
.engine-alignment-camera .engine-refinement-description { color: #f1f5f9; font-size: calc(clamp(17px,1.5vw,21px)); line-height: 1.5; }
.engine-alignment-broad .engine-alignment-region { min-height: 0; padding: clamp(8px,1.6cqh / var(--chart-height-factor),18px); }
.engine-alignment-broad .engine-alignment-region h3 { margin-bottom: clamp(5px,(1cqh / var(--chart-height-factor)),10px); }
.engine-alignment-broad .engine-alignment-preset { font-size: clamp(15px,min((4cqh / var(--chart-height-factor)),(2.3cqw / var(--chart-width-factor))),32px); }
.engine-alignment-broad .engine-alignment-description { font-size: clamp(16px,1.15vw,18px); line-height: 1.4; margin: 12px 0 0; }
.engine-alignment-broad .engine-alignment-examples { flex-wrap: nowrap; gap: clamp(4px,(.8cqh / var(--chart-height-factor)),10px); }
.engine-alignment-broad .engine-alignment-example { width: clamp(24px,min((5.5cqh / var(--chart-height-factor)),(3.4cqw / var(--chart-width-factor))),50px); height: clamp(24px,min((5.5cqh / var(--chart-height-factor)),(3.4cqw / var(--chart-width-factor))),50px); }
/* A zoomed card is exactly one sixth of the board, so its height is dictated by the frame and the
   text has to live inside whatever is left over. The heading, buttons, padding and gaps are sized
   off the frame's own height (cqh) so that leftover does not collapse on a short viewport — at 20px
   padding and a 44px button row the furniture alone ate 182px of a 241px card. */
.engine-alignment-camera .engine-alignment-refinement { padding: clamp(12px,2.2cqh,20px); gap: clamp(7px,1.3cqh,12px); }
.engine-alignment-camera .engine-alignment-refinement {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: auto minmax(0,1fr) auto;
  align-content: start;
  row-gap: clamp(7px,1.3cqh,12px);
}
.engine-alignment-camera .engine-refinement-heading { grid-area: 1 / 1; align-self: center; }
/* Keep a long description inside its own row: it must never paint over the class buttons. */
/* No fade at the foot. Dimming the final line reads as damage rather than as a scroll hint, so the
   row is sized to hold the whole description instead, and the 20px the fade reserved goes back to
   the text. Scrolling stays as a silent fallback for a viewport too short even for the shrunk text. */
.engine-alignment-camera .engine-refinement-description { grid-area: 2 / 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.engine-alignment-camera .engine-refinement-description::-webkit-scrollbar { display: none; }
.engine-alignment-camera .engine-refinement-classes { grid-area: 3 / 1; align-self: end; justify-self: start; width: min(100%,460px); }
.engine-alignment-camera .engine-refinement-heading { font-size: clamp(17px,min(2.2vw,3.5cqh),32px); }
/* A zoomed card is exactly one sixth of the board, so the room for its description is set by the
   frame's height, not by the text. Sizing off cqh lets the longest description land inside that row
   at any viewport instead of being clipped at the card edge. */
.engine-alignment-camera .engine-refinement-description { font-size: clamp(13px,min(1.4vw,(2.0cqh / var(--chart-height-factor))),22px); line-height: 1.33; }
.engine-alignment-camera .engine-refinement-classes { font-size: clamp(14px,2.2cqh,18px); }
/* Qualified with .wiki-btn on purpose: the shared button rule below is also two classes, so an
   unqualified selector here ties on specificity and loses on source order, pinning the button at
   54px and starving the description on short screens. */
.engine-alignment-camera .wiki-btn.engine-refinement-class { min-height: clamp(30px,4.4cqh,44px); padding: clamp(4px,.8cqh,8px); }
.engine-alignment-refinements[data-rows="3"] .engine-alignment-refinement { padding: 12px; gap: 8px; }
.engine-alignment-refinements[data-rows="3"] .engine-refinement-heading { font-size: 24px; }
/* Nine cards share the frame, so this is the one neighbourhood whose description can outgrow its
   row. 18px is the size to read it at and the cap it keeps on a tall frame; on a short one the cqh
   term gives way rather than letting the sentence overrun the card. */
.engine-alignment-refinements[data-rows="3"] .engine-refinement-description { font-size: clamp(14px,2.2cqh,18px); line-height: 1.35; }
.engine-alignment-refinements[data-rows="3"] .engine-refinement-classes { font-size: 16px; }
.engine-alignment-refinements[data-rows="3"] .engine-refinement-class { min-height: 34px; padding: 6px; }
/* On a frame too short for nine full cards, tighten the furniture while keeping the class prompt
   visible; it is the instruction that makes the two buttons understandable. */
@container (max-height: 820px) {
  .engine-alignment-refinements[data-rows="3"] .engine-alignment-refinement { padding: 10px; gap: 6px; }
  .engine-alignment-refinements[data-rows="3"] .engine-refinement-heading { font-size:22px; }
  .engine-alignment-refinements[data-rows="3"] .engine-refinement-class { min-height: 30px; }
}
/* Compact nine-card views at the narrow end, leaving larger cards unchanged. */
@container (max-width: 1100px) {
  .engine-alignment-refinements[data-rows="3"] .engine-refinement-heading { font-size:21px; }
  .engine-alignment-refinements[data-rows="3"] .engine-refinement-description { font-size:14px; line-height:1.28; }
}
/* The final zoom stays inside the chart and reveals two class interpretations. */
.engine-refinement-classes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(6px,1.1cqh,10px); margin-top: 0; font-size: calc(clamp(17px,1.5vw,21px)); line-height: 1.25; font-weight: 800; color: #fff; letter-spacing: normal; }
/* One cue line above the buttons, holding its space at rest so revealing it never shifts them. */
.engine-refinement-cuerow { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: calc(12px); min-width: 0; }
.engine-refinement-cue { flex: none; font-size: .72em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #dbe7f5; }
.engine-refinement-go { min-width: 0; font-size: .78em; font-weight: 800; letter-spacing: normal; color: #fff; text-align: right; opacity: 0; transition: opacity .16s ease; }
.engine-alignment-refinement:has(.engine-refinement-class:hover) .engine-refinement-go,
.engine-alignment-refinement:has(.engine-refinement-class:focus-visible) .engine-refinement-go { opacity: 1; }
/* Each class is its own button: picking one selects the alignment and the class together. */
.wiki-btn.engine-refinement-class { display: flex; align-items: center; justify-content: center; gap: calc(7px); min-width: 0; min-height: calc(54px); padding: calc(10px); border: calc(2px) solid #ffffffaa; border-radius: calc(9px); background: #0812214d; color: #fff; text-align: center; text-wrap: balance; overflow-wrap: anywhere; text-transform: none; font-family: inherit; font-size: inherit; font-weight: 800; letter-spacing: normal; line-height: 1.25; cursor: pointer; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.engine-refinement-class:hover { background: #ffffff2e; border-color: #fff; transform: translateY(-1px); }
.engine-refinement-class:focus-visible { outline: 0; border-color: #fff; box-shadow: 0 0 0 calc(3px) #fff; }
.wiki-btn.engine-refinement-class[aria-pressed=true] { background: #fff; border-color: #fff; color: #10233a; }
.engine-refinement-class-icon { flex: none; display: block; width: 1.3em; height: 1.3em; }
.engine-refinement-class-icon svg { display: block; width: 100%; height: 100%; }
@media(max-width:760px) {
  .engine-refinement-classes { grid-template-columns: minmax(0,1fr); gap: calc(4px); font-size: calc(11px); }
  .engine-refinement-cue { flex:0 1 auto; min-width:0; font-size:.54em; letter-spacing:0; }
  .engine-refinement-go { display:none; }
  /* Too narrow to sit the icon beside the name without breaking it mid-word, so stack them. */
  .engine-refinement-class { flex-direction: column; gap: calc(2px); min-height: calc(38px); padding: calc(5px) calc(3px); border-width: calc(1px); }
  .engine-refinement-class-icon { width: 1.5em; height: 1.5em; }
  .engine-alignment-frame { --chart-width-factor: 1; grid-template-columns: 24px minmax(0,1fr); grid-template-rows: 40px minmax(0,1fr); gap: 8px; }
  .engine-alignment-axis { font-size: 18px; gap: 10px; letter-spacing: .02em; }
  .engine-alignment-region { padding: 12px 7px; min-height: 124px; }
  .engine-alignment-region h3 { margin-bottom: 12px; }
  .engine-alignment-region .engine-alignment-preset { display: block; font-size: 15px; text-align: center; }
  .engine-alignment-description { display: none; }
  /* Phones read descriptions in .engine-alignment-mobile-detail instead, so the
     toggle would control nothing here. */
  .engine-alignment-show-all { display: none; }
  .engine-alignment-region .engine-alignment-examples { justify-content: center; gap: 5px; }
  .engine-alignment-region .engine-alignment-example { width: 30px; height: 30px; }
  .engine-alignment-camera > .engine-alignment-refinements { gap: 0; }
  .engine-alignment-camera .engine-alignment-refinement { display: flex; flex-direction: column; width: calc(100% / 6 * var(--map-scale-x) - 16px); height: calc(100% / 6 * var(--map-scale-y) - 16px); gap: calc(8px); padding: calc(14px) calc(8px); }
  .engine-alignment-camera .engine-refinement-heading { font-size: calc(17px); overflow-wrap: anywhere; }
  .engine-alignment-camera .engine-refinement-description { font-size: calc(13px); }
  .engine-alignment-refinement { padding: 14px 8px; min-height: 110px; gap: 12px; }
  .engine-refinement-heading { font-size: 14px; }
  .engine-refinement-description { display: none; }
  .engine-alignment-mobile-detail { display: block; padding: 20px; border: 1px solid #8ba1bc; border-radius: 12px; background: #152237; }
  .engine-alignment-mobile-detail h3 { margin: 0 0 12px; font-size: 22px; color: #fff; }
  .engine-alignment-mobile-detail p { margin: 0; font-size: 15px; line-height: 1.6; color: #d2cbbd; }
  .engine-alignment-origin { font-size: 10px; }
  .engine-alignment-mode .engine-actions:not(.engine-step-actions) { position: static; }
}

.engine-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 25px 0; }
/* Question navigation belongs to the modal, not the narrower question column. The dock only exists
   while at least one visible button can actually be used, and the scroll area reserves its height. */
.engine-step-actions {
  position: fixed;
  z-index: 4;
  right: max(12px, calc((100vw - 1800px) / 2));
  bottom: 12px;
  left: max(12px, calc((100vw - 1800px) / 2));
  align-items: center;
  margin: 0;
  padding: 12px 24px;
  border-top: 1px solid var(--wiki-line);
  border-radius: 0 0 19px 19px;
  background: #121212f5;
  box-shadow: 0 -12px 30px #0005;
  backdrop-filter: blur(12px);
}
.engine-step-actions:not(:has(.wiki-btn:not([hidden]):not(:disabled))) { display: none; }
.engine-relationship-step-actions .wiki-btn[hidden] { display:none; }
#wiki-main-content:has(.engine-step-actions .wiki-btn:not([hidden]):not(:disabled)) { padding-bottom: 104px; }
/* Larger than an ordinary button: the Back / Next pair is the main thing to hit on every step. */
.engine-actions .wiki-btn { padding: 16px 30px; font-size: 19px; }
@media(max-width:640px) {
  .engine-step-actions { right: 6px; bottom: 6px; left: 6px; padding: 10px 14px; border-radius: 0 0 11px 11px; }
  #wiki-main-content:has(.engine-step-actions .wiki-btn:not([hidden]):not(:disabled)) { padding-bottom: 96px; }
}
/* Phones: the view ends at the tab bar, so the dock sits on top of it, edge to edge. */
@media(max-width:480px) {
  .engine-step-actions { right: 0; bottom: var(--app-tabs-h, 0px); left: 0; border-radius: 0; }
  #wiki-main-content:has(.engine-step-actions .wiki-btn:not([hidden]):not(:disabled)) { padding-bottom: 90px; }
}

.engine-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media(max-width:1050px) { .engine-layout { grid-template-columns: minmax(0,1fr) 240px; gap: 24px; } .engine-preview { padding: 18px; } .engine-preview.has-portrait .engine-preview-head { position: static; flex-direction: column; justify-content: flex-start; gap: 10px; margin: 0 0 18px; } .engine-preview.has-portrait .engine-preview-alignment { text-align: left; } .engine-preview.has-portrait .engine-preview-class-name { justify-content: flex-start; } }
@media(max-width:760px) {
  .engine-layout { display: flex; flex-direction: column; gap: 28px; }
  .engine-question, .engine-preview { width: 100%; }
  .engine-preview { position: static; }
  .engine-preview > .ninja-portrait { width: 80px; height: 80px; }
  .engine-alignment-subject { --subject-portrait:80px; flex:none; width:100%; min-width:0; gap:18px; padding:18px; }
  .engine-alignment-subject-facts { gap:0 12px; }
  .engine-alignment-heading { flex-direction:column; gap:18px; width:100%; }
  .engine-origin-other { right: 10px; bottom: 10px; }
  .engine-origin-other label { padding: 7px 15px; font-size: 14px; }
  .engine-name-ideas { grid-template-columns: 1fr; }
  .engine-name-picker-header { padding:16px 16px 0; }
  .engine-name-picker-body { padding:16px; }
  /* Catalogue names are a word and a short note, so a phone fits two to a row; the coach's
     suggestions above keep one column because each carries a sentence. */
  .engine-tribe-names .engine-name-ideas { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .engine-lead { font-size: 17px; }
}
@media(max-width:640px) {
}
@media(prefers-reduced-motion:reduce) { .engine-origin-region, .engine-alignment-example img { transition: none; } }

@media(max-width:760px) {
  .engine-alignment-broad .engine-alignment-preset { font-size: 14px; }
  .engine-alignment-broad .engine-alignment-examples { flex-wrap: wrap; gap: 4px; }
  .engine-alignment-broad .engine-alignment-example { width: 24px; height: 24px; }
}

@media(max-width:760px) {
  .engine-alignment-camera .engine-alignment-refinement { padding: 10px 6px; gap: 8px; }
  .engine-alignment-camera .engine-alignment-refinement .engine-refinement-heading { font-size: 14px; }
  .engine-alignment-camera .engine-alignment-refinement .engine-refinement-classes { font-size: 11px; }
  .engine-alignment-camera .engine-alignment-refinement .engine-refinement-class { min-height: 34px; padding: 4px 2px; }
}

/* Family tree: grandparents, parents, and siblings with closeness and birth order. */
/* Personality type: one axis at a time, boxed. The box header pairs the current heading with a
   right-aligned tracker — a named slot per axis, plus the assembled type as plain text once all
   four are in — that doubles as progress and navigation. Each axis shows its two poles as
   contrasting colour cards: name and tagline on top, three points below a hairline. Colours come
   from --pole. */
.engine-trait-box { padding: 20px 22px 22px; border: 1px solid #3a352c; border-radius: 18px; background: #16130f; }
/* A blank line's worth of air under the header so the tracker reads as its own row rather than a
   label stuck to the letters (or, mid-survey, to the pole cards) below it. */
.engine-trait-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 0 0 40px; }
.engine-trait-strip { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0 0 0 auto; }
.wiki-btn.engine-trait-slot { --pole: #6f6350; display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 14px 5px 5px; border: 1px solid #3a352c; border-radius: 999px; background: #1b1814; color: #a49c8f; font-size: 12px; letter-spacing: .08em; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.wiki-btn.engine-trait-slot[aria-selected=true] { border-color: var(--pole); background: color-mix(in srgb, var(--pole) 12%, #1b1814); color: #f5f0e6; }
.wiki-btn.engine-trait-slot:focus-visible { outline: 2px solid var(--pole); outline-offset: 2px; }
.engine-trait-slot-letter { display: grid; place-items: center; width: 30px; height: 30px; border: 2px dashed #4a443a; border-radius: 50%; color: var(--pole); font-size: 15px; letter-spacing: 0; transition: border-color .16s ease, background .16s ease; }
.engine-trait-slot.answered .engine-trait-slot-letter { border-style: solid; border-color: var(--pole); background: color-mix(in srgb, var(--pole) 22%, #1b1814); }
.engine-trait-slot[aria-selected=true] .engine-trait-slot-letter { border-color: var(--pole); }
/* The assembled type is plain text, not another pill: no border, no fill. It is hidden outright
   until all four letters exist, so it never shows as an empty placeholder. */
.wiki-btn.engine-trait-result, .wiki-btn.engine-trait-result[aria-selected=true] { gap: 7px; margin-left: 10px; padding: 5px 2px; border-color: transparent; background: none; }
/* The display above would otherwise beat the user agent's [hidden] rule. */
.wiki-btn.engine-trait-slot[hidden] { display: none; }
.engine-trait-result-code { color: #f5f0e6; font-size: 15px; letter-spacing: .06em; }
.engine-trait-stage, .engine-trait-reveal { margin: 0; }
.engine-trait-stage.is-entering, .engine-trait-reveal.is-entering { animation: engine-trait-in .28s ease-out; }
@keyframes engine-trait-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.engine-trait-title { margin: 0; min-width: 0; color: #f5f0e6; font-size: 28px; line-height: 1.15; }
.engine-trait-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 14px; }
.wiki-btn.engine-trait-option { --pole: #cbbfae; display: grid; grid-template-columns: 56px minmax(0,1fr) auto; grid-template-areas: "art name letter" "art tagline letter" "points points points"; grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 2px; align-content: start; height: 100%; min-height: 250px; padding: 22px 22px 24px; border: 2px solid #3a352c; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--pole) 16%, #1b1814) 0%, #1b1814 62%); color: #f5f0e6; text-align: left; text-transform: none; font-family: inherit; letter-spacing: normal; white-space: normal; cursor: pointer; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.engine-trait-art svg, .engine-trait-chip-icon svg { display: block; width: 100%; height: 100%; }
.engine-trait-art { grid-area: art; display: grid; place-items: center; width: 56px; height: 56px; padding: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--pole) 55%, #fff) 0%, var(--pole) 48%, color-mix(in srgb, var(--pole) 60%, #000) 100%); color: #14110d; box-shadow: 0 0 0 4px color-mix(in srgb, var(--pole) 22%, transparent), 0 10px 26px color-mix(in srgb, var(--pole) 32%, transparent); }
.engine-trait-letter { grid-area: letter; align-self: start; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--pole) 45%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--pole) 14%, #1b1814); color: var(--pole); font-size: 16px; font-weight: 900; transition: background .16s ease, color .16s ease; }
.engine-trait-option > strong { grid-area: name; align-self: end; font-size: 22px; line-height: 1.1; color: #f5f0e6; }
.engine-trait-tagline { grid-area: tagline; align-self: start; color: var(--pole); font-size: 14px; font-style: italic; font-weight: 600; line-height: 1.3; }
.engine-trait-points { grid-area: points; display: grid; align-content: start; gap: 13px; margin-top: 20px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--pole) 22%, #3a352c); }
.engine-trait-point { display: grid; grid-template-columns: 10px minmax(0,1fr); column-gap: 14px; align-items: baseline; color: #d8d1c5; font-size: 16px; font-weight: 500; line-height: 1.4; }
/* A glowing dot in the pole colour, nudged down to sit on the first line's x-height. */
.engine-trait-point::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pole); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pole) 20%, transparent), 0 0 10px color-mix(in srgb, var(--pole) 45%, transparent); transform: translateY(-1px); }
.engine-trait-option[aria-pressed=true] .engine-trait-point { color: #f5f0e6; }
.wiki-btn.engine-trait-option:focus-visible { outline: 2px solid var(--pole); outline-offset: 3px; }
.wiki-btn.engine-trait-option[aria-pressed=true] { border-color: var(--pole); background: linear-gradient(160deg, color-mix(in srgb, var(--pole) 30%, #1b1814) 0%, color-mix(in srgb, var(--pole) 7%, #1b1814) 70%); color: #f5f0e6; box-shadow: 0 0 0 4px color-mix(in srgb, var(--pole) 24%, transparent), 0 14px 34px color-mix(in srgb, var(--pole) 22%, transparent); }
.engine-trait-option[aria-pressed=true] .engine-trait-letter { border-color: var(--pole); background: var(--pole); color: #14110d; }
@media (hover: hover) {
  .wiki-btn.engine-trait-slot:hover { border-color: #6f6350; background: #221e18; color: #e4ded4; }
  .wiki-btn.engine-trait-result:hover { border-color: transparent; background: none; color: #f5f0e6; text-decoration: underline; }
  .wiki-btn.engine-trait-option:hover { border-color: color-mix(in srgb, var(--pole) 42%, #3a352c); background: linear-gradient(160deg, color-mix(in srgb, var(--pole) 22%, #1b1814) 0%, #1b1814 68%); transform: translateY(-2px); box-shadow: 0 12px 30px #0000004d; }
  .wiki-btn.engine-trait-option[aria-pressed=true]:hover { border-color: var(--pole); transform: none; }
}
/* No border of its own: the surrounding .engine-trait-box already draws one. */
.engine-trait-reveal { text-align: center; }
.engine-trait-code { display: flex; justify-content: center; gap: 10px; margin: 8px 0 16px; }
.engine-trait-code button { display: grid; padding: 0; letter-spacing: 0; text-transform: none; place-items: center; width: 72px; height: 84px; border: 2px solid var(--pole); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--pole) 30%, #1b1814), color-mix(in srgb, var(--pole) 8%, #1b1814)); color: var(--pole); font: 900 46px/1 var(--wiki-display); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pole) 18%, transparent), 0 14px 30px #0000004d; animation: engine-trait-pop .5s cubic-bezier(.2,.9,.3,1.3) backwards; }
.engine-trait-code button:hover, .engine-trait-code button:focus-visible { background: linear-gradient(180deg, color-mix(in srgb, var(--pole) 48%, #1b1814), color-mix(in srgb, var(--pole) 18%, #1b1814)); }
.engine-trait-code button:nth-child(2) { animation-delay: .08s; }
.engine-trait-code button:nth-child(3) { animation-delay: .16s; }
.engine-trait-code button:nth-child(4) { animation-delay: .24s; }
@keyframes engine-trait-pop { from { opacity: 0; transform: translateY(14px) scale(.8); } }
/* The named type: a big name in the four letters' colours, and its description in reading size. */
.engine-trait-type { max-width: 720px; margin: 6px auto 30px; }
.engine-trait-type-name { width: fit-content; margin: 0 auto; background: linear-gradient(90deg, var(--type-1), var(--type-2), var(--type-3), var(--type-4)); -webkit-background-clip: text; background-clip: text; color: transparent; font: 900 44px/1.1 var(--wiki-display); letter-spacing: .02em; }
.engine-trait-type-text { margin: 12px 0 0; color: #e4ded4; font-size: 21px; font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.engine-trait-chips { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; text-align: left; }
.engine-trait-chip { display: grid; grid-template-columns: 34px minmax(0,1fr); column-gap: 10px; row-gap: 1px; align-items: center; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--pole) 40%, #3a352c); border-radius: 12px; background: color-mix(in srgb, var(--pole) 10%, #1b1814); }
.engine-trait-chip-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--pole); color: #14110d; }
.engine-trait-chip strong { font-size: 15px; line-height: 1.2; color: #f5f0e6; }
.engine-trait-chip span { color: var(--pole); font-size: 12px; font-style: italic; line-height: 1.3; }
.engine-trait-revise { margin: 16px 0 0; color: #a49c8f; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .engine-trait-stage.is-entering, .engine-trait-reveal.is-entering, .engine-trait-code button { animation: none; }
  .wiki-btn.engine-trait-option:hover { transform: none; }
}
@media(max-width:1050px) { .engine-trait-chips { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
  .engine-trait-box { padding: 14px; }
  .engine-trait-head { gap: 10px 12px; margin-bottom: 30px; }
  .engine-trait-strip { gap: 6px; }
  .wiki-btn.engine-trait-slot { gap: 7px; padding: 4px 10px 4px 4px; font-size: 11px; }
  .engine-trait-slot-letter { width: 26px; height: 26px; font-size: 13px; }
  .wiki-btn.engine-trait-result { margin-left: 6px; padding: 4px 2px; }
  .engine-trait-title { font-size: 22px; }
  .engine-trait-pair { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .wiki-btn.engine-trait-option { min-height: 0; padding: 16px 16px 18px; column-gap: 12px; }
  .engine-trait-option > strong { font-size: 19px; }
  .engine-trait-points { gap: 10px; margin-top: 14px; padding-top: 14px; }
  .engine-trait-point { column-gap: 12px; font-size: 15px; }
  .engine-trait-code { gap: 8px; }
  .engine-trait-type { margin-bottom: 22px; }
  .engine-trait-type-name { font-size: 34px; }
  .engine-trait-type-text { margin-top: 8px; font-size: 18px; }
  .engine-trait-code button { width: 56px; height: 66px; font-size: 34px; border-radius: 12px; }
  .engine-trait-chips { grid-template-columns: minmax(0,1fr); }
}

.engine-family-panel { display: grid; grid-template-columns: minmax(0,1fr); width: fit-content; max-width: 100%; margin: 4px 0 18px; }
/* The tree is fluid. Its cards share whatever width the column offers — the window and the
   character card beside it both change that — between a 150px floor and a 220px ceiling, and the
   key and the spacing ease in from their tight sizes as the column passes 890px. --family-room is
   the width the tree may fill, which depends on where the key sits. */
.engine-family-canvas { --family-pad-top: 22px; --family-pad-x: clamp(20px,calc(20px + (100cqw - 890px) * .05),26px); --family-key: clamp(176px,calc(176px + (100cqw - 890px) * .1),188px); --family-key-gap: clamp(24px,calc(24px + (100cqw - 890px) * .07),32px);
  /* The column, less the padding, the border and 2px so a rounded-up card never forces a scroll. */
  --family-inner: calc(100cqw - 2 * var(--family-pad-x) - 4px); --family-room: var(--family-inner);
  --family-branch-gap: clamp(24px,calc(24px + (var(--family-room) - 648px) * .19),56px);
  --family-unit: clamp(150px,calc((var(--family-room) - 2 * var(--family-gap) - var(--family-branch-gap)) / 4),220px); --family-card: var(--family-unit);
  display: flex; align-items: flex-start; gap: var(--family-key-gap); box-sizing: border-box; min-width: 0; margin: 0 0 18px; padding: var(--family-pad-top) var(--family-pad-x) 24px; border: 1px solid #3a342d; border-radius: 20px; background: #171615; }
.engine-family-mode .engine-question > h2 { max-width: none; }
.engine-family { container: family-tree / inline-size; --family-gap: 12px; --family-line: #5b5148; --family-close: #43c463; --family-present: #dca95c; --family-distant: #6f8aa8; --family-absent: #6b625a; }
/* The closeness key is never drawn like a branch of the tree. Beside the tree, or tucked into the
   corner the sibling row leaves open, it is a boxed card; across the top it is a header band that
   runs to the canvas edges. The wizard sets data-legend to the first of side, corner and top that
   the tree leaves room for. The key's own width sets its columns — one, two by two, or four — so
   a row of entries never breaks unevenly. */
.engine-family-legend { container: family-key / inline-size; box-sizing: border-box; margin: 0; background: #1f1d1a; }
.engine-family-legend .engine-eyebrow { margin: 0 0 12px; color: #9a9185; font-size: 10.5px; letter-spacing: .12em; }
.engine-family-legend ul { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
@container family-key (min-width:400px) { .engine-family-legend ul { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@container family-key (min-width:820px) { .engine-family-legend ul { grid-template-columns: repeat(4,minmax(0,1fr)); } }
.engine-family-legend li { display: grid; grid-template-columns: 10px minmax(0,1fr); column-gap: 8px; align-items: center; align-content: start; color: #aba499; font-size: 11px; line-height: 1.4; }
.engine-family-canvas:is([data-legend=side],[data-legend=corner]) .engine-family-legend { flex: none; width: var(--family-key); padding: 14px 14px 16px; border: 1px solid #38322b; border-radius: 12px; }
.engine-family-canvas:is([data-legend=side],[data-legend=corner]) .engine-eyebrow { padding-bottom: 10px; border-bottom: 1px solid #38322b; }
.engine-family-canvas[data-legend=side] { --family-room: calc(var(--family-inner) - var(--family-key) - var(--family-key-gap)); }
/* --family-notch is how far the corner key can slide in under the tree's right edge: to the
   father's box, which stops half a card and half a gap short of it. The tree is seven eighths of
   its own width up to there, so it can take eight sevenths of what the key leaves. */
.engine-family-canvas[data-legend=corner] { --family-room: calc((var(--family-inner) - var(--family-key) - var(--family-key-gap) - 4px) * 8 / 7); gap: 0; }
.engine-family-canvas[data-legend=corner] .engine-family-legend { align-self: flex-end; margin-left: calc(var(--family-key-gap) - var(--family-notch, 0px)); }
.engine-family-canvas[data-legend=top] { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; }
.engine-family-canvas[data-legend=top] .engine-family-legend { order: -1; margin: calc(-1 * var(--family-pad-top)) calc(-1 * var(--family-pad-x)) 0; padding: 14px var(--family-pad-x) 16px; border-bottom: 1px solid #3a342d; border-radius: 19px 19px 0 0; }
.engine-family-legend li::before { content: ''; grid-row: 1; box-sizing: border-box; width: 8px; height: 8px; border-radius: 50%; background: var(--swatch); }
.engine-family-legend li span { grid-column: 2; }
.engine-family-legend li[data-status=close] { --swatch: var(--family-close); }
.engine-family-legend li[data-status=present] { --swatch: var(--family-present); }
.engine-family-legend li[data-status=distant] { --swatch: var(--family-distant); }
.engine-family-legend li[data-status=absent]::before { background: none; border: 1px dashed #8a8075; }
.engine-family-legend strong { color: #f5f2ec; font-size: 12px; white-space: nowrap; }
.engine-family-tree { display: grid; justify-items: center; flex: 0 1 auto; width: max-content; max-width: 100%; min-width: 0; margin: 0; }
.engine-family-upper { display: grid; grid-template-columns: repeat(2,minmax(0,auto)); column-gap: var(--family-branch-gap); justify-content: center; }
.engine-family-branch { display: grid; justify-items: center; }
.engine-family-side { margin: 0 0 10px; color: #fc8b52; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.engine-family-pair { display: flex; gap: var(--family-gap); }
.engine-family-join { position: relative; box-sizing: border-box; width: calc(var(--family-card) + var(--family-gap)); height: 22px; margin-bottom: 18px; border: 2px solid var(--family-line); border-top: 0; border-radius: 0 0 12px 12px; }
.engine-family-join::after { content: ''; position: absolute; top: 100%; left: 50%; height: 18px; border-left: 2px solid var(--family-line); transform: translateX(-1px); }
.engine-family-join-parents { width: calc(2 * var(--family-card) + var(--family-gap) + var(--family-branch-gap)); margin-bottom: 0; }
.engine-family-join-parents::after { height: 20px; }
.engine-family-children { width: 100%; overflow-x: auto; padding-bottom: 6px; }
.engine-family-row { --family-adder: var(--family-card); position: relative; display: flex; gap: var(--family-gap); width: max-content; max-width: none; margin: 0 auto; padding-top: 20px; }
.engine-family-row::before { content: ''; position: absolute; top: 0; left: calc(var(--family-adder) + var(--family-gap) + var(--family-card) / 2); right: calc(var(--family-adder) + var(--family-gap) + var(--family-card) / 2); border-top: 2px solid var(--family-line); }
.engine-family-row > .engine-family-card::before { content: ''; position: absolute; bottom: 100%; left: 50%; height: 20px; border-left: 2px solid var(--family-line); transform: translateX(-1px); }
.engine-family-card { position: relative; box-sizing: border-box; flex: none; width: var(--family-card); padding: 12px; border: 1px solid #413b34; border-radius: 14px; background: #1b1b1b; transition: border-color .15s, background .15s; }
/* Only set once at least one card is answered, so an untouched tree stays calm. */
.engine-family-card[data-missing] { border-color: #6f6350; border-style: dashed; background: #1f1c16; }
.engine-family-card.is-required-highlight { border-color:#fc5b0a; border-style:solid; background:#302116; box-shadow:0 0 0 3px #fc5b0a55,0 0 24px #fc5b0a33; }
.engine-family-card:focus { outline: none; }
.engine-family-card:focus-visible { outline: 2px solid #fc5b0a; outline-offset: 3px; }
.engine-family-head { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 6px; align-items: start; min-height: 38px; margin-bottom: 10px; }
.engine-family-name { grid-column: 1; display: block; color: #f5f2ec; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.engine-family-role { grid-column: 1; display: block; margin-top: 3px; color: #aba499; font-size: 12px; line-height: 1.3; }
.wiki-btn.engine-family-remove { grid-column: 2; grid-row: 1 / span 2; width: 24px; height: 24px; padding: 0; border-radius: 50%; color: #aba499; font: 700 16px/1 -apple-system,"Segoe UI",sans-serif; letter-spacing: 0; }
.wiki-btn.engine-family-remove:hover { color: #ffaba3; }
.engine-family-statuses { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.engine-family-status { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 30px; padding: 4px 6px; border: 1px solid #4a433b; border-radius: 999px; color: #c6c1b9; font-size: 11.5px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.engine-family-status input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.engine-family-status:hover { border-color: #bd7845; background: #28221c; }
.engine-family-status:has(input:focus-visible) { outline: 2px solid #fc5b0a; outline-offset: 2px; }
.engine-family-status[data-status=close] { --chip: var(--family-close); }
.engine-family-status[data-status=present] { --chip: var(--family-present); }
.engine-family-status[data-status=distant] { --chip: var(--family-distant); }
.engine-family-status[data-status=absent] { --chip: var(--family-absent); }
.engine-family-status:has(input:checked) { color: #121212; border-color: var(--chip); background: var(--chip); }
.engine-family-status[data-status=absent]:has(input:checked) { color: #f5f2ec; border-style: dashed; border-color: #8a8075; background: #3a342d; }
.engine-family-member[data-status=close] { border-color: var(--family-close); background: #16281b; box-shadow: inset 0 0 0 1px var(--family-close); }
.engine-family-member[data-status=present] { border-color: var(--family-present); background: #2a2419; }
.engine-family-member[data-status=distant] { border-color: var(--family-distant); background: #1d2126; }
.engine-family-member[data-status=absent] { border-style: dashed; border-color: #6b625a; background: #171615; }
.engine-family-member[data-status=absent] .engine-family-name { color: #aba499; }
.engine-family-self { display: grid; justify-items: center; align-content: start; padding-top: 14px; border-color: #fc5b0a; background: linear-gradient(160deg,#3a2415,#241a12); box-shadow: inset 0 0 0 1px #fc5b0a; text-align: center; }
.engine-family-self .engine-family-head { display: block; min-height: 0; margin: 0 0 8px; }
.engine-family-self .engine-family-name { font-family: var(--wiki-display); font-size: 22px; line-height: 1; }
.engine-family-self > .engine-family-portrait { width: 64px; height: 64px; aspect-ratio: 1; margin: 0 0 10px; border-radius: 14px; overflow: hidden; }
.engine-family-self > .engine-family-portrait img { display: block; width: 100%; height: 100%; }
.engine-family-order { margin: 0; }
.engine-family-order strong { display: block; color: #ffc700; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.engine-family-order span { display: block; margin-top: 3px; color: #d4c1ad; font-size: 12px; }
.engine-family-order span:empty { display: none; }
.engine-family-sibling-controls { display: grid; gap: 8px; margin-bottom: 10px; }
.engine-family-relation { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 999px; background: #121212; }
.wiki-btn.engine-family-toggle { padding: 5px 6px; border: 0; border-radius: 999px; background: none; color: #aba499; font: 800 11px/1.3 -apple-system,"Segoe UI",sans-serif; letter-spacing: 0; text-transform: none; }
.wiki-btn.engine-family-toggle:hover { background: #2a2825; color: #f5f2ec; }
.wiki-btn.engine-family-toggle[aria-pressed=true] { background: #3b3935; color: #f5f2ec; }
.engine-family-gap { display: grid; grid-template-columns: 30px minmax(0,1fr) 30px; align-items: center; gap: 4px; }
.wiki-btn.engine-family-step { width: 30px; height: 30px; padding: 0; border-radius: 50%; font: 700 18px/1 -apple-system,"Segoe UI",sans-serif; letter-spacing: 0; }
.engine-family-gap-value { text-align: center; color: #f5f2ec; font-size: 13px; font-weight: 700; }
.wiki-btn.engine-family-add { display: grid; align-content: center; justify-items: center; gap: 8px; flex: none; box-sizing: border-box; width: var(--family-adder, var(--family-card)); min-height: 150px; padding: 14px; border: 1px dashed #5b5148; border-radius: 14px; background: none; color: #bdb5a9; font: 700 12px/1.35 -apple-system,"Segoe UI",sans-serif; letter-spacing: 0; text-align: center; text-transform: none; white-space: normal; }
.wiki-btn.engine-family-add:hover:not(:disabled) { border-color: #fc8b52; background: #1f1a15; color: #f5f2ec; }
.engine-family-add-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #5b5148; border-radius: 50%; font-size: 20px; line-height: 1; }
.wiki-btn.engine-family-incomplete { align-self:center; max-width:min(760px,60vw); padding:8px 6px; border:0; border-radius:0; background:none; color:#fc8b52; font:700 14px/1.4 -apple-system,"Segoe UI",sans-serif; letter-spacing:0; text-align:left; text-decoration:underline; text-transform:none; white-space:normal; }
.wiki-btn.engine-family-incomplete:hover { background:none; color:#ffc19f; }
.wiki-btn.engine-family-incomplete[hidden] { display:none; }
/* Below this the character card would leave the tree less than the 700px its smallest size needs. */
@media(max-width:1320px) {
  .engine-family-mode .engine-layout { grid-template-columns: minmax(0,1fr); }
  .engine-family-mode .engine-preview { display: none; }
}
@media(max-width:760px) {
  .engine-family-panel { width: auto; }
  .engine-family-canvas { --family-pad-x: 14px; --family-pad-top: 16px; --family-card: calc(50% - var(--family-gap) / 2); padding-bottom: 16px; }
  .engine-family-canvas[data-legend=top] { gap: 16px; }
  .engine-family-tree { width: auto; max-width: none; }
  .engine-family-tree { justify-items: stretch; }
  .engine-family-upper { grid-template-columns: minmax(0,1fr); row-gap: 22px; }
  .engine-family-branch { justify-items: stretch; }
  .engine-family-pair { flex-wrap: wrap; }
  .engine-family-branch > .engine-family-member { width: 100%; margin-top: var(--family-gap); }
  .engine-family-branch > .engine-family-member .engine-family-statuses { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .engine-family-join { display: none; }
  .engine-family-children { overflow: visible; }
  .engine-family-row { width: auto; flex-wrap: wrap; margin: 22px 0 0; padding-top: 0; }
  .engine-family-row::before, .engine-family-row > .engine-family-card::before { display: none; }
  .wiki-btn.engine-family-add { min-height: 120px; }
  .wiki-btn.engine-family-incomplete { order:3; flex:1 1 100%; max-width:none; padding:4px 0; }
}
@media(prefers-reduced-motion:reduce) { .engine-family-card, .engine-family-status { transition: none; } }
/* A crowded sibling row shares the same room: its cards narrow, to a floor that drops as the row
   fills, before it has to scroll. From three siblings the adders are four fifths of a card. */
.engine-family-row[data-siblings="2"] { --family-card: clamp(150px,calc((var(--family-room) - 4 * var(--family-gap)) / 5),var(--family-unit)); }
.engine-family-row[data-siblings="3"] { --family-card: clamp(150px,calc((var(--family-room) - 5 * var(--family-gap)) / 5.6),var(--family-unit)); --family-adder: calc(var(--family-card) * .8); }
.engine-family-row[data-siblings="4"] { --family-card: clamp(136px,calc((var(--family-room) - 6 * var(--family-gap)) / 6.6),var(--family-unit)); --family-adder: calc(var(--family-card) * .8); }
.engine-family-row[data-siblings="5"] { --family-card: clamp(128px,calc((var(--family-room) - 7 * var(--family-gap)) / 7.6),var(--family-unit)); --family-adder: calc(var(--family-card) * .8); }
.engine-family-row[data-siblings="6"] { --family-card: clamp(120px,calc((var(--family-room) - 8 * var(--family-gap)) / 8.6),var(--family-unit)); --family-adder: calc(var(--family-card) * .8); }
.engine-family-row[data-siblings="4"] .engine-family-status, .engine-family-row[data-siblings="5"] .engine-family-status, .engine-family-row[data-siblings="6"] .engine-family-status { padding: 4px 3px; font-size: 11px; }
@media(max-width:760px) { .engine-family-row[data-siblings] { --family-card: calc(50% - var(--family-gap) / 2); --family-adder: var(--family-card); } .engine-family-row[data-siblings] .engine-family-status { padding: 4px 6px; font-size: 11.5px; } }
/* Family bonds: the family step's second stage, one card per relative the tree put in reach. The
   closeness chip reuses the tree's own colours, so the card reads as the box it came from. */
.engine-bond-list { display: grid; gap: 14px; margin: 4px 0 18px; }
.engine-bond-card { padding: 16px 18px; border: 1px solid #3a352c; border-radius: 12px; background: #1b1814; }
.engine-bond-card:focus-visible { outline: 2px solid #fc8b52; outline-offset: 2px; }
.engine-bond-card.answered { border-color: #6f6350; background: #221e18; }
.engine-bond-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.engine-bond-head strong { font-size: 20px; line-height: 1.2; color: #f5f0e6; }
.engine-bond-note { color: #a49c8f; font-size: 14px; }
.engine-bond-status { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--bond-tone) 16%, #1b1814); color: var(--bond-tone); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.engine-bond-status[data-status=close] { --bond-tone: var(--family-close); }
.engine-bond-status[data-status=present] { --bond-tone: var(--family-present); }
.engine-bond-status[data-status=distant] { --bond-tone: #8fb6e8; }
.engine-bond-status[data-status=absent] { --bond-tone: #b6ada0; }
.engine-bond-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 10px; }
.wiki-btn.engine-bond-option { display: flex; flex-direction: row; align-items: flex-start; gap: 11px; padding: 12px 14px; border: 1px solid #454036; border-radius: 10px; background: #221f1a; color: #f5f0e6; text-align: left; text-transform: none; font-family: inherit; letter-spacing: normal; }
.engine-bond-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.engine-bond-icon { flex: none; display: block; width: 22px; height: 22px; margin-top: 1px; color: #cbbfae; }
.engine-bond-icon svg { display: block; width: 100%; height: 100%; }
.engine-bond-option[aria-pressed=true] .engine-bond-icon { color: #ffb98a; }
.engine-bond-option strong { font-size: 15px; line-height: 1.3; }
.engine-bond-option span { color: #b3aba0; font-size: 13px; font-weight: 400; line-height: 1.5; }
.engine-bond-option:hover { border-color: #b7aa93; background: #2b2721; }
.engine-bond-option:focus-visible { outline: 2px solid #fc8b52; outline-offset: 2px; }
.wiki-btn.engine-bond-option[aria-pressed=true] { border-color: #fc8b52; background: #2f2419; }
.engine-bond-option[aria-pressed=true] strong { color: #ffb98a; }
@media(max-width:760px) {
  .engine-bond-card { padding: 13px 13px; }
  .engine-bond-head strong { font-size: 17px; }
  .engine-bond-status { margin-left: 0; }
  .engine-bond-options { grid-template-columns: minmax(0,1fr); }
}
.engine-question > h2 { padding-right: 130px; }
@media(max-width:760px) {
  .engine-rail { position: static; flex-wrap: wrap; justify-content: flex-end; margin: 0 0 14px; }
  .engine-question > h2 { padding-right: 0; }
}

/* Heat map: how many other Ninjas made each foundation pick. One bright ramp everywhere, green
   (rare) through yellow-green, yellow and orange to red (popular), carrying dark text. --heat is 0–1
   against its popularity rank among nearby options, set per element, so --heat-fill is worked out on
   each element that paints it: green to yellow over the first half, yellow to red over the second,
   mixed in oklch so the hue swings round the bright side instead of through brown. Nothing shows
   until the wizard host carries .engine-heat-on, which it does only once the counts are in. */
.engine-heat-on, .engine-heat-toggle { --heat-cold: #22c55e; --heat-mid: #facc15; --heat-hot: #ef4444; --heat-ink: #1a1714; }
.engine-heat-on :is(.engine-heat-chip, .engine-alignment-region, .engine-alignment-refinement) { --heat-fill: color-mix(in oklch, var(--heat-hot) clamp(0%, calc(var(--heat,0) * 200% - 100%), 100%), color-mix(in oklch, var(--heat-mid) clamp(0%, calc(var(--heat,0) * 200%), 100%), var(--heat-cold))); }
.engine-heat-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; }
.wiki-btn.engine-heat-button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 10px; border: 1px solid #ffffff20; background: transparent; color: #aaa69f; font: 500 12px/1.4 -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; text-transform: none; }
.wiki-btn.engine-heat-button:hover { border-color: #ffffff40; background: #ffffff08; color: #e7e1d7; }
.wiki-btn.engine-heat-button[aria-pressed=true] { border-color: #ffffff30; background: #ffffff0a; color: #c6c1b9; }
.wiki-btn.engine-heat-button[aria-pressed=true]:hover { border-color: #ffffff50; background: #ffffff12; color: #e7e1d7; }
.engine-heat-button svg { flex: none; width: 14px; height: 14px; color: currentColor; }
.engine-heat-legend { display: none; align-items: center; gap: 8px; color: #aaa69f; font: 500 12px/1.4 -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; text-transform: none; }
.engine-heat-toggle:not([data-state=off]) .engine-heat-legend { display: flex; }
.engine-heat-toggle:not([data-state=on]) :is(.engine-heat-end,.engine-heat-scale) { display: none; }
.engine-heat-scale { width: 88px; height: 8px; border-radius: 999px; background: linear-gradient(90deg in oklch, var(--heat-cold), var(--heat-mid), var(--heat-hot)); box-shadow: inset 0 0 0 1px #ffffff2e; }
.engine-heat-count { margin-left: 4px; color: #a49c8f; font-weight: 400; letter-spacing: normal; text-transform: none; }
.engine-heat-toggle[data-state=on] .engine-heat-count { margin-left: 8px; padding-left: 12px; border-left: 1px solid #ffffff30; }
.engine-heat-toggle[data-state=error] .engine-heat-count { color: #ff9b73; }
/* The badge: a swatch of the ramp carrying the count. An option nobody has picked is an outline. */
.engine-heat-chip { display: none; }
.engine-heat-on .engine-heat-chip { display: inline-flex; flex: none; align-self: center; align-items: baseline; justify-content: center; gap: .3em; box-sizing: border-box; min-width: 26px; padding: 3px 9px; border: 1px solid #0000004d; border-radius: 999px; background: var(--heat-fill); box-shadow: 0 1px 5px #0000006b; color: var(--heat-ink); font: 800 13px/1.15 var(--wiki-display); letter-spacing: .03em; text-align: center; text-transform: none; white-space: nowrap; }
.engine-heat-on .engine-heat-chip > strong { color: inherit; font: inherit; font-weight: 900; }
.engine-heat-on .engine-heat-chip > .engine-heat-unit { color: inherit; font: inherit; opacity: .86; }
.engine-heat-on .engine-heat-chip > .engine-heat-unit:empty { display: none; }
.engine-heat-on .engine-heat-chip[data-empty=true] { border-style: dashed; border-color: #00000080; background: var(--heat-cold); }
.engine-heat-on .engine-heat-corner { position: absolute; top: -9px; right: -7px; z-index: 1; min-width: 20px; padding: 1px 5px; font-size: 11px; }
/* The kingdom map: badges pinned beside each painted name. Only the badges take pointer events; each
   one picks its own place, since a badge beside a long name can reach over into the next slice. */
.engine-origin-heat { position: absolute; inset: 0; pointer-events: none; }
.engine-heat-on .engine-origin-heat .engine-heat-chip { position: absolute; padding: 4px 10px; font-size: 15px; transform: translateY(-50%); pointer-events: auto; cursor: pointer; }
.engine-heat-on .engine-origin-heat .engine-heat-centered { transform: translate(-50%,-50%); }
/* The alignment chart becomes the heat map itself: every region and box repainted on the ramp. */
.engine-alignment-tools { display: grid; grid-template-columns: minmax(0,1fr) repeat(2,210px) minmax(0,1fr); align-items: center; gap: 12px 16px; }
.engine-alignment-tools .engine-alignment-show-all, .engine-alignment-tools .engine-heat-toggle { margin: 0; }
.engine-alignment-tools .engine-alignment-show-all { grid-column: 2; width: 100%; }
.engine-alignment-tools .engine-heat-toggle { display: contents; }
.engine-alignment-tools .wiki-btn.engine-heat-button { grid-column: 3; justify-content: center; min-height: 44px; padding: 10px 18px; border-color: #fff; background: #222221; color: var(--wiki-text); font: 900 14px/1.3 var(--wiki-display); letter-spacing: .04em; text-transform: uppercase; }
.engine-alignment-tools .wiki-btn.engine-heat-button[aria-pressed=true] { border-color: #fc8b52; background: #302116; color: #fff2e8; }
.engine-alignment-tools .wiki-btn.engine-heat-button:hover { background: #35353b; }
.engine-alignment-tools .engine-heat-legend { grid-column: 4; min-width: 0; flex-wrap: wrap; }
.engine-alignment-tools .engine-heat-scale { flex: none; }
.engine-alignment-tools:not(:has(.engine-heat-toggle)) { display: flex; justify-content: center; }
.engine-alignment-tools:not(:has(.engine-heat-toggle)) .engine-alignment-show-all { width: fit-content; }
@media(max-width:760px) {
  .engine-alignment-tools { grid-template-columns: 210px minmax(0,1fr); }
  .engine-alignment-tools .wiki-btn.engine-heat-button { grid-column: 1; }
  .engine-alignment-tools .engine-heat-legend { grid-column: 2; }
}
@media(max-width:500px) {
  .engine-alignment-tools .engine-heat-legend { grid-column: 1 / -1; }
}
.engine-alignment-mode .engine-alignment-region { transition: background-color .35s ease, background-image .15s; }
.engine-alignment-mode.engine-heat-on .engine-alignment-region { background-color: var(--heat-fill); }
.engine-alignment-mode.engine-heat-on .engine-alignment-backdrop-region { --region-color: #1a1714; }
.engine-alignment-mode.engine-heat-on .engine-alignment-camera .engine-alignment-refinement { background: var(--heat-fill); }
.engine-alignment-mode.engine-heat-on .engine-alignment-camera .engine-alignment-refinement::before { opacity: 0; }
/* Bright fills take dark type: the region's name and description, and the zoomed box's. */
.engine-alignment-mode.engine-heat-on :is(.wiki-btn.engine-alignment-preset, .engine-alignment-description, .engine-alignment-refinement, .engine-refinement-description) { color: var(--heat-ink); }
.engine-heat-on .engine-alignment-preset .engine-heat-chip { font-size: 14px; }
/* A class button's name already fills it on a narrower chart, so its count rides on the corner. */
.engine-heat-on .engine-refinement-class { position: relative; }
.engine-heat-on .engine-refinement-class > .engine-heat-chip { position: absolute; top: -8px; right: -6px; min-width: 20px; padding: 1px 5px; font-size: 11px; }
/* MBTI: a line under each pole's tagline, above its points, and the shared-type line on the reveal. */
.engine-heat-on .wiki-btn.engine-trait-option { grid-template-areas: "art name letter" "art tagline letter" "art heat letter" "points points points"; grid-template-rows: auto auto auto 1fr; }
.engine-heat-on .engine-trait-option > .engine-heat-chip { grid-area: heat; justify-self: start; margin-top: 7px; }
.engine-trait-heat { display: none; }
.engine-heat-on .engine-trait-heat { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; color: #c6c1b9; font-size: 14px; }
/* Family: closeness counts sit on each pill's corner; birth order and bonds carry inline badges. */
.engine-heat-on .engine-family-self > .engine-heat-chip { margin-top: 8px; }
.engine-family[data-stage=bonds] > .engine-lead { font-size: 14px; line-height: 1.5; white-space: nowrap; }
.engine-heat-on .engine-bond-option > .engine-heat-chip { align-self: flex-start; margin-left: auto; }
@media(max-width:760px) {
  .engine-heat-on .engine-heat-unit { display: none; }
  .engine-heat-on .engine-origin-heat .engine-heat-chip { padding: 2px 6px; font-size: 11px; }
  /* A zoomed box on a phone is a narrow column with no width to spare: its colour carries its heat. */
  .engine-heat-on .engine-refinement-heading > .engine-heat-chip { display: none; }
}

/* Level 1 character wiki: the foundation facts, then the backstory and episodes. */
.engine-character-wiki { --character-card-pad:clamp(22px,2.4vw,30px); width:100%; max-width:none; margin:0; container:character-page / inline-size; }
/* Match the masthead-to-notice gap to the notice-to-character gap. */
#wiki-main-content.engine-character-home:has(> .engine-character-wiki > .wiki-notice:first-child) { padding-top:16px; }
.engine-character-home > .engine-character-wiki > .wiki-notice:first-child { margin-top:0; }
/* Every card on the character page shares one inset, so their contents line up down the page. */
@container character-page (max-width:660px) { .engine-character-hero,.engine-level-board,.engine-foundations,.engine-relationship-results,.engine-arc-profile { --character-card-pad:18px; } }
@container character-page (max-width:420px) { .engine-character-hero,.engine-level-board,.engine-foundations,.engine-relationship-results,.engine-arc-profile { --character-card-pad:16px; } }
.engine-character-hero {
  --portrait-size:204px;
  display:grid;
  grid-template-columns:var(--portrait-size) minmax(0,1fr);
  grid-template-areas:"portrait identity" "portrait facts";
  align-items:center;
  gap:22px 28px;
  padding:var(--character-card-pad);
  border:1px solid #3e3932;
  border-radius:24px;
  background:radial-gradient(ellipse at 0 0,#fc5b0a12,transparent 60%),#1a1917;
  box-shadow:inset 0 1px #ffffff05,0 12px 32px #0002;
}
.engine-character-hero:not(.has-portrait) { grid-template-columns:minmax(0,1fr); grid-template-areas:"identity" "facts"; }
.engine-character-hero > .ninja-portrait {
  grid-area:portrait;
  align-self:center;
  width:var(--portrait-size);
  height:var(--portrait-size);
  min-width:0;
  min-height:0;
  margin:0;
  border:1px solid #ffffff20;
  border-radius:16px;
  aspect-ratio:1;
  overflow:hidden;
  box-shadow:0 8px 22px #0004;
}
.engine-character-hero > .ninja-portrait img { width:100%; height:100%; border-radius:0; object-fit:contain; }
.engine-character-identity {
  grid-area:identity;
  min-width:0;
  padding:0;
}
.engine-character-identity .engine-eyebrow { margin:0 0 8px; color:#b4a697; font-size:12px; font-weight:800; letter-spacing:.13em; }
.engine-character-name { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.engine-name-edit { padding:6px 8px; border:1px solid transparent; border-radius:6px; background:transparent; color:#b4a697; cursor:pointer; font:500 12px/1.2 -apple-system, "Segoe UI", sans-serif; text-transform:none; letter-spacing:0; }
.engine-name-edit:hover { border-color:#ffffff20; background:#ffffff08; color:#e0d4c7; }
/* Stands in for Edit on a page only an admin can develop: there if you look, easy to miss if not. */
.engine-edit-lock { flex:none; display:inline-grid; align-self:center; width:15px; height:15px; color:#b4a69766; }
.engine-edit-lock svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.engine-foundation-card-header .engine-edit-lock,.engine-relationship-results-header .engine-edit-lock,.engine-arc-profile-header .engine-edit-lock { align-self:start; margin-top:4px; }
.engine-character-identity h1 {
  min-width:0;
  margin:0;
  color:#fff8ec;
  font:900 clamp(40px,4vw,64px)/1 var(--wiki-display);
  letter-spacing:-.015em;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}
.engine-level-badge {
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  margin:0;
  padding:5px 11px;
  border:1px solid #eebc4860;
  border-radius:8px;
  background:#f7c84a17;
  color:#f9cd64;
  font:900 14px/1.2 var(--wiki-display);
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}
.engine-level-badge.is-level-two { border-color:#7fd48a80; background:#7fd48a1a; color:#9fe4a8; box-shadow:0 0 14px #7fd48a33; }
.engine-character-facts {
  grid-area:facts;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  min-width:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.engine-character-fact {
  --fact-accent:#a7dfaa;
  --fact-tint:#233427;
  --fact-surface:#1c241d;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
  min-height:102px;
  padding:16px 14px 16px 72px;
  border:1px solid #ffffff12;
  border-radius:14px;
  background:var(--fact-surface);
}
.engine-character-fact[data-fact=alignment] { --fact-accent:#f8d27b; --fact-tint:#3b301c; --fact-surface:#292419; }
.engine-character-fact[data-fact=family] { --fact-accent:#83d4ec; --fact-tint:#1c3540; --fact-surface:#1b252b; }
.engine-character-fact[data-fact=personality] { --fact-accent:#bea7f2; --fact-tint:#332a45; --fact-surface:#24202d; }
.engine-character-fact dt { color:var(--fact-accent); font-size:12px; font-weight:800; line-height:1.3; letter-spacing:.055em; text-transform:uppercase; overflow-wrap:anywhere; }
.engine-character-fact-icon { position:absolute; top:50%; left:14px; display:grid; place-items:center; width:44px; height:44px; border:1px solid #ffffff0a; border-radius:12px; background:var(--fact-tint); transform:translateY(-50%); }
.engine-character-fact-icon svg { display:block; width:26px; height:26px; }
.engine-character-fact dd { margin:6px 0 0; color:#fff8ee; line-height:1.3; overflow-wrap:anywhere; }
.engine-character-fact dd strong { display:block; font-size:18px; font-weight:700; }
.engine-character-fact-detail { display:block; margin-top:3px; color:#c2bcb4; font-size:14px; }
.engine-character-fact[data-fact=family] .engine-character-fact-detail { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
@container character-page (max-width:1180px) {
  .engine-character-hero { --portrait-size:136px; grid-template-areas:"portrait identity actions" "facts facts facts"; gap:22px; }
  .engine-character-identity h1 { font-size:52px; }
  .engine-character-facts { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .engine-character-fact { padding-left:62px; }
  .engine-character-fact-icon { width:36px; height:36px; }
  .engine-character-fact-icon svg { width:23px; height:23px; }
}
@container character-page (max-width:880px) {
  .engine-character-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container character-page (max-width:660px) {
  .engine-character-hero { --portrait-size:104px; grid-template-columns:var(--portrait-size) minmax(0,1fr); grid-template-areas:"portrait identity" "facts facts"; gap:18px; border-radius:20px; }
  .engine-character-hero:not(.has-portrait) { grid-template-columns:minmax(0,1fr); grid-template-areas:"identity" "facts"; }
  .engine-character-hero > .ninja-portrait { border-radius:12px; }
  .engine-character-identity h1 { font-size:42px; }
  .engine-character-name { gap:8px 12px; }
  .engine-character-facts { gap:10px; }
}
@container character-page (max-width:420px) {
  .engine-character-hero { --portrait-size:88px; gap:16px; }
  .engine-character-identity h1 { font-size:36px; }
  .engine-character-identity .engine-eyebrow { font-size:12px; letter-spacing:.06em; }
  .engine-character-fact { min-height:134px; justify-content:flex-start; padding:12px; }
  .engine-character-fact dt { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
  .engine-character-fact-icon { position:static; width:32px; height:32px; border-radius:9px; transform:none; }
  .engine-character-fact-icon svg { width:22px; height:22px; }
  .engine-character-fact dd strong { font-size:16px; }
}
@container character-page (max-width:300px) {
  .engine-character-facts { grid-template-columns:minmax(0,1fr); }
  .engine-character-fact { min-height:94px; padding:14px 14px 14px 62px; }
  .engine-character-fact dt { display:block; }
  .engine-character-fact-icon { position:absolute; top:50%; left:14px; transform:translateY(-50%); }
}
.engine-character-tabs { display:flex; align-items:center; gap:6px; margin:20px 0; padding:6px; overflow-x:auto; border:1px solid #34312d; border-radius:999px; background:#191919; scrollbar-width:none; }
.engine-character-tabs:first-child { margin-top:0; }
.engine-character-tabs .wiki-btn { flex:0 0 auto; min-height:42px; padding-inline:20px; border-color:transparent; background:transparent; }
.engine-character-tabs .wiki-btn[aria-pressed=true] { background:#f5f2ec; border-color:#f5f2ec; color:#171717; }
.engine-character-tabs .wiki-btn.is-locked { display:inline-flex; align-items:center; gap:7px; color:#a39c92; }
.engine-character-tabs .wiki-btn.is-locked[aria-pressed=true] { color:#171717; }
.engine-tab-lock { display:inline-grid; width:14px; height:14px; }
.engine-tab-lock svg,.engine-lock-badge-icon svg,.engine-locked-notice-icon svg,.engine-locked-step-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* A locked level's tab: why it is locked and the step that opens it, then a preview of the level. */
.engine-level-locked { gap:20px; }
.engine-lock-badge { display:inline-flex; flex:none; align-items:center; gap:7px; padding:7px 12px; border:1px solid #4a433a; border-radius:999px; background:#211f1c; color:#c9c1b5; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.engine-lock-badge-icon { display:inline-grid; width:14px; height:14px; }
.engine-locked-lead { max-width:70ch; margin:0; color:#c6c1b9; font-size:15px; line-height:1.55; }
.engine-locked-notice { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px 18px; padding:18px 20px; border:1px solid #5a4a36; border-radius:16px; background:linear-gradient(145deg,#2a231b,#1d1b18); }
.engine-locked-notice-icon { display:inline-grid; width:42px; height:42px; padding:10px; border-radius:12px; background:#fc8b5226; color:#fc8b52; }
.engine-locked-notice-copy { display:grid; gap:4px; min-width:0; }
.engine-locked-notice-copy strong { color:#fffaf1; font-size:17px; line-height:1.35; }
.engine-locked-requirements { margin:4px 0 0; padding-left:24px; color:#fffaf1; font-size:16px; font-weight:700; line-height:1.4; }
.engine-locked-requirements li { padding-left:4px; }
.engine-locked-requirements li+li { margin-top:4px; }
.engine-locked-requirements li::marker { color:#fc8b52; }
.engine-locked-kicker { margin:6px 0 0; color:#9a9185; font:800 12px/1.3 -apple-system,"Segoe UI",sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.engine-locked-preview { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:0; padding:0; list-style:none; }
.engine-locked-step { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:12px; padding:16px; border:1px solid #38342e; border-radius:14px; background:#1f1e1c; }
.engine-locked-step-icon { display:inline-grid; width:38px; height:38px; padding:8px; border-radius:10px; background:color-mix(in srgb,var(--arc-accent) 15%,transparent); color:var(--arc-accent); }
.engine-locked-step div { display:grid; gap:4px; min-width:0; }
.engine-locked-step strong { color:#fffaf1; font-size:16px; }
.engine-locked-step span { color:#b9b1a5; font-size:14px; line-height:1.5; }
@container character-page (max-width:620px) {
  .engine-locked-notice { grid-template-columns:auto minmax(0,1fr); }
  .engine-locked-notice .engine-locked-go { grid-column:1 / -1; width:100%; }
}

.engine-character-body { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:24px; }
.engine-character-main,.engine-character-panel { min-width:0; display:grid; gap:18px; }
.engine-wiki-card,.engine-character-panel { min-width:0; padding:26px; border:1px solid #3d3933; border-radius:20px; background:#1a1a1a; }
.engine-wiki-card h2,.engine-character-panel h2 { margin:0; font:32px/1.05 var(--wiki-display); }
.engine-card-heading,.engine-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.engine-card-heading .engine-eyebrow,.engine-panel-heading .engine-eyebrow { margin-bottom:8px; }
.engine-card-preview { max-width:850px; margin:18px 0; color:#d2cbc0; font-size:16px; line-height:1.7; white-space:pre-wrap; }
.engine-card-empty { margin:18px 0; padding:22px; border:1px dashed #484139; border-radius:14px; color:#9f988e; font-size:15px; line-height:1.6; background:#151515; }
/* Level 2 board: the overview's call to action. The copy and one button on the left, a miniature
   of the relationship map on the right, lit where a Ninja already stands. */
.engine-level-board {
  container:level-board / inline-size;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(380px,44%,600px);
  grid-template-areas:"copy map" "actions map";
  align-items:center;
  gap:16px clamp(24px,4vw,56px);
  padding:var(--character-card-pad);
  overflow:hidden;
  border:1px solid #453d34;
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0,#fc5b0a1c,transparent 40%),
    linear-gradient(145deg,#201d19,#181817 58%,#1c1a17);
  box-shadow:inset 0 1px #ffffff08,0 18px 42px #0003;
}
.engine-level-board.is-complete { border-color:#7fd48a55; background:radial-gradient(circle at 100% 0,#7fd48a1f,transparent 40%),linear-gradient(145deg,#1b211b,#181817 58%,#1c1a17); }
.engine-level-board-copy { grid-area:copy; align-self:end; min-width:0; max-width:620px; }
.engine-level-board-copy .engine-eyebrow { margin-bottom:8px; }
.engine-level-board.is-complete .engine-eyebrow { color:#8fdd9a; }
.engine-level-board h2 { margin:0; color:#fff8ec; font:clamp(34px,3.4vw,54px)/.98 var(--wiki-display); letter-spacing:-.01em; text-transform:uppercase; }
.engine-level-board-lead { max-width:560px; margin:12px 0 0; color:#b3ab9f; font-size:16px; line-height:1.55; }
.engine-level-board-actions { grid-area:actions; align-self:start; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:6px; }
.wiki-btn.engine-level-open { min-height:52px; padding:12px 28px; font-size:16px; letter-spacing:.05em; box-shadow:0 10px 30px #ffc70030; transition:transform .18s,box-shadow .18s,background .18s; }
.wiki-btn.engine-level-open:hover { background:#ffd23d; border-color:#ffd23d; transform:translateY(-1px); box-shadow:0 14px 34px #ffc70055; }
.engine-level-progress-text { display:flex; align-items:baseline; gap:6px; margin:0; color:#a9a197; font-size:13px; font-weight:700; letter-spacing:.02em; }
.engine-level-progress-text strong { color:#fff1dc; font-size:16px; font-variant-numeric:tabular-nums; }
/* The miniature: the map's own layout at a fifth of the size. */
.engine-level-map { grid-area:map; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); grid-template-rows:auto auto; gap:10px; width:100%; min-width:0; padding:10px; border:1px solid #ffffff12; border-radius:22px; background:#0e0e0eb0; box-shadow:inset 0 1px #ffffff06,0 18px 44px #0005; }
.engine-level-map-region { --stance-accent:#ff8247; display:grid; grid-template-rows:auto 1fr; gap:10px; min-width:0; padding:12px 14px 14px; border:1px solid color-mix(in srgb,var(--stance-accent) 32%,#ffffff0c); border-radius:15px; background:linear-gradient(150deg,color-mix(in srgb,var(--stance-accent) 14%,#1b1917),#161616 70%); }
.engine-level-map-region[data-stance=ally] { grid-column:1; grid-row:1; }
.engine-level-map-region[data-stance=antagonist] { grid-column:1; grid-row:2; }
.engine-level-map-region[data-stance=frenemy] { grid-column:2; grid-row:1 / span 2; }
.engine-level-map-label { display:flex; align-items:baseline; justify-content:space-between; gap:6px; color:var(--stance-accent); font:900 13px/1 var(--wiki-display); letter-spacing:.1em; text-transform:uppercase; }
.engine-level-map-label b { color:#fff1dc; font-size:14px; font-variant-numeric:tabular-nums; }
.engine-level-map-spots { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; align-content:center; }
.engine-level-map-region[data-stance=frenemy] .engine-level-map-spots { grid-template-columns:repeat(6,minmax(0,1fr)); }
.engine-level-map-region[data-stance=frenemy] .engine-level-map-spot { grid-column:span 2; }
.engine-level-map-region[data-stance=frenemy] .engine-level-map-spot:nth-child(4) { grid-column:2 / span 2; }
.engine-level-map-spot { aspect-ratio:1; min-width:0; overflow:hidden; border:2px dashed color-mix(in srgb,var(--stance-accent) 45%,transparent); border-radius:50%; background:#0d0d0d80; }
.engine-level-map-spot.is-on { border:2px solid var(--stance-accent); background:var(--stance-accent); box-shadow:0 0 14px color-mix(in srgb,var(--stance-accent) 55%,transparent); }
.engine-level-map-portrait.ninja-portrait { width:100%; height:100%; border-radius:50%; background:#262320; font-size:0; }
.engine-level-map-portrait.ninja-portrait img { min-width:0; max-width:100%; object-fit:cover; }
/* The board is its own query container, so its grid answers to the viewport instead. */
@media (max-width:1000px) {
  .engine-level-board { grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "map" "actions"; }
  .engine-level-board-copy { align-self:auto; }
  .engine-level-map,.engine-episode-sources { max-width:560px; }
}
@container level-board (max-width:420px) {
  .engine-level-board-actions .engine-level-open { width:100%; }
}
/* Each earned level sits above the earlier levels on the overview. */
.engine-story-arc-card { grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "actions"; gap:16px; }
.engine-story-arc-card.has-summary { grid-template-areas:"copy" "summary" "actions"; }
.engine-story-arc-card .engine-level-board-copy { align-self:auto; }
.engine-arc-summary { --arc-card-height:calc((100cqw - 30px)/8); container-type:inline-size; grid-area:summary; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.engine-arc-summary.is-six { grid-template-columns:repeat(3,minmax(0,1fr)); }
/* Cards fit their text; a long answer stops at --arc-card-height and scrolls inside. */
.engine-arc-summary-item { box-sizing:border-box; display:flex; flex-direction:column; min-width:0; max-height:var(--arc-card-height); padding:14px; border:1px solid color-mix(in srgb,var(--arc-accent) 26%,transparent); border-radius:12px; background:color-mix(in srgb,var(--arc-accent) 5%,#ffffff05); }
.engine-arc-summary-head { display:flex; align-items:center; gap:10px; }
.engine-arc-summary-icon { display:inline-grid; flex:none; place-items:center; width:34px; height:34px; padding:7px; border-radius:9px; background:color-mix(in srgb,var(--arc-accent) 15%,transparent); color:var(--arc-accent); }
.engine-arc-summary-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.engine-arc-summary-item strong { color:var(--arc-accent); font:800 13px/1.2 var(--wiki-display); letter-spacing:.06em; text-transform:uppercase; }
.engine-arc-summary-body { position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); flex:1; min-height:0; margin-top:10px; }
.engine-arc-summary-body[data-overflows=true] { grid-template-columns:minmax(0,1fr) 8px; column-gap:10px; }
.engine-arc-summary-body p { grid-column:1; grid-row:1; min-width:0; min-height:0; margin:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; color:#eee7de; font-size:16px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.engine-arc-summary-body p::-webkit-scrollbar { display:none; }
.engine-arc-summary-body p:focus-visible { outline:2px solid var(--arc-accent); outline-offset:-2px; }
.engine-arc-scrollbar { display:none; grid-column:2; grid-row:1; border-radius:99px; background:color-mix(in srgb,var(--arc-accent) 22%,#161616); cursor:pointer; touch-action:none; }
.engine-arc-summary-body[data-overflows=true] .engine-arc-scrollbar { display:block; }
.engine-arc-scrollbar-thumb { width:100%; border-radius:99px; background:var(--arc-accent); }
.engine-arc-summary-more { display:none; position:absolute; z-index:1; right:18px; bottom:0; padding-left:18px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--arc-accent) 5%,#24221f) 40%); color:#eee7de; font-size:18px; font-weight:700; line-height:24px; pointer-events:none; }
.engine-arc-summary-body[data-more=true] .engine-arc-summary-more { display:block; }
@container level-board (max-width:760px) { .engine-arc-summary,.engine-arc-summary.is-six { --arc-card-height:calc((100cqw - 10px)/4); grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container level-board (max-width:420px) { .engine-arc-summary,.engine-arc-summary.is-six { --arc-card-height:50cqw; grid-template-columns:minmax(0,1fr); } }
/* A finished arc is a profile like Level 2's: Edit in the corner, no call to action. */
.engine-arc-profile {
  --foundation-accent:#ffc700;
  container:arc-profile / inline-size;
  min-width:0;
  padding:var(--character-card-pad);
  border:1px solid #ffc70038;
  border-radius:24px;
  background:radial-gradient(circle at 100% 0,#ffc70012,transparent 42%),linear-gradient(145deg,#211e18,#151515 72%);
  box-shadow:inset 0 1px #ffffff07,0 18px 42px #0002;
}
.engine-arc-profile-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.engine-arc-profile-header .engine-eyebrow { margin-bottom:8px; color:#ffd65c; }
.engine-arc-profile h2 { margin:0; color:#fff8ec; font:clamp(30px,2.6vw,40px)/1 var(--wiki-display); text-transform:uppercase; }
@container arc-profile (max-width:960px) { .engine-arc-summary,.engine-arc-summary.is-six { --arc-card-height:calc((100cqw - 10px)/4); grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container arc-profile (max-width:440px) { .engine-arc-profile { border-radius:18px; } .engine-arc-summary,.engine-arc-summary.is-six { --arc-card-height:50cqw; grid-template-columns:minmax(0,1fr); } }
/* Level 4: the board's right side lists what each earned level brings to Episode 1, in the colors
   of the profiles below it. */
.engine-episode-sources { grid-area:map; display:grid; gap:10px; width:100%; min-width:0; margin:0; padding:10px; list-style:none; border:1px solid #ffffff12; border-radius:22px; background:#0e0e0eb0; box-shadow:inset 0 1px #ffffff06,0 18px 44px #0005; }
.engine-episode-source { --source-accent:#c9bdb0; display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:14px; min-width:0; padding:12px 14px; border:1px solid color-mix(in srgb,var(--source-accent) 30%,#ffffff0c); border-radius:15px; background:linear-gradient(150deg,color-mix(in srgb,var(--source-accent) 12%,#1b1917),#161616 70%); }
.engine-episode-source[data-level="2"] { --source-accent:#7fd48a; }
.engine-episode-source[data-level="3"] { --source-accent:#ffc700; }
.engine-episode-source-level { display:grid; place-items:center; width:44px; height:44px; border:1px solid color-mix(in srgb,var(--source-accent) 35%,transparent); border-radius:12px; background:color-mix(in srgb,var(--source-accent) 14%,transparent); color:var(--source-accent); font:900 22px/1 var(--wiki-display); }
.engine-episode-source-copy { display:grid; gap:6px; min-width:0; }
.engine-episode-source-copy strong { color:var(--source-accent); font:900 13px/1 var(--wiki-display); letter-spacing:.1em; text-transform:uppercase; }
.engine-episode-source-text { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:#f1e9dd; font-size:16px; line-height:1.35; overflow-wrap:anywhere; }
.engine-episode-source-faces { display:flex; flex-wrap:wrap; gap:6px; }
.engine-episode-source-face.ninja-portrait { width:34px; height:34px; border:2px solid var(--stance-accent); border-radius:50%; background:#262320; font-size:0; }
.engine-episode-source-face.ninja-portrait img { object-fit:cover; }
/* Story arcs: an overview, a focused question, and a review of the whole story. */
.engine-arc-overview,.engine-arc-dialog { --arc-accent:#8cb8f2; --arc-muted:#ada99e; color:#f5f2e9; font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.engine-story-arc-editor[data-pillar=want],.engine-arc-overview [data-pillar=want],.engine-arc-dialog [data-pillar=want],.engine-arc-summary-item[data-pillar=want],.engine-locked-step[data-pillar=want] { --arc-accent:#8cb8f2; }
.engine-story-arc-editor[data-pillar=flaw],.engine-arc-overview [data-pillar=flaw],.engine-arc-dialog [data-pillar=flaw],.engine-arc-summary-item[data-pillar=flaw],.engine-locked-step[data-pillar=flaw] { --arc-accent:#a8cf87; }
.engine-story-arc-editor[data-pillar=backstory],.engine-arc-overview [data-pillar=backstory],.engine-arc-dialog [data-pillar=backstory],.engine-arc-summary-item[data-pillar=backstory],.engine-locked-step[data-pillar=backstory] { --arc-accent:#c4addc; }
.engine-story-arc-editor[data-pillar=agency],.engine-arc-overview [data-pillar=agency],.engine-arc-dialog [data-pillar=agency],.engine-arc-summary-item[data-pillar=agency],.engine-locked-step[data-pillar=agency] { --arc-accent:#ffac78; }
.engine-story-arc-editor[data-pillar=review] { --arc-accent:#ffc700; }
/* City life (Level 4): six picks, so its overview and profile run three to a row. */
.engine-story-arc-editor[data-pillar=arrival],.engine-arc-overview [data-pillar=arrival],.engine-arc-dialog [data-pillar=arrival],.engine-arc-summary-item[data-pillar=arrival],.engine-locked-step[data-pillar=arrival] { --arc-accent:#8cb8f2; }
.engine-story-arc-editor[data-pillar=work],.engine-arc-overview [data-pillar=work],.engine-arc-dialog [data-pillar=work],.engine-arc-summary-item[data-pillar=work],.engine-locked-step[data-pillar=work] { --arc-accent:#ffc700; }
.engine-story-arc-editor[data-pillar=mask],.engine-arc-overview [data-pillar=mask],.engine-arc-dialog [data-pillar=mask],.engine-arc-summary-item[data-pillar=mask],.engine-locked-step[data-pillar=mask] { --arc-accent:#c4addc; }
.engine-story-arc-editor[data-pillar=home],.engine-arc-overview [data-pillar=home],.engine-arc-dialog [data-pillar=home],.engine-arc-summary-item[data-pillar=home],.engine-locked-step[data-pillar=home] { --arc-accent:#a8cf87; }
.engine-story-arc-editor[data-pillar=hangout],.engine-arc-overview [data-pillar=hangout],.engine-arc-dialog [data-pillar=hangout],.engine-arc-summary-item[data-pillar=hangout],.engine-locked-step[data-pillar=hangout] { --arc-accent:#ffac78; }
.engine-story-arc-editor[data-pillar=skill],.engine-arc-overview [data-pillar=skill],.engine-arc-dialog [data-pillar=skill],.engine-arc-summary-item[data-pillar=skill],.engine-locked-step[data-pillar=skill] { --arc-accent:#ff8fa3; }
.engine-arc-overview.is-six .engine-arc-overview-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
.engine-arc-idea-text strong { display:block; margin-bottom:4px; font-weight:700; }
.engine-arc-idea-text strong+span { opacity:.82; }
.engine-arc-overview .wiki-btn,.engine-arc-dialog .wiki-btn { font:600 14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:0; text-transform:none; }
.engine-arc-overview .engine-eyebrow,.engine-arc-dialog .engine-eyebrow { margin:0 0 12px; color:var(--arc-accent); font:700 11px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.engine-arc-overview h2,.engine-arc-dialog h2 { margin:0; color:#fff8ea; font:800 clamp(36px,3.8vw,54px)/1.08 var(--wiki-display); letter-spacing:-.015em; overflow-wrap:anywhere; }
.engine-arc-overview h2:focus,.engine-arc-dialog h2:focus { outline:none; }
.engine-arc-lead { max-width:610px; margin:12px 0 0; color:var(--arc-muted); font-size:16px; line-height:1.6; }
.engine-arc-overview { padding:clamp(24px,3vw,40px); border:1px solid #39362f; border-radius:20px; background:#1b1a17; }
.engine-arc-overview h2 { font-size:40px; }
.engine-arc-overview-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:0; margin:24px 0 0; list-style:none; }
.engine-arc-overview-card { min-width:0; }
.engine-arc-overview-pick { display:flex; flex-direction:column; align-items:stretch; width:100%; height:100%; min-width:0; min-height:190px; padding:20px; border:1px solid #3d3932; border-radius:14px; background:#22211d; color:#f0e9d9; text-align:left; transition:background .18s,border-color .18s; }
.wiki-btn.engine-arc-overview-pick:hover,.wiki-btn.engine-arc-overview-pick:focus-visible { border-color:color-mix(in srgb,var(--arc-accent) 55%,transparent); background:color-mix(in srgb,var(--arc-accent) 9%,#22211d); }
.wiki-btn.engine-arc-overview-pick:active { background:color-mix(in srgb,var(--arc-accent) 15%,#22211d); }
.engine-arc-overview-card-top { display:flex; align-items:center; gap:12px; }
.engine-arc-overview-icon { flex:none; width:36px; height:36px; padding:7px; border-radius:10px; background:color-mix(in srgb,var(--arc-accent) 12%,transparent); color:var(--arc-accent); }
.engine-arc-overview-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.engine-arc-card-title { min-width:0; color:var(--arc-accent); font:700 22px/1.15 var(--wiki-display); }
.engine-arc-card-edit { flex:none; width:18px; height:18px; margin-left:auto; color:var(--arc-accent); opacity:0; transition:opacity .18s; }
.engine-arc-card-edit svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.engine-arc-overview-pick:hover .engine-arc-card-edit,.engine-arc-overview-pick:focus-visible .engine-arc-card-edit { opacity:1; }
.engine-arc-card-answer { display:block; margin:18px 0 0; font-size:16px; font-weight:400; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.engine-arc-card-answer.is-empty { color:#898579; }
.engine-arc-dialog { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:#191916; overflow:hidden; overscroll-behavior:contain; color-scheme:dark; }
.engine-arc-dialog::backdrop { background:#121210; }
.engine-arc-dialog .engine-story-arc-editor { display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:100%; height:100%; min-height:0; }
.engine-arc-topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; min-height:76px; padding:12px clamp(20px,4vw,64px); border-bottom:1px solid #ffffff10; background:#1d1d19; }
.wiki-btn.engine-arc-exit { justify-self:start; min-height:44px; padding:8px 0; border:0; border-radius:4px; background:none; color:#cec7ba; }
.wiki-btn.engine-arc-exit:hover { color:#fff8ea; }
.engine-arc-context { display:flex; align-items:center; gap:10px; min-width:0; max-width:50vw; color:#aaa598; font-size:13px; }
.engine-arc-context-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.engine-arc-context-portrait.ninja-portrait { flex:none; width:36px; height:36px; border:1px solid #ffffff1a; border-radius:8px; }
.engine-arc-context-portrait img { width:100%; height:100%; object-fit:cover; }
.engine-arc-step-count { justify-self:end; color:#b0a99b; font-size:12px; font-variant-numeric:tabular-nums; }
.engine-arc-scroll { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-color:#5a554a transparent; }
.engine-arc-scroll > .wiki-status:not(:empty) { position:sticky; z-index:1; top:0; padding:12px 24px; margin:0; border-bottom:1px solid #76523c; background:#30231b; }
.engine-arc-focus-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; align-items:start; gap:36px; width:100%; margin:0; padding:34px clamp(24px,3vw,56px) 40px; }
.engine-arc-focus-main { min-width:0; }
.engine-arc-heading { margin-bottom:28px; }
.engine-arc-title-row { display:flex; align-items:center; gap:16px; }
.engine-arc-heading-number { display:grid; place-items:center; flex:none; width:34px; height:34px; border:1px solid color-mix(in srgb,var(--arc-accent) 50%,transparent); border-radius:50%; color:var(--arc-accent); font:600 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.engine-arc-heading .engine-arc-lead { max-width:620px; margin-top:12px; font-size:15px; }
.engine-arc-gallery { display:grid; gap:22px; min-width:0; }
.engine-arc-group { min-width:0; padding:22px; border:1px solid #3e3d33; border-radius:16px; background:#1e1f1a; }
.engine-arc-group h3 { margin:0 0 18px; color:#e4dece; font:600 16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.engine-arc-idea-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); grid-auto-rows:1fr; gap:12px; }
.wiki-btn.engine-arc-idea { position:relative; display:flex; align-items:center; width:100%; height:100%; min-height:92px; min-width:0; padding:18px; border:1px solid #514d42; border-radius:10px; background:#282922; color:#eee9dc; text-align:left; font-size:16px; font-weight:500; transition:border-color .15s,background .15s,color .15s; }
.wiki-btn.engine-arc-idea:hover { border-color:color-mix(in srgb,var(--arc-accent) 70%,#454238); background:#282b25; }
.engine-arc-idea-text { min-width:0; line-height:1.5; overflow-wrap:anywhere; }
.wiki-btn.engine-arc-idea.is-picked { border-color:var(--arc-accent); background:color-mix(in srgb,var(--arc-accent) 24%,#22231e); color:var(--arc-accent); }
.wiki-btn.engine-arc-idea:disabled { opacity:1; cursor:default; }
.engine-arc-selection-check { position:absolute; top:-7px; right:-7px; display:none; place-items:center; width:24px; height:24px; padding:3px; border:1px solid var(--arc-accent); border-radius:6px; background:var(--arc-accent); color:#161814; box-shadow:0 0 0 3px #1e1f1a; }
.engine-arc-selection-check svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.engine-arc-idea.is-picked:not(.is-confirming) .engine-arc-selection-check,.engine-arc-idea.is-confirmed .engine-arc-selection-check { display:grid; }
.engine-arc-idea.is-confirming { z-index:1; animation:engine-arc-select .4s ease-out; }
.engine-arc-idea.is-confirmed .engine-arc-selection-check { animation:engine-arc-check .3s cubic-bezier(.2,.8,.3,1.3) both; }
.engine-arc-focus-main.is-leaving { pointer-events:none; animation:engine-arc-page-out .28s ease-in both; }
.engine-arc-focus-main.is-entering,.engine-arc-review.is-entering { animation:engine-arc-page-in .36s ease-out both; }
@keyframes engine-arc-select {
  0% { transform:scale(1); box-shadow:0 0 0 0 transparent; }
  40% { transform:scale(.985); box-shadow:0 0 0 4px color-mix(in srgb,var(--arc-accent) 16%,transparent); }
  75% { transform:scale(1.01); }
  100% { transform:scale(1); box-shadow:0 0 0 0 transparent; }
}
@keyframes engine-arc-check { from { opacity:0; transform:scale(.5); } to { opacity:1; transform:scale(1); } }
@keyframes engine-arc-page-out { to { opacity:0; transform:translateX(-18px); } }
@keyframes engine-arc-page-in { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:translateX(0); } }
.engine-arc-too-long { margin:0 0 18px; color:#ffb59a; font-size:13px; }
.engine-arc-too-long[hidden] { display:none; }
.engine-arc-mobile-outline { position:sticky; top:30px; min-width:0; margin-top:6px; }
.engine-arc-mobile-outline > summary { display:none; }
.engine-arc-live-outline { padding:22px 0 12px 24px; border-left:1px solid #444136; }
.engine-arc-outline-top { margin-bottom:18px; }
.engine-arc-outline-top h3 { margin:0; color:#ece4d3; font-size:14px; font-weight:600; }
.engine-arc-outline,.engine-arc-review-list { padding:0; margin:0; list-style:none; }
.engine-arc-outline-item { min-width:0; }
.engine-arc-outline .engine-arc-outline-item:not(:last-child) { position:relative; padding-bottom:12px; }
.engine-arc-outline .engine-arc-outline-item:not(:last-child)::after { content:''; position:absolute; top:42px; bottom:0; left:21px; width:1px; background:#444035; }
.wiki-btn.engine-arc-step { display:flex; align-items:flex-start; gap:12px; width:100%; min-height:80px; padding:12px 8px; border:1px solid transparent; border-radius:8px; background:none; text-align:left; }
.wiki-btn.engine-arc-step:hover { background:#ffffff06; }
.wiki-btn.engine-arc-step[aria-current=step] { border-color:color-mix(in srgb,var(--arc-accent) 32%,transparent); background:color-mix(in srgb,var(--arc-accent) 6%,transparent); }
.engine-arc-outline-icon,.engine-arc-outline-number { display:grid; place-items:center; flex:none; width:25px; height:25px; border:1px solid #57503f; border-radius:50%; color:#ada38d; }
.engine-arc-outline-icon { padding:4px; }
.engine-arc-outline-number { font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.engine-arc-outline-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.engine-arc-step[aria-current=step] :is(.engine-arc-outline-icon,.engine-arc-outline-number),.engine-arc-step.is-done :is(.engine-arc-outline-icon,.engine-arc-outline-number) { color:var(--arc-accent); border-color:color-mix(in srgb,var(--arc-accent) 50%,transparent); }
.engine-arc-outline-copy { flex:1; min-width:0; }
.engine-arc-outline-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:25px; }
.engine-arc-outline-heading strong { color:var(--arc-accent); font-size:12px; font-weight:600; }
.engine-arc-outline-check { color:var(--arc-accent); font-size:11px; }
.engine-arc-outline-answer { display:block; margin:5px 0 0; color:#d0c8b6; font-size:12px; font-weight:400; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.engine-arc-outline .engine-arc-outline-answer { max-height:150px; overflow:auto; scrollbar-width:thin; }
.is-empty .engine-arc-outline-answer { color:#a09886; }
.engine-actions.engine-arc-footer { position:static; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; margin:0; padding:16px clamp(20px,4vw,64px) max(16px,env(safe-area-inset-bottom)); border:0; border-top:1px solid #ffffff14; border-radius:0; background:#1d1d19; box-shadow:none; }
.engine-arc-footer .wiki-btn { width:auto; min-height:46px; padding:12px 22px; border-radius:9px; font-size:14px; }
.engine-arc-footer .engine-arc-back { justify-self:start; padding-left:0; border-color:transparent; background:transparent; color:#c6bfaf; }
.engine-arc-footer .primary { justify-self:end; min-width:160px; background:var(--arc-accent); border-color:var(--arc-accent); color:#161814; }
.engine-arc-footer .primary:hover:not(:disabled) { filter:brightness(1.1); }
.engine-arc-footer-hint { color:#a29a87; font-size:11px; }
.engine-actions.engine-arc-review-footer { grid-template-columns:1fr auto; }
.engine-arc-review { max-width:840px; margin:0 auto; padding:44px 40px; }
.engine-arc-review-list { margin-top:24px; }
.engine-arc-review-list .engine-arc-outline-item { padding:6px 0; border-bottom:1px solid #ffffff14; }
.wiki-btn.engine-arc-review-row { display:flex; align-items:flex-start; gap:20px; width:100%; min-width:0; padding:18px 16px; border:1px solid transparent; border-radius:12px; background:transparent; text-align:left; transition:background .18s,border-color .18s; }
.wiki-btn.engine-arc-review-row:hover,.wiki-btn.engine-arc-review-row:focus-visible { border-color:color-mix(in srgb,var(--arc-accent) 35%,transparent); background:color-mix(in srgb,var(--arc-accent) 7%,#191916); }
.wiki-btn.engine-arc-review-row:active { background:color-mix(in srgb,var(--arc-accent) 12%,#191916); }
.engine-arc-review-edit-icon { flex:none; width:18px; height:18px; margin-top:7px; color:var(--arc-accent); opacity:0; transition:opacity .18s; }
.engine-arc-review-edit-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.engine-arc-review-row:hover .engine-arc-review-edit-icon,.engine-arc-review-row:focus-visible .engine-arc-review-edit-icon { opacity:1; }
.engine-arc-review-list .engine-arc-outline-icon { width:34px; height:34px; padding:6px; color:var(--arc-accent); border-color:color-mix(in srgb,var(--arc-accent) 40%,transparent); }
.engine-arc-review-list .engine-arc-outline-heading strong { font-size:14px; }
.engine-arc-review-list .engine-arc-outline-answer { font-size:17px; color:#f0e9d9; }
.engine-arc-review-list .is-empty .engine-arc-outline-answer { color:#a09886; }
.engine-arc-notice { margin:20px auto 0; max-width:1160px; }
.engine-arc-dialog :is(button,summary):focus-visible,.engine-arc-overview button:focus-visible { outline:2px solid var(--arc-accent); outline-offset:3px; }
.engine-arc-progress { color:#ffdc68; font-weight:800; }
@container character-page (max-width:900px) {
  .engine-arc-overview-cards,.engine-arc-overview.is-six .engine-arc-overview-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container character-page (max-width:580px) {
  .engine-arc-overview { padding:24px 20px; border-radius:16px; }
  .engine-arc-overview h2 { font-size:36px; }
  .engine-arc-overview-cards,.engine-arc-overview.is-six .engine-arc-overview-cards { grid-template-columns:minmax(0,1fr); gap:12px; margin-top:20px; }
  .engine-arc-overview-pick { min-height:0; padding:18px; }
  .engine-arc-card-answer { margin-top:14px; }
}
@media (max-width:1000px) {
  .engine-arc-focus-layout { grid-template-columns:minmax(0,1fr); gap:26px; }
  .engine-arc-mobile-outline { position:static; grid-row:1; margin:0; border-bottom:1px solid #444136; }
  .engine-arc-mobile-outline > summary { display:list-item; min-height:48px; padding:16px 0; color:#c9c0ad; font-size:13px; cursor:pointer; }
  .engine-arc-live-outline { padding:0 0 12px; border-left:0; }
  .engine-arc-outline-top { display:none; }
}
@media (max-width:600px) {
  .engine-arc-topbar { grid-template-columns:1fr auto 1fr; min-height:64px; gap:12px; padding:10px 20px; }
  .engine-arc-context-label { display:none; }
  .engine-arc-context-portrait.ninja-portrait { width:32px; height:32px; }
  .engine-arc-focus-layout { padding:26px 20px; gap:22px; }
  .engine-arc-heading { margin-bottom:24px; }
  .engine-arc-title-row { gap:12px; }
  .engine-arc-heading-number { width:30px; height:30px; font-size:12px; }
  .engine-arc-dialog h2 { font-size:38px; }
  .engine-arc-heading .engine-arc-lead { font-size:14px; }
  .engine-arc-idea-grid { gap:10px; }
  .engine-arc-group { padding:16px; border-radius:12px; }
  .wiki-btn.engine-arc-idea { min-height:80px; padding:16px; font-size:15px; }
  .engine-actions.engine-arc-footer { grid-template-columns:auto 1fr; gap:12px; padding:12px 20px max(12px,env(safe-area-inset-bottom)); }
  .engine-arc-footer-hint { display:none; }
  .engine-arc-footer .wiki-btn { padding:12px 16px; }
  .engine-arc-footer .engine-arc-back { padding-left:0; }
  .engine-arc-footer .primary { min-width:0; }
  .engine-arc-review { padding:28px 20px; }
  .wiki-btn.engine-arc-review-row { gap:12px; padding:16px 12px; }
  .engine-arc-review-list .engine-arc-outline-answer { font-size:15px; }
}
@media (min-width:1001px) and (max-height:950px) {
  .engine-arc-focus-layout { padding-top:26px; padding-bottom:24px; }
  .engine-arc-heading { margin-bottom:18px; }
  .engine-arc-heading h2 { font-size:46px; }
}
@media (prefers-reduced-motion:reduce) {
  .wiki-btn.engine-arc-idea { transition:none; animation:none; }
  .wiki-btn.engine-arc-review-row,.engine-arc-review-edit-icon,.engine-arc-overview-pick,.engine-arc-card-edit { transition:none; }
  .engine-arc-idea.is-confirmed .engine-arc-selection-check,.engine-arc-focus-main.is-leaving,.engine-arc-focus-main.is-entering,.engine-arc-review.is-entering { animation:none; }
}
@media (hover:none) { .engine-arc-review-edit-icon,.engine-arc-card-edit { opacity:.6; } }

/* The bonds step is one card: progress on top, the bond table in an inset box below. */
.engine-map-lead,.engine-bonds-lead { max-width:640px; margin:10px 0 0; }
.engine-bonds { container:bonds / inline-size; }
.engine-bonds-rows { padding:10px; border:1px solid #ffffff10; border-radius:16px; background:#111; }
.engine-bonds-heading { align-items:flex-end; }
.engine-bonds-meter { flex:none; display:grid; justify-items:end; gap:12px; }
.engine-bonds-count { align-items:baseline; gap:8px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
.engine-bonds-count strong { font:900 38px/1 var(--wiki-display); letter-spacing:-.01em; }
.engine-level-bar { position:relative; height:14px; overflow:hidden; border-radius:999px; background:#0f0f0f; box-shadow:inset 0 0 0 1px #ffffff14; }
.engine-level-bar-fill { position:absolute; inset:0 auto 0 0; border-radius:inherit; background:linear-gradient(90deg,#fc8b52,#ffc700); box-shadow:0 0 16px #ffc70066; transition:width .35s ease; }
.engine-bonds.is-complete { border-color:#7fd48a66; background:radial-gradient(circle at 100% 0,#7fd48a22,transparent 42%),#1a1a1a; box-shadow:0 0 0 1px #7fd48a22; }
.engine-bonds.is-complete .engine-bonds-lead { color:#f5f2ec; font-size:16px; font-weight:800; }
.engine-bonds.is-complete .engine-level-bar-fill { background:linear-gradient(90deg,#7fd48a,#b9f0bf); box-shadow:0 0 16px #7fd48a66; }
.wiki-btn.engine-level-continue { flex:none; min-height:48px; padding:12px 24px; font-size:15px; letter-spacing:.05em; box-shadow:0 10px 30px #ffc70030; transition:transform .18s,box-shadow .18s,background .18s; }
.wiki-btn.engine-level-continue:hover { background:#ffd23d; border-color:#ffd23d; transform:translateY(-1px); box-shadow:0 14px 34px #ffc70055; }
@media (max-width:560px) {
  .engine-bonds-meter { width:100%; justify-items:start; }
  .engine-bonds-count strong { font-size:32px; }
  .wiki-btn.engine-level-continue { width:100%; }
}
/* A defined row carries its stance colour; a click anywhere on a row opens that bond's editor. */
.engine-bonds-table { width:100%; margin:-8px 0; border-collapse:separate; border-spacing:0 8px; }
.engine-bonds-table thead th { padding:6px 8px 0; color:#9f978d; font-size:11px; font-weight:800; letter-spacing:.06em; text-align:left; text-transform:uppercase; white-space:nowrap; }
.engine-bonds-table thead th:first-child { padding-left:13px; }
.engine-bond-row { --stance-accent:#ff8247; cursor:pointer; }
.engine-bond-row > th,.engine-bond-row > td { padding:8px; border-top:1px solid #ffffff10; border-bottom:1px solid #ffffff10; background:#141414; vertical-align:middle; transition:background .15s; }
.engine-bond-row:hover > th,.engine-bond-row:hover > td,.engine-bond-row:has(.engine-bond-open:focus-visible) > * { background:#1c1c1c; }
.engine-bond-row > th { width:1%; padding-left:10px; border-left:3px solid color-mix(in srgb,var(--stance-accent) 45%,transparent); border-radius:14px 0 0 14px; text-align:left; white-space:nowrap; }
.engine-bond-row > td { color:#f5f2ec; font-size:14px; }
.engine-bond-row > td.is-empty { color:#7d766d; font-style:italic; }
.engine-bond-row > td:last-child { width:1%; padding-right:14px; border-right:1px solid #ffffff10; border-radius:0 14px 14px 0; color:#7d766d; font-size:22px; line-height:1; }
.engine-bond-row:hover > td:last-child { color:var(--stance-accent); }
.engine-bond-row.is-defined > th { border-left-color:var(--stance-accent); }
.wiki-btn.engine-bond-open { display:block; min-height:0; padding:0; border:0; border-radius:10px; background:none; color:inherit; font:inherit; letter-spacing:normal; text-align:left; text-transform:none; }
.wiki-btn.engine-bond-open:hover { background:none; }
.wiki-btn.engine-bond-open:focus-visible { outline:2px solid #fc8b52; outline-offset:4px; }
.engine-bond-identity { display:flex; align-items:center; gap:10px; min-width:0; }
.engine-bond-portrait.ninja-portrait { flex:none; width:44px; height:44px; border-radius:10px; overflow:hidden; color:#cfc7ba; font:900 12px/1 var(--wiki-display); }
.engine-bond-portrait.ninja-portrait img { object-fit:cover; }
.engine-bond-identity strong { display:block; max-width:180px; overflow:hidden; color:#f5f2ec; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.engine-bond-stance { display:block; color:var(--stance-accent); font:900 10.5px/1.2 var(--wiki-display); letter-spacing:.06em; text-transform:uppercase; }
@container bonds (max-width:760px) {
  .engine-bonds-rows { padding:6px; border-radius:14px; }
  .engine-bonds-table,.engine-bonds-table tbody { display:block; margin:0; }
  .engine-bonds-table thead { display:none; }
  .engine-bond-row:last-child { margin-bottom:0; }
  .engine-bond-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 8px; margin-bottom:10px; padding:10px; border:1px solid #ffffff10; border-left:3px solid color-mix(in srgb,var(--stance-accent) 45%,transparent); border-radius:14px; background:#141414; }
  .engine-bond-row:hover { background:#1c1c1c; }
  .engine-bond-row.is-defined { border-left-color:var(--stance-accent); }
  .engine-bond-row > th,.engine-bond-row > td,.engine-bond-row:hover > th,.engine-bond-row:hover > td { width:auto; padding:0; border:0; border-radius:0; background:none; }
  .engine-bond-row > th { grid-column:1 / -1; }
  .engine-bond-row > td:last-child { display:none; }
  .engine-bond-row > td::before { content:attr(data-label); display:block; margin-bottom:4px; color:#9f978d; font-size:11px; font-style:normal; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
  .engine-bond-identity strong { max-width:none; }
}
/* Relationships tab: the map, with allies top left, antagonists below them and frenemies down the
   right side, five spots each. The picker and the bond editor open in a dialog over it. */
.engine-relationship-panel { container:relationship-panel / inline-size; }
.engine-relationship-map .engine-panel-heading { align-items:center; }
.engine-map-progress { flex:none; padding:8px 12px; border:1px solid #ffffff12; border-radius:999px; background:#11111180; }
.engine-map-grid { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); grid-template-rows:auto auto; gap:12px; margin-top:18px; }
.engine-map-region { --stance-accent:#ff8247; position:relative; display:flex; flex-direction:column; gap:12px; min-width:0; padding:18px 18px 20px 20px; overflow:hidden; border:1px solid color-mix(in srgb,var(--stance-accent) 24%,#ffffff10); border-radius:18px; background:linear-gradient(155deg,color-mix(in srgb,var(--stance-accent) 10%,#1c1917),#151515 68%); box-shadow:inset 0 1px #ffffff07; }
.engine-map-region::before { content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--stance-accent); opacity:.75; }
.engine-map-region[data-stance=ally] { grid-column:1; grid-row:1; }
.engine-map-region[data-stance=antagonist] { grid-column:1; grid-row:2; }
.engine-map-region[data-stance=frenemy] { grid-column:2; grid-row:1 / span 2; }
.engine-map-region-head { display:flex; align-items:center; gap:10px; }
.engine-stance-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:var(--stance-accent); }
.engine-stance-icon svg { width:26px; height:26px; }
.engine-map-region-head .engine-stance-icon { width:38px; height:38px; border:1px solid color-mix(in srgb,var(--stance-accent) 34%,transparent); border-radius:11px; background:color-mix(in srgb,var(--stance-accent) 12%,transparent); }
.engine-map-region-head .engine-stance-icon svg { width:22px; height:22px; }
.engine-map-region h3 { margin:0; color:#fff8ec; font:26px/1 var(--wiki-display); text-transform:uppercase; }
.engine-map-count { margin-left:auto; padding:6px 10px; border:1px solid color-mix(in srgb,var(--stance-accent) 30%,transparent); border-radius:999px; color:var(--stance-accent); font:900 12px/1 var(--wiki-display); letter-spacing:.06em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.engine-map-count strong { color:#fff1dc; }
.engine-map-region-text { margin:-4px 0 0; color:#a9a198; font-size:13.5px; line-height:1.5; }
.engine-map-spots { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:2px 0 0; padding:0; list-style:none; }
.engine-map-spots > li { min-width:0; }
.engine-map-region[data-stance=frenemy] .engine-map-spots { flex:1; grid-template-columns:repeat(6,minmax(0,1fr)); align-content:center; }
.engine-map-region[data-stance=frenemy] .engine-map-spots > li { grid-column:span 2; }
.engine-map-region[data-stance=frenemy] .engine-map-spots > li:nth-child(4) { grid-column:2 / span 2; }
.wiki-btn.engine-map-spot { display:grid; grid-template-rows:auto auto; gap:8px; width:100%; min-width:0; padding:0; border:0; border-radius:14px; background:none; text-align:center; text-transform:none; letter-spacing:0; font-family:inherit; }
.wiki-btn.engine-map-spot:hover { background:none; }
.engine-map-spot > .ninja-portrait,.engine-map-plus { display:grid; place-items:center; width:100%; aspect-ratio:1; border-radius:14px; overflow:hidden; }
.engine-map-portrait.ninja-portrait { border:1px solid color-mix(in srgb,var(--stance-accent) 45%,#ffffff14); background:#262320; color:#cfc7ba; font:900 14px/1 var(--wiki-display); box-shadow:0 8px 20px #0006; transition:transform .18s,box-shadow .18s,border-color .18s; }
.engine-map-portrait.ninja-portrait img { object-fit:cover; }
.engine-map-spot.is-filled:hover > .ninja-portrait,.engine-map-spot.is-filled:focus-visible > .ninja-portrait { border-color:var(--stance-accent); transform:translateY(-2px); box-shadow:0 12px 26px #0007,0 0 0 2px color-mix(in srgb,var(--stance-accent) 40%,transparent); }
.engine-map-plus { position:relative; border:1.5px dashed color-mix(in srgb,var(--stance-accent) 40%,#ffffff1c); background:#0f0f0f80; color:color-mix(in srgb,var(--stance-accent) 70%,#fff); transition:border-color .18s,background .18s,transform .18s; }
.engine-map-plus::before,.engine-map-plus::after { content:''; position:absolute; top:50%; left:50%; width:32%; height:2px; border-radius:2px; background:currentColor; transform:translate(-50%,-50%); opacity:.5; }
.engine-map-plus::after { transform:translate(-50%,-50%) rotate(90deg); }
.engine-map-spot.is-next .engine-map-plus { border-style:solid; border-color:color-mix(in srgb,var(--stance-accent) 55%,transparent); background:color-mix(in srgb,var(--stance-accent) 10%,#0f0f0f); box-shadow:0 0 18px color-mix(in srgb,var(--stance-accent) 22%,transparent); }
.engine-map-spot.is-next .engine-map-plus::before,.engine-map-spot.is-next .engine-map-plus::after { opacity:1; }
.engine-map-spot.is-empty:hover .engine-map-plus,.engine-map-spot.is-empty:focus-visible .engine-map-plus { border-color:var(--stance-accent); background:color-mix(in srgb,var(--stance-accent) 16%,#0f0f0f); transform:translateY(-2px); }
.wiki-btn.engine-map-spot:focus-visible { outline:2px solid var(--stance-accent); outline-offset:3px; }
.engine-map-spot-caption { display:grid; gap:2px; min-width:0; min-height:32px; align-content:start; }
.engine-map-spot-caption strong,.engine-map-spot-caption span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.engine-map-spot-caption strong { color:#f5f2ec; font-size:13.5px; font-weight:800; }
.engine-map-spot.is-empty .engine-map-spot-caption strong { color:var(--stance-accent); font:900 12px/1.2 var(--wiki-display); letter-spacing:.06em; text-transform:uppercase; white-space:normal; }
.engine-map-spot-caption span { color:var(--stance-accent); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
@container relationship-panel (max-width:860px) {
  .engine-map-grid { grid-template-columns:minmax(0,1fr); grid-template-rows:none; }
  .engine-map-region[data-stance=ally],.engine-map-region[data-stance=antagonist],.engine-map-region[data-stance=frenemy] { grid-column:auto; grid-row:auto; }
  .engine-map-region[data-stance=frenemy] .engine-map-spots { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .engine-map-region[data-stance=frenemy] .engine-map-spots > li,.engine-map-region[data-stance=frenemy] .engine-map-spots > li:nth-child(4) { grid-column:auto; }
}
@container relationship-panel (max-width:520px) {
  .engine-relationship-map .engine-panel-heading { flex-wrap:wrap; }
  .engine-map-region { padding:14px 14px 16px 16px; }
  .engine-map-region h3 { font-size:22px; }
  .engine-map-region-text { display:none; }
  .engine-map-spots { gap:6px; }
  .engine-map-spot > .ninja-portrait,.engine-map-plus { border-radius:10px; }
  .engine-map-spot-caption { min-height:28px; }
  .engine-map-spot-caption strong { font-size:11px; }
  .engine-map-spot.is-empty .engine-map-spot-caption strong { font-size:10px; letter-spacing:.03em; }
  .engine-map-spot-caption span { font-size:9.5px; }
}
/* The wizard steps, in a dialog over the map. */
.engine-relationship-dialog { width:min(980px,calc(100vw - 32px)); max-height:min(88dvh,1000px); margin:auto; padding:0; border:1px solid #453d34; border-radius:22px; background:#1a1a1a; color:var(--wiki-text); box-shadow:0 30px 90px #000a; overflow:auto; overscroll-behavior:contain; color-scheme:dark; }
.engine-relationship-dialog::backdrop { background:#08080acc; backdrop-filter:blur(6px); }
.engine-relationship-dialog > .engine-character-panel { border:0; border-radius:0; background:transparent; }
.engine-relationship-dialog .engine-panel-heading { flex-direction:row; flex-wrap:nowrap; align-items:flex-start; }
.engine-relationship-dialog .engine-panel-heading h2 { min-width:0; overflow-wrap:anywhere; }
.engine-relationship-dialog .engine-panel-heading .wiki-btn { flex:none; }
.engine-relationship-dialog.is-picker { border-color:color-mix(in srgb,var(--stance-accent) 30%,#453d34); background:color-mix(in srgb,var(--stance-accent) 7%,#1a1a1a); }
/* The picker keeps one height whichever tab is open, so switching Browse and Selected does not
   resize it; a short tab leaves space above the footer instead. */
.engine-relationship-dialog.is-picker { height:min(88dvh,1000px); }
.engine-relationship-dialog.is-picker > .engine-relationship-picker { display:flex; flex-direction:column; box-sizing:border-box; min-height:100%; }
.engine-relationship-dialog.is-picker .engine-picker-footer { margin-top:auto; }
.engine-picker-title { display:flex; align-items:center; gap:14px; min-width:0; }
.engine-picker-title .engine-stance-icon { flex:none; border:1px solid color-mix(in srgb,var(--stance-accent) 34%,transparent); background:color-mix(in srgb,var(--stance-accent) 12%,transparent); }
.wiki-btn.engine-relationship-close { display:grid; place-items:center; width:38px; height:38px; margin:-4px -4px 0 0; padding:0; border-color:transparent; background:transparent; color:#a49c8f; }
.wiki-btn.engine-relationship-close:hover,.wiki-btn.engine-relationship-close:focus-visible { border-color:#ffffff24; background:#ffffff0d; color:#f5f2ec; }
.engine-relationship-close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
@media (max-width:720px) {
  .engine-relationship-dialog { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; border:0; border-radius:0; }
}
/* A picker card is the longest possible facts line (measured by fitClassLine) plus its padding and
   border, so the portrait and that line share one width. The picker dialog is five cards across,
   with the panel's padding, its own border and any scrollbar the system draws. */
.engine-relationship-dialog { --candidate-width:calc(var(--candidate-line,184px) + 18px); }
@media (min-width:721px) {
  .engine-relationship-dialog.is-picker { width:min(calc(5 * var(--candidate-width) + 4 * 12px + 54px + var(--scrollbar-width,0px)),calc(100vw - 32px)); scrollbar-gutter:stable; }
}
.engine-candidate-probe { position:absolute; top:0; left:0; width:max-content; visibility:hidden; pointer-events:none; }
/* The picker: the Level 1 Ninjas as a grid of portrait cards. The picture on top with nothing over
   it, then the name, level and one line of profile. The card is the control: a click picks it, a
   picked card carries the stance colour and a tick at the end of its name line, and a footer places
   the picks. */
.engine-candidate-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--candidate-width,210px)),1fr)); gap:12px; margin:0; padding:0; list-style:none; }
.engine-candidate { position:relative; display:flex; flex-direction:column; min-width:0; border:1px solid #ffffff10; border-radius:18px; background:#141414; transition:border-color .15s,box-shadow .15s; }
.engine-candidate > .engine-candidate-figure,.engine-candidate > .engine-candidate-body { margin:10px 10px 0; }
.engine-candidate > .engine-candidate-body { margin-bottom:12px; }
.wiki-btn.engine-candidate-button { display:flex; flex-direction:column; gap:10px; width:100%; min-width:0; padding:8px 8px 10px; border:0; border-radius:inherit; background:none; color:inherit; font:inherit; letter-spacing:0; text-align:left; text-transform:none; cursor:pointer; }
.wiki-btn.engine-candidate-button:hover { background:none; }
.wiki-btn.engine-candidate-button:focus-visible { outline:2px solid var(--stance-accent,#ffc700); outline-offset:3px; }
.wiki-btn.engine-candidate-button:disabled { opacity:1; cursor:default; }
.engine-candidate:has(.engine-candidate-button:not(:disabled)):hover { border-color:#ffffff30; }
.engine-candidate.is-selected { border-color:var(--stance-accent,#ffc700); box-shadow:0 0 0 1px var(--stance-accent,#ffc700),0 10px 30px #0006; }
.engine-candidate.is-blocked { opacity:.45; }
.engine-candidate-figure { position:relative; min-width:0; }
.engine-candidate-portrait.ninja-portrait { width:100%; height:auto; aspect-ratio:1; border-radius:12px; overflow:hidden; color:#cfc7ba; font:900 22px/1 var(--wiki-display); }
.engine-candidate-portrait.ninja-portrait img { display:block; width:100%; height:100%; object-fit:cover; }
.engine-candidate-check { flex:none; align-self:center; display:grid; place-items:center; width:22px; height:22px; margin-left:auto; border-radius:999px; background:var(--stance-accent,#ffc700); color:#101010; opacity:0; transform:scale(.6); transition:opacity .15s,transform .15s; }
.engine-candidate-check svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.engine-candidate.is-selected .engine-candidate-check { opacity:1; transform:none; }
.engine-candidate-body { flex:1; min-width:0; display:grid; gap:5px; align-content:start; padding:0; }
.engine-candidate-identity { display:flex; align-items:baseline; gap:6px; min-width:0; }
.engine-candidate-identity strong { min-width:0; overflow:hidden; color:#f5f2ec; font-size:15px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.engine-candidate-figure > .engine-candidate-level { position:absolute; top:10px; left:10px; box-shadow:0 2px 6px #0003; font-size:13px; pointer-events:none; }
.engine-candidate-facts { display:flex; flex-wrap:nowrap; align-items:center; gap:2px 5px; margin:0; min-width:0; color:#d9d2c7; font-size:12px; font-weight:600; line-height:1.3; white-space:nowrap; }
.engine-candidate-fact { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.engine-candidate-fact svg { flex:none; width:16px; height:16px; color:#f2ca63; }
/* Every class name fits; only an old profile's broad alignment ("Lawful Impure") may need the ellipsis. */
.engine-candidate-fact strong { min-width:0; overflow:hidden; color:inherit; font-weight:inherit; text-overflow:ellipsis; }
.engine-candidate-fact-tail { display:inline-flex; align-items:center; gap:5px; min-width:0; white-space:nowrap; }
.engine-candidate-fact-dot { color:#6f685f; }
.engine-candidate.is-linked .engine-candidate-facts { color:#a9a198; }
.engine-candidate-more { grid-column:1 / -1; padding:10px 14px; color:#9f978d; font-size:13px; text-align:center; }
.wiki-btn.engine-relationship-remove { min-height:36px; padding:8px 13px; border-color:transparent; border-radius:999px; background:transparent; color:#a49c8f; font-size:12px; }
.wiki-btn.engine-relationship-remove:hover { border-color:#ff6b57; color:#ffb1a5; }
/* Browse and Selected: two underlined tabs under the heading, the pick count in the stance colour. */
.engine-picker-tabs { display:flex; gap:24px; margin-top:-8px; border-bottom:1px solid #ffffff14; }
.wiki-btn.engine-picker-tab { position:relative; display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 2px; border:0; border-radius:0; background:none; color:#a49c8f; font:inherit; font-size:15px; font-weight:700; letter-spacing:0; text-transform:none; }
.wiki-btn.engine-picker-tab:hover { background:none; color:#f5f2ec; }
.wiki-btn.engine-picker-tab[aria-selected=true] { color:#f5f2ec; }
.wiki-btn.engine-picker-tab[aria-selected=true]::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--stance-accent,#ffc700); }
.wiki-btn.engine-picker-tab:focus-visible { border-radius:6px; outline:2px solid var(--stance-accent,#ffc700); outline-offset:2px; }
.engine-picker-tab-count { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:var(--stance-accent,#ffc700); color:#121212; font-size:12px; font-weight:800; line-height:1; }
.engine-picker-tab-count[hidden] { display:none; }
.engine-picker-tab-count.is-bumped { animation:engine-tally .35s ease-out; }
@keyframes engine-tally { 40% { transform:scale(1.3); } }
@media (prefers-reduced-motion:reduce) { .engine-picker-tab-count.is-bumped { animation:none; } }
/* Each alignment has a solid colour beneath its label; the selected option fills with that colour. */
.engine-relationship-tools { --tool-height:42px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0; }
.engine-relationship-tools[hidden] { display:none; }
.engine-candidate-searchbox { flex:1 1 216px; width:auto; min-width:216px; height:var(--tool-height); }
.engine-candidate-searchbox svg { left:14px; }
.engine-host .engine-relationship-tools input.engine-candidate-search { display:block; width:100%; min-width:0; height:100%; margin:0; padding:0 12px 0 40px; border:1px solid #494037; border-radius:10px; background:#191919; color:var(--wiki-text); font:inherit; font-size:14px; line-height:normal; }
.engine-host .engine-relationship-tools input.engine-candidate-search::placeholder { color:var(--wiki-muted); opacity:1; }
.engine-relationship-tools .engine-name-select { appearance:none; -webkit-appearance:none; flex:none; min-width:0; max-width:100%; height:var(--tool-height); padding:0 38px 0 14px; border:1px solid #494037; border-radius:10px; background:#191919 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a39d93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; color:var(--wiki-text); font:inherit; font-size:14px; line-height:normal; letter-spacing:normal; text-transform:none; cursor:pointer; }
.engine-relationship-tools .engine-candidate-tribe { width:140px; }
.engine-relationship-tools .engine-candidate-sort { width:174px; }
.engine-host .engine-relationship-tools input.engine-candidate-search:hover,.engine-relationship-tools .engine-name-select:hover { border-color:#71675b; background-color:#20201e; }
.engine-host .engine-relationship-tools input.engine-candidate-search:focus-visible,.engine-relationship-tools .engine-name-select:focus-visible { outline:2px solid #fc5b0a; outline-offset:2px; }
.engine-segment { display:inline-flex; flex:none; height:var(--tool-height); padding:3px; border:1px solid #494037; border-radius:10px; background:#191919; }
.engine-segment .wiki-btn { min-width:0; height:100%; padding:0 14px; border:0; border-radius:7px; background:none; color:#b3ab9f; font:inherit; font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; }
.engine-segment .wiki-btn:hover { color:#f5f2ec; background:#ffffff0d; }
.engine-segment .wiki-btn[aria-pressed=true] { color:#121212; background:#e9e3d8; }
.engine-segment .wiki-btn:focus-visible { outline:2px solid #fc5b0a; outline-offset:1px; }
/* All and the spectrum share one box, a hairline between them. */
.engine-candidate-alignment-filter { gap:3px; max-width:100%; }
.engine-candidate-alignment-filter > .wiki-btn { padding:0 12px; }
.engine-alignment-spectrum { display:flex; flex:1; gap:3px; min-width:0; padding-left:3px; border-left:1px solid #494037; }
.engine-alignment-spectrum .wiki-btn { position:relative; flex:1 0 auto; min-width:max-content; padding:0 10px 3px; color:#f5f2ec; white-space:nowrap; transition:background .15s,color .15s; }
.engine-alignment-spectrum .wiki-btn[data-value=good] { --alignment-accent:#50c887; }
.engine-alignment-spectrum .wiki-btn[data-value=rebel] { --alignment-accent:#b2d45e; }
.engine-alignment-spectrum .wiki-btn[data-value=neutral] { --alignment-accent:#f2ce55; }
.engine-alignment-spectrum .wiki-btn[data-value=impure] { --alignment-accent:#ed9b50; }
.engine-alignment-spectrum .wiki-btn[data-value=evil] { --alignment-accent:#ef625a; }
.engine-alignment-spectrum .wiki-btn::after { content:''; position:absolute; bottom:2px; left:6px; right:6px; height:3px; border-radius:2px; background:var(--alignment-accent); }
.engine-alignment-spectrum .wiki-btn:hover { background:color-mix(in srgb,var(--alignment-accent) 15%,transparent); }
.engine-alignment-spectrum .wiki-btn[aria-pressed=true] { background:var(--alignment-accent); color:#171715; }
.engine-candidate-alignment-filter .wiki-btn:focus-visible { z-index:1; outline:2px solid #fff4df; outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .engine-alignment-spectrum .wiki-btn { transition:none; } }
.engine-candidate-status { margin:-6px 0 -8px; color:#9f978d; font-size:13px; }
.engine-candidate-status[hidden] { display:none; }
/* An empty search gets a real answer: a picture, a headline, a reason and a way forward. */
.engine-picker-empty { display:flex; align-items:center; gap:28px; padding:28px; border:1px dashed #4a4239; border-radius:16px; background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--stance-accent,#fc5b0a) 14%, transparent), transparent 60%), #171615; }
.engine-picker-empty[hidden] { display:none; }
.engine-picker-empty.has-ninjas { align-items:stretch; }
.engine-picker-empty-art { flex:none; width:168px; color:var(--stance-accent,#fc5b0a); }
.engine-picker-empty-art svg { display:block; width:100%; height:auto; overflow:visible; }
.engine-picker-empty-art .halo { fill:currentColor; opacity:.1; }
.engine-picker-empty-art .orbit { fill:none; stroke:currentColor; stroke-width:1.5; stroke-dasharray:3 7; opacity:.5; animation:engine-orbit 24s linear infinite; transform-origin:72px 64px; }
.engine-picker-empty-art .head { fill:#2b2723; stroke:#4d443a; stroke-width:2; }
.engine-picker-empty-art .band,.engine-picker-empty-art .tail { fill:currentColor; stroke:currentColor; stroke-width:5; stroke-linecap:round; }
.engine-picker-empty-art .band { stroke:none; }
.engine-picker-empty-art .tail { fill:none; }
.engine-picker-empty-art .mask { fill:#121212; }
.engine-picker-empty-art .eye { fill:#f5f2ec; }
.engine-picker-empty-art .lens { fill:#ffffff10; stroke:#e9e3d8; stroke-width:5; }
.engine-picker-empty-art .handle { stroke:#e9e3d8; stroke-width:8; stroke-linecap:round; }
.engine-picker-empty-art .question { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }
.engine-picker-empty-art svg { animation:engine-search 3.2s ease-in-out infinite; }
@keyframes engine-orbit { to { transform:rotate(360deg); } }
@keyframes engine-search { 0%,100% { transform:translateX(0) rotate(0); } 50% { transform:translateX(-4px) rotate(-3deg); } }
@media (prefers-reduced-motion:reduce) { .engine-picker-empty-art svg,.engine-picker-empty-art .orbit { animation:none; } }
.engine-picker-empty-copy { display:grid; flex:1; gap:8px; justify-items:start; min-width:0; }
.engine-picker-empty-copy h3 { margin:0; color:#f5f2ec; font-family:var(--wiki-display, inherit); font-size:26px; line-height:1.1; overflow-wrap:anywhere; }
.engine-picker-empty-copy > p { max-width:52ch; margin:0; color:#a9a198; font-size:14px; line-height:1.5; }
.wiki-btn.engine-picker-empty-action { margin-top:6px; min-height:38px; padding:8px 16px; border-radius:999px; }
.engine-picker-empty-ninjas { display:grid; gap:10px; width:100%; margin:8px 0 0; padding:0; list-style:none; }
.engine-picker-empty-ninja { display:flex; align-items:center; gap:14px; padding:10px 12px; border:1px solid #3a342d; border-radius:12px; background:#1f1d1b; }
.engine-picker-empty-portrait { flex:none; width:56px; height:56px; border-radius:10px; overflow:hidden; display:grid; place-items:center; color:#a9a198; font-size:12px; filter:grayscale(.7); opacity:.85; }
.engine-picker-empty-portrait img { width:100%; height:100%; object-fit:cover; }
.engine-picker-empty-who { display:grid; flex:1; gap:2px; min-width:0; }
.engine-picker-empty-who strong { color:#f5f2ec; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.engine-picker-empty-who span { color:#9f978d; font-size:12px; }
.engine-picker-empty-ninja .wiki-btn.engine-picker-empty-action { flex:none; margin:0; }
.engine-picker-empty-more { color:#9f978d; font-size:13px; }
@media (max-width:640px) {
  .engine-picker-empty { flex-direction:column; align-items:center; gap:14px; padding:22px 16px; text-align:center; }
  .engine-picker-empty.has-ninjas { align-items:stretch; text-align:left; }
  .engine-picker-empty-copy { justify-items:center; }
  .engine-picker-empty.has-ninjas .engine-picker-empty-copy { justify-items:start; }
  .engine-picker-empty-art { width:128px; }
  .engine-picker-empty-copy h3 { font-size:22px; }
  .engine-picker-empty-ninja { flex-wrap:wrap; }
  .engine-picker-empty-ninja .wiki-btn.engine-picker-empty-action { width:100%; }
}
/* The footer stays in view at the bottom of the dialog while the cards scroll behind it. */
.engine-picker-footer { position:sticky; bottom:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:14px; margin:-6px -26px -26px; padding:14px 26px; border-top:1px solid #ffffff12; background:color-mix(in srgb,color-mix(in srgb,var(--stance-accent,#1a1a1a) 7%,#1a1a1a) 95%,transparent); backdrop-filter:blur(8px); }
.engine-picker-count { margin:0; color:#a9a198; font-size:14px; }
.engine-picker-count strong { color:#f5f2ec; font-size:16px; }
.engine-picker-count.is-full { color:var(--stance-accent,#ffc700); }
.engine-picker-count.is-full strong { color:inherit; }
.wiki-btn.engine-picker-save { flex:none; min-height:42px; padding:10px 22px; }
.wiki-btn.engine-picker-save:disabled { background:#2a2925; border-color:#2a2925; color:#77716a; opacity:1; }
/* The bond editor: full screen, one question at a time. A sticky header holds the Ninja, their
   stance and the count over a bar with a segment per question; the options fill the screen as big
   tiles; a sticky footer holds Back and Next. */
.engine-relationship-dialog.is-bond { --bond-gutter:clamp(16px,5vw,64px); position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; border:0; border-radius:0; background:#161513; }
.engine-relationship-dialog.is-bond::backdrop { background:#08080a; }
.engine-relationship-dialog.is-bond > .engine-relationship-classifier { display:flex; flex-direction:column; box-sizing:border-box; min-height:100%; padding:0; }
.engine-bondstep-head { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px 18px; padding:max(18px,env(safe-area-inset-top)) var(--bond-gutter) 0; border-bottom:1px solid #3b3630; background:#161513f2; backdrop-filter:blur(8px); }
.engine-bondstep-who { display:flex; align-items:center; gap:14px; min-width:0; }
.engine-bondstep-who-portrait { flex:none; width:52px; height:52px; border-radius:10px; overflow:hidden; }
.engine-bondstep-who-portrait img { width:100%; height:100%; object-fit:cover; }
.engine-bondstep-identity { display:grid; justify-items:start; gap:5px; min-width:0; }
.engine-bondstep-identity strong { max-width:100%; overflow:hidden; color:#f5f2ec; font-size:18px; line-height:1.15; white-space:nowrap; text-overflow:ellipsis; }
.wiki-btn.engine-bondstep-stance { display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:3px 11px 3px 4px; border:1px solid color-mix(in srgb,var(--stance-accent) 45%,transparent); border-radius:999px; background:color-mix(in srgb,var(--stance-accent) 14%,transparent); color:var(--stance-accent); font-family:inherit; font-size:13px; font-weight:800; letter-spacing:0; text-transform:none; }
.engine-bondstep-stance .engine-stance-icon { display:grid; place-items:center; width:20px; height:20px; border:0; border-radius:999px; background:color-mix(in srgb,var(--stance-accent) 22%,transparent); }
.engine-bondstep-stance .engine-stance-icon svg { width:13px; height:13px; }
.engine-bondstep-stance-change { color:#a9a198; font-weight:600; }
.engine-bondstep-stance-change::before { content:'·'; margin-right:6px; }
.wiki-btn.engine-bondstep-stance:hover,.wiki-btn.engine-bondstep-stance:focus-visible { background:color-mix(in srgb,var(--stance-accent) 24%,transparent); }
.wiki-btn.engine-bondstep-stance:hover .engine-bondstep-stance-change { color:#f5f2ec; }
.engine-bondstep-count { margin:0; color:#a9a198; font-size:15px; white-space:nowrap; }
.engine-bondstep-count strong { color:#f5f2ec; font-size:20px; }
.engine-bondstep-head .engine-relationship-close { margin:0 -8px 0 0; }
.engine-bondstep-progress { grid-column:1 / -1; display:flex; gap:6px; margin:4px 0 0; padding:0 0 14px; list-style:none; }
.engine-bondstep-progress li { flex:1; }
.wiki-btn.engine-bondstep-progress-step { display:block; width:100%; min-height:0; height:6px; padding:0; border:0; border-radius:999px; background:#3b3630; transition:background .2s; }
.engine-bondstep-progress .is-done .engine-bondstep-progress-step { background:color-mix(in srgb,var(--stance-accent) 55%,#3b3630); }
.engine-bondstep-progress .is-current .engine-bondstep-progress-step { background:var(--stance-accent); }
.engine-bondstep-progress li:not(.is-current) .wiki-btn.engine-bondstep-progress-step:hover { background:#6b6258; }
.engine-bondstep-body { flex:1; width:100%; max-width:1480px; box-sizing:border-box; margin:0 auto; padding:30px var(--bond-gutter) 36px; animation:engine-bondstep-in .24s ease-out; }
.engine-bondstep-body h2 { margin:0; color:var(--wiki-text); font-size:clamp(26px,3.2vw,38px); outline:none; }
.engine-bondstep-hint { margin:6px 0 24px; color:#a59d92; font-size:16px; }
@keyframes engine-bondstep-in { from { opacity:0; transform:translateX(14px); } }
@media (prefers-reduced-motion:reduce) { .engine-bondstep-body { animation:none; } }
.engine-bondstep-options { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:12px; }
.wiki-btn.engine-bondstep-option { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; min-height:64px; padding:12px 18px; border:1px solid #4a433b; border-radius:16px; background:#1d1b19; color:#dcd6cd; font-family:inherit; font-size:18px; font-weight:700; line-height:1.2; letter-spacing:0; text-align:center; text-transform:none; transition:background .15s,border-color .15s,color .15s,transform .15s; }
.engine-bondstep-option strong { font:inherit; }
.wiki-btn.engine-bondstep-option:hover { border-color:#bd7845; background:#28221c; }
.wiki-btn.engine-bondstep-option:focus-visible { outline:2px solid #fc5b0a; outline-offset:2px; }
.wiki-btn.engine-bondstep-option.is-on { border-color:#ffc700; background:#ffc700; color:#121212; }
.wiki-btn.engine-bondstep-option:active { transform:scale(.98); }
.wiki-btn.engine-bondstep-option:disabled { opacity:.35; cursor:default; transform:none; }
.wiki-btn.engine-bondstep-option:disabled:hover { border-color:#4a433b; background:#1d1b19; }
/* The dynamics are checkboxes: a box before each, ticked in orange. */
[data-group=relationship-dynamics] .wiki-btn.engine-bondstep-option { flex-direction:row; justify-content:flex-start; text-align:left; }
[data-group=relationship-dynamics] .engine-bondstep-option::before { content:''; flex:none; width:20px; height:20px; margin-right:7px; border:1px solid #716557; border-radius:5px; background:#171614; }
[data-group=relationship-dynamics] .wiki-btn.engine-bondstep-option.is-on { border-color:#fc8b52; background:#3b281c; color:#fff2e8; }
[data-group=relationship-dynamics] .engine-bondstep-option.is-on::before { content:'✓'; display:grid; place-items:center; border-color:#fc8b52; background:#fc8b52; color:#24160f; font-size:14px; font-weight:900; }
/* The stance screen: three cards, each in its own colour. A stance with no spot left is unavailable. */
.engine-bondstep-stances { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.wiki-btn.engine-bondstep-stance-option { align-items:flex-start; gap:8px; min-height:170px; padding:22px; text-align:left; }
.engine-bondstep-stance-option .engine-stance-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:6px; border:1px solid color-mix(in srgb,var(--stance-accent) 30%,transparent); border-radius:12px; background:color-mix(in srgb,var(--stance-accent) 10%,transparent); }
.engine-bondstep-stance-option .engine-stance-icon svg { width:26px; height:26px; }
.wiki-btn.engine-bondstep-stance-option strong { color:#f5f2ec; font-size:22px; }
.engine-bondstep-stance-option span { color:#a59d92; font-size:15px; font-weight:500; line-height:1.35; }
.wiki-btn.engine-bondstep-stance-option:hover { border-color:color-mix(in srgb,var(--stance-accent) 55%,transparent); background:#201e1b; }
.wiki-btn.engine-bondstep-stance-option.is-on { border-color:var(--stance-accent); background:color-mix(in srgb,var(--stance-accent) 12%,#1d1b19); box-shadow:inset 0 0 0 1px var(--stance-accent); color:#f5f2ec; }
.engine-bondstep-stance-option.is-on span { color:#c9c2b8; }
.wiki-btn.engine-bondstep-stance-option:disabled { opacity:.5; cursor:default; }
.wiki-btn.engine-bondstep-stance-option:disabled:hover { border-color:#4a433b; background:#1d1b19; }
.engine-bondstep-foot { position:sticky; bottom:0; z-index:2; display:flex; align-items:center; gap:12px; padding:14px var(--bond-gutter) max(14px,env(safe-area-inset-bottom)); border-top:1px solid #3b3630; background:#161513f2; backdrop-filter:blur(8px); }
.engine-bondstep-foot .engine-relationship-remove { margin-left:auto; }
.engine-bondstep-foot:not(:has(.wiki-btn:not([hidden]))) { display:none; }
.wiki-btn.engine-bondstep-next { min-width:120px; min-height:44px; margin-left:auto; }
.engine-bondstep-foot .engine-relationship-remove + .engine-bondstep-next { margin-left:0; }
@media (max-width:560px) {
  .engine-bondstep-head { gap:8px 12px; }
  .engine-bondstep-who-portrait { width:42px; height:42px; }
  .engine-bondstep-identity strong { font-size:16px; }
  .engine-bondstep-count strong { font-size:17px; }
  .engine-bondstep-body { padding-top:22px; }
  .engine-bondstep-hint { margin-bottom:18px; font-size:15px; }
  .engine-bondstep-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .wiki-btn.engine-bondstep-option { min-height:56px; padding:10px 12px; font-size:16px; }
  [data-group=relationship-dynamics].engine-bondstep-options,[data-group=relationship-status].engine-bondstep-options,.engine-bondstep-stances { grid-template-columns:minmax(0,1fr); }
  .wiki-btn.engine-bondstep-stance-option { min-height:0; padding:16px; }
  .engine-bondstep-foot .engine-relationship-remove { padding-inline:8px; }
}
@container relationship-panel (max-width:920px) {
  .engine-relationship-tools .engine-name-select { flex:1 1 calc(50% - 10px); width:0; }
}
@container relationship-panel (max-width:720px) {
  .engine-candidate-searchbox,.engine-candidate-alignment-filter { flex:1 1 100%; }
  .engine-relationship-tools .engine-name-select { flex:1 1 0; width:0; }
  .engine-candidate-list { gap:10px; }
}
@container relationship-panel (max-width:440px) {
  .engine-candidate-searchbox,.engine-segment { flex:1 1 100%; }
  .engine-segment .wiki-btn { flex:1; padding:0 6px; }
  .engine-candidate-alignment-filter > .wiki-btn { flex:none; padding:0 10px; }
  .engine-alignment-spectrum .wiki-btn { flex:1 0 auto; padding:0 5px; font-size:12px; }
  .engine-candidate-list { grid-template-columns:minmax(0,1fr); }
  .engine-candidate { border-radius:14px; }
  .wiki-btn.engine-candidate-button { gap:10px; padding:8px 8px 10px; }
  .engine-candidate-identity strong { font-size:16px; }
  .engine-candidate-facts { font-size:12.5px; }
  .engine-picker-footer { padding:12px 16px; }
  .wiki-btn.engine-picker-save { padding:10px 16px; }
}
@container relationship-panel (max-width:340px) {
  .engine-relationship-tools .engine-name-select { flex:1 1 100%; width:100%; }
}
.engine-foundations {
  container:foundations / inline-size;
  min-width:0;
  overflow:hidden;
  border:1px solid #393633;
  border-radius:24px;
  background:linear-gradient(145deg,#1d1c1b,#151515 72%);
  box-shadow:inset 0 1px #ffffff07,0 18px 42px #0002;
}
.engine-relationship-results {
  --foundation-accent:#7fd48a;
  container:relationship-results / inline-size;
  min-width:0;
  overflow:hidden;
  border:1px solid #7fd48a55;
  border-radius:24px;
  background:radial-gradient(circle at 100% 0,#7fd48a15,transparent 42%),linear-gradient(145deg,#1b211b,#151515 72%);
  box-shadow:inset 0 1px #ffffff07,0 18px 42px #0002;
}
.engine-relationship-results-header { border-bottom:1px solid #393633; }
.engine-relationship-results-header .engine-eyebrow { margin:0; padding:16px var(--character-card-pad); border-bottom:1px solid #393633; color:#9fe4a8; }
.engine-relationship-results-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:var(--character-card-pad); }
.engine-relationship-results h2 { margin:0; color:#fff8ec; font:clamp(30px,2.6vw,40px)/1 var(--wiki-display); text-transform:uppercase; }
.engine-relationship-matrix-hint { display:none; margin:0; padding:8px var(--character-card-pad); color:#aaa399; font-size:12px; }
.engine-relationship-matrix-scroll { max-width:100%; overflow-x:auto; scrollbar-color:#66806c #1b211b; }
.engine-relationship-matrix-scroll:focus-visible { outline:2px solid #9fe4a8; outline-offset:3px; }
.engine-relationship-matrix { width:100%; min-width:1040px; table-layout:fixed; border-collapse:collapse; }
.engine-relationship-matrix th { text-align:left; text-transform:uppercase; }
.engine-relationship-matrix thead th { padding:14px 15px; border-right:1px solid #393633; border-bottom:2px solid var(--stance-accent,#393633); color:var(--stance-accent,#aaa399); font:24px/1 var(--wiki-display); }
.engine-relationship-matrix-corner { width:108px; }
.engine-relationship-matrix tr[data-era=past] { --era-accent:#bca5db; }
.engine-relationship-matrix tr[data-era=present] { --era-accent:#a9d6a9; }
.engine-relationship-matrix tr[data-era=future] { --era-accent:#e9c66e; }
.engine-relationship-matrix-rowhead { padding:16px 15px; border-right:1px solid #393633; border-bottom:1px solid #393633; background:#191d19; color:var(--era-accent); font:24px/1 var(--wiki-display); vertical-align:top; }
.engine-relationship-matrix td { height:152px; padding:10px; border-right:1px solid #393633; border-bottom:1px solid #393633; background:#1a1d1a; vertical-align:top; }
.engine-relationship-matrix td.is-empty { background:#ffffff03; }
.engine-relationship-cell-cards { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:10px; }
.engine-relationship-result-card { display:grid; grid-template-columns:120px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); align-items:start; box-sizing:border-box; height:132px; overflow:hidden; min-width:0; padding:0; border:1px solid color-mix(in srgb,var(--stance-accent) 38%,#ffffff25); border-radius:10px; background:#262826; }
.engine-relationship-result-portrait.ninja-portrait { grid-column:1; grid-row:1 / span 2; width:120px; height:100%; aspect-ratio:auto; border-right:2px solid var(--stance-accent); border-radius:0; overflow:hidden; }
.engine-relationship-result-portrait.ninja-portrait img { object-fit:cover; }
.engine-relationship-result-details { grid-column:2; min-width:0; padding:10px 12px 0; }
.engine-relationship-result-details h4 { margin:0; color:#fff8ec; font-size:18px; line-height:1.2; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.engine-relationship-result-role { margin:3px 0 0; color:var(--stance-accent); font-size:13px; font-weight:700; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.engine-relationship-result-text { grid-column:2; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin:5px 12px 8px; overflow:hidden; border-radius:4px; }
.engine-relationship-result-card[data-overflows=true] .engine-relationship-result-text { cursor:pointer; }
.engine-relationship-result-card[data-expanded=true] { grid-template-rows:auto auto; height:auto; }
.engine-relationship-result-card[data-expanded=true] .engine-relationship-result-portrait.ninja-portrait { height:132px; align-self:start; }
.engine-relationship-result-card[data-expanded=true] .engine-relationship-result-text { display:block; -webkit-line-clamp:none; }
.engine-relationship-result-text[role=button]:focus-visible { outline:2px solid var(--stance-accent); outline-offset:3px; }
.engine-relationship-result-summary { margin:0; color:#d1c9be; font-size:15px; line-height:1.4; overflow-wrap:anywhere; }
.engine-relationship-result-note { margin:8px 0 0; color:#aaa196; font-size:14px; font-style:italic; line-height:1.4; overflow-wrap:anywhere; }
.engine-relationship-unplaced { padding:20px var(--character-card-pad) 24px; border-top:1px solid #393633; }
.engine-relationship-unplaced h3 { margin:0 0 12px; color:#aaa399; font:24px/1 var(--wiki-display); text-transform:uppercase; }
.engine-relationship-unplaced .engine-relationship-cell-cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
@container relationship-results (max-width:680px) { .engine-relationship-results { border-radius:18px; } }
@container relationship-results (max-width:540px) { .engine-relationship-results-heading { align-items:flex-start; flex-direction:column; } }
@container relationship-results (max-width:900px) { .engine-relationship-matrix-hint { display:block; } }

/* Pick all three relationship types, define bonds, then place them in time. */
.engine-relationship-flow .engine-panel-heading { align-items:start; }
.engine-relationship-flow .engine-panel-heading > div { max-width:75ch; }
.engine-relationship-stage-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:22px; }
.wiki-btn.engine-relationship-stage { display:grid; justify-items:start; gap:6px; min-width:0; min-height:88px; padding:13px 15px; border:1px solid color-mix(in srgb,var(--stance-accent) 30%,#ffffff1c); border-radius:13px; background:#20211f; text-align:left; text-transform:none; }
.wiki-btn.engine-relationship-stage.is-current { border-color:var(--stance-accent); background:color-mix(in srgb,var(--stance-accent) 12%,#20211f); box-shadow:inset 3px 0 var(--stance-accent); }
.engine-relationship-stage small { color:var(--stance-accent); font:900 11px/1 var(--wiki-display); text-transform:uppercase; }
.engine-relationship-stage strong { overflow:hidden; color:#f5f2ec; font:22px/1 var(--wiki-display); text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.engine-relationship-stage span { color:#bcb5ab; font-size:12px; }
.engine-relationship-stage-body { --stance-accent:#bca5db; margin-top:18px; padding:20px 22px; border:1px solid color-mix(in srgb,var(--stance-accent) 40%,#ffffff1b); border-radius:16px; background:linear-gradient(110deg,color-mix(in srgb,var(--stance-accent) 9%,#1c1c1a),#1c1c1a 75%); }
.engine-relationship-stage-kicker { margin:0 0 5px; color:var(--stance-accent); font:900 12px/1.2 var(--wiki-display); letter-spacing:.07em; text-transform:uppercase; }
.engine-relationship-stage-body h3 { margin:0; color:#f5f2ec; font:29px/1.1 var(--wiki-display); text-transform:uppercase; }
.engine-relationship-stage-copy { max-width:70ch; margin:10px 0 18px; color:#bcb5ab; font-size:14px; line-height:1.5; }
.engine-relationship-stage-actions { display:flex; flex-wrap:wrap; gap:9px; margin:16px 0; }
.engine-relationship-stage-people { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin-top:19px; }
.engine-relationship-stage-person { display:flex; align-items:center; gap:12px; min-width:0; min-height:94px; padding:12px; border:1px solid color-mix(in srgb,var(--stance-accent) 32%,#ffffff18); border-left:3px solid var(--stance-accent); border-radius:13px; background:#22221f; text-align:left; text-transform:none; }
.wiki-btn.engine-relationship-stage-person:hover { border-color:var(--stance-accent); background:color-mix(in srgb,var(--stance-accent) 10%,#22221f); }
.engine-relationship-stage-portrait,.engine-bucket-portrait { flex:none; width:66px; height:66px; overflow:hidden; border:1px solid var(--stance-accent); border-radius:11px; }
.engine-relationship-stage-portrait img,.engine-bucket-portrait img { display:block; width:100%; height:100%; object-fit:cover; }
.engine-relationship-stage-person > span:last-child,.engine-bucket-who > span:last-child { display:grid; gap:4px; min-width:0; }
.engine-relationship-stage-person strong,.engine-bucket-who strong { overflow:hidden; color:#f5f2ec; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
.engine-relationship-stage-person small,.engine-bucket-who small { color:var(--stance-accent); font-size:12px; }
.engine-relationship-empty { margin:4px 0; color:#bcb5ab; font-size:14px; }
.engine-bucket-progress { width:fit-content; margin:0 0 16px; padding:6px 12px; border:1px solid #bca5db66; border-radius:999px; color:#dbc9ef; font-size:13px; font-weight:700; }
.engine-bucket-group { --stance-accent:#bca5db; margin-top:22px; }
.engine-bucket-group h4 { margin:0 0 9px; padding-bottom:7px; border-bottom:1px solid color-mix(in srgb,var(--stance-accent) 38%,#ffffff16); color:var(--stance-accent); font:24px/1 var(--wiki-display); text-transform:uppercase; }
.engine-bucket-person { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; margin-top:8px; padding:12px 14px; border:1px solid #ffffff1f; border-radius:12px; background:#22221f; }
.engine-bucket-person.is-unplaced { border-left:3px solid #bca5db; }
.engine-bucket-who { display:flex; align-items:center; gap:12px; min-width:0; }
.engine-bucket-portrait { width:54px; height:54px; }
.engine-bucket-choices { display:flex; flex-wrap:wrap; gap:6px; }
.wiki-btn.engine-bucket-choice { min-height:36px; padding:7px 12px; border:1px solid #ffffff35; border-radius:999px; background:#1b1b1b; color:#cfc7ba; font-size:12px; }
.wiki-btn.engine-bucket-choice.is-on { border-color:#cdb8eb; background:#4d3c61; color:#fff8ef; }
.engine-level-map.engine-level-stance-preview { display:grid; grid-template-columns:1fr; grid-template-rows:none; gap:9px; padding:14px; }
.engine-level-stance-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border:1px solid #ffffff1c; border-radius:11px; background:#1d1d1b; }
.engine-level-stance-row strong { min-width:95px; color:#f5f2ec; font:900 13px/1 var(--wiki-display); text-transform:uppercase; }
.engine-level-stance-count { color:#aaa39a; font-size:12px; white-space:nowrap; }
.engine-level-timeline-dots { display:flex; flex-wrap:wrap; gap:7px; }
.engine-level-timeline-dot { width:16px; height:16px; border:2px dashed var(--stance-accent); border-radius:50%; opacity:.7; }
.engine-level-timeline-dot.is-on { border-style:solid; background:var(--stance-accent); opacity:1; }
@container relationship-panel (max-width:900px) { .engine-relationship-stage-nav { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@container relationship-panel (max-width:760px) { .engine-relationship-stage-nav { grid-template-columns:repeat(2,minmax(0,1fr)); } .engine-relationship-stage-people { grid-template-columns:1fr; } .engine-bucket-person { align-items:stretch; flex-direction:column; } }
@container relationship-panel (max-width:440px) { .engine-relationship-stage-body { padding:16px; } .engine-relationship-stage-nav { gap:7px; } .wiki-btn.engine-relationship-stage { padding:11px; } .engine-relationship-stage strong { font-size:18px; } .engine-level-stance-row strong { min-width:0; } .engine-level-stance-count { display:none; } }
.engine-foundations-header { border-bottom:1px solid #393633; }
.engine-foundations-header .engine-eyebrow { margin:0; padding:16px var(--character-card-pad); border-bottom:1px solid #393633; color:#b3a89d; }
.engine-foundations-heading { padding:var(--character-card-pad); }
.engine-foundations h2 { margin:0; color:#fff8ec; font:clamp(30px,2.6vw,40px)/1 var(--wiki-display); text-transform:uppercase; }
.engine-foundations-lead { max-width:720px; margin:11px 0 0; color:#a9a198; font-size:16px; line-height:1.55; }
.engine-foundation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.engine-foundation-card {
  --foundation-accent:#ff8b55;
  position:relative;
  min-width:0;
  padding:clamp(40px,5cqw,64px);
  overflow:hidden;
  background:linear-gradient(145deg,color-mix(in srgb,var(--foundation-accent) 10%,#1b1b1a),#151515 68%);
}
.engine-foundation-card:nth-child(even) { border-left:1px solid #393633; }
.engine-foundation-card:nth-child(n+3) { border-top:1px solid #393633; }
.engine-foundation-card[data-foundation=alignment] { --foundation-accent:#f2ca63; }
.engine-foundation-card[data-foundation=family] { --foundation-accent:#75d5eb; }
.engine-foundation-card[data-foundation=personality] { --foundation-accent:#bca0f4; }
.engine-foundation-card-header { display:grid; grid-template-columns:50px minmax(0,1fr) auto; align-items:center; gap:14px; }
/* Sits level with the icon and title, tinted with the card's own accent so each Edit belongs to
   the choice above it rather than reading as a fifth, card-wide control. */
.wiki-btn.engine-foundation-edit {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  align-self:start; min-height:36px; padding:8px 13px;
  border-color:color-mix(in srgb,var(--foundation-accent) 28%,#ffffff14);
  border-radius:999px; background:color-mix(in srgb,var(--foundation-accent) 9%,transparent);
  color:#e9e2d8; font-size:12px; white-space:nowrap;
  transition:background .15s ease,border-color .15s ease;
}
.engine-foundation-edit svg { flex:none; width:15px; height:15px; color:var(--foundation-accent); }
.wiki-btn.engine-foundation-edit:hover { border-color:var(--foundation-accent); background:color-mix(in srgb,var(--foundation-accent) 18%,transparent); }
.engine-foundation-edit:focus-visible { outline:2px solid var(--foundation-accent); outline-offset:3px; }
.engine-foundation-icon { display:grid; place-items:center; width:50px; height:50px; border:1px solid color-mix(in srgb,var(--foundation-accent) 25%,transparent); border-radius:14px; background:color-mix(in srgb,var(--foundation-accent) 12%,transparent); color:var(--foundation-accent); }
.engine-foundation-icon svg { width:28px; height:28px; }
.engine-foundation-label { margin:0 0 4px; color:var(--foundation-accent); font-size:12px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.engine-foundation-card h3 { margin:0; color:#fff8ed; font-size:25px; line-height:1.12; overflow-wrap:anywhere; }
.engine-personality-code { display:flex; align-items:center; gap:14px; margin-top:20px; color:var(--foundation-accent); font-size:15px; font-weight:900; letter-spacing:.2em; }
.engine-personality-code::before,.engine-personality-code::after { content:''; flex:1; height:1px; background:color-mix(in srgb,var(--foundation-accent) 24%,transparent); }
.engine-foundation-subtitle { margin:5px 0 0; color:#bdb5aa; font-size:14px; font-weight:700; }
.engine-foundation-kicker { display:inline-flex; margin:18px 0 0; padding:6px 9px; border:1px solid color-mix(in srgb,var(--foundation-accent) 24%,transparent); border-radius:999px; background:color-mix(in srgb,var(--foundation-accent) 8%,transparent); color:#d9d1c6; font-size:13px; font-weight:700; }
.engine-foundation-description { margin:18px 0 0; color:#ccc4b9; font-size:16px; line-height:1.62; }
.engine-foundation-kicker + .engine-foundation-description { margin-top:12px; }
/* The kingdom's building breaks out through the card's bottom-right corner, cropped by the card
   edge and fading into the gradient toward the text so it reads as scenery, not a thumbnail. */
.engine-foundation-card.has-building {
  background:
    radial-gradient(circle at 92% 100%,color-mix(in srgb,var(--foundation-accent) 16%,transparent),transparent 46%),
    linear-gradient(145deg,color-mix(in srgb,var(--foundation-accent) 10%,#1b1b1a),#151515 68%);
}
.engine-foundation-card.has-building > :not(.engine-foundation-building) { position:relative; z-index:1; }
.engine-foundation-building {
  position:absolute; right:-5%; bottom:-14%; z-index:0;
  width:auto; height:min(66%,360px); max-width:56%; object-fit:contain; object-position:right bottom;
  pointer-events:none; user-select:none;
  -webkit-mask-image:linear-gradient(200deg,#000 42%,#0000 96%);
  mask-image:linear-gradient(200deg,#000 42%,#0000 96%);
  opacity:.9;
  transform:rotate(-4deg); transform-origin:right bottom;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s ease;
}
.engine-foundation-card.has-building:hover .engine-foundation-building { opacity:1; transform:rotate(-2deg) translateY(-6px); }
@media (prefers-reduced-motion:reduce) { .engine-foundation-building { transition:none; } }
.engine-foundation-note { margin-top:16px; padding:14px 15px; border-left:3px solid var(--foundation-accent); border-radius:0 12px 12px 0; background:#0e0e0e8a; }
.engine-foundation-note strong { color:var(--foundation-accent); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.engine-foundation-note p { margin:6px 0 0; color:#bdb5aa; font-size:14px; line-height:1.55; }
.engine-foundation-axes { display:grid; gap:13px; margin-top:18px; padding-top:16px; border-top:1px solid #ffffff0d; }
.engine-foundation-axis-labels { display:flex; justify-content:space-between; gap:16px; margin-bottom:7px; color:#9f978d; font-size:12px; font-weight:800; text-transform:uppercase; }
.engine-foundation-axis-track { position:relative; display:block; height:5px; margin-inline:5px; border-radius:999px; background:linear-gradient(90deg,color-mix(in srgb,var(--foundation-accent) 72%,#46413b),#46413b 50%,color-mix(in srgb,var(--foundation-accent) 72%,#46413b)); }
.engine-foundation-axis-marker { position:absolute; top:50%; left:var(--axis-value); width:13px; height:13px; border:3px solid #171717; border-radius:50%; background:var(--foundation-accent); box-shadow:0 0 0 1px var(--foundation-accent),0 0 12px color-mix(in srgb,var(--foundation-accent) 50%,transparent); transform:translate(-50%,-50%); }
.engine-foundation-relations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:18px 0 0; padding:0; list-style:none; }
.engine-foundation-relations li { min-width:0; padding:10px 11px; border:1px solid #ffffff0d; border-radius:11px; background:#0f0f0f91; }
.engine-foundation-relations strong,.engine-foundation-relations span { display:block; overflow-wrap:anywhere; }
.engine-foundation-relations strong { color:#e9e2d8; font-size:14px; line-height:1.35; }
.engine-foundation-relations span { margin-top:3px; color:var(--foundation-accent); font-size:12px; font-weight:800; text-transform:uppercase; }
.engine-foundation-relations em { display:block; margin-top:4px; color:#cfc7bb; font-size:13px; font-style:normal; line-height:1.4; overflow-wrap:anywhere; }
.engine-personality-facets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0 0; }
.engine-personality-facets > div { min-width:0; padding:11px 12px; border:1px solid #ffffff0d; border-radius:11px; background:#0f0f0f91; }
.engine-personality-facets dt { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#9f978d; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.engine-personality-facets .engine-personality-letter { display:grid; flex:none; place-items:center; width:26px; height:26px; margin-top:0; border:1px solid color-mix(in srgb,var(--foundation-accent) 35%,transparent); border-radius:7px; background:color-mix(in srgb,var(--foundation-accent) 12%,transparent); color:var(--foundation-accent); font-size:14px; line-height:1; }
.engine-personality-facets dd { margin:5px 0 0; }
.engine-personality-facets strong,.engine-personality-facets span { display:block; overflow-wrap:anywhere; }
.engine-personality-facets strong { color:#eee7dc; font-size:14px; line-height:1.35; }
.engine-personality-facets span { margin-top:3px; color:var(--foundation-accent); font-size:12px; line-height:1.35; }
.engine-episode-list { display:grid; gap:10px; margin-top:18px; }
.engine-episode-arc-group { display:grid; gap:10px; padding:16px; border:1px solid #ffffff20; border-radius:14px; background:#ffffff06; }
.engine-episode-arc-group h3 { margin:0; color:#ffdc68; font:800 20px/1.2 var(--wiki-display); text-transform:uppercase; }
.engine-episode-arc-timeframe { margin:-4px 0 4px; color:#b3ab9f; font-size:13px; }
.wiki-btn.engine-episode-card { display:grid; grid-template-columns:26px minmax(0,1fr); align-items:center; gap:12px; width:100%; padding:16px; border-radius:14px; text-align:left; white-space:normal; text-transform:none; font-family:inherit; }
.engine-episode-number { display:grid; place-items:center; align-self:center; width:26px; height:26px; border:1px solid #73612c; border-radius:50%; background:#ffd4000d; color:#d7bc6b; font:800 12px/1 var(--wiki-display); }
.engine-episode-content { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; min-width:0; }
.engine-episode-card .engine-episode-status { grid-row:1 / 3; align-self:start; min-width:52px; padding:5px 8px; border-radius:999px; background:#30261c; color:#fc8b52; font-size:12px; font-weight:900; letter-spacing:.07em; text-align:center; text-transform:uppercase; }
.engine-episode-card strong { color:#f5f2ec; font-size:17px; }
.engine-episode-card .engine-episode-description { color:#a9a299; font-size:14px; font-weight:400; line-height:1.45; }
.engine-wiki-writing { display:block; color:#ece7de; font-size:14px; font-weight:750; }
.engine-wiki-writing + .engine-wiki-writing { margin-top:4px; }
.engine-wiki-writing > span,.engine-wiki-writing > small { display:inline-block; }
.engine-wiki-writing > small { float:right; color:#8f887e; font-size:12px; font-weight:400; }
.engine-wiki-writing textarea,.engine-wiki-writing input { margin-top:9px; }

@media(max-width:560px) {
  /* Four tabs don't fit one row on a phone: two rows keep every tab, and its lock, in view. */
  .engine-character-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:16px; }
  .engine-character-tabs .wiki-btn { justify-content:center; padding-inline:13px; }
  .engine-wiki-card,.engine-character-panel { padding:19px; border-radius:16px; }
  .engine-card-heading,.engine-panel-heading { align-items:flex-start; flex-direction:column; }
}
@container foundations (max-width:720px) {
  .engine-foundation-grid { grid-template-columns:minmax(0,1fr); }
  .engine-foundation-card:nth-child(even) { border-left:0; }
  .engine-foundation-card + .engine-foundation-card { border-top:1px solid #393633; }
  /* Stacked, the card is only as tall as its text, so leave the building its own floor. */
  .engine-foundation-card.has-building { padding-bottom:190px; }
  .engine-foundation-building { height:240px; bottom:-44px; }
}
@container foundations (max-width:440px) {
  .engine-foundation-card { padding:36px; }
  /* Narrow cards drop the Edit label to the icon's own row rather than squeezing the title. */
  .engine-foundation-card-header { grid-template-columns:44px minmax(0,1fr) auto; gap:12px; }
  .wiki-btn.engine-foundation-edit { gap:0; min-height:34px; padding:8px; }
  .engine-foundation-edit span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .engine-foundation-icon { width:44px; height:44px; border-radius:12px; }
  .engine-foundation-icon svg { width:24px; height:24px; }
  .engine-foundation-relations,.engine-personality-facets { grid-template-columns:minmax(0,1fr); }
}
@container character-page (max-width:420px) {
  .engine-level-board,.engine-foundations { border-radius:18px; }
}

/* A character whose Level 1 summary is public but whose full page is still in the browser it was written in. */
.engine-summary-only { display:grid; gap:10px; margin-top:20px; padding:24px 26px; border:1px dashed #7a6433; border-radius:20px; background:#1d1a14; }
.engine-summary-only h2 { margin:0; color:#ffe7a8; font:900 26px/1.1 var(--wiki-display); text-transform:uppercase; }
.engine-summary-only p { max-width:72ch; margin:0; color:#e6dccb; font-size:15px; line-height:1.55; }
.engine-summary-only .wiki-btn { justify-self:start; margin-top:6px; }