/* PaperShip FIELD MANUAL — the wiki page.

   Speaks the same language as the hangar and the in-game editor: blueprint
   blue page with the drifting crosshatch, paper sheets with gold tape
   labels, BookmarkTab strip, cream inventory cells with dashed borders,
   comic ink borders + hard drop shadows.

   ps-ui.css is loaded FIRST and owns the :root tokens, the * reset, the
   [hidden] guard, the block popup, the gem/companion chrome and the stat
   panel. Nothing here re-declares a token. */

/* ══════════════ page chrome (blueprint) ══════════════ */

body {
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 500;
  color: var(--ink);
  /* Warm-cream ground with the drifting geometry tile — the landing page's
     "Things to know" (.about) treatment, owner call 2026-08-30 (was the
     hangar's blueprint blue). */
  background-color: #f5e5cb;
  background-image: url("../assets/img/inspiration_geometry.png");
  background-repeat: repeat;
  background-size: 256px 256px;
  animation: wiki-bg-scroll 120s linear infinite;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@keyframes wiki-bg-scroll {
  from { background-position: 0 0; }
  to   { background-position: -512px -256px; }
}
/* Falling "?" rain — the landing .about section's Compendium mirror
   (owner call 2026-08-30, replacing the rotated blue crosshatch grid).
   Marks are spawned by wiki.js at boot into a fixed backdrop layer. */
.qmark-rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.qmark {
  position: absolute;
  top: 0;
  font-family: "Bangers", cursive;
  color: rgba(107, 76, 46, 0.22);
  user-select: none;
  will-change: transform;
  animation: qmark-fall linear infinite;
}
@keyframes qmark-fall {
  from { transform: translateY(-160%); }
  to   { transform: translateY(140vh); }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .qmark { animation: none !important; opacity: 0; }
}

h1, h2, h3 { font-family: "Bangers", cursive; letter-spacing: 0.02em; font-weight: 400; }

.masthead, .wrap, .foot { position: relative; z-index: 1; }

.masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  /* Solid ink band — the translucent blue wash went muddy-gray on the
     cream ground (same fix as .foot). */
  background: var(--ink);
  border-bottom: 3px solid var(--ink);
  flex-wrap: wrap;
}
.brand {
  position: relative;
  font-family: "Bangers", cursive;
  font-size: 30px;
  color: #fff;
  text-decoration: none;
  background: var(--banner);
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 4px 22px 2px;
}
.brand::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -13px;
  border: 7px solid transparent;
  border-top-color: var(--ink);
}
.brand-sub {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--cyan);
  background: rgba(6, 12, 28, 0.55);
  border: 2px solid var(--cyan);
  border-radius: var(--rad);
  padding: 5px 12px;
}
.masthead .steam-sticker {
  margin-left: auto;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 7px 14px;
  transform: rotate(-1deg);
}
.masthead .steam-sticker:hover { background: var(--gold); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px 16px 44px;
  flex: 1;
}

.foot {
  border-top: 3px solid var(--ink);
  /* Solid ink band — the translucent blue wash read muddy on the cream
     ground that replaced the blueprint page color. */
  background: var(--ink);
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 16px;
  font-size: 13px;
}
.foot a { color: var(--gold); font-weight: 700; }

/* ══════════════ masthead sheet ══════════════ */

.manual-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--paper);
  background-image: radial-gradient(rgba(38, 60, 110, 0.10) 1.1px, transparent 1.3px);
  background-size: 13px 13px;
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 9px 9px 0 rgba(6, 10, 24, 0.85);
  padding: 20px 18px 16px;
  margin: 8px 0 22px;
}
.manual-head h1 {
  font-size: 40px;
  line-height: 0.86;
  letter-spacing: 0.01em;
}
.manual-head h1 em {
  font-style: normal;
  color: var(--red);
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 3px 3px 0 var(--ink);
}
.mh-sub {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: rgba(20, 24, 43, 0.62);
  margin-top: 8px;
  max-width: 46ch;
}
.mh-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.verstamp {
  font-family: "Bangers", cursive;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--cyan);
  border: 2.5px solid var(--ink);
  box-shadow: 2.5px 2.5px 0 var(--ink);
  padding: 3px 13px 1px;
  transform: rotate(1.5deg);
  white-space: nowrap;
}
.wsearch {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 4px 4px 0 rgba(6, 10, 24, 0.55);
  padding: 7px 10px 7px 12px;
}
.wsearch svg { width: 16px; height: 16px; opacity: 0.55; flex: none; }
.wsearch input {
  border: 0;
  outline: 0;
  background: none;
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  width: 210px;
}
.wsearch input::placeholder { color: rgba(20, 24, 43, 0.38); }
.wsearch-hint {
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #8d8570;
  border: 2px solid rgba(20, 24, 43, 0.25);
  border-radius: 3px;
  padding: 1px 4px;
  flex: none;
}
.mh-count {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: rgba(20, 24, 43, 0.5);
}

/* ══════════════ BookmarkTab strip ══════════════ */

.tabstrip {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 10px 0;
  /* Solid ink like the nav/footer bands — translucent blue muddies on cream. */
  background: var(--ink);
  border: 3px solid var(--ink);
  border-bottom: 0;
  border-radius: var(--rad) var(--rad) 0 0;
  margin-bottom: -3px;
  position: relative;
  z-index: 2;
}
.wtab {
  position: relative;
  font-family: "Bangers", cursive;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.82);
  background: #223764;
  border: 3px solid var(--ink);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  padding: 6px 13px 6px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.05;
  /* Resting height matches the old :hover lift (owner call 2026-08-30):
     inactive tabs sit at 1px, only the active tab drops to 0. */
  top: 1px;
}
.wtab:hover { background: #2f4c88; color: #fff; }
.wtab.on {
  color: var(--ink);
  background: var(--cream);
  top: 0;
  padding-bottom: 9px;
  z-index: 3;
  box-shadow: 0 -3px 0 var(--tape-gold) inset;
}
/* Phone: ONE row that scrolls sideways (it wrapped to five rows at 390px
   and pushed every page below the fold). The strip scrolls, never the page;
   wiki.js markTab keeps the active tab in view. */
@media (max-width: 760px) {
  .tabstrip {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-right: 24px;
  }
  .tabstrip::-webkit-scrollbar { display: none; }
  .wtab { flex: none; font-size: 14px; padding: 6px 11px 6px; }
}

/* View switches under a tab's header (ALL BLOCKS / BULLET TYPES, ROSTER /
   ENEMY MODS) and the MAP MODS section jumps. */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 14px;
}
.subtab {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: "Bangers", cursive;
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 252, 240, 0.9);
  border: 2.5px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.35);
  padding: 5px 11px 4px;
}
.subtab b {
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #7b6f52;
}
.subtab:hover { background: #fff; transform: translate(-1px, -1px); }
.subtab.on { background: var(--ink); color: var(--cream); box-shadow: 2px 2px 0 var(--gold); }
.subtab.on b { color: var(--gold); }

/* A card a link or a search hit pointed at. */
.wpanel.focus,
.actcard.focus,
.gemtile.focus,
.esschip.focus,
.cbmod.focus { outline: 3px solid var(--gold); outline-offset: 3px; }
.achrow.focus { background: rgba(240, 160, 40, 0.18); }

/* (`.wtab.empty` lived here to grey out a COMING SOON tab. Every tab renders
   real content as of the changelog, so both the class and its styles are
   gone rather than left as a rule nothing can match.) */

/* ══════════════ content sheet ══════════════ */

.manual-sheet {
  position: relative;
  background: var(--cream);
  background-image: radial-gradient(rgba(38, 60, 110, 0.09) 1.1px, transparent 1.3px);
  background-size: 13px 13px;
  border: 3px solid var(--ink);
  border-radius: 0 var(--rad) var(--rad) var(--rad);
  box-shadow: 9px 9px 0 rgba(6, 10, 24, 0.85);
  padding: 16px 14px 18px;
  margin-bottom: 24px;
  min-height: 380px;
}

.view-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.view-head h2 { font-size: 30px; line-height: 1; }
.view-head .vh-count {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #7b6f52;
}
.view-head .vh-note {
  margin-left: auto;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(20, 24, 43, 0.5);
}

/* ══════════════ filter bar (FilterGem language) ══════════════ */

.fbar {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: rgba(255, 252, 240, 0.72);
  border: 2.5px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 3px 3px 0 rgba(10, 14, 30, 0.35);
  padding: 9px 11px 10px;
  margin-bottom: 14px;
}
.fgroup {
  display: flex;
  align-items: center;
  gap: 6px;
  /* The label is a full-height column; overflow pills wrap inside .fpills
     and stay indented right of it (owner call 2026-08-30). */
  flex-wrap: nowrap;
  min-width: 0;
}
.fgroup + .fgroup { border-top: 2px dotted rgba(20, 24, 43, 0.18); padding-top: 7px; }
.fpills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}
.flabel {
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: #7b6f52;
  width: 62px;
  flex: none;
}
/* A label flowing inline inside .fpills (sameRow defs like ELEMENT/DROP)
   sizes to its text and gets breathing room from the pill before it. */
