/* PaperShip shared web UI tokens + chrome — extracted from the hangar page
   (landing/papership/hangar/hangar.css) so the wiki can reuse them.

   Loaded BEFORE each page's own stylesheet, so a page can still override any
   rule here. Nothing in this file is hangar-page layout: it is the design
   tokens, the base reset, the block popup + ModCard, the SET/TRIGGER gem
   strips + companion card, the stat hover popup, the paper sheet + tape
   labels, the cream inventory cell, and the SHIP CONFIGURATION stat panel.

   Extracted 2026-08-29 as a MECHANICAL move — every rule below is verbatim
   and keeps its original relative order. */

:root {
  --ink: #14182b;
  --paper: #fff7e2;
  --cream: #f2ecdc;
  --sheet: #ececf2;          /* SHIP CONFIGURATION light paper */
  --cell: #f8f8fb;
  --blueprint: #1a53c0;      /* editor page blue */
  --banner: #2f6ce0;         /* active tab blue */
  --navy: #0c0f1e;
  --magenta: #e63b6c;
  --cyan: #2dd4e6;
  --gold: #ffb84a;
  --tape-gold: #f0a028;
  --red: #e8352c;
  --blue: #2a6fd4;
  --orange: #f07f1e;
  --purple: #7a39c4;
  --rad: 4px;
  --max: 1160px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The hidden attribute must ALWAYS win — display classes on the same
   element otherwise override the UA's [hidden] rule (the FLY button
   leaked exactly this way). */
[hidden] { display: none !important; }

