/* Page 42 · gun colours. On 40_fx.css. */
.fxp code { font-size: 12.5px; color: #FFE7A8; background: rgba(0, 0, 0, 0.28); padding: 1px 5px; border-radius: 5px; }

/* 01 the two places */
.why-grid { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: stretch; }
.why-grid .fx-panel h3 { font-size: 22px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.why-grid .fx-panel > p { margin-bottom: 14px; }
.hdr-strip { display: flex; gap: 6px; padding: 7px; border: 3px solid var(--ink); border-radius: 16px; background: linear-gradient(180deg, #2C2648, #1B1730); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 2px 4px 0 var(--ink); overflow: hidden; }
.hdr-chip { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 11px; background: linear-gradient(180deg, #3D3563, #2A2448); border: 2px solid rgba(0, 0, 0, 0.45); min-width: 0; }
.hdr-chip.dim { padding-left: 12px; opacity: 0.92; }
.hdr-well { width: 74px; height: 44px; flex: none; border-radius: 9px; border: 2px solid var(--ink); background: radial-gradient(80% 90% at 55% 50%, #FFB0B8, #E8414F 60%, #8E1424); overflow: hidden; position: relative; }
.hdr-art { position: absolute; inset: 0; }
.hdr-art canvas { width: 100%; height: 100%; display: block; }
.hdr-txt { display: grid; gap: 2px; white-space: nowrap; }
.hdr-txt small { font: 400 11px/1 var(--f-display); letter-spacing: 0.08em; color: #C9C2EE; }
.hdr-txt b { font: 400 15px/1 var(--f-display); letter-spacing: 0.04em; color: #fff; }
.pk-sheet { margin-top: 12px; border: 3px solid var(--ink); border-radius: 18px; background: linear-gradient(180deg, #2E2752, #1C1834); padding: 10px; box-shadow: 2px 5px 0 var(--ink); }
.pk-title { display: table; margin: -24px auto 8px; padding: 6px 14px 5px; border-radius: 10px; border: 3px solid var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); color: var(--ink); font: 400 15px/1 var(--f-display); letter-spacing: 0.06em; box-shadow: 2px 3px 0 var(--ink); }
.pk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pk-card { border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; background: #1E1B2B; box-shadow: 2px 3px 0 var(--ink); }
.pk-art { position: relative; aspect-ratio: 1.5 / 1; border-bottom: 2.5px solid var(--ink); }
.pk-art canvas, .ev-pk canvas, .tg-cv canvas, .gr-cv canvas, .sk-cv canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pk-card b { display: block; padding: 5px 4px 6px; text-align: center; font: 400 11.5px/1.05 var(--f-display); letter-spacing: 0.03em; color: #fff; }

.ev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ev { margin: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 6px; align-items: stretch; }
.ev-real, .ev-pk { position: relative; overflow: hidden; border: 3px solid var(--ink); border-radius: 12px; background: #05040A; aspect-ratio: 1 / 1; }
.ev-real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev figcaption { grid-column: 1 / -1; font: 700 11.5px/1.25 var(--f-body); color: var(--cream-3); letter-spacing: 0.04em; text-transform: uppercase; }
.ev figcaption b { display: inline; font: 400 13px/1 var(--f-display); color: #fff; letter-spacing: 0.04em; margin-right: 6px; }

.trip-panel { margin-top: 22px; }
.trip-head { display: grid; gap: 4px; margin-bottom: 14px; }
.trip-head h3 { font-size: 22px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.trip-guns { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 16px; }
.tg { display: grid; gap: 4px; text-align: center; }
.tg-cv { position: relative; aspect-ratio: 2.1 / 1; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; background: #0B0A18; box-shadow: 2px 4px 0 var(--ink); }
.tg b { font: 400 16px/1 var(--f-display); letter-spacing: 0.05em; color: #fff; margin-top: 4px; }
.tg small { font: 700 11px/1.2 var(--f-body); color: var(--cream-3); letter-spacing: 0.06em; text-transform: uppercase; }
.tg-ar { font: 400 26px/1 var(--f-display); color: var(--yellow); text-align: center; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.trip { display: grid; gap: 8px; }
.tr-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 74px minmax(0, 1fr) 74px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); }
.tr-row > b { font: 400 14px/1.1 var(--f-display); letter-spacing: 0.04em; color: #fff; }
.tr-sw { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.tr-sw i { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 9px; border: 2.5px solid var(--ink); box-shadow: 1px 2px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.25); }
.tr-sw code { background: none; padding: 0; font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; }
.tr-sw small { font: 800 9.5px/1 var(--f-body); letter-spacing: 0.1em; color: var(--cream-3); }
.tr-sw.pk small { color: var(--mint); } .tr-sw.mt small { color: #FF9AA8; }
.tr-ar { display: grid; justify-items: center; gap: 1px; }
.tr-ar svg { width: 34px; height: 17px; }
.tr-ar em { font: 800 8.5px/1 var(--f-body); letter-spacing: 0.1em; color: var(--cream-3); font-style: normal; }
.trip-notes { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* 02 studio */
.studio { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.studio-side { display: grid; gap: 14px; }
.loupe { position: relative; overflow: hidden; border: 4px solid var(--ink); border-radius: 22px; box-shadow: 3px 7px 0 var(--ink); background: #05040A; aspect-ratio: 1.4 / 1; }
.loupe-cap { position: absolute; z-index: 25; left: 10px; bottom: 10px; padding: 5px 9px 4px; border-radius: 8px; background: rgba(13, 11, 22, 0.86); border: 2px solid var(--ink); font: 400 13px/1 var(--f-display); letter-spacing: 0.05em; color: #fff; pointer-events: none; }
.facts-look[hidden] { display: none; }

/* 03 grid */
#segCat { margin-bottom: 12px; }
.grid-head, .gr-row { display: grid; grid-template-columns: 150px repeat(5, minmax(0, 1fr)); gap: 8px; align-items: center; }
.grid-head { padding: 0 6px 6px; font: 800 10.5px/1 var(--f-body); letter-spacing: 0.12em; color: var(--cream-3); }
.grid { display: grid; gap: 8px; }
.gr-row { padding: 8px; border: 3px solid var(--ink); border-radius: 18px; background: linear-gradient(180deg, #2E2850, #1E1A33); box-shadow: 2px 5px 0 var(--ink); }
.gr-name { display: grid; gap: 6px; padding-left: 4px; }
.gr-name b { font: 400 16px/1.05 var(--f-display); letter-spacing: 0.03em; color: #fff; }
.gr-cls { justify-self: start; font: 400 11px/1 var(--f-display); letter-spacing: 0.06em; padding: 4px 7px 3px; border-radius: 7px; border: 2px solid var(--ink); background: var(--c); color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.gr-cell { position: relative; }
.gr-cv { position: relative; aspect-ratio: 1.75 / 1; border: 2.5px solid var(--ink); border-radius: 11px; overflow: hidden; background: #0B0A18; }
.gr-cell i { position: absolute; left: 6px; top: 6px; z-index: 2; font: 400 10px/1 var(--f-display); font-style: normal; letter-spacing: 0.05em; padding: 3px 5px 2px; border-radius: 5px; background: rgba(13, 11, 22, 0.78); color: var(--cream-2); pointer-events: none; }
.gr-cell.yp .gr-cv { box-shadow: 0 0 0 2.5px var(--mint); }
.gr-cell.yp i { background: var(--mint); color: var(--ink); }
.skins-panel { margin-top: 22px; }
.skins-head { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.skins-head h3 { font-size: 22px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.skin-sel { display: grid; gap: 6px; }
.skin-sel select { height: 40px; padding: 0 12px; border: 3px solid var(--ink); border-radius: 12px; background: #120F20; color: #fff; font: 400 16px/1 var(--f-display); letter-spacing: 0.04em; box-shadow: 2px 4px 0 var(--ink); }
.skins { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.sk { display: grid; gap: 6px; }
.sk > b { font: 400 13px/1 var(--f-display); letter-spacing: 0.05em; color: #fff; text-align: center; }
.sk-cv { position: relative; aspect-ratio: 1.5 / 1; border: 2.5px solid var(--ink); border-radius: 10px; overflow: hidden; background: #0B0A18; }
.sk-cv.yp { box-shadow: 0 0 0 2.5px var(--mint); }

/* 04 edges */
.edge { display: grid; gap: 10px; align-content: start; }
.edge-cv { position: relative; aspect-ratio: 2.1 / 1; border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; background: #05040A; box-shadow: 2px 5px 0 var(--ink); }
.edge h3 { -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; font-size: 21px; }
.edge-list { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }

@media (max-width: 1080px) {
  .why-grid, .studio { grid-template-columns: minmax(0, 1fr); }
  .trip-notes { grid-template-columns: minmax(0, 1fr); }
  .tr-row { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) 54px minmax(0, 1fr); }
  .tr-row > b { grid-column: 1 / -1; }
  .grid-head { display: none; }
  .gr-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gr-name { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
  .skins { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .edge-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-grid { grid-template-columns: minmax(0, 1fr); }
  .trip-guns { grid-template-columns: minmax(0, 1fr); }
  .tg-ar { transform: rotate(90deg); }
  .tr-row { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); gap: 4px; padding: 7px 6px; }
  .tr-sw { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .tr-sw i { grid-row: auto; width: 30px; height: 30px; }
  .tr-sw code { font-size: 10px; }
  .tr-sw small { font-size: 8px; }
  .tr-ar em { display: none; }
  .gr-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skins { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hdr-strip { flex-wrap: nowrap; }
  .hdr-chip.dim:last-child { display: none; }
}