.flabel.inline { width: auto; margin-left: 8px; }
.fpill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.4);
  padding: 3px 8px 3px 6px;
  cursor: pointer;
  line-height: 1.35;
}
.fpill:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(10, 14, 30, 0.4); }
.fpill i {
  width: 11px;
  height: 11px;
  flex: none;
  transform: rotate(45deg);
  background: var(--gc, #b9b1a0);
  border: 2px solid var(--ink);
}
.fpill b {
  font-family: "Bangers", cursive;
  font-weight: 400;
  font-size: 12px;
  color: #8d8570;
  margin-left: 1px;
}
.fpill.on { background: var(--tape-gold); }
.fpill.on b { color: rgba(20, 24, 43, 0.7); }
.fpill.off { opacity: 0.42; }
.fpill.off:hover { opacity: 0.8; }
.fpill.toggle i { border-radius: 2px; transform: none; }

.fsel {
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.4);
  padding: 3px 7px;
  cursor: pointer;
  max-width: 220px;
}
.fsel.on { background: var(--tape-gold); }

.fclear {
  margin-left: auto;
  font-family: "Bangers", cursive;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--red);
  border: 2.5px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 2.5px 2.5px 0 rgba(10, 14, 30, 0.5);
  padding: 3px 12px 1px;
  cursor: pointer;
}
.fclear:hover { transform: translate(-1px, -1px); }
.fclear[disabled] { opacity: 0.35; cursor: default; transform: none; }

/* ══════════════ card grid (inventory cells) ══════════════ */

.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}
.wcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(255, 252, 240, 0.85);
  border: 2px dashed rgba(20, 24, 43, 0.35);
  border-top: 4px solid var(--tc, var(--ink));
  border-radius: var(--rad);
  padding: 7px 8px 8px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