.panel-sheet, .panel-cream {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: var(--rad);
  box-shadow: 8px 8px 0 rgba(10, 14, 30, 0.55);
}
.panel-sheet { background: var(--sheet); }
.panel-cream { background: var(--cream); }
.tape {
  position: absolute;
  top: -14px;
  left: 14px;
  z-index: 3;
  font-family: "Bangers", cursive;
  font-size: 17px;
  letter-spacing: 0.05em;
  color: var(--ink);
  background: var(--tape-gold);
  border: 2.5px solid var(--ink);
  padding: 3px 12px 1px;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.5);
}
.tape.cyan { background: var(--cyan); }
.tape.magenta { background: var(--magenta); color: #fff; }

/* The block popup — spec: docs/block_popup_handover.md. Paper #EFE9DC +
   13px halftone dots + 4px ink border; vignette keyline in the caption
   tint when the instance is crafted/corrupted. */
.tooltip {
  position: fixed;
  pointer-events: none;
  background-color: #efe9dc;
  background-image: radial-gradient(rgba(20, 24, 43, 0.055) 1px, transparent 1.15px);
  background-size: 13px 13px;
  border: 4px solid var(--ink);
  box-shadow: 9px 9px 0 rgba(10, 14, 30, 0.6);
  border-radius: var(--rad);
  padding: 18px 18px 14px;
  min-width: 230px;
  max-width: 306px;
  z-index: 5;
}
.tooltip.tinted {
  box-shadow: 9px 9px 0 rgba(10, 14, 30, 0.6), inset 0 0 0 3px var(--tint);
}
/* Caption ribbon — perched over the top edge, tilted like the game. Default
   bg = the editor's paper-warm #F6F1E3 (BlockTooltip's is_default_bg). */
.t-ribbon {
  background: #f6f1e3;
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.5);
  padding: 4px 10px 3px;
  margin: -32px 0 8px -8px;
  width: max-content;
  max-width: 100%;
  transform: rotate(-1.6deg);
}
/* Tinted caption fg (name + eyebrow) is luminance-picked in JS per tint. */
.t-eyebrow {
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(20, 24, 43, 0.72);
}
.t-name-row { display: flex; align-items: center; gap: 7px; }
.t-name { font-family: "Bangers", cursive; font-size: 24px; line-height: 1.05; }
.t-grade {
  font-family: "Bangers", cursive;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 2px 5px 1px;
}
.t-grade.u { background: #d6791f; }
/* Micro-headers — Cabin-Bold 9 #9a927e uppercase, matching the in-game
   block popup's _make_micro_header (CabinCondensed-Bold, NOT Bangers). */
.t-micro {
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a927e;
  margin: 8px 0 2px;
}
.tooltip .t-stats { margin-bottom: 2px; }
.tooltip .t-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.tooltip .t-stat-left { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tooltip .t-stat-icon { display: inline-flex; flex: none; }
.tooltip .t-stat-label { font-weight: 700; letter-spacing: 0.04em; }
.tooltip .t-stat-value { font-family: "Bangers", cursive; font-size: 16px; }
.tone-pos { color: #1f9c3f; }
.tone-neg { color: #dc2030; }
.tone-ink { color: var(--ink); }
.t-idrow { display: flex; align-items: center; gap: 6px; line-height: 1.6; }
.t-idgem {
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border: 1.5px solid var(--ink);
  flex: none;
}
.t-idkind { font-weight: 700; font-size: 9px; letter-spacing: 0.12em; opacity: 0.6; }
.t-idname { font-family: "Bangers", cursive; font-size: 15px; }
.tooltip .t-flavor {
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-size: 13px;
  opacity: 0.7;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 2px dashed rgba(20, 24, 43, 0.3);
}

/* MODIFIERS cards — ModCard (game/scenes/shared/mod_card.gd): a bare
   3px coloured left rule on the popup paper (NO box/border), a header of
   NAME (Bangers) + tag pills + gold tier badge, then one `value (range)
   STAT` line per stat — value CabinBold green/red, range grey, stat dark. */
.mod-card {
  display: flex;
  gap: 8px;
  padding-left: 8px;
  border-left: 3px solid #c9930f;
  margin-top: 8px;
}
.mod-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mod-head { display: flex; align-items: center; gap: 6px; }
.mod-name {
  font-family: "Bangers", cursive;
  font-size: 14px;
  line-height: 1;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mod-pill {
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: #fff;
  border-radius: 2px;
  padding: 1px 5px;
  flex: none;
}
.mod-tier { font-family: "Bangers", cursive; font-size: 12px; color: #b8860b; flex: none; }
.mod-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 700;
  font-size: 11px;
}
.mod-line .mod-val { color: #1f9c3f; }
.mod-line.neg .mod-val { color: #dc2030; }
.mod-line .mod-range { color: #9a927e; }
.mod-line .mod-stat { color: #3d3a34; }

/* ── SETS / TRIGGERS strips (on the light sheet, like the editor) ── */
.sticker-strip {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.sticker-group { display: flex; flex-direction: column; gap: 4px; }
.strip-right { align-items: flex-end; }
.strip-title {
  font-family: "Bangers", cursive;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: 0.06em;
}
/* 45°-tessellated cluster: JS sets the container size + absolute gem pos. */
.strip-row { position: relative; }
.sticker {
  position: absolute;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 48px;
  height: 48px;
}
.sticker:hover { z-index: 5; }
.sticker.dim { opacity: 0.5; filter: grayscale(0.7); }
.diamond-tile { width: 48px; height: 48px; image-rendering: auto; display: block; }
.diamond-fallback-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.diamond-fallback {
  position: absolute;
  inset: 8px;
  transform: rotate(45deg);
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.45);
}
.diamond-initial {
  position: relative;
  font-family: "Bangers", cursive;
  font-size: 16px;
  color: #fff;
  text-shadow: 1px 1px 0 var(--ink);
}
/* Counter chip — the in-game X/Y (sets) or ×N (triggers) pill, bottom-right. */
.sticker-count {
  position: absolute;
  right: -2px;
  bottom: 2px;
  z-index: 3;
  font-family: "Bangers", cursive;
  font-size: 11px;
  line-height: 1.25;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 7px;
  padding: 0 5px;
  box-shadow: 1.5px 1.5px 0 rgba(10, 14, 30, 0.4);
}

/* Stat hover popup — the in-game HelpTooltip (game/autoloads/help_tooltip.gd):
   flat cream PAGE panel (no halftone), 3px ink border, 6/6 full-ink shadow,
   a perched YELLOW caption sticker (Bangers title + colored glyph) tilted over
   the top-left edge, and a wrapped body paragraph. Width 240 like the game. */
.stat-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  width: 240px;
  background: #fafaf5;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  border-radius: var(--rad);
  padding: 30px 16px 14px;   /* clears the two-line (eyebrow + title) caption */
}
.stat-tip-cap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: absolute;
  top: -15px;
  left: 12px;
  background: #ffe046;
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(10, 14, 30, 0.5);
  padding: 3px 11px 3px 9px;
  transform: rotate(-2deg);
}
.stat-tip-cap svg { display: block; flex: none; }
.stat-tip-txt { display: flex; flex-direction: column; }
.stat-tip-eyebrow {
  font-family: "Cabin Condensed", sans-serif;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20, 24, 43, 0.68);
  margin-bottom: -1px;
}
.stat-tip-title {
  font-family: "Bangers", cursive;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.stat-tip-desc { font-weight: 500; font-size: 13px; line-height: 1.35; color: var(--ink); }

/* SET / TRIGGER companion — the editor's BlockTooltip companion card
   (_make_companion_card): a paper panel with an OUTSET, tilted accent header
   chip perched over its top-left edge, then the set flavor + tier ladder (or
   a unique's gem + skill + ACTIVE + desc). Each row leads with a diamond gem. */
.companion {
  position: absolute;
  pointer-events: none;
  width: 250px;
  padding-top: 18px;   /* reserves the perched header's overhang */
  z-index: 6;
}
.comp-card {
  position: relative;
  background: #efe9dc;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(10, 14, 30, 0.55);
  border-radius: var(--rad);
  padding: 27px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Header perches over the card's top-left edge — eyebrow (SET / UNIQUE) over
   the name, mirroring the block popup's eyebrow-over-name caption. */
.comp-head {
  position: absolute;
  top: 0;
  left: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 2px solid var(--ink);
  padding: 3px 11px 4px 9px;
  transform: rotate(-1.4deg);
}
.comp-kind { font-family: "Cabin Condensed", sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 0.12em; opacity: 0.9; line-height: 1; margin-bottom: 1px; }
.comp-name { font-family: "Bangers", cursive; font-size: 20px; line-height: 0.9; }
.comp-flavor {
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(20, 24, 43, 0.7);
  line-height: 1.3;
}
/* One gem + content row (set tier or unique). */
.comp-tier { display: flex; align-items: flex-start; gap: 10px; }
.comp-tier.locked { opacity: 0.75; }
.comp-gem { position: relative; width: 30px; height: 30px; flex: none; }
.comp-tier--unique .comp-gem { width: 34px; height: 34px; }
.comp-gem i {
  position: absolute;
  left: 50%; top: 50%;
  width: 70%; height: 70%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gc, #5a6b8a);
  border: 2px solid var(--ink);
  border-radius: 3px;
}
.comp-gem b {
  position: absolute;
  left: 50%; top: 50%;
  width: 30%; height: 30%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #fafaf5;
}
.comp-rowbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.comp-tier-top { display: flex; align-items: center; gap: 6px; }
.comp-tier-name { font-family: "Bangers", cursive; font-size: 18px; line-height: 1; }
.comp-tier--unique .comp-tier-name { font-size: 19px; }
.comp-pieces { font-family: "Bangers", cursive; font-size: 16px; line-height: 1; margin-left: auto; color: #8a8a8a; }
.comp-pieces.on { color: #1f9c3f; }
.chip-active {
  font-family: "Bangers", cursive;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #15602c;
  background: #bfe6c8;
  border: 2px solid var(--ink);
  padding: 2px 6px 3px;
}
.chip-locked {
  font-family: "Bangers", cursive;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #8a8a8a;
  border: 2px dashed #9a9a9a;
  padding: 2px 6px 3px;
}
.comp-desc {
  /* Set tier copy carries real newlines (the game splits its two clauses onto
     separate lines); without pre-line the browser would collapse them. */
  white-space: pre-line;
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-size: 12px;
  color: #2a2a2a;
  line-height: 1.3;
  margin-top: 2px;
}
.comp-tier.locked .comp-tier-name,
.comp-tier.locked .comp-desc { color: #8a8a8a; }

/* Mosaic = the game's inventory sheet: cream panel, dashed cells */
.wall-mosaic-panel {
  position: relative;
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(10, 14, 30, 0.55);
  border-radius: var(--rad);
  padding: 26px 14px 14px;
  margin-bottom: 26px;
}
.wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.mosaic-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(255, 252, 240, 0.65);
  border: 2px dashed rgba(20, 24, 43, 0.35);
  border-radius: var(--rad);
  padding: 8px 6px 6px;
  text-decoration: none;
  animation: ship-float 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mosaic-tile { animation: none; }
}
.mosaic-tile:hover {
  border: 2px solid var(--tape-gold);
  background: #fffdf4;
  box-shadow: 3px 3px 0 rgba(10, 14, 30, 0.35);
}
.tile-power {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}
.tile-power em {
  font-style: normal;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.08em;
  opacity: 0.6;
}
.tile-power b {
  font-family: "Bangers", cursive;
  font-size: 15px;
  color: var(--ink);
}
.mosaic-tile canvas { width: 100%; max-width: 112px; height: auto; }
.tile-cap {
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink);
  opacity: 0.7;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* stat panel (FINAL spec: color-block headlines, dual HP|SHIELD, DR demoted, speed ghost) */
.sp-field { background: #e7ecf5; background-image: radial-gradient(#c3cbdb 1.1px, transparent 1.3px); background-size: 13px 13px; border: 2.5px solid var(--ink); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.sp-stamp { display: flex; align-items: center; justify-content: space-between; background: #161412; border-radius: 5px; box-shadow: 3px 3px 0 #E63333; padding: 5px 14px; transform: rotate(-0.5deg); }
.sp-stamp em { font-style: normal; font-family: "Bangers", cursive; font-size: 21px; letter-spacing: 0.06em; color: #fff; }
.sp-stamp b { font-family: "Bangers", cursive; font-size: 26px; font-weight: 400; color: #fff; }
.sp-title { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.sp-title i { width: 6px; height: 6px; background: var(--ac,#E63333); transform: rotate(45deg); flex: none; }
.sp-title span { font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #7b8398; }
.sp-title u { flex: 1; height: 0; border-top: 2px dotted #c3cbdb; text-decoration: none; }
.sp-gem { position: relative; width: 30px; height: 30px; flex: none; }
.sp-gem i { position: absolute; left: 50%; top: 50%; width: 21px; height: 21px; transform: translate(-50%,-50%) rotate(45deg); background: var(--gc); background-image: linear-gradient(135deg,rgba(255,255,255,0.34),rgba(0,0,0,0.12)); border: 2.5px solid #161412; border-radius: 4px; box-shadow: 1.5px 2px 0 rgba(22,20,18,0.24); }
.sp-gem svg { position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; }
.sp-dual { display: flex; overflow: hidden; border: 2.5px solid var(--ink); border-radius: 7px; box-shadow: 2px 2px 0 rgba(22,20,18,0.4); }
.sp-half { flex: 1; display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--sc); background-image: radial-gradient(rgba(255,255,255,0.16) 1.1px, transparent 1.5px); background-size: 6px 6px; }
.sp-half + .sp-half { border-left: 2.5px solid var(--ink); }
.sp-lv { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.sp-lv em { font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.92); text-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.sp-lv b { font-family: "Bangers", cursive; font-size: 22px; font-weight: 400; color: #fff; text-shadow: 0 1.5px 0 rgba(0,0,0,0.3); }
.sp-block { display: flex; align-items: center; gap: 9px; background: var(--sc); background-image: radial-gradient(rgba(255,255,255,0.16) 1.1px, transparent 1.5px); background-size: 6px 6px; border: 2.5px solid var(--ink); border-radius: 7px; box-shadow: 2px 2px 0 var(--sh,rgba(22,20,18,0.4)); padding: 3px 10px 3px 7px; }
.sp-block em { font-style: normal; flex: 1; font-weight: 700; font-size: 13.5px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.92); text-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.sp-block b { font-family: "Bangers", cursive; font-size: 22px; font-weight: 400; color: #fff; text-shadow: 0 1.5px 0 rgba(0,0,0,0.3); }
.sp-rail { display: flex; gap: 7px; padding-left: 7px; }
.sp-rail > i { width: 0; border-left: 2px dashed #b7c0d2; flex: none; margin: 1px 0; }
.sp-chips { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chip-pair { display: flex; gap: 5px; }
.sp-chip { position: relative; display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; height: 22px; padding: 0 7px 0 5px; background: #f4f6fb; border: 2px solid var(--ink); border-radius: 11px; box-shadow: 1px 1.5px 0 rgba(22,20,18,0.24); }
.sp-chip svg { flex: none; }
.sp-chip em { font-style: normal; flex: 1; font-weight: 700; font-size: 9.5px; letter-spacing: 0.02em; text-transform: uppercase; color: #565b6a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-chip b { font-family: "Bangers", cursive; font-size: 12px; font-weight: 400; color: var(--ink); white-space: nowrap; }
.sp-chip.dim { background: rgba(255,255,255,0.45); border-color: #cdd3e0; box-shadow: none; opacity: 0.72; }
.sp-chip.dim em, .sp-chip.dim b { color: #9aa0b0; }
.sp-ghost { display: flex; align-items: center; gap: 8px; padding: 3px 8px 5px; border-bottom: 2px dotted #9bdcdc; }
.sp-ghost em { font-style: normal; font-weight: 700; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #7b8398; }
.sp-ghost .chev { font-family: "Bangers", cursive; font-size: 16px; letter-spacing: 2px; color: rgba(35,190,190,0.55); }
.sp-ghost b { margin-left: auto; font-family: "Bangers", cursive; font-size: 21px; font-weight: 400; color: #167f7f; }
.sp-cluster { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sp-cluster .sp-chip { flex: none; }