.wcard:hover {
  border-style: solid;
  border-color: var(--ink);
  border-top-color: var(--tc, var(--ink));
  background: #fffdf4;
  box-shadow: 4px 4px 0 rgba(10, 14, 30, 0.4);
  transform: translate(-1px, -1px);
}
.wc-head { display: flex; align-items: flex-start; gap: 5px; min-height: 30px; }
.wc-name {
  font-family: "Bangers", cursive;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.01em;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.wc-grade {
  flex: none;
  font-family: "Bangers", cursive;
  font-size: 12.5px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-align: center;
  min-width: 17px;
  color: #fff;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 2px 5px 1px;
}
.wc-grade.u { background: #d6791f; }

.wc-art {
  position: relative;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* A block tile: a CSS sprite of the atlas (wiki.js tileSprite). The sheet
   arrives through --atlas once it has loaded. */
.tsprite {
  display: block;
  background-image: var(--atlas, none);
  background-repeat: no-repeat;
}
.wc-art img, .wc-art .tsprite { width: 78px; height: 78px; display: block; image-rendering: auto; }

/* Missing-plate art: a deliberate blueprint schematic blank, not an
   apology. Hatched blueprint field, registration ticks in the corners,
   the set-accent diamond with the block's initial dead centre. */
.wc-art.sketch {
  background-color: rgba(26, 83, 192, 0.09);
  background-image:
    repeating-linear-gradient(45deg, rgba(26, 83, 192, 0.16) 0 1.5px, transparent 1.5px 9px);
  border: 2px solid rgba(20, 24, 43, 0.4);
  border-radius: 3px;
}
.wc-art.sketch::before,
.wc-art.sketch::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(20, 24, 43, 0.45);
}
.wc-art.sketch::before { left: 3px; top: 3px; border-right: 0; border-bottom: 0; }
.wc-art.sketch::after { right: 3px; bottom: 3px; border-left: 0; border-top: 0; }
.wc-art.sketch .diamond-fallback-wrap { width: 60px; height: 60px; }
.wc-art.sketch .diamond-fallback { inset: 7px; }
.wc-art.sketch .diamond-initial { font-size: 22px; }

.wc-rule { height: 0; border-top: 2px solid var(--tc, var(--ink)); opacity: 0.85; }
.wc-foot { display: flex; align-items: center; gap: 5px; min-height: 16px; }
.wc-type {
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: rgba(20, 24, 43, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.wc-dps { font-family: "Bangers", cursive; font-size: 13px; color: var(--ink); flex: none; }
.wc-dps em { font-style: normal; font-size: 8px; letter-spacing: 0.06em; color: #8d8570; margin-right: 2px; }
.wc-gem {
  flex: none;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: var(--gc, #b9b1a0);
  border: 2px solid var(--ink);
  box-shadow: 1px 1px 0 rgba(10, 14, 30, 0.35);
}
.wc-boss {
  position: absolute;
  top: -7px;
  right: -5px;
  z-index: 2;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0 6px 1px;
  box-shadow: 1.5px 1.5px 0 rgba(10, 14, 30, 0.4);
}

.empty-note {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(20, 24, 43, 0.55);
  padding: 34px 6px;
  text-align: center;
}

/* ══════════════ COMING SOON stub ══════════════ */

.soon {
  position: relative;
  text-align: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 6px 6px 0 rgba(10, 14, 30, 0.5);
  padding: 46px 24px 40px;
  margin: 26px auto;
  max-width: 560px;
  overflow: hidden;
}
.soon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(240, 160, 40, 0.16) 0 14px, transparent 14px 28px);
  pointer-events: none;
}
.soon .stamp {
  position: relative;
  display: inline-block;
  font-family: "Bangers", cursive;
  font-size: 34px;
  letter-spacing: 0.05em;
  color: var(--red);
  border: 4px solid var(--red);
  border-radius: 5px;
  padding: 5px 18px 2px;
  transform: rotate(-6deg);
  opacity: 0.9;
}
.soon h3 { position: relative; font-size: 26px; margin-top: 20px; }
.soon p {
  position: relative;
  font-weight: 700;
  font-size: 13px;
  color: rgba(20, 24, 43, 0.6);
  max-width: 42ch;
  margin: 8px auto 0;
}

/* ══════════════ detail pages ══════════════

   Two columns: the LEFT is the game's own object — the block popup at its
   real 306px, the set companion card, the mod's tier stack — and the RIGHT
   is the wiki's own paper panels (tape labels, dashed cells) carrying what
   the game has no popup for: drop sources, ladders, backlinks. */

.dt-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dt-back {
  font-family: "Bangers", cursive;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
  background: var(--banner);
  border: 2.5px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 3px 3px 0 rgba(10, 14, 30, 0.5);
  padding: 4px 13px 2px;
}
.dt-back:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(10, 14, 30, 0.5); }
.dt-changed {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.4);
  padding: 3px 9px 2px;
  transform: rotate(-1.5deg);
}

.dt-cols {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  flex-wrap: wrap;
}
.dt-left { width: 306px; flex: none; display: flex; flex-direction: column; gap: 14px; }
.dt-left.grow { width: auto; flex: 1 1 380px; min-width: 0; }
.dt-right { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.dt-cols.wide .dt-right { flex: 0 1 360px; }

/* ── the big art plate ── */
.dt-plate {
  position: relative;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  background-image: radial-gradient(rgba(38, 60, 110, 0.10) 1.1px, transparent 1.3px);
  background-size: 13px 13px;
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 6px 6px 0 rgba(10, 14, 30, 0.5);
}
.dt-plate img, .dt-plate .tsprite { width: 148px; height: 148px; display: block; }
/* the block's in-game tooltip preview (export_previews.ps1), under the plate */
.dt-preview {
  position: relative;
  line-height: 0;
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  background: #1a1a21;
  overflow: hidden;
  box-shadow: 6px 6px 0 rgba(10, 14, 30, 0.5);
}
.dt-preview video { width: 100%; height: auto; display: block; }
.dt-preview-note {
  position: absolute;
  right: 7px;
  top: 5px;
  line-height: 1;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.dt-plate.sketch {
  background-color: rgba(26, 83, 192, 0.1);
  background-image:
    repeating-linear-gradient(45deg, rgba(26, 83, 192, 0.16) 0 1.5px, transparent 1.5px 10px);
}
.dt-plate.sketch .diamond-fallback-wrap { width: 96px; height: 96px; }
.dt-plate.sketch .diamond-fallback { inset: 11px; }
.dt-plate.sketch .diamond-initial { font-size: 34px; }
.dt-plate-note {
  position: absolute;
  right: 7px;
  bottom: 6px;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: rgba(20, 24, 43, 0.45);
}

/* ── the in-game popup, inline on the page ──
   ps-ui.css owns every child rule (.t-ribbon / .t-stats / .t-flavor); only
   the floating-tooltip behaviour is undone here. */
/* The block's one rule (a unique's twist_text), between the grants and the
   flavour, upright and in ink: the line the page used to leave out
   (five-area review 2026-09-09, W1). */
.tooltip .t-rule {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.35;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.tooltip .t-rule .kw { font-weight: 600; }

.tooltip.inline {
  position: static;
  pointer-events: auto;
  z-index: auto;
  width: 100%;
  max-width: none;
  margin-top: 20px;
}

/* SUPPORT grants — ModCard line grammar (value, then stat), plus the
   class-correct shared-link rule the game prints under them. */
.grant-line {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
}
.grant-line .g-val { font-family: "Bangers", cursive; font-size: 15px; color: #1f9c3f; }
.grant-line.neg .g-val { color: #dc2030; }
.grant-line .g-stat { color: #3d3a34; letter-spacing: 0.03em; flex: 1; min-width: 0; }
.grant-line .g-class {
  flex: none;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: #9a927e;
  border: 1.5px solid rgba(20, 24, 43, 0.22);
  border-radius: 2px;
  padding: 0 4px;
}
.grant-rule {
  margin-top: 5px;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.09em;
  color: #7b6f52;
  background: rgba(240, 160, 40, 0.16);
  border-left: 3px solid var(--tape-gold);
  padding: 4px 7px;
}
.tooltip.inline .t-flavor { font-size: 12.5px; }

/* ── paper panels ── */
.wpanel {
  position: relative;
  background: var(--paper);
  background-image: radial-gradient(rgba(38, 60, 110, 0.09) 1.1px, transparent 1.3px);
  background-size: 13px 13px;
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 6px 6px 0 rgba(10, 14, 30, 0.5);
  padding: 18px 13px 14px;
}
.wpanel > .tape { font-size: 15px; padding: 2px 11px 0; }
.wp-body { display: flex; flex-direction: column; gap: 9px; }
.wp-copy { font-weight: 500; font-size: 14px; line-height: 1.42; color: #24283c; }
.wp-copy.big { font-size: 15.5px; line-height: 1.48; }
.wp-copy + .wp-copy { margin-top: 2px; }
.wp-note { font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; color: rgba(20, 24, 43, 0.5); }
.wp-sub {
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a927e;
  border-bottom: 2px dotted rgba(20, 24, 43, 0.18);
  padding-bottom: 3px;
}
.wp-empty { font-weight: 700; font-size: 12px; color: rgba(20, 24, 43, 0.45); padding: 4px 0; }

.kv { display: flex; align-items: baseline; gap: 8px; }
.kv-k { font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; color: #7b6f52; }
.kv-v { margin-left: auto; font-family: "Bangers", cursive; font-size: 18px; color: var(--ink); }
.thrlist { display: flex; flex-direction: column; gap: 4px; }
.thrlist .kv + .kv { border-top: 2px dotted rgba(20, 24, 43, 0.16); padding-top: 4px; }

/* ── chips ── */
.chiprow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wchip {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 1.5px 1.5px 0 rgba(10, 14, 30, 0.35);
  padding: 2px 8px 1px;
}
.wchip.on { background: #bfe6c8; }
.wchip.off { background: transparent; border-style: dashed; border-color: rgba(20, 24, 43, 0.35); color: rgba(20, 24, 43, 0.5); box-shadow: none; }
.wchip.warn { background: var(--gold); }
.wchip.elem { background: var(--ec, #eee); }

/* ── drop sources ── */
.bosstie {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  background: var(--gold);
  border: 2.5px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 3px 3px 0 rgba(10, 14, 30, 0.45);
  padding: 5px 10px;
}
.bosstie:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(10, 14, 30, 0.45); }
.bt-kind { font-weight: 700; font-size: 9px; letter-spacing: 0.12em; opacity: 0.7; }
.bt-name { font-family: "Bangers", cursive; font-size: 18px; line-height: 1; }
.bt-pct { margin-left: auto; font-family: "Bangers", cursive; font-size: 17px; }

/* ── block mini tiles (ladders, mosaics, backlinks) ── */
.ladder { display: flex; gap: 8px; flex-wrap: wrap; }
.mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; }
.mtile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 158px;
  max-width: 250px;
  min-width: 0;
  background: rgba(255, 252, 240, 0.9);
  border: 2px dashed rgba(20, 24, 43, 0.35);
  border-left: 4px solid var(--tc, var(--ink));
  border-radius: var(--rad);
  padding: 5px 8px 5px 6px;
  text-decoration: none;
  color: var(--ink);
}
.mtile:hover { border-style: solid; background: #fffdf4; box-shadow: 3px 3px 0 rgba(10, 14, 30, 0.35); transform: translate(-1px, -1px); }
.mtile.here { background: var(--tape-gold); border-style: solid; border-color: var(--ink); border-left-color: var(--tc, var(--ink)); }
.mt-art { flex: none; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
.mt-art img, .mt-art .tsprite { width: 42px; height: 42px; display: block; }
.mt-art.sketch {
  background-color: rgba(26, 83, 192, 0.09);
  background-image: repeating-linear-gradient(45deg, rgba(26, 83, 192, 0.16) 0 1.5px, transparent 1.5px 8px);
  border: 1.5px solid rgba(20, 24, 43, 0.35);
  border-radius: 2px;
}
.mt-art.sketch .diamond-fallback-wrap { width: 30px; height: 30px; }
.mt-art.sketch .diamond-fallback { inset: 4px; }
.mt-art.sketch .diamond-initial { font-size: 12px; }
.mt-txt { display: flex; flex-direction: column; min-width: 0; }
.mt-name { font-family: "Bangers", cursive; font-size: 15px; line-height: 1.05; }
.mt-sub {
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.09em;
  color: rgba(20, 24, 43, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── set / mod / keyword links ── */
.setlink {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  text-decoration: none;
  color: var(--ink);
  background: rgba(255, 252, 240, 0.9);
  border: 2px dashed rgba(20, 24, 43, 0.35);
  border-left: 4px solid var(--ac, var(--ink));
  border-radius: var(--rad);
  padding: 6px 10px 6px 7px;
}
.setlink:hover { border-style: solid; background: #fffdf4; box-shadow: 3px 3px 0 rgba(10, 14, 30, 0.35); }
.sl-gem { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.sl-gem .diamond-tile { width: 40px; height: 40px; }
.sl-gem .diamond-fallback-wrap { width: 34px; height: 34px; }
.sl-txt { display: flex; flex-direction: column; min-width: 0; }
.sl-name { font-family: "Bangers", cursive; font-size: 18px; line-height: 1.05; }
.sl-sub { font-weight: 700; font-size: 9px; letter-spacing: 0.09em; color: rgba(20, 24, 43, 0.55); }

.modchip, .kwchip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.35);
  padding: 2px 8px 1px;
}
.modchip:hover, .kwchip:hover { background: var(--tape-gold); transform: translate(-1px, -1px); }
.mk-name { font-family: "Bangers", cursive; font-size: 14px; }
.mk-kind { font-weight: 700; font-size: 8.5px; letter-spacing: 0.1em; color: #8d8570; }
.kwchip { font-family: "Bangers", cursive; font-size: 14px; color: #1a53c0; }

/* ── detail title card (mods / sets / keywords) ── */
.dt-title {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-left: 9px solid var(--ac, var(--ink));
  border-radius: var(--rad);
  box-shadow: 7px 7px 0 rgba(10, 14, 30, 0.5);
  padding: 12px 16px 11px;
  margin-bottom: 20px;
}
.dt-titletop { display: flex; align-items: center; gap: 14px; }
.dt-titletxt { display: flex; flex-direction: column; min-width: 0; }
.dt-title .dt-kind { font-weight: 700; font-size: 10px; letter-spacing: 0.16em; color: #7b6f52; }
.dt-title h2 { font-size: 34px; line-height: 0.95; }
.dt-badge {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Bangers", cursive;
  font-size: 26px;
  color: #fff;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(10, 14, 30, 0.45);
  transform: rotate(-3deg);
}
.dt-setgem { flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.dt-setgem .diamond-tile { width: 56px; height: 56px; }
.dt-setgem .diamond-fallback-wrap { width: 48px; height: 48px; }

/* ══════════════ MODS ══════════════ */

.cardgrid.modgrid { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.mcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(255, 252, 240, 0.88);
  border: 2px dashed rgba(20, 24, 43, 0.35);
  border-left: 5px solid var(--tc, var(--ink));
  border-radius: var(--rad);
  padding: 8px 9px 9px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
.mcard:hover { border-style: solid; background: #fffdf4; box-shadow: 4px 4px 0 rgba(10, 14, 30, 0.4); transform: translate(-1px, -1px); }
.mcard.sx { background: rgba(237, 194, 89, 0.16); }
.mc-head { display: flex; align-items: baseline; gap: 6px; }
.mc-name { font-family: "Bangers", cursive; font-size: 18px; line-height: 1; flex: 1; min-width: 0; }
.mc-kind { font-weight: 700; font-size: 8.5px; letter-spacing: 0.12em; color: #8d8570; }
.mc-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.mc-desc {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.32;
  color: rgba(20, 24, 43, 0.72);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mc-foot {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  border-top: 2px dotted rgba(20, 24, 43, 0.18);
}
.mc-tiers { font-family: "Bangers", cursive; font-size: 13px; }
.mc-on {
  margin-left: auto;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.09em;
  color: rgba(20, 24, 43, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mc-sx {
  position: absolute;
  top: -8px;
  right: -4px;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: #edc259;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 1.5px 1.5px 0 rgba(10, 14, 30, 0.4);
  padding: 1px 7px 0;
}

.sx-banner {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(237, 194, 89, 0.3);
  border: 2.5px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 4px 4px 0 rgba(10, 14, 30, 0.4);
  padding: 8px 12px;
  margin-bottom: 18px;
}
.sx-banner b { font-family: "Bangers", cursive; font-weight: 400; font-size: 18px; letter-spacing: 0.04em; }
.sx-banner span { font-weight: 700; font-size: 12px; color: rgba(20, 24, 43, 0.7); flex: 1; min-width: 200px; }

/* Tier table — each row is the real ModCard at that tier, with the wiki's
   own weight / forge-gate cell beside it. */
.tier-table { display: flex; flex-direction: column; }
.tier-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 4px;
  margin-bottom: 2px;
}
.tier-head span { font-weight: 700; font-size: 9px; letter-spacing: 0.14em; color: #9a927e; }
.tier-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 8px;
}
.tier-row + .tier-row { border-top: 2px dotted rgba(20, 24, 43, 0.16); }
.tier-row .mod-card { flex: 1; min-width: 0; }
.tier-meta { flex: none; display: flex; gap: 6px; margin-top: 10px; }
.tm-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 1.5px 1.5px 0 rgba(10, 14, 30, 0.3);
  padding: 2px 6px 3px;
}
.tm-cell em { font-style: normal; font-weight: 700; font-size: 7.5px; letter-spacing: 0.12em; color: #8d8570; }
.tm-cell b { font-family: "Bangers", cursive; font-weight: 400; font-size: 15px; line-height: 1; }
.tm-cell.zero { border-style: dashed; opacity: 0.6; }

.wpanel.full { margin-top: 26px; }
.seeall {
  align-self: flex-start;
  font-family: "Bangers", cursive;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
  background: var(--banner);
  border: 2.5px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 2.5px 2.5px 0 rgba(10, 14, 30, 0.45);
  padding: 3px 11px 1px;
}
.seeall:hover { transform: translate(-1px, -1px); }
.bridge { display: flex; flex-direction: column; gap: 7px; }
.bridge + .bridge { border-top: 2px dotted rgba(20, 24, 43, 0.18); padding-top: 9px; }
.bridge-head { display: flex; align-items: center; gap: 7px; }
.bridge-head span { font-weight: 700; font-size: 9px; letter-spacing: 0.14em; color: #9a927e; }

/* ══════════════ SETS ══════════════ */

.setstrip-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  background-color: rgba(26, 83, 192, 0.1);
  background-image:
    repeating-linear-gradient(45deg, rgba(26, 83, 192, 0.13) 0 1.5px, transparent 1.5px 11px);
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 5px 5px 0 rgba(10, 14, 30, 0.45);
  padding: 44px 16px 40px;
  margin: 22px 0 24px;
}
.setstrip-scale { transform: scale(1.55); transform-origin: center; }
/* Phone: the 1.55x hero quilt ran 7px past a 390px screen (sideways page
   scroll on SETS). Natural size there, and the frame clips as a backstop. */
@media (max-width: 760px) {
  .setstrip-scale { transform: none; }
  .setstrip-wrap { padding: 26px 10px 24px; overflow: hidden; }
}
.setstrip { flex: none; }
.setstrip .sticker {
  position: absolute;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: block;
}
.setstrip .sticker:hover { transform: scale(1.12); z-index: 4; }
.setstrip .diamond-fallback-wrap { width: 48px; height: 48px; }

.setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 10px; }
.scard {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 252, 240, 0.88);
  border: 2px dashed rgba(20, 24, 43, 0.35);
  border-left: 5px solid var(--ac, var(--ink));
  border-radius: var(--rad);
  padding: 9px 10px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
.scard:hover { border-style: solid; background: #fffdf4; box-shadow: 4px 4px 0 rgba(10, 14, 30, 0.4); transform: translate(-1px, -1px); }
.sc-gem { flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.sc-gem .diamond-tile { width: 52px; height: 52px; }
.sc-gem .diamond-fallback-wrap { width: 44px; height: 44px; }
.sc-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-name { font-family: "Bangers", cursive; font-size: 20px; line-height: 1; }
.sc-sub { font-weight: 700; font-size: 9px; letter-spacing: 0.1em; color: rgba(20, 24, 43, 0.55); }
.sc-desc {
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(20, 24, 43, 0.7);
  margin-top: 3px;
}

.comp-wrap { padding-top: 18px; position: relative; }
.comp-wrap .comp-card { padding: 30px 16px 16px; gap: 12px; }
.comp-wrap .comp-tier + .comp-tier { border-top: 2px dotted rgba(20, 24, 43, 0.16); padding-top: 11px; }
.comp-threshold {
  margin-left: auto;
  font-family: "Bangers", cursive;
  font-size: 13px;
  line-height: 1;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  padding: 2px 7px 3px;
}

/* ══════════════ GLOSSARY ══════════════ */

.aznav { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 16px; }
.azjump {
  font-family: "Bangers", cursive;
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.35);
  padding: 4px 10px 2px;
}
.azjump:hover { background: var(--tape-gold); transform: translate(-1px, -1px); }
.azgroup { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.azgroup + .azgroup { border-top: 2px dotted rgba(20, 24, 43, 0.2); padding-top: 14px; }
.azletter {
  flex: none;
  width: 46px;
  text-align: center;
  font-family: "Bangers", cursive;
  font-size: 34px;
  line-height: 1;
  color: #fff;
  background: var(--banner);
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 3px 3px 0 rgba(10, 14, 30, 0.45);
  padding: 4px 0 2px;
  transform: rotate(-2deg);
}
.azlist { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 7px; }
.azrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: rgba(255, 252, 240, 0.85);
  border: 2px dashed rgba(20, 24, 43, 0.32);
  border-left: 4px solid #1a53c0;
  border-radius: var(--rad);
  padding: 5px 9px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
.azrow:hover { border-style: solid; background: #fffdf4; box-shadow: 3px 3px 0 rgba(10, 14, 30, 0.35); }
.az-name { font-family: "Bangers", cursive; font-size: 16px; line-height: 1.1; min-width: 0; }
.az-meta { margin-left: auto; font-weight: 700; font-size: 9px; letter-spacing: 0.09em; color: rgba(20, 24, 43, 0.5); white-space: nowrap; }

.aliasrow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: -8px 0 18px; }
.alias-k { font-weight: 700; font-size: 9px; letter-spacing: 0.14em; color: #9a927e; }
.srcgroup { display: flex; flex-direction: column; gap: 7px; }
.srcgroup + .srcgroup { margin-top: 6px; }
.chiprow.flow { align-items: flex-start; }
.mentions { display: flex; flex-direction: column; gap: 6px; }
.mentions .sr-row { padding: 5px 9px; }

@media (max-width: 760px) {
  .dt-left, .dt-left.grow { width: 100%; flex: 1 1 100%; }
  .dt-right { flex: 1 1 100%; }
  .dt-cols.wide .dt-right { flex: 1 1 100%; }
  .azgroup { gap: 9px; }
  .azletter { width: 36px; font-size: 26px; }
}

/* ══════════════ detail stub (enemies / ships / unknown ids) ══════════════ */

.detail-stub {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 8px 8px 0 rgba(10, 14, 30, 0.55);
  padding: 26px 20px 22px;
  margin: 18px auto;
  max-width: 620px;
}
.detail-stub .ds-kind {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #7b6f52;
}
.detail-stub h2 { font-size: 34px; line-height: 1; margin: 2px 0 8px; }
.detail-stub p { font-weight: 700; font-size: 13px; color: rgba(20, 24, 43, 0.62); }
.detail-stub .ds-back {
  display: inline-block;
  margin-top: 16px;
  font-family: "Bangers", cursive;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  background: var(--banner);
  border: 2.5px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 3px 3px 0 rgba(10, 14, 30, 0.5);
  padding: 4px 14px 2px;
}

/* keyword crosslinks inside body copy */
.kwlink {
  color: #1a53c0;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px dotted rgba(26, 83, 192, 0.6);
}
.kwlink:hover { color: var(--red); border-bottom-color: var(--red); }

/* ══════════════ search results ══════════════ */

.sr-group { margin-bottom: 16px; }
.sr-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 4px;
  margin-bottom: 9px;
}
.sr-head h3 { font-size: 20px; line-height: 1; }
.sr-head span { font-weight: 700; font-size: 10px; letter-spacing: 0.1em; color: #7b6f52; }
.sr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.sr-row {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 252, 240, 0.85);
  border: 2px dashed rgba(20, 24, 43, 0.35);
  border-left: 4px solid var(--tc, var(--ink));
  border-radius: var(--rad);
  padding: 6px 9px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
.sr-row:hover { border-style: solid; background: #fffdf4; box-shadow: 3px 3px 0 rgba(10, 14, 30, 0.35); }
.sr-thumb {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sr-thumb img, .sr-thumb .tsprite { width: 30px; height: 30px; display: block; }
.sr-thumb.sketch {
  background-color: rgba(26, 83, 192, 0.09);
  background-image: repeating-linear-gradient(45deg, rgba(26, 83, 192, 0.16) 0 1.5px, transparent 1.5px 7px);
  border: 1.5px solid rgba(20, 24, 43, 0.35);
  border-radius: 2px;
}
.sr-gem {
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: var(--gc, #b9b1a0);
  border: 2px solid var(--ink);
  box-shadow: 1px 1px 0 rgba(10, 14, 30, 0.35);
}
.sr-row .sr-name { font-family: "Bangers", cursive; font-size: 15px; line-height: 1.1; flex: none; min-width: 0; }
.sr-row .sr-meta {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(20, 24, 43, 0.5);
  margin-left: auto;
  white-space: nowrap;
}
.sr-none {
  text-align: center;
  padding: 40px 10px;
}
.sr-none b { font-family: "Bangers", cursive; font-size: 26px; display: block; margin-bottom: 6px; }
.sr-none span { font-weight: 700; font-size: 13px; color: rgba(20, 24, 43, 0.55); }

/* ══════════════ M2: composited hulls ══════════════

   Every enemy and ship on the page is ONE static composite (PSUI.composeShip
   downscaled into its box) — no animation, no engine flames. The canvas just
   has to fit its plate. */

/* Fits a composite inside a host with a resolved height (the card grids).
   Detail plates are auto-height, so they get a pinned px size from JS and
   these constraints are only a backstop there. */
.gship { display: block; max-width: 100%; max-height: 100%; }

/* ══════════════ ENEMIES ══════════════ */

.cb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 8px;
}
.cbmod {
  background: rgba(255, 252, 240, 0.85);
  border: 2px dashed rgba(20, 24, 43, 0.32);
  border-left: 4px solid #edc259;
  border-radius: var(--rad);
  padding: 6px 9px 7px;
  min-width: 0;
}
.cbmod.zone { border-left-color: #b14cd8; }
.cb-top { display: flex; align-items: baseline; gap: 6px; }
.cb-name { font-family: "Bangers", cursive; font-size: 16px; line-height: 1.1; flex: 1; min-width: 0; }
.cb-kind {
  flex: none;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: rgba(20, 24, 43, 0.5);
  border: 1.5px solid rgba(20, 24, 43, 0.25);
  border-radius: 2px;
  padding: 0 4px;
}
.cb-desc { font-weight: 500; font-size: 12px; line-height: 1.32; color: #24283c; margin-top: 2px; }
.cb-counter {
  display: flex;
  gap: 5px;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(20, 24, 43, 0.66);
  margin-top: 4px;
}
.cb-lab { flex: none; font-size: 8px; letter-spacing: 0.12em; color: #9a927e; padding-top: 2px; }
.cb-gate {
  margin-top: 5px;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #7b6f52;
  border-top: 2px dotted rgba(20, 24, 43, 0.18);
  padding-top: 4px;
}

.cardgrid.enemygrid { grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); }
.ecard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(255, 252, 240, 0.85);
  border: 2px dashed rgba(20, 24, 43, 0.35);
  border-top: 4px solid var(--tc, var(--ink));
  border-radius: var(--rad);
  padding: 7px 8px 8px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
.ecard:hover {
  border-style: solid;
  border-color: var(--ink);
  border-top-color: var(--tc, var(--ink));
  background: #fffdf4;
  box-shadow: 4px 4px 0 rgba(10, 14, 30, 0.4);
  transform: translate(-1px, -1px);
}
.ec-name {
  font-family: "Bangers", cursive;
  font-size: 15px;
  line-height: 1.05;
  min-height: 30px;
  word-break: break-word;
}
.ec-art {
  position: relative;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(26, 83, 192, 0.07);
  border: 2px solid rgba(20, 24, 43, 0.22);
  border-radius: 3px;
  overflow: hidden;
}
.ec-art.sketch {
  background-image: repeating-linear-gradient(45deg, rgba(26, 83, 192, 0.16) 0 1.5px, transparent 1.5px 9px);
}
.ec-art.sketch .diamond-fallback-wrap { width: 54px; height: 54px; }
.ec-art.sketch .diamond-fallback { inset: 6px; }
.ec-art.sketch .diamond-initial { font-size: 20px; }
.ec-foot { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ec-role, .ec-fam, .ec-band {
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.09em;
  border-radius: 2px;
  padding: 1px 5px;
  white-space: nowrap;
}
.ec-role { color: var(--ink); background: var(--rc, #ddd); border: 1.5px solid var(--ink); }
.ec-fam { color: rgba(20, 24, 43, 0.6); border: 1.5px dashed rgba(20, 24, 43, 0.3); }
.ec-band { color: #fff; background: var(--bc, #8d8570); }
.ec-tag {
  position: absolute;
  top: -8px;
  right: -5px;
  z-index: 2;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0 7px 1px;
  box-shadow: 1.5px 1.5px 0 rgba(10, 14, 30, 0.4);
}
.ec-tag.boss { background: #c0392b; }
.ec-tag.elite { background: #d6791f; }
.ec-drop {
  position: absolute;
  top: -8px;
  left: -5px;
  z-index: 2;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0 7px 1px;
  box-shadow: 1.5px 1.5px 0 rgba(10, 14, 30, 0.4);
}

/* the big hull plate on a detail page */
/* Hull plates HUG their composite: a wide boss and a 3-block scout should
   both sit in a box that fits them, not in a fixed band of air. That is why
   the height is auto — and it is also why the composite cannot be fitted by
   CSS here: a percentage max-height resolves to `none` under an auto-height
   parent, so a tall hull would overflow and get cropped at both ends by the
   overflow below. wiki.js fits and PINS an explicit px size on the canvas
   instead (paintHullPlate); these bounds only have to agree with the
   PLATE_PAD / PLATE_H constants it fits against. */
.dt-plate.hull { height: auto; min-height: 170px; max-height: 320px; padding: 12px; overflow: hidden; }
.dt-plate.board {
  background-image:
    repeating-linear-gradient(0deg, rgba(38, 60, 110, 0.1) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(38, 60, 110, 0.1) 0 1px, transparent 1px 24px);
  background-size: auto;
}

.phase { display: flex; gap: 9px; align-items: flex-start; }
.phase + .phase { border-top: 2px dotted rgba(20, 24, 43, 0.16); padding-top: 8px; }
.ph-lab {
  flex: none;
  width: 62px;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--banner);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 3px 4px 2px;
  text-align: center;
}
.ph-txt { font-weight: 500; font-size: 13px; line-height: 1.38; color: #24283c; min-width: 0; }

/* ══════════════ SHIPS ══════════════ */

.shipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
.shcard {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: rgba(255, 252, 240, 0.88);
  border: 2px dashed rgba(20, 24, 43, 0.35);
  border-top: 5px solid var(--tc, var(--ink));
  border-radius: var(--rad);
  padding: 9px 10px 10px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
.shcard:hover {
  border-style: solid;
  border-color: var(--ink);
  border-top-color: var(--tc, var(--ink));
  background: #fffdf4;
  box-shadow: 5px 5px 0 rgba(10, 14, 30, 0.4);
  transform: translate(-1px, -1px);
}
.sh-name { font-family: "Bangers", cursive; font-size: 22px; line-height: 1; }
.sh-art {
  position: relative;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8fb;
  border: 2px solid rgba(20, 24, 43, 0.3);
  border-radius: 3px;
  overflow: hidden;
}
/* Graph paper, not the editor board: the composite's own cell pitch varies
   with the hull, so a heavy grid would cut through blocks at random. */
.sh-art.board {
  background-image:
    repeating-linear-gradient(0deg, rgba(38, 60, 110, 0.1) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(38, 60, 110, 0.1) 0 1px, transparent 1px 20px);
}
.sh-art.sketch .diamond-fallback-wrap { width: 72px; height: 72px; }
.sh-foot { display: flex; gap: 6px; flex-wrap: wrap; }
.sh-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 1.5px 1.5px 0 rgba(10, 14, 30, 0.3);
  padding: 2px 7px 3px;
}
.sh-stat em { font-style: normal; font-weight: 700; font-size: 7.5px; letter-spacing: 0.1em; color: #8d8570; }
.sh-stat b { font-family: "Bangers", cursive; font-weight: 400; font-size: 15px; line-height: 1; }

/* ══════════════ MAP MODS ══════════════ */

.mmsec { margin-bottom: 22px; }
.mm-sechead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 4px;
  margin-bottom: 11px;
}
.mm-sechead h3 { font-size: 21px; line-height: 1; }
.mm-sechead span { font-weight: 700; font-size: 10.5px; letter-spacing: 0.05em; color: rgba(20, 24, 43, 0.5); }
.mmgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.mmcard {
  background: rgba(255, 252, 240, 0.88);
  border: 2px dashed rgba(20, 24, 43, 0.35);
  border-left: 5px solid var(--tc, var(--ink));
  border-radius: var(--rad);
  padding: 9px 11px 10px;
  min-width: 0;
}
.mmcard.reward { background: rgba(31, 156, 63, 0.08); }
.mmcard.focus { border-style: solid; border-color: var(--ink); border-left-color: var(--tc); box-shadow: 5px 5px 0 var(--gold); }
.mm-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mm-name { font-family: "Bangers", cursive; font-size: 19px; line-height: 1; }
.mm-kind { font-weight: 700; font-size: 8.5px; letter-spacing: 0.12em; color: #8d8570; }
.mm-flag {
  margin-left: auto;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: #fff;
  background: #b02030;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 1px 6px;
}
.mm-flag.good { background: #1f9c3f; }
.mm-cat { font-weight: 700; font-size: 8.5px; letter-spacing: 0.12em; color: #9a927e; margin-top: 3px; }
.mm-desc { font-weight: 500; font-size: 12.5px; line-height: 1.34; color: #24283c; margin: 4px 0 7px; }
.mm-tiers { display: flex; flex-direction: column; border-top: 2px solid rgba(20, 24, 43, 0.2); }
.mm-tier {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0 4px;
  min-width: 0;
}
.mm-tier + .mm-tier { border-top: 2px dotted rgba(20, 24, 43, 0.16); }
.mm-tier > .mod-tier { flex: none; width: 20px; }
.mm-tier > .mod-line { flex: 1; min-width: 0; flex-wrap: wrap; }
.mm-tier .mod-val.wide { flex: 1; min-width: 0; }
.mm-meta { flex: none; display: flex; gap: 4px; }
.mm-meta .tm-cell { min-width: 50px; padding: 1px 5px 2px; }
.mm-meta .tm-cell b { font-size: 13px; }

/* ══════════════ CRAFTING ══════════════ */

.flad { display: flex; flex-direction: column; }
.flad-row { display: flex; align-items: baseline; gap: 9px; padding: 4px 0; }
.flad-row + .flad-row { border-top: 2px dotted rgba(20, 24, 43, 0.16); }
.flad-l {
  flex: none;
  width: 34px;
  text-align: center;
  font-family: "Bangers", cursive;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  background: var(--banner);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 3px 0 2px;
}
.flad-t { font-weight: 700; font-size: 12.5px; line-height: 1.35; color: #24283c; min-width: 0; }

.actgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 9px; }
.actcard {
  background: rgba(255, 252, 240, 0.9);
  border: 2px dashed rgba(20, 24, 43, 0.35);
  border-left: 5px solid var(--tape-gold);
  border-radius: var(--rad);
  padding: 8px 10px 9px;
  min-width: 0;
}
.actcard.atlas { border-left-color: #b02030; }
.act-head { display: flex; align-items: center; gap: 7px; }
/* The action's stone. Flat diamond until the F6 gem bake exists; `.baked`
   swaps in the real CraftGem render, which brings its own ink + shadow. */
.act-stone {
  flex: none;
  width: 17px;
  height: 17px;
  transform: rotate(45deg);
  background: var(--gc, #b9b1a0);
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.35);
}
.act-stone.baked, .gem-stone.baked {
  transform: none;
  background: none;
  border: 0;
  box-shadow: none;
  object-fit: contain;
}
.act-stone.baked { width: 26px; height: 26px; }
.gem-stone.baked { width: 34px; height: 34px; }
.act-name { font-family: "Bangers", cursive; font-size: 19px; line-height: 1; flex: 1; min-width: 0; }
.act-gate {
  flex: none;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 1px 5px;
}
.act-costs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 5px 0 6px; }
.act-cost {
  display: flex;
  align-items: baseline;
  gap: 5px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 1.5px 1.5px 0 rgba(10, 14, 30, 0.3);
  padding: 1px 7px 2px;
}
.act-cost em { font-style: normal; font-weight: 700; font-size: 7.5px; letter-spacing: 0.11em; color: #8d8570; }
.act-cost b { font-family: "Bangers", cursive; font-weight: 400; font-size: 14px; line-height: 1; }
.act-cost.off { border-style: dashed; opacity: 0.55; }
.act-desc { font-weight: 500; font-size: 12px; line-height: 1.34; color: #24283c; }

.gemrack { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 9px; }
.gemtile {
  background: rgba(255, 252, 240, 0.9);
  border: 2px dashed rgba(20, 24, 43, 0.35);
  border-left: 5px solid var(--gc, #b9b1a0);
  border-radius: var(--rad);
  padding: 8px 10px 9px;
  min-width: 0;
}
.gem-head { display: flex; align-items: center; gap: 9px; }
.gem-stone {
  flex: none;
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
  background: var(--gc, #b9b1a0);
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.35);
}
.gem-txt { display: flex; flex-direction: column; min-width: 0; }
.gem-name { font-family: "Bangers", cursive; font-size: 18px; line-height: 1.05; }
.gem-cut { font-weight: 700; font-size: 8.5px; letter-spacing: 0.1em; color: rgba(20, 24, 43, 0.55); }
.gem-desc { font-weight: 500; font-size: 12px; line-height: 1.32; color: #24283c; margin: 6px 0 6px; }
.gem-bands { display: flex; gap: 4px; flex-wrap: wrap; }
.gem-band {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 700;
  background: #fff;
  border: 1.5px solid rgba(20, 24, 43, 0.35);
  border-radius: 2px;
  padding: 1px 5px;
}
.gem-band em { font-style: normal; font-size: 8px; letter-spacing: 0.06em; color: #8d8570; }
.gem-band b { font-family: "Bangers", cursive; font-weight: 400; font-size: 12px; }

.essshelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 9px; }
.esschip {
  background: rgba(255, 252, 240, 0.9);
  border: 2px dashed rgba(20, 24, 43, 0.35);
  border-radius: var(--rad);
  padding: 8px 10px 9px;
  min-width: 0;
}
.ess-head { display: flex; align-items: center; gap: 8px; }
.ess-glyph {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  background: var(--ink);
  border-radius: 50% 42% 55% 46%;
  transform: rotate(-6deg);
}
/* Baked essence gem — the real EssenceChip glass render, which already
   carries its outline and drop shadow, so the ink blob chrome comes off. */
.ess-glyph.baked {
  width: 38px;
  height: 38px;
  background: none;
  border-radius: 0;
  transform: none;
  object-fit: contain;
}
.ess-name { font-family: "Bangers", cursive; font-size: 18px; line-height: 1; flex: 1; min-width: 0; }
.ess-count { font-weight: 700; font-size: 8.5px; letter-spacing: 0.1em; color: #8d8570; }
.ess-desc { font-weight: 500; font-size: 12px; line-height: 1.32; color: #24283c; margin: 5px 0 6px; }
.esschip .modchip { box-shadow: 1.5px 1.5px 0 rgba(10, 14, 30, 0.3); padding: 1px 6px 0; }
.esschip .mk-name { font-size: 12px; }
.esschip .mk-kind { display: none; }

/* ══════════════ CHANGELOG ══════════════

   One paper panel per public release: label on the tape, trio + date + count
   on the head line, then the added / changed / removed lists as list rows.
   A REMOVED row has no page to open, so `.noref` kills the pointer chrome. */

.cl-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 2px dotted rgba(20, 24, 43, 0.2);
  padding-bottom: 7px;
}
.cl-trio { font-family: "Bangers", cursive; font-size: 20px; line-height: 1; }
.cl-date { font-weight: 700; font-size: 11px; letter-spacing: 0.08em; color: #7b6f52; }
.cl-count {
  margin-left: auto;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(20, 24, 43, 0.5);
}
.cl-list { display: flex; flex-direction: column; gap: 5px; }
.wp-sub.cl-added { color: #2e7d4f; }
.wp-sub.cl-changed { color: #9a7412; }
.wp-sub.cl-removed { color: #a33232; }
.cl-list .sr-row { align-items: baseline; }
.cl-list .sr-row.noref { cursor: default; opacity: 0.72; }
.cl-list .sr-row.noref:hover { border-style: dashed; background: rgba(255, 252, 240, 0.85); box-shadow: none; }
.cl-list .sr-meta {
  white-space: normal;
  text-align: right;
  max-width: 60%;
}
.cl-kind {
  flex: none;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--tc, var(--ink));
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 2px 5px 1px;
}

/* ══════════════ narrow ══════════════ */

@media (max-width: 900px) {
  .manual-head h1 { font-size: 32px; }
  .mh-right { align-items: flex-start; }
  .wsearch input { width: 160px; }
  /* Narrow: stack the label above its pills (fgroup wraps again here). */
  .fgroup { flex-wrap: wrap; }
  .flabel { width: 100%; }
  .fpills { flex: 1 1 100%; }
  .mm-tier { flex-wrap: wrap; }
  .mm-meta { margin-left: 28px; }
}

/* ══════════════ tape tags (the main menu's panel labels) ══════════════

   The game menu labels a panel with a small flat tag notched on its right
   edge, sitting on the panel's top-left corner: ink border, hard offset
   shadow, one flat colour. This is that tag, and the wiki's existing `.tape`
   panel labels ARE it — one shared look, set per element with `--tt`.

   Built as two clipped pseudo-elements (ink slab, then the fill inset by the
   border width) because a real `border` cannot follow a clip-path corner;
   the offset shadow rides `filter: drop-shadow`, which follows the clip. */

/* NOTE: no `position` here — `.tape` is absolutely positioned by ps-ui.css
   and must stay that way. `z-index` alone gives both flavours the stacking
   context the two pseudo-elements need. */
.tapetag { position: relative; }
.tapetag,
.wrap .tape {
  --tt: var(--tape-gold);
  z-index: 3;
  display: inline-block;
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  box-shadow: none;
  padding: 4px 20px 3px 11px;
  transform: rotate(-1.2deg);
  filter: drop-shadow(3px 3px 0 rgba(10, 14, 30, 0.5));
  white-space: nowrap;
}
.tapetag::before,
.wrap .tape::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}
.tapetag::after,
.wrap .tape::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  z-index: -1;
  background: var(--tt);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.wrap .tape { top: -13px; }
.wrap .tape.cyan { --tt: var(--cyan); }
.wrap .tape.magenta { --tt: var(--magenta); color: #fff; }

/* Section headers that are a bare rule + h3 wear the same tag (the DOM keeps
   its h3 — only the class is added). */
.mm-sechead h3.tapetag,
.sr-head h3.tapetag {
  font-family: "Cabin Condensed", sans-serif;
  font-size: 12px;
  margin-bottom: 3px;
}
.sr-head h3.tapetag { --tt: var(--cyan); }

/* ══════════════ COVER (#home) ══════════════

   The shared masthead sheet, restyled: pink band, big skewed white logotype
   with its colour echo, black tagline bar, and the version badge recast as
   the corner ISSUE STAMP. Every other route drops `body.cover` and the sheet
   is the paper header it has always been. */

.mh-tagline { display: none; }
.vs-no { display: none; }

body.cover .manual-head {
  display: block;
  text-align: center;
  overflow: visible;
  background-color: var(--magenta);
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.4px);
  background-size: 12px 12px;
  border-width: 4px;
  padding: 30px 20px 20px;
  margin-top: 18px;
}
body.cover .manual-head > .tape { left: auto; right: 20px; }
body.cover .mh-left { padding-top: 4px; }
body.cover .manual-head h1 {
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.22em;
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink);
}
body.cover .manual-head h1 em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: clamp(48px, 7.2vw, 88px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: #fff;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow:
    5px 5px 0 var(--ink),
    11px 9px 0 var(--cyan),
    18px 14px 0 rgba(240, 160, 40, 0.9);
  transform: skewX(-8deg) rotate(-1.6deg);
  transform-origin: 50% 50%;
}
body.cover .mh-sub { display: none; }
body.cover .mh-tagline {
  display: inline-block;
  margin-top: 22px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.24em;
  color: #fff;
  background: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(6, 10, 24, 0.45);
  padding: 6px 22px 5px;
  transform: rotate(-0.8deg);
}
body.cover .mh-right {
  align-items: center;
  margin-top: 20px;
  gap: 7px;
}
body.cover .wsearch {
  box-shadow: 5px 5px 0 rgba(6, 10, 24, 0.6);
  padding: 9px 12px 9px 14px;
}
body.cover .wsearch input { width: min(420px, 56vw); font-size: 15px; }
body.cover .mh-count { color: rgba(255, 255, 255, 0.85); letter-spacing: 0.12em; }

/* The ISSUE STAMP — white card on the band's top-left corner, cyan accent
   edge, hard ink shadow. Same badge element, same text logic. */
body.cover .verstamp {
  position: absolute;
  top: -14px;
  left: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: #fff;
  border: 3px solid var(--ink);
  border-left: 6px solid var(--cyan);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 7px 16px 6px 13px;
  transform: rotate(-2deg);
}
body.cover .vs-no {
  display: block;
  font-family: "Bangers", cursive;
  font-size: 19px;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--ink);
}
body.cover .vs-line {
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: rgba(20, 24, 43, 0.62);
}

/* Cream ground with scattered faint doodads — the menu's paper. */
body.cover .manual-sheet { padding: 22px 18px 24px; }
body.cover .manual-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300' fill='none' stroke='%23a9a293' stroke-width='2.4'><circle cx='38' cy='54' r='12'/><path d='M104 28l15 26H89z'/><rect x='196' y='38' width='22' height='22' transform='rotate(20 207 49)'/><path d='M262 116l14 9-14 9z' fill='%23a9a293' stroke='none'/><path d='M34 168l12-12 12 12-12 12z'/><path d='M128 206h20M138 196v20'/><circle cx='232' cy='230' r='8'/><path d='M66 250l20 0-10 16z'/><path d='M168 122l12 7-12 7z'/><path d='M244 176h18' stroke-width='4'/><circle cx='150' cy='72' r='5'/></svg>");
  background-repeat: repeat;
  background-size: 300px 300px;
}

/* ══════════════ HOME grid ══════════════ */

.hgrid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px 16px;
  padding-top: 6px;
}
.hcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--paper);
  background-image: radial-gradient(rgba(38, 60, 110, 0.09) 1.1px, transparent 1.3px);
  background-size: 13px 13px;
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 6px 6px 0 rgba(10, 14, 30, 0.78);
  padding: 20px 14px 14px;
  margin-top: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.hcard:hover {
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 rgba(10, 14, 30, 0.85);
}
.hcard > .tapetag { position: absolute; top: -12px; left: 13px; }
.hc-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  height: 104px;
  overflow: hidden;
  background-color: rgba(26, 83, 192, 0.06);
  border: 2px solid rgba(20, 24, 43, 0.2);
  border-radius: 3px;
  padding: 7px;
}
.hc-art.sketch {
  background-image: repeating-linear-gradient(45deg, rgba(26, 83, 192, 0.16) 0 1.5px, transparent 1.5px 9px);
}
.hc-art.sketch .diamond-fallback-wrap { width: 56px; height: 56px; }
.hc-art.sketch .diamond-fallback { inset: 6px; }
.hc-art.sketch .diamond-initial { font-size: 20px; }
.hc-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  background: var(--cell);
  border: 2px solid var(--tc, var(--ink));
  border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.35);
}
.hc-tile img, .hc-tile .tsprite { width: 52px; height: 52px; display: block; }
.hc-tile .diamond-fallback-wrap { width: 44px; height: 44px; }
.hc-gem { display: block; width: 56px; height: 56px; }
.hc-gem canvas, .hc-gem img, .hc-gem .diamond-fallback-wrap {
  width: 56px;
  height: 56px;
  display: block;
}
.hc-kw {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.4);
  padding: 3px 9px 2px;
}
.hc-kw.prefix { background: var(--gold); }
.hc-kw.suffix { background: var(--cyan); }
.hc-kw.threat { background: #e8574c; color: #fff; }
.hc-kw.reward { background: #6fcf6a; }
.hc-art .mod-pill { font-size: 10px; padding: 2px 8px 1px; }
.hc-mark {
  width: 22px;
  height: 22px;
  background: #7a39c4;
  border: 2px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.35);
}
.hc-mark.secret {
  background: transparent;
  border-style: dashed;
  border-color: rgba(20, 24, 43, 0.45);
  box-shadow: none;
}
.hc-stone {
  width: 40px;
  height: 40px;
  background: var(--gc, #b9b1a0);
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.45);
  transform: rotate(45deg);
  border-radius: 3px;
}
.hc-foot {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-top: 3px solid var(--ink);
  padding-top: 6px;
}
.hc-name { font-family: "Bangers", cursive; font-size: 24px; line-height: 1; }
.hc-count {
  margin-left: auto;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(20, 24, 43, 0.55);
  text-align: right;
}
.hc-note {
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.38;
  color: #3d3a34;
}
/* ══════════════ ACHIEVEMENTS table (#achievements) ══════════════ */

.achtable {
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  background: var(--paper);
  box-shadow: 5px 5px 0 rgba(6, 10, 24, 0.5);
  overflow: hidden;
}
.achrow {
  display: grid;
  grid-template-columns: 34px 230px 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-top: 2px solid var(--ink);
}
.achrow:first-child { border-top: 0; }
.achrow.head {
  background: #ede2c4;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #8a8378;
}
.achrow.head .ach-name,
.achrow.head .ach-text { font-family: inherit; font-size: 10px; }
.ach-mark {
  width: 16px;
  height: 16px;
  background: #7a39c4;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}
.achrow.head .ach-mark { background: transparent; border: 0; }
.ach-name {
  font-family: "Bangers", cursive;
  font-size: 17px;
  line-height: 1.1;
  color: var(--ink);
}
.ach-text {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  color: #5a544c;
}
/* A secret row is drawn as an empty slot with the tip beside it: the mark
   is hollow, the word SECRET stands in for the name, and the sentence is
   italic so it never reads as a real description. */
.achrow.secret { background: #ede6d2; }
.achrow.secret .ach-mark {
  background: transparent;
  border-style: dashed;
  border-color: rgba(20, 24, 43, 0.45);
}
.achrow.secret .ach-name { color: #8a8378; letter-spacing: 0.06em; }
.achrow.secret .ach-text { font-style: italic; color: #6f675c; }
.achfoot {
  margin-top: 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(20, 24, 43, 0.5);
}

.hfoot {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  border-top: 2px dashed rgba(20, 24, 43, 0.3);
  padding-top: 10px;
  text-align: center;
}
.hf-note {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(20, 24, 43, 0.5);
}

@media (max-width: 900px) {
  body.cover .manual-head { padding-top: 44px; }
  body.cover .verstamp { top: -16px; left: 10px; }
  body.cover .manual-head > .tape { display: none; }
  body.cover .wsearch input { width: min(280px, 60vw); }
  /* The grid keeps auto-filling (two columns at 900) — one full-width card
     per row turns the art box into an empty band, and three columns are too
     narrow for a card's four tiles to sit on one line. */
  .hc-art { height: 96px; }
  .hc-name { font-size: 21px; }
  /* Two columns, name over sentence — a 230px name column plus prose does
     not fit a phone, and the mark column is the first thing to go. */
  .achrow {
    grid-template-columns: 16px 1fr;
    gap: 6px 10px;
  }
  .achrow .ach-text { grid-column: 2; }
}

/* ══════════════ HOME: intro lines + update notice ══════════════ */

.hintro {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  margin: 4px auto 18px;
}
.hi-lead { font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--ink); }
.hi-sub { font-weight: 500; font-size: 14px; line-height: 1.4; color: rgba(20, 24, 43, 0.7); margin-top: 4px; }

.hbanner {
  position: relative;
  z-index: 2;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-left: 9px solid var(--magenta);
  border-radius: var(--rad);
  box-shadow: 6px 6px 0 rgba(10, 14, 30, 0.6);
  padding: 20px 16px 14px;
  margin: 14px 0 22px;
}
.hbanner > .tape { font-size: 13px; }
.hbanner h3 { font-size: 24px; line-height: 1; margin-bottom: 6px; }
.hbanner p { font-weight: 500; font-size: 14px; line-height: 1.42; color: #24283c; margin-top: 4px; }
.hb-link,
.cl-noteslink {
  display: inline-block;
  font-family: "Bangers", cursive;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--ink);
  background: var(--gold);
  border: 2.5px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.45);
  padding: 4px 11px 3px;
  text-decoration: none;
}
.hb-link { margin-top: 10px; }
.hb-link:hover,
.cl-noteslink:hover { transform: translate(-1px, -1px); background: #fff; }

.cl-notes {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgba(20, 24, 43, 0.65);
  margin: 0 0 14px;
}
.cl-notes .cl-noteslink { font-size: 13px; margin-left: 4px; }

/* MAP MODS: what the THREAT / BEACON T boxes mean. */
.mm-legend {
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(20, 24, 43, 0.6);
  margin: -4px 0 10px;
}
.sectorgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px 12px; }

/* The enemy stat card's base-numbers line. */
.base-note { margin-top: 8px; }

@media (max-width: 760px) {
  .hi-lead { font-size: 16px; }
  .hbanner { padding: 18px 12px 12px; }
  .hbanner h3 { font-size: 21px; }
}

/* ══════════════ wave 2 (2026-09-24): section views, WORLD, home ══════════════ */

/* The view row: a section's pages, under the tab strip on every page of
   that section (wiki.js viewRow). One sideways-scrolling row on a phone,
   like the strip above it. */
.subnav.viewrow {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px dashed rgba(20, 24, 43, 0.25);
}
@media (max-width: 760px) {
  .subnav.viewrow {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-right: -14px;
    padding-right: 14px;
    padding-top: 2px;
    padding-left: 1px;
  }
  .subnav.viewrow::-webkit-scrollbar { display: none; }
  .subnav.viewrow .subtab { flex: none; font-size: 14px; padding: 5px 9px 4px; }
}

/* A link to another wiki page inside WORLD copy. */
.golink {
  color: #b0204f;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(176, 32, 79, 0.45);
}
.golink:hover { color: var(--red); border-bottom-color: var(--red); }

/* SECTOR TYPES: where each type can turn up. */
.sc-where {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 2px dashed rgba(20, 24, 43, 0.2);
  padding-top: 7px;
}
.sc-where li {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(20, 24, 43, 0.62);
}

/* WORLD pages. */
.wlead {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  max-width: 860px;
  margin: 2px 0 20px;
}
.wcols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
.wcol { display: flex; flex-direction: column; gap: 24px; padding-top: 12px; min-width: 0; }
@media (max-width: 900px) {
  .wcols { grid-template-columns: 1fr; }
  .wcol + .wcol { padding-top: 24px; }
}
.wpanel.wide { margin-top: 26px; }
.wfacts { margin-top: 4px; }
.wfact {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: #fff8e2;
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.35);
  padding: 2px 8px 1px;
}
.wfact em {
  font-style: normal;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: #7b6f52;
}
.wfact b { font-family: "Bangers", cursive; font-weight: 400; font-size: 15px; letter-spacing: 0.04em; }
.wevents, .wquads { display: grid; gap: 12px; }
.wevents { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.wquads { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.wevent, .wquad {
  background: #fffdf4;
  border: 2.5px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 3px 3px 0 rgba(10, 14, 30, 0.35);
  padding: 9px 11px 10px;
}
.we-name, .wq-name { font-family: "Bangers", cursive; font-size: 19px; letter-spacing: 0.04em; line-height: 1; }
.wevent .wp-copy { margin-top: 5px; font-size: 13.5px; }
.wq-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.wq-pin { margin-left: auto; text-decoration: none; color: var(--ink); display: inline-flex; gap: 5px; align-items: baseline; }
.wq-pin em {
  font-style: normal;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: #7b6f52;
}
.wq-pin b { font-family: "Bangers", cursive; font-weight: 400; font-size: 16px; letter-spacing: 0.04em; border-bottom: 1.5px dotted rgba(26, 83, 192, 0.6); color: #1a53c0; }
.wq-pin:hover b { color: var(--red); }
.wq-bonuses { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.wq-bonuses li { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: start; }
.wq-when {
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-align: center;
  background: var(--gold);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  padding: 2px 3px 1px;
  margin-top: 1px;
}
.wq-txt { display: flex; flex-direction: column; gap: 1px; font-weight: 500; font-size: 12.5px; line-height: 1.35; color: #3d3a34; }
.wq-txt b { font-family: "Bangers", cursive; font-weight: 400; font-size: 15px; letter-spacing: 0.04em; color: var(--ink); }

/* HOME: new-pilot guide. */
.hguide {
  position: relative;
  z-index: 2;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 6px 6px 0 rgba(10, 14, 30, 0.6);
  padding: 20px 16px 14px;
  margin: 0 0 24px;
}
.hguide:empty { display: none; }
.hguide > .tape { font-size: 13px; }
.hguide h3 { font-size: 24px; line-height: 1; margin-bottom: 10px; }
.hg-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 10px 14px;
}
.hg-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--rad);
  padding: 4px;
}
.hg-step:hover { background: rgba(240, 160, 40, 0.14); }
.hg-no {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-family: "Bangers", cursive;
  font-size: 19px;
  background: var(--gold);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.4);
}
.hg-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hg-txt b { font-family: "Bangers", cursive; font-weight: 400; font-size: 17px; letter-spacing: 0.04em; line-height: 1.05; }
.hg-line { font-weight: 500; font-size: 13px; line-height: 1.38; color: #3d3a34; }

/* HOME: a section card is a div now (it holds its views' links), so the
   big link inside carries the card's look. */
.hc-hit {
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
}
.hc-views {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  border-top: 2px dashed rgba(20, 24, 43, 0.25);
  padding-top: 8px;
}
.hc-view {
  font-family: "Bangers", cursive;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 252, 240, 0.9);
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: 2px 7px 1px;
}
.hc-view:hover { background: var(--ink); color: var(--cream); }
.hc-art.rings { position: relative; }
.hc-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 2.5px dashed rgba(20, 24, 43, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.hc-ring.r0 { width: 96px; height: 96px; border-color: rgba(20, 24, 43, 0.3); }
.hc-ring.r1 { width: 72px; height: 72px; border-color: rgba(20, 24, 43, 0.42); }
.hc-ring.r2 { width: 48px; height: 48px; border-style: solid; border-color: #e8a028; }
.hc-ring.r3 { width: 26px; height: 26px; border-style: solid; border-color: var(--magenta); }
.hc-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
/* WORLD copy arrives in sentence case (a hidden achievement's name is a
   plain word the payload may never carry in capitals); set it in caps. */
.wcol .wpanel > .tape, .wq-when { text-transform: uppercase; }
/* the block flown in real gameplay (export_gameplay_clips.ps1), a 3:4 clip */
.dt-clip { margin-bottom: 12px; }
.dt-clip video { aspect-ratio: 3 / 4; object-fit: cover; }
/* the clip's sky is pale: the note sits on an ink chip there */
.dt-clip .dt-preview-note {
  top: 6px;
  padding: 3px 5px;
  border-radius: 3px;
  background: rgba(13, 13, 13, 0.72);
  color: rgba(255, 255, 255, 0.85);
}