html,body{
  /* BodLab is a long-form page; allow scrolling (base.css disables it globally). */
  height:auto;
  overflow-y:auto;
}

body{
  overflow-y:auto !important;
}

.page{
  /*
    Override the generic .page rule in css/page.css (max-width: 980px, centered).
    BodLab needs to span the viewport and sit on the left edge.
  */
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;

  /* Match Explore page's left gutter feel while keeping BodLab left-aligned. */
  padding: 28px clamp(14px, 2.2vw, 48px) 60px clamp(14px, 2.2vw, 48px);
}

.pageHeader{
  /* Keep the whole composition within a typical desktop viewport */
  max-width: none;
  /* Left aligned (no centering) */
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.pageTitle{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .01em;
}

/* pageActions removed in BodLab (controls live on Explore) */


.lab{
  /* Keep the whole composition within a typical desktop viewport */
  max-width: none;
  /* Left aligned */
  margin: 0;
  width: 100%;
  position: relative;
}

/* New mockup-inspired layout */
.labLayout{
  display: grid;

  /*
    Ultra-wide friendly layout:
    Use clamp() so the three lanes *expand* with the viewport (like Explore),
    but never become absurdly wide on huge monitors.
  */
  grid-template-columns:
    clamp(440px, 28vw, 620px)   /* Bod cards lane */
    clamp(520px, 34vw, 780px)   /* Chamber lane */
    clamp(520px, 30vw, 760px);  /* Blueprint lane */

  gap: clamp(18px, 1.6vw, 36px);
  align-items: start;
  width: 100%;
}

/* Give the center chamber even more room on ultra-wide screens */
@media (min-width: 1700px){
  .labLayout{
    grid-template-columns:
      minmax(500px, 1.2fr)
      minmax(600px, 1.25fr)
      minmax(340px, .95fr);
  }
}

.inputs{
  position: relative;
  /* Symmetric inner gutter for the left column */
  padding: 0 10px;
}

/* (inputsTitle/inputsSub removed for cleaner header) */

/* Lane container */
.squadRow{
  display: grid;
  gap: 16px;
}

/* Each input becomes a two-window lane: text on the left, portrait on the right */
.squadLane{
  display: grid;
  /* Give the text panel more breathing room (less wrapping) */
  grid-template-columns: 2.05fr 210px;
  gap: 14px;
  align-items: stretch;
  border-radius: 22px;
  padding: 12px;
  border: 2px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

@media (min-width: 1200px){
  .squadLane{
    /* On wider screens, bias even more toward text */
    grid-template-columns: 2.25fr 210px;
  }
}

.squadInfo{
  border-radius: 20px;
  background: rgba(10,14,20,.62);
  border: 2px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 30px rgba(0,0,0,.30);
  padding: 14px 14px 12px;
}

.squadInfoHead{
  display:flex;
  align-items:center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}

.squadName{
  display:none;
}

.squadRole{
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px 10px;
}

.squadLines{
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,.86);
  margin-bottom: 10px;
}

.squadLine{
  color: rgba(255,255,255,.84);
}

.squadBullets{
  margin: 0 0 10px 16px;
  padding: 0;
  color: rgba(255,255,255,.82);
  font-size: 12.5px;
  line-height: 1.35;
}
.squadBullets li{ margin: 4px 0; }

.squadFeels{
  font-size: 12.5px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px 12px;
}

/* Portrait window */
.squadPortrait{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(0,0,0,.38);
  border: 2px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 30px rgba(0,0,0,.30);
}

/* stacked name + class at top-right of the portrait column */
.portraitHead{
  padding: 10px 10px 8px;
  display:flex;
  flex-direction:column;
  /* Center the name/class stack above the portrait */
  align-items:center;
  gap: 6px;
  text-align: center;
}
.portraitHeadName{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.portraitHeadRole{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
}

/* top media area (keeps the portrait image size stable) */
.portraitMedia{
  flex: 0 0 220px;
  overflow: hidden;
  margin-top: auto; /* lock portrait art to the bottom of the window */

  /* framed portrait like the Explore / Kit card */
  border-radius: 16px;
  margin: 0 10px 10px;
  border: 2px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
}

/* DNA footer inside the description column */
.squadDNAFooter{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);  flex-wrap: wrap;
  row-gap: 8px;
}


.dnaBubbles{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  max-width: 100%;
}


.dnaBubble{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.88);
}

.dnaBubbleIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right: 6px;
}

.dnaTriplet{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,.86);
  white-space: nowrap;
}
.dnaStat{
  display:inline-flex;
  align-items:baseline;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.dnaStatLabel{
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 9px;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.dnaStatVal{
  font-weight: 900;
  font-size: 11px;
  color: rgba(255,255,255,.92);
}

.portraitMedia img{
  border-radius: 18px;
  width: 100%;
  height: 100%;
  /* fill the whole portrait window like the mock */
  object-fit: cover;
  object-position: center;
  display:block;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.35));
}

/* Name + Class overlays inside the portrait window */
.portraitLabel{
  position:fixed;
  left: 10px;
  right: 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
  z-index: 2;
}
.portraitLabel--top{ top: 10px; }
.portraitLabel--bot{ bottom: 10px; }
.portraitNameTag,
.portraitClassTag{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
}

/* extra meta area under the portrait (name / class / DNA) */
.portraitMeta{
  padding: 10px 10px 12px;
  display: grid;
  gap: 6px;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.25));
  border-top: 1px solid rgba(255,255,255,.10);
}

.portraitMetaRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.portraitMetaName{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}

.portraitMetaRole{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.86);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.portraitMetaDNA{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,.82);
}

.dnaTriplet{
  font-weight: 800;
  letter-spacing: .04em;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}

/* connection pipe to chamber (from portrait window) */
.squadPortrait::after{
  content: "";
  position: absolute;
  /* Keep the connector from overlapping the chamber card */
  right: -70px;
  top: 50%;
  width: 70px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .85;
}

.squadLane:nth-child(1) .squadPortrait::after{ background: linear-gradient(90deg, rgba(120,190,255,.55), rgba(255,255,255,.06)); }
.squadLane:nth-child(2) .squadPortrait::after{ background: linear-gradient(90deg, rgba(175,255,140,.55), rgba(255,255,255,.06)); }
.squadLane:nth-child(3) .squadPortrait::after{ background: linear-gradient(90deg, rgba(255,160,90,.55), rgba(255,255,255,.06)); }

@media (max-width: 980px){
  .squadLane{ grid-template-columns: 1fr 150px; }
}
.chamber{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.chamberStage{
  position: relative;
  border-radius: 26px;
  background: radial-gradient(1200px 600px at 50% 20%, rgba(140,220,255,.15), rgba(0,0,0,0));
  border: 1px solid rgba(255,255,255,.10);
  /* Make the chamber card square (no vertical stretch) */
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: 620px;
  max-width: 620px;
  margin: 0 auto;
  overflow: hidden;
}


.chamberFlash{
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  z-index: 18;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 55%,
      rgba(255,255,255,1) 0%,
      rgba(170,245,255,.95) 22%,
      rgba(80,200,255,.55) 40%,
      rgba(0,0,0,0) 72%);
  filter: blur(1px);
  mix-blend-mode: screen;
}

.chamberFlash.on{
  animation: chamberFlashBurst .38s ease-out;
}

@keyframes chamberFlashBurst{
  0%   { opacity: 0; transform: scale(.92); }
  18%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.08); }
}

/* Smooth video slam-in under flash */
.previewVideo.isOverlay{
  opacity: 0;
  transition: opacity .22s ease-out, transform .22s ease-out;
  transform: scale(1.02);
}
.chamberStage.hasVideo .previewVideo.isOverlay{
  opacity: 1;
  transform: scale(1);
}

.chamberArt{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;

  z-index: 2;}

.chamberDNA{
  position: absolute;
  left: 50%;
  top: 54%;
  width: 160px;
  height: auto;
  transform: translate3d(-50%, -50%, 0);
  transform-origin:center;
  opacity: 1;
  mix-blend-mode: screen;
  filter: brightness(2.6) contrast(1.2) drop-shadow(0 0 18px rgba(255,255,255,.65));
  animation:dnaCoreAlive 7.2s ease-in-out infinite;

  z-index: 3;}

.chamberSilhouette{
  position: absolute;
  left: 50%;
  top: 58%;
  width: min(340px, 68%);
  height: min(340px, 68%);
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(circle at 50% 40%, rgba(80,220,255,.18), rgba(0,0,0,0) 60%);
  border-radius: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: brightness(0) saturate(100%) drop-shadow(0 18px 28px rgba(0,0,0,.55));
  opacity: .65;

  z-index: 1;}

.previewCaption{
  opacity: .92;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  display: inline-block;
  margin: 10px auto 0;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  box-shadow: 0 14px 26px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

/* If the caption is empty, don't render the pill at all (prevents the tiny "bubble"). */
.previewCaption:empty{
  display: none;
}


.chamberNameplate{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:22;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:min(360px, 78%);
  max-width:min(500px, 84%);
  padding:14px 24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(15,22,36,.52), rgba(8,12,20,.72));
  box-shadow:0 18px 42px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  overflow:hidden;
}

.chamberNameplateGlow{
  position:absolute;
  inset:-18% -8%;
  border-radius:999px;
  background:radial-gradient(circle at 50% 48%, rgba(120,220,255,.22) 0%, rgba(120,220,255,.10) 28%, rgba(0,0,0,0) 68%);
  filter:blur(16px);
  opacity:.95;
  animation: chamberNameplateGlow 4.8s ease-in-out infinite;
}

.chamberNameplateText{
  position:relative;
  z-index:1;
  font-size:clamp(20px, 2vw, 28px);
  line-height:1;
  font-weight:900;
  letter-spacing:.02em;
  color:#f4fbff;
  text-shadow:0 2px 18px rgba(120,220,255,.18);
  white-space:nowrap;
}

.chamberNameplate.isReveal{
  animation: chamberNameplateReveal .7s cubic-bezier(.2,.8,.2,1);
}

@keyframes chamberNameplateReveal{
  0%{ opacity:0; transform:translateX(-50%) translateY(16px) scale(.92); }
  60%{ opacity:1; transform:translateX(-50%) translateY(-3px) scale(1.02); }
  100%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}

@keyframes chamberNameplateGlow{
  0%,100%{ opacity:.72; transform:scale(.98); }
  50%{ opacity:1; transform:scale(1.03); }
}

.readout{
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  /* Align top edge with the other cards */
  margin-top: 0;
  padding: 16px 16px 20px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,20,.55);
}

/* Make the readout usable on shorter screens */
.readout{ max-height: calc(100vh - 210px); overflow: auto; }
.readout::-webkit-scrollbar{ width: 10px; }
.readout::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; border: 2px solid rgba(0,0,0,.35); }
.readout::-webkit-scrollbar-track{ background: rgba(0,0,0,.18); border-radius: 999px; }

.readoutTitle{
  font-weight: 900;
  letter-spacing: .08em;
  opacity: .82;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 10px;
  text-align: center;
}

.fusionHint{
  opacity: .72;
  padding: 12px 0 2px;
  text-align: center;
}

@media (max-width: 980px){
  .labLayout{ grid-template-columns: 1fr; }
  .squadBod::after{ display:none; }
  .chamberStage{ min-height: 420px; }
}

.squadBod:hover .squadMedia img{
  transform: scale(1.08) translateY(-4px);
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
}

/* Preview */
.previewWrap{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  height: 260px;
}

.previewVideo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  z-index: 20;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
}

.previewFallback{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  text-align: center;
}

.previewGlyph{ font-size: 34px; opacity: .9; }
.previewText{ opacity: .78; font-size: 13px; max-width: 240px; }

.previewCaption{
  margin-top: 10px;
  opacity: .78;
  font-size: 12.5px;
}

@media (prefers-reduced-motion: reduce){
  .bubbles span, .dnaHelix .h1, .dnaHelix .h2, .heartbeat .hb{ animation: none !important; }
  .squadBod, .squadMedia img{ transition: none !important; }
}

.squadMeta{
  padding: 10px 10px 12px;
}

.squadName{
  font-weight: 900;
  margin-bottom: 4px;
}

.squadTags{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  opacity: .85;
  font-size: 12px;
}

.tag{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 4px 8px;
  border-radius: 999px;
}

.fusionTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.fusionBadge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 900;
}

.fusionBadge .dnaIcon{ transform: translateY(-1px); }

.fusionHint{
  opacity: .72;
  font-size: 12px;
}

.fusionMeta{
  width:min(620px, 100%);
  display:flex;
  justify-content:center;
  align-items:center;
  margin:2px auto 0;
}

.fusionName{
  display:none;
}

.fusionRecipe{
  width:100%;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}

.fusionChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  font-size: 12px;
  font-weight: 800;
  letter-spacing:.03em;
  opacity: .96;
}
.fusionChipDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(140,220,255,.9);
  box-shadow: 0 0 0 3px rgba(140,220,255,.18);
}
.fusionCode{
  opacity: .75;
  font-weight: 900;
  letter-spacing: .06em;
}


.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.chip--tag{ opacity: .92; }

.fusionKVs{
  display: grid;
  gap: 8px;
}

.kv{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items: start;
}

.k{ opacity: .72; font-weight: 900; letter-spacing: .04em; font-size: 12px; }
.v{ opacity: .9; }

.fusionBody{
  display: grid;
  gap: 10px;
}

.fusionRow{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px;
}

.fusionRowTitle{
  font-weight: 900;
  margin-bottom: 6px;
}

.fusionRowText{ opacity: .86; }

.kitList{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.kitSnap{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px;
}

.kitHead{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.kitName{ font-weight: 900; }

.kitDNA{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: .92;
}

.kitLine{
  margin: 6px 0;
  opacity: .86;
  font-size: 13px;
}

.kitBullets{
  margin-top: 8px;
  padding-left: 16px;
  opacity: .85;
  font-size: 12.5px;
}

.kitFeels{
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-size: 12.5px;
  opacity: .9;
}

.labNotice{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.04);
}

.labNoticeTitle{ font-weight: 900; margin-bottom: 6px; }
.labNoticeText{ opacity: .8; margin-bottom: 12px; }

@media (max-width: 980px){
  .kitList{ grid-template-columns: 1fr; }
}

@media (max-width: 1120px){
  .labLayout{ grid-template-columns: 1fr; }
  .readout{ grid-column: 1; grid-row: auto; max-height: none; overflow: visible; }
}

/* === FINAL SPACING POLISH OVERRIDES === */

/* More breathing room between Bods and Chamber */
.labLayout{
  column-gap: 60px !important;
  row-gap: 32px !important;
}

/* Extra inner spacing around portrait image */
.portraitMedia{
  margin: 0 14px 16px !important;
  padding: 6px !important;
}

/* === BALANCE CHAMBER GAPS === */
.chamberStage{
  margin-left: 0;
  width: 100%;
}


/* === BuddiUP button under chamber === */
.buddiupBtn{
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(440px, 100%);
  margin: 14px auto 0;
  padding: 14px 20px;
  border-radius: 20px;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .11em;
  text-transform: uppercase;
  border: 2px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(33,40,56,.66), rgba(14,18,28,.9));
  color: rgba(248,251,255,.96);
  box-shadow: 0 16px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(160,230,255,.10), inset 0 1px 0 rgba(255,255,255,.18);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
}
.buddiupBtn:hover{
  background: linear-gradient(180deg, rgba(42,50,68,.78), rgba(18,23,34,.96));
  border-color: rgba(170,235,255,.30);
  box-shadow: 0 18px 34px rgba(0,0,0,.34), 0 0 24px rgba(90,170,255,.14), inset 0 1px 0 rgba(255,255,255,.22);
}
.buddiupBtn:active{
  transform: translateY(1px);
}
.buddiupBtnSmall{
  opacity:.75;
  font-weight:700;
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
}

.buddiupBtn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 22px;
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.08) 35%,
    rgba(255,255,255,.26) 50%,
    rgba(255,255,255,.10) 60%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-120%);
  animation: buddiupShimmer 3.8s ease-in-out infinite;
  opacity: .65;
  pointer-events:none;
  mix-blend-mode: screen;
}
.buddiupBtn:hover::before{
  opacity: .9;
  animation-duration: 2.8s;
}
@keyframes buddiupShimmer{
  0%{ transform: translateX(-120%); }
  55%{ transform: translateX(120%); }
  100%{ transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce){
  .buddiupBtn::before{ animation:none; opacity:.35; }
}


/* BuddiUp chamber video overlay */
.previewVideo.isOverlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 26px;
  z-index: 20;
  pointer-events: none;
  background: transparent;
}


/* Hide DNA helix during BuddiUp so it doesn't visually 'jump' under flash/video */
.chamberStage.isBuddiup .chamberDNA{
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.96);
  transition: opacity .14s ease-out, transform .14s ease-out;
}
.chamberStage.isBuddiup .chamberArt{ opacity: 0.25; }

.testMp4Link{display:block;margin:8px auto 0;max-width:260px;text-align:center;font-size:12px;color:#b8c6d6;opacity:.9;text-decoration:underline;}
.testMp4Link:hover{opacity:1;}


.chamberStage.isBuddiup.hasVideo .chamberArt{ opacity: 0.05; }

.chamberStage.hasVideo .previewVideo{ opacity: 1; }


/* --- BuddiUp Cartoon Chaos FX --- */
.buddiupFlash{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  background:
    radial-gradient(900px 500px at 50% 45%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%),
    radial-gradient(1200px 700px at 50% 50%, rgba(120,220,255,.45), rgba(0,0,0,0) 65%);
  mix-blend-mode: screen;
}

.buddiupFlash.on{
  animation: buddiupScreenFlash .55s ease-out 0s 1;
}

@keyframes buddiupScreenFlash{
  0%{ opacity: 0; }
  12%{ opacity: 1; }
  35%{ opacity: .35; }
  55%{ opacity: .75; }
  100%{ opacity: 0; }
}

.chamberShockwave{
  position:fixed;
  inset:-18%;
  border-radius: 34px;
  pointer-events:none;
  z-index: 14;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 55%,
      rgba(255,255,255,.0) 0%,
      rgba(255,255,255,.0) 44%,
      rgba(180,245,255,.65) 50%,
      rgba(255,255,255,.85) 52%,
      rgba(255,255,255,0) 60%),
    radial-gradient(circle at 50% 55%,
      rgba(140,230,255,.25) 0%,
      rgba(140,230,255,0) 70%);
  mix-blend-mode: screen;
  filter: blur(.6px) saturate(1.35);
}
.chamberStage.chaos .chamberShockwave{
  animation: buddiupShockwave .9s ease-out 0s 1;
}
@keyframes buddiupShockwave{
  0%{ transform: scale(.35); opacity: 0; }
  10%{ opacity: .95; }
  55%{ opacity: .55; }
  100%{ transform: scale(1.35); opacity: 0; }
}

/* Chamber chaos: shake + glow + lightning overlays */
.chamberStage.chaos{
  animation:
    buddiupShake .85s steps(2,end) 0s 1,
    buddiupPop .35s ease-out 0s 1;
}

.chamberStage.chaos::before,
.chamberStage.chaos::after{
  /* Radial energy bloom (no diagonal streaks) */
  background:
    radial-gradient(circle at 50% 55%,
      rgba(255,255,255,.95) 0%,
      rgba(170,245,255,.85) 18%,
      rgba(110,225,255,.55) 34%,
      rgba(0,0,0,0) 62%),
    radial-gradient(circle at 35% 35%,
      rgba(255,255,255,.55) 0%,
      rgba(0,0,0,0) 42%),
    radial-gradient(circle at 70% 62%,
      rgba(120,220,255,.45) 0%,
      rgba(0,0,0,0) 50%),
    conic-gradient(from 140deg,
      rgba(255,255,255,0),
      rgba(150,240,255,.22),
      rgba(255,255,255,0),
      rgba(150,240,255,.18),
      rgba(255,255,255,0));
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(1.1px) saturate(1.35) contrast(1.05);
  animation: buddiupBloom .85s ease-out 0s 1;
}

@keyframes buddiupBloom{
  0%{ opacity: 0; transform: scale(.86); }
  18%{ opacity: .95; transform: scale(1.02); }
  55%{ opacity: .55; transform: scale(1.15); }
  100%{ opacity: 0; transform: scale(1.35); }
}

@keyframes buddiupShake{
  0%{ transform: translate(0,0) rotate(0deg); }
  10%{ transform: translate(-6px, 2px) rotate(-.6deg); }
  22%{ transform: translate(7px, -3px) rotate(.7deg); }
  36%{ transform: translate(-5px, -2px) rotate(-.4deg); }
  52%{ transform: translate(6px, 4px) rotate(.6deg); }
  70%{ transform: translate(-3px, -3px) rotate(-.3deg); }
  100%{ transform: translate(0,0) rotate(0deg); }
}

@keyframes buddiupPop{
  0%{ filter: saturate(1) brightness(1); }
  30%{ filter: saturate(1.5) brightness(1.15); }
  100%{ filter: saturate(1.1) brightness(1.05); }
}

@keyframes buddiupPulse{
  0%{ opacity: 0; transform: scale(.96); }
  12%{ opacity: 1; transform: scale(1.02); }
  60%{ opacity: .55; transform: scale(1.03); }
  100%{ opacity: 0; transform: scale(1.06); }
}

@keyframes buddiupLightning{
  0%{ opacity: 0; }
  8%{ opacity: 1; }
  16%{ opacity: .05; }
  26%{ opacity: 1; }
  40%{ opacity: .15; }
  58%{ opacity: 1; }
  72%{ opacity: .10; }
  86%{ opacity: .7; }
  100%{ opacity: 0; }
}

/* Make the video feel like it "slams in" */
.chamberStage.hasVideo .previewVideo{
  animation: buddiupVideoSlam .35s ease-out 0s 1;
}

@keyframes buddiupVideoSlam{
  0%{ transform: scale(.94); filter: brightness(1.3) saturate(1.3); }
  100%{ transform: scale(1); filter: none; }
}

@media (prefers-reduced-motion: reduce){
  .chamberStage.chaos, .buddiupFlash.on, .chamberStage.hasVideo .previewVideo{
    animation: none !important;
  }
  .chamberStage.chaos::before, .chamberStage.chaos::after{ display:none !important; }
}


/* Tube power surge during BuddiUp (cartoon chaos) */
.chamberStage.chaos .chamberArt{
  filter: brightness(1.12) saturate(1.25) drop-shadow(0 0 22px rgba(120,240,255,.45));
}
.chamberStage.chaos .chamberDNA{
  filter: brightness(1.35) saturate(1.35);
  /* Keep the helix centered while scaling (avoid jump) */
  transform: translate3d(-50%, -50%, 0) scale(1.03);
}


.chamberStage,
.buddiupBtn{
  align-self: center;
}

/* Faction dot colors (fallback palette) */
.fusionChipDot[data-faction="SEPTIX"]{ background: rgba(80, 255, 120, .92); box-shadow: 0 0 0 3px rgba(80,255,120,.18); }
.fusionChipDot[data-faction="BROOTZ"]{ background: rgba(120, 255, 80, .92); box-shadow: 0 0 0 3px rgba(120,255,80,.18); }
.fusionChipDot[data-faction="HOLOWZ"]{ background: rgba(190, 140, 255, .92); box-shadow: 0 0 0 3px rgba(190,140,255,.18); }
.fusionChipDot[data-faction="TYTANZ"]{ background: rgba(120, 200, 255, .92); box-shadow: 0 0 0 3px rgba(120,200,255,.18); }
.fusionChipDot[data-faction="WYLDZ"]{ background: rgba(255, 170, 80, .92); box-shadow: 0 0 0 3px rgba(255,170,80,.18); }
.fusionChipDot[data-faction="JURASIX"]{ background: rgba(255, 120, 120, .92); box-shadow: 0 0 0 3px rgba(255,120,120,.18); }
.fusionChipDot[data-faction="MEZMAZ"]{ background: rgba(220, 120, 255, .92); box-shadow: 0 0 0 3px rgba(220,120,255,.18); }
.fusionChipDot[data-faction="MEXX"]{ background: rgba(80, 220, 255, .92); box-shadow: 0 0 0 3px rgba(80,220,255,.18); }
.fusionChipDot[data-faction="BUGZ"]{ background: rgba(255, 230, 80, .92); box-shadow: 0 0 0 3px rgba(255,230,80,.18); }



/* =========================
   Blueprint panel polish
   ========================= */

.bpPanel .readoutTitle{ display:none; } /* legacy title */

.bpHeader{
  position:relative;
  padding:14px 16px 12px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow:hidden;
  margin-bottom:12px;
}
.bpTitle{
  font-weight:800;
  letter-spacing:.16em;
  font-size:12px;
  opacity:.95;
}
.bpSub{
  margin-top:6px;
  font-size:11px;
  opacity:.7;
}

/* subtle animated scanner sweep (no hard band edges) */
.bpHeader::after{
  content:"";
  position:absolute;
  inset:-140% -140%;
  background: linear-gradient(90deg,
    transparent 30%,
    rgba(255,255,255,.05) 50%,
    transparent 70%
  );
  filter: blur(10px);
  animation: bpScan 10s linear infinite;
  pointer-events:none;
  opacity:.9;
}
@keyframes bpScan{
  0%{ transform: translateX(-18%); }
  100%{ transform: translateX(18%); }
}
  100%{ transform: translateX(30%) rotate(12deg); }
}

.bpBlock{
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:12px 12px;
  margin:10px 0;
  position:relative;
  overflow:hidden;
}
.bpBlock::before{
  content:"";
  position:fixed; inset:0;
  background: radial-gradient(600px 200px at 20% 0%, rgba(120,255,220,.06), transparent 60%);
  pointer-events:none;
}

/* Blueprint: MIND / BODY / SOUL bars (segmented by contributing Bod faction) */
.bpStatBars{ position:relative; display:grid; gap:10px; margin-top:8px; }
.bpStatRow{
  display:grid;
  grid-template-columns: 52px 28px 1fr; /* label | value | bar */
  gap:10px;
  align-items:center;
  position:relative; /* anchor tooltip */
}
.bpStatLabel{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  opacity:.75;
}
.bpStatVal{
  text-align:right;
  font-size:11px;
  opacity:.85;
}
.bpStatBar{
  position:relative;
  display:flex;
  width:100%;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.bpSeg{ height:100%; }

/* Thin separators between contributors */
.bpStatBar .bpSeg{
  border-right:1px solid rgba(0,0,0,.45);
}
.bpStatBar .bpSeg:last-child{
  border-right:0;
}

/* Tooltip (Planet-style) */
.bpBarTip{
  position:fixed;
  left:0; /* set dynamically in JS */
  top:0; /* set dynamically in JS */
  transform: translateX(-50%);
  padding:6px 10px;
  border-radius:10px;
  background: rgba(15,18,22,.92);
  border:1px solid rgba(255,255,255,.10);
  font-size:11px;
  white-space:nowrap;
  pointer-events:none;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  z-index:9999;
}
.bpBarTip::after{
  content:"";
  position:fixed;
  left:50%;
  top:-6px;
  width:10px;
  height:10px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(15,18,22,.92);
  border-left:1px solid rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.10);
}
.bpBarTip{ box-shadow: 0 0 0 3px rgba(var(--fc-SEPTIX-rgb,255,255,255), .00); }
.bpBarTip{ border-color: rgba(255,255,255,.10); }
.bpBarTip{ outline: 0; }
.bpBarTip{ --tipAccent: rgba(255,255,255,.18); }
.bpBarTip{ box-shadow: 0 0 0 3px rgba(0,0,0,0), 0 10px 30px rgba(0,0,0,.35); }
.bpBarTip{ border-left: 3px solid var(--tipAccent); }

.bpBarTip strong{ font-weight:800; }
.bpTipMeta{ opacity:.75; margin-left:2px; }
.bpTipPlus{ opacity:.95; margin-left:6px; }

.bpStatAvg{
  margin-top:6px;
  font-size:11px;
  opacity:.55;
}


/* --- BuddiUp surge prelude (alive feeling) --- */
.chamberStage.surge{
  animation: bbSurgePulse .8s ease-out;
}
@keyframes bbSurgePulse{
  0%{ filter: brightness(1) saturate(1); }
  45%{ filter: brightness(1.18) saturate(1.15); }
  100%{ filter: brightness(1) saturate(1); }
}
.chamberStage.surge .chamberArt{
  animation: bbSurgeGlow .8s ease-out;
}
@keyframes bbSurgeGlow{
  0%{ box-shadow: 0 0 0 rgba(120,255,220,0); }
  45%{ box-shadow: 0 0 40px rgba(120,255,220,.18); }
  100%{ box-shadow: 0 0 0 rgba(120,255,220,0); }
}

.fusionCode{ display:none !important; }


/* --- Layout lock (restore Explore-like centering) --- */
.labLayout{
  width: min(100%, 1760px);
  margin: 0 auto;
}
.labLayout > *{ min-width: 0; }

/* Hide key cell when we want the stat bars to be the only label */
.k--ghost{ display:none !important; }


.bpSegRest{ background: rgba(255,255,255,.12); }


/* === Blueprint Stat Bar Width Lock (ensure full-length 0–30 tracks) === */
/* Fix: in some layouts the value column can shrink to min-content, collapsing the bars. */

.fusionKVs .kv .v{
  min-width: 0;
  width: 100%;
  display: block;
}

/* Ensure the stat bar block uses full available width */
.bpStatBars{
  width: 100%;
}

/* Give the bar column a minimum so it can't collapse */
.bpStatRow{
  grid-template-columns: 52px 28px minmax(120px, 1fr);
}

/* Bar itself must stretch */
.bpStatBar{
  width: 100% !important;
  flex: 1 1 auto;
  min-width: 120px;
}



/* =========================
   BodLab DNA energy polish
   ========================= */
.dnaEnergyField{
  position:absolute;
  left:50%;
  top:54%;
  width:min(280px, 52%);
  height:min(360px, 68%);
  transform:translate3d(-50%, -50%, 0);
  pointer-events:none;
  z-index:2;
  filter:saturate(1.1);
}

.dnaEnergyAura{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%, -50%);
  pointer-events:none;
  mix-blend-mode:screen;
}

.dnaEnergyAura--core{
  width:56%;
  height:72%;
  background:radial-gradient(circle at 50% 50%,
    rgba(180,245,255,.52) 0%,
    rgba(115,220,255,.42) 18%,
    rgba(70,155,255,.28) 42%,
    rgba(0,0,0,0) 72%);
  filter:blur(14px);
  opacity:.92;
  animation:dnaEnergyPulse 6.8s ease-in-out infinite;
}

.dnaEnergyAura--halo{
  width:84%;
  height:100%;
  background:radial-gradient(circle at 50% 50%,
    rgba(95,205,255,.22) 0%,
    rgba(44,120,255,.18) 34%,
    rgba(36,88,190,.12) 54%,
    rgba(0,0,0,0) 76%);
  filter:blur(28px);
  opacity:.78;
  animation:dnaEnergyFloat 8.5s ease-in-out infinite;
}

.dnaEnergyParticle{
  position:absolute;
  left:50%;
  bottom:14%;
  width:10px;
  height:10px;
  margin-left:-5px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(220,250,255,.92) 0%, rgba(115,220,255,.72) 38%, rgba(80,180,255,0) 75%);
  box-shadow:0 0 14px rgba(110,220,255,.35);
  opacity:0;
  mix-blend-mode:screen;
}

.dnaEnergyParticle--1{ animation:dnaParticleRise 5.4s linear infinite; transform:translateX(-42px) scale(.9); }
.dnaEnergyParticle--2{ animation:dnaParticleRise 6.2s linear infinite 1.1s; transform:translateX(38px) scale(.8); }
.dnaEnergyParticle--3{ animation:dnaParticleRise 4.9s linear infinite 2.2s; transform:translateX(-14px) scale(.7); }
.dnaEnergyParticle--4{ animation:dnaParticleRise 5.8s linear infinite 3.1s; transform:translateX(14px) scale(1); }
.dnaEnergyParticle--5{ animation:dnaParticleRise 6.8s linear infinite 1.8s; transform:translateX(-60px) scale(.75); }
.dnaEnergyParticle--6{ animation:dnaParticleRise 5.1s linear infinite 4s; transform:translateX(58px) scale(.85); }

@keyframes dnaEnergyPulse{
  0%,100%{ transform:translate(-50%, -50%) translateY(0) scale(1); opacity:.8; }
  50%{ transform:translate(-50%, -50%) translateY(-12px) scale(1.08); opacity:1; }
}

@keyframes dnaEnergyFloat{
  0%,100%{ transform:translate(-50%, -50%) translateY(0) scale(1); opacity:.65; }
  50%{ transform:translate(-50%, -50%) translateY(10px) scale(1.04); opacity:.9; }
}

@keyframes dnaParticleRise{
  0%{ opacity:0; transform:translate3d(var(--x, 0), 8px, 0) scale(.65); }
  12%{ opacity:.65; }
  65%{ opacity:.42; }
  100%{ opacity:0; transform:translate3d(var(--x, 0), -150px, 0) scale(1.08); }
}

.dnaEnergyParticle--1{ --x:-42px; }
.dnaEnergyParticle--2{ --x:38px; }
.dnaEnergyParticle--3{ --x:-14px; }
.dnaEnergyParticle--4{ --x:14px; }
.dnaEnergyParticle--5{ --x:-60px; }
.dnaEnergyParticle--6{ --x:58px; }

.chamberStage.surge .dnaEnergyAura--core,
.chamberStage.chaos .dnaEnergyAura--core{
  animation-duration:3.2s;
  opacity:1;
}

.chamberStage.surge .dnaEnergyAura--halo,
.chamberStage.chaos .dnaEnergyAura--halo{
  animation-duration:4.2s;
  opacity:.95;
}

@media (prefers-reduced-motion: reduce){
  .dnaEnergyAura--core,
  .dnaEnergyAura--halo,
  .dnaEnergyParticle{ animation:none !important; }
  .dnaEnergyParticle{ display:none; }
  .dnaEnergyAura--core{ opacity:.78; }
  .dnaEnergyAura--halo{ opacity:.58; }
}

/* =========================
   BodLab DNA energy polish v2
   orbiting strands + reactive pulses + core shimmer
   ========================= */
.dnaEnergyField::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:34%;
  height:78%;
  transform:translate(-50%, -50%) rotate(8deg);
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(210,245,255,.05) 20%,
    rgba(235,255,255,.36) 46%,
    rgba(120,220,255,.14) 62%,
    rgba(255,255,255,0) 100%);
  filter:blur(8px);
  mix-blend-mode:screen;
  opacity:.42;
  pointer-events:none;
  animation:dnaCoreShimmer 5.8s ease-in-out infinite;
}

.dnaEnergyPulseBurst{
  position:absolute;
  left:50%;
  top:50%;
  width:34%;
  height:26%;
  border-radius:50%;
  border:1px solid rgba(125,220,255,.18);
  box-shadow:0 0 18px rgba(100,205,255,.18), inset 0 0 18px rgba(180,240,255,.08);
  transform:translate(-50%, -50%) scale(.72);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

.dnaEnergyPulseBurst--2{
  width:48%;
  height:38%;
  border-color:rgba(85,170,255,.14);
}

.dnaEnergyOrbit{
  position:absolute;
  left:50%;
  top:50%;
  width:72%;
  height:94%;
  margin:-47% 0 0 -36%;
  border-radius:50%;
  border:1px solid rgba(120,220,255,.08);
  opacity:.66;
  transform-origin:center;
  mix-blend-mode:screen;
  pointer-events:none;
  filter:drop-shadow(0 0 7px rgba(100,205,255,.12));
}

.dnaEnergyOrbit::before,
.dnaEnergyOrbit::after{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(240,255,255,.95) 0%, rgba(120,220,255,.72) 45%, rgba(120,220,255,0) 80%);
  box-shadow:0 0 12px rgba(120,220,255,.32);
}

.dnaEnergyOrbit::before{ top:9%; left:50%; margin-left:-3px; }
.dnaEnergyOrbit::after{ bottom:11%; left:50%; margin-left:-3px; opacity:.65; }
.dnaEnergyOrbit--1{ animation:dnaOrbitSpin1 11s linear infinite; }
.dnaEnergyOrbit--2{
  width:60%;
  height:84%;
  margin:-42% 0 0 -30%;
  opacity:.54;
  transform:rotate(26deg);
  animation:dnaOrbitSpin2 8.5s linear infinite reverse;
}
.dnaEnergyOrbit--3{
  width:84%;
  height:102%;
  margin:-51% 0 0 -42%;
  opacity:.38;
  transform:rotate(-18deg);
  animation:dnaOrbitSpin3 14s linear infinite;
}

.chamberDNA{
  transform-origin:center;
  animation:dnaCoreAlive 7.2s ease-in-out infinite;
}

@keyframes dnaCoreShimmer{
  0%,100%{ transform:translate(-50%, -50%) rotate(8deg) translateX(-8px); opacity:.24; }
  45%{ transform:translate(-50%, -50%) rotate(8deg) translateX(10px); opacity:.46; }
  55%{ transform:translate(-50%, -50%) rotate(8deg) translateX(18px); opacity:.22; }
}

@keyframes dnaOrbitSpin1{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes dnaOrbitSpin2{ from{ transform:rotate(26deg); } to{ transform:rotate(386deg); } }
@keyframes dnaOrbitSpin3{ from{ transform:rotate(-18deg); } to{ transform:rotate(342deg); } }

@keyframes dnaCoreAlive{
  0%,100%{ filter:brightness(2.6) contrast(1.2) drop-shadow(0 0 18px rgba(255,255,255,.65)); }
  35%{ filter:brightness(2.72) contrast(1.22) drop-shadow(0 0 20px rgba(170,235,255,.72)); }
  50%{ filter:brightness(2.88) contrast(1.24) drop-shadow(0 0 24px rgba(185,240,255,.8)); }
  70%{ filter:brightness(2.68) contrast(1.21) drop-shadow(0 0 19px rgba(150,225,255,.7)); }
}

@keyframes dnaPulseBurst{
  0%{ opacity:0; transform:translate(-50%, -50%) scale(.7); }
  18%{ opacity:.72; }
  100%{ opacity:0; transform:translate(-50%, -50%) scale(2.2); }
}

.chamberStage.surge .dnaEnergyPulseBurst--1,
.chamberStage.chaos .dnaEnergyPulseBurst--1{
  animation:dnaPulseBurst .8s ease-out 1;
}

.chamberStage.surge .dnaEnergyPulseBurst--2,
.chamberStage.chaos .dnaEnergyPulseBurst--2{
  animation:dnaPulseBurst .95s ease-out .08s 1;
}

.chamberStage.surge .dnaEnergyOrbit,
.chamberStage.chaos .dnaEnergyOrbit{
  opacity:.78;
  filter:drop-shadow(0 0 10px rgba(125,220,255,.18));
}

.chamberStage.surge .dnaEnergyField::after,
.chamberStage.chaos .dnaEnergyField::after{
  opacity:.62;
  animation-duration:2.8s;
}

.chamberStage.surge .chamberDNA,
.chamberStage.chaos .chamberDNA{
  animation-duration:2.4s;
}

@media (prefers-reduced-motion: reduce){
  .dnaEnergyField::after,
  .dnaEnergyOrbit,
  .dnaEnergyPulseBurst,
  .chamberDNA{ animation:none !important; }
  .dnaEnergyOrbit,
  .dnaEnergyPulseBurst{ display:none; }
}

/* BuddiUp name reveal */

.buddiup-name.reveal {
  animation: nameReveal 0.6s ease-out;
}
@keyframes nameReveal {
  0% { opacity:0; transform: scale(0.9); letter-spacing:4px;}
  100% { opacity:1; transform: scale(1); letter-spacing:1px;}
}


.buddiupBtn::after{
  content:"";
  position:absolute;
  inset:auto 22px 8px;
  height:10px;
  border-radius:999px;
  background: radial-gradient(circle at 50% 50%, rgba(110,215,255,.30), rgba(0,0,0,0) 72%);
  filter: blur(10px);
  opacity:.72;
  pointer-events:none;
}

.buddiupBtn:hover::after{ opacity:.95; }

/* === v2 BuddiUp reveal + faction sweep polish === */
.chamberNameplate[hidden]{
  display:none !important;
}

.buddiupBtn{
  --bud-c1: 160,220,255;
  --bud-c2: 120,200,255;
  --bud-c3: 255,255,255;
  position: relative;
  background:
    linear-gradient(180deg, rgba(36,44,62,.72), rgba(14,18,28,.94)),
    linear-gradient(90deg,
      rgba(var(--bud-c1), .10) 0%,
      rgba(var(--bud-c2), .10) 50%,
      rgba(var(--bud-c3), .08) 100%);
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 16px 30px rgba(0,0,0,.30),
    0 0 0 1px rgba(var(--bud-c2), .10),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -12px 18px rgba(0,0,0,.16);
}

.buddiupBtn::before{
  background:
    linear-gradient(110deg,
      rgba(var(--bud-c1), 0) 0%,
      rgba(var(--bud-c1), .08) 18%,
      rgba(var(--bud-c2), .24) 46%,
      rgba(var(--bud-c3), .20) 54%,
      rgba(var(--bud-c2), .10) 66%,
      rgba(var(--bud-c1), 0) 100%);
  opacity:.82;
}

.buddiupBtn::after{
  inset:auto 18px 7px;
  height:14px;
  background:
    radial-gradient(circle at 20% 50%, rgba(var(--bud-c1), .30), rgba(0,0,0,0) 48%),
    radial-gradient(circle at 50% 50%, rgba(var(--bud-c2), .32), rgba(0,0,0,0) 52%),
    radial-gradient(circle at 80% 50%, rgba(var(--bud-c3), .26), rgba(0,0,0,0) 46%);
  filter: blur(11px);
  opacity:.88;
}

.buddiupBtn:hover{
  border-color: rgba(var(--bud-c2), .36);
  box-shadow:
    0 18px 34px rgba(0,0,0,.34),
    0 0 28px rgba(var(--bud-c2), .16),
    0 0 16px rgba(var(--bud-c1), .10),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.buddiupBtn span,
.buddiupBtn{
  text-shadow: 0 1px 10px rgba(var(--bud-c2), .12);
}


/* === v3 polish: smaller nameplate + deactivated BuddiUp button === */
.chamberNameplate{
  bottom: 18px;
  min-width: min(300px, 68%);
  max-width: min(420px, 76%);
  padding: 10px 18px;
  border-radius: 999px;
}

.chamberNameplateGlow{
  inset: -20% -10%;
  filter: blur(18px);
  opacity: .82;
}

.chamberNameplateText{
  font-size: clamp(15px, 1.35vw, 22px);
  letter-spacing: .015em;
  font-weight: 850;
}

.buddiupBtn.used,
.buddiupBtn:disabled,
.buddiupBtn[aria-disabled="true"]{
  cursor: default;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(30,36,48,.70), rgba(15,18,26,.92));
  border-color: rgba(255,255,255,.10);
  color: rgba(232,238,246,.74);
  box-shadow:
    0 10px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -10px 14px rgba(0,0,0,.18);
  text-shadow: none;
  filter: saturate(.55) brightness(.94);
}

.buddiupBtn.used::before,
.buddiupBtn:disabled::before,
.buddiupBtn[aria-disabled="true"]::before{
  opacity: .16;
  animation: none;
}

.buddiupBtn.used::after,
.buddiupBtn:disabled::after,
.buddiupBtn[aria-disabled="true"]::after{
  opacity: .22;
  filter: blur(10px) saturate(.7);
}

.buddiupBtn.used:hover,
.buddiupBtn:disabled:hover,
.buddiupBtn[aria-disabled="true"]:hover{
  transform: none;
  border-color: rgba(255,255,255,.10);
  box-shadow:
    0 10px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -10px 14px rgba(0,0,0,.18);
}

/* === v4 side-panel premium polish === */
.inputs,
.readout.bpPanel{
  position: relative;
}

.inputs::before,
.readout.bpPanel::before{
  content:"";
  position:absolute;
  inset: 2% 4% 2% 2%;
  pointer-events:none;
  border-radius: 28px;
  opacity:.9;
}

.inputs::before{
  background:
    radial-gradient(520px 440px at 6% 42%, rgba(110,190,255,.055), transparent 62%),
    radial-gradient(420px 360px at 20% 78%, rgba(120,255,190,.04), transparent 66%);
}

.readout.bpPanel::before{
  inset: 1% 0 1% 0;
  background:
    radial-gradient(440px 320px at 75% 14%, rgba(120,200,255,.06), transparent 62%),
    radial-gradient(380px 260px at 30% 88%, rgba(255,255,255,.03), transparent 70%);
}

.squadLane{
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.squadLane::before{
  content:"";
  position:absolute;
  left:10px;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:999px;
  opacity:.55;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.08) 12%, var(--lane-accent, rgba(140,255,200,.55)) 50%, rgba(255,255,255,.08) 88%, transparent 100%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--lane-accent, rgba(140,255,200,.55)) 50%, transparent);
}

.squadLane:nth-child(1){ --lane-accent: rgba(120,190,255,.65); }
.squadLane:nth-child(2){ --lane-accent: rgba(130,255,140,.62); }
.squadLane:nth-child(3){ --lane-accent: rgba(255,165,95,.62); }

.squadLane:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--lane-accent, rgba(255,255,255,.16)) 68%, rgba(255,255,255,.16));
  box-shadow:
    0 18px 34px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 22px color-mix(in srgb, var(--lane-accent, rgba(255,255,255,.16)) 26%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}

.squadInfo,
.squadPortrait,
.bpBlock,
.bpHeader{
  backdrop-filter: blur(10px);
}

.squadInfo{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 16px 32px rgba(0,0,0,.28);
}

.squadPortrait{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 16px 34px rgba(0,0,0,.3);
}

.portraitMedia::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 28%, rgba(120,190,255,.10), transparent 54%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 28%, transparent 72%, rgba(0,0,0,.18));
  mix-blend-mode: screen;
  opacity:.8;
}

.bpHeader{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 34px rgba(0,0,0,.28),
    0 0 22px rgba(110,190,255,.06);
}

.bpBlock{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 12px 28px rgba(0,0,0,.22);
}

.fusionTop,
.fusionBody{
  position: relative;
}

.fusionTop::after,
.fusionBody::after{
  content:"";
  display:block;
  height:1px;
  margin-top:10px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}

.fusionBody::after{
  margin-top:0;
  margin-bottom:2px;
}

.bpTitle{
  text-shadow: 0 0 12px rgba(120,200,255,.10);
}

.fusionTop .k,
.fusionBody .k,
.kv .k{
  opacity:.58;
  letter-spacing:.12em;
}

.fusionTop .v,
.fusionBody .v,
.kv .v{
  opacity:.94;
}

.bpStatBar{
  position:relative;
  overflow:hidden;
}

.bpStatBar::after{
  content:"";
  position:absolute;
  inset:-20% auto -20% -35%;
  width:42%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.16) 45%, transparent 100%);
  filter: blur(2px);
  opacity:.55;
  animation: bpBarShimmer 3.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes bpBarShimmer{
  0%, 18%{ transform: translateX(-130%); opacity:0; }
  30%{ opacity:.35; }
  55%{ opacity:.58; }
  72%, 100%{ transform: translateX(320%); opacity:0; }
}

.fusionChip{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.18);
}

@media (prefers-reduced-motion: reduce){
  .squadLane,
  .bpStatBar::after,
  .bpHeader::after,
  .squadLane::before{
    animation:none !important;
    transition:none !important;
  }
}


/* === v5 bodlab side-panel amp-up polish === */
.squadLane{
  overflow:hidden;
}

.squadLane::after{
  content:"";
  position:absolute;
  inset:-20% auto -20% -22%;
  width:44%;
  pointer-events:none;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,.00) 24%,
    color-mix(in srgb, var(--lane-accent, rgba(140,255,200,.55)) 38%, rgba(255,255,255,.18)) 50%,
    rgba(255,255,255,.00) 76%,
    transparent 100%);
  opacity:.18;
  filter: blur(3px);
  transform: translateX(-170%) skewX(-10deg);
  animation: squadLaneSweep 6.2s ease-in-out infinite;
}

.squadLane:nth-child(2)::after{ animation-delay: .75s; }
.squadLane:nth-child(3)::after{ animation-delay: 1.5s; }

@keyframes squadLaneSweep{
  0%, 14%{ transform: translateX(-175%) skewX(-10deg); opacity:0; }
  24%{ opacity:.10; }
  38%{ opacity:.22; }
  56%{ transform: translateX(250%) skewX(-10deg); opacity:0; }
  100%{ transform: translateX(250%) skewX(-10deg); opacity:0; }
}

.squadLane::before{
  animation: lanePowerPulse 3.6s ease-in-out infinite;
}

@keyframes lanePowerPulse{
  0%,100%{ opacity:.42; box-shadow:0 0 12px color-mix(in srgb, var(--lane-accent, rgba(140,255,200,.55)) 44%, transparent); }
  50%{ opacity:.82; box-shadow:0 0 26px color-mix(in srgb, var(--lane-accent, rgba(140,255,200,.55)) 72%, transparent); }
}

.squadLane:hover{
  transform: translateY(-5px) scale(1.006);
  box-shadow:
    0 22px 42px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 32px color-mix(in srgb, var(--lane-accent, rgba(255,255,255,.16)) 36%, transparent);
}

.squadInfo,
.squadPortrait{
  position:relative;
}

.squadInfo::after,
.squadPortrait::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}

.squadInfo::after{
  background: radial-gradient(120% 90% at 0% 50%, color-mix(in srgb, var(--lane-accent, rgba(140,255,200,.55)) 12%, transparent), transparent 58%);
  opacity:.9;
}

.squadPortrait::before{
  background:
    radial-gradient(90% 78% at 52% 70%, color-mix(in srgb, var(--lane-accent, rgba(140,255,200,.55)) 16%, transparent), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 22%, transparent 78%, rgba(0,0,0,.18));
  mix-blend-mode: screen;
  opacity:.9;
}

.portraitHeadRole{
  box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 14px rgba(255,255,255,.04);
}

.readout.bpPanel{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 22px 48px rgba(0,0,0,.32),
    0 0 36px rgba(105,185,255,.08);
}

.readout.bpPanel::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(110,190,255,.20) 12%,
    rgba(255,255,255,.30) 50%,
    rgba(110,190,255,.20) 88%,
    transparent 100%);
  opacity:.7;
  pointer-events:none;
}

.bpHeader,
.bpBlock{
  position:relative;
  overflow:hidden;
}

.bpHeader::after,
.bpBlock::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.bpHeader::after{
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255,255,255,.00) 28%,
    rgba(125,205,255,.14) 46%,
    rgba(255,255,255,.06) 52%,
    rgba(125,205,255,.10) 58%,
    rgba(255,255,255,.00) 78%,
    transparent 100%);
  transform: translateX(-160%);
  animation: bpHeaderSweep 7.5s ease-in-out infinite;
}

.bpBlock::before{
  background:
    radial-gradient(110% 60% at 0% 0%, rgba(110,190,255,.05), transparent 42%),
    radial-gradient(100% 60% at 100% 100%, rgba(255,255,255,.025), transparent 44%);
  opacity:.9;
}

@keyframes bpHeaderSweep{
  0%, 18%{ transform: translateX(-165%); opacity:0; }
  30%{ opacity:.30; }
  48%{ transform: translateX(165%); opacity:0; }
  100%{ transform: translateX(165%); opacity:0; }
}

.bpTitle{
  text-shadow: 0 0 14px rgba(110,190,255,.18), 0 0 24px rgba(110,190,255,.08);
}

.bpStatBar{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 0 1px rgba(255,255,255,.025);
}

.bpStatFill{
  box-shadow: 0 0 10px rgba(255,255,255,.08);
}

.fusionBadge,
.fusionChip,
.chip--tag{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.18),
    0 0 18px rgba(110,190,255,.05);
}

@media (prefers-reduced-motion: reduce){
  .squadLane::after,
  .squadLane::before,
  .bpHeader::after{
    animation:none !important;
  }
}

/* =========================
   v3 blueprint header polish
   ========================= */
.bpHeader{
  padding: 12px 16px 10px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)),
    radial-gradient(140% 110% at 0% 0%, rgba(110,190,255,.05), transparent 48%);
  border: 1px solid rgba(255,255,255,.08);
}

.bpTitle{
  font-size: 11px;
  letter-spacing: .18em;
  opacity: .82;
}

.bpSub{
  margin-top: 7px;
  font-size: 18px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: .01em;
  opacity: .96;
  color: rgba(255,255,255,.96);
}

.fusionTop{
  display: grid;
  gap: 10px;
  margin: 2px 0 4px;
}

.fusionTop::after{
  margin-top: 2px;
  opacity: .7;
}

.fusionTop .fusionMeta{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}

.fusionBadge,
.chip.chip--tag{
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.fusionBadge{
  gap: 8px;
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}

.chip.chip--tag{
  gap: 6px;
  border-color: rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  opacity: .94;
}

.fusionHint{
  margin: 0;
  padding-left: 2px;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .01em;
  color: rgba(255,255,255,.68);
  opacity: 1;
}

@media (max-width: 900px){
  .bpSub{ font-size: 16px; }
  .fusionBadge,
  .chip.chip--tag{ min-height: 34px; padding: 0 12px; }
}


/* === v4 blueprint reveal + diagnostic panel polish === */
.readout.bpPanel{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018)),
    radial-gradient(120% 100% at 50% 0%, rgba(90,180,255,.085), transparent 46%),
    radial-gradient(140% 130% at 50% 100%, rgba(80,120,255,.045), transparent 58%),
    rgba(16,22,34,.72);
}

.readout.bpPanel::before{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: 22px;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(120,190,255,.06) 0 1px,
      transparent 1px 14px
    ),
    linear-gradient(90deg, transparent, rgba(110,190,255,.08), transparent);
  opacity: .32;
  mix-blend-mode: screen;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.6));
}

.readout.bpPanel::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background: radial-gradient(circle at 50% 18%, rgba(80,180,255,.14), transparent 32%);
  opacity:.85;
}

.bpHeader{
  position: relative;
  overflow: hidden;
}

.bpSub{
  display:inline-flex;
  align-items:center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    radial-gradient(140% 100% at 50% 0%, rgba(110,190,255,.1), transparent 60%);
  border: 1px solid rgba(130,190,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px rgba(0,0,0,.20),
    0 0 20px rgba(90,180,255,.07);
  transition: opacity .25s ease, filter .25s ease, transform .35s ease, box-shadow .35s ease;
}

.bpSub.isLocked{
  color: rgba(225,236,255,.7);
  letter-spacing: .12em;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  filter: blur(.2px);
}

.bpSub.isRevealed{
  letter-spacing: .01em;
}

.bpSub.bpRevealPulse{
  animation: bpNameReveal .65s ease-out 1;
}

@keyframes bpNameReveal{
  0%{ opacity:0; transform: translateY(8px) scale(.96); filter: blur(8px); }
  55%{ opacity:1; transform: translateY(0) scale(1.02); filter: blur(0); }
  100%{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}

.bpHeader::before{
  content:"";
  position:absolute;
  left:-15%; right:-15%; top: 42%; height: 30px;
  background: linear-gradient(90deg, transparent, rgba(120,200,255,.16), transparent);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events:none;
}

.readout.bpPanel.isRevealed .bpHeader::before{
  animation: bpHeaderRevealSweep 1.2s ease-out .06s 1;
}

@keyframes bpHeaderRevealSweep{
  0%{ transform: translateX(-120%); opacity: 0; }
  25%{ opacity:.7; }
  100%{ transform: translateX(120%); opacity:0; }
}

.fusionTop{
  position: relative;
  z-index: 1;
}

.fusionBody{
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce){
  .bpSub.bpRevealPulse,
  .readout.bpPanel.isRevealed .bpHeader::before{
    animation:none !important;
  }
}


/* === v5 title centering + blueprint ghost DNA === */
.pageHeader{
  display:grid;
  grid-template-columns:
    clamp(440px, 28vw, 620px)
    clamp(520px, 34vw, 780px)
    clamp(520px, 30vw, 760px);
  gap: clamp(18px, 1.6vw, 36px);
  align-items:end;
}

.pageTitle{
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

.readout.bpPanel{
  isolation:isolate;
}

.bpGhostDNA{
  position:absolute;
  left:50%;
  top:52%;
  width: 300px;
  height: 420px;
  transform: translate(-50%, -50%) rotate(-30deg);
  background: url('../images/bodlab/dna.gif') center/contain no-repeat;
  opacity: .12;
  filter: blur(5px) saturate(1.05);
  pointer-events:none;
  z-index:0;
  mix-blend-mode: screen;
}

.bpHeader,
.fusionTop,
.fusionBody{
  position:relative;
  z-index:1;
}

@media (max-width: 1200px){
  .pageHeader{
    display:flex;
    justify-content:flex-start;
    gap:16px;
  }
  .pageTitle{
    grid-column:auto;
    justify-self:flex-start;
    text-align:left;
  }
  .bpGhostDNA{
    width: 240px;
    height: 340px;
    opacity:.1;
  }
}

@media (prefers-reduced-motion: reduce){
  .bpGhostDNA{ filter: blur(4px); }
}


/* === v6 center title directly over chamber window + enlarge blueprint ghost DNA === */
.pageHeader{
  width: min(100%, clamp(520px, 34vw, 780px));
  margin-left: calc(clamp(440px, 28vw, 620px) + clamp(18px, 1.6vw, 36px));
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:16px;
}

.pageTitle{
  width:min(100%, 620px);
  margin:0 auto;
  text-align:center;
}

.readout.bpPanel{
  isolation:isolate;
}

.bpGhostDNA{
  left:50%;
  top:56%;
  width: 760px;
  height: 1080px;
  transform: translate(-50%, -50%) rotate(-30deg);
  background: url('../images/bodlab/dna.gif') center / contain no-repeat;
  opacity: .18;
  filter: blur(12px) saturate(1.08) brightness(1.08);
  mix-blend-mode: screen;
}

.readout.bpPanel::after{
  background:
    radial-gradient(circle at 50% 18%, rgba(80,180,255,.14), transparent 32%),
    radial-gradient(circle at 50% 54%, rgba(90,170,255,.10), transparent 50%);
}

@media (max-width: 1200px){
  .pageHeader{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }
  .pageTitle{
    width:auto;
    margin:0;
    text-align:left;
  }
  .bpGhostDNA{
    width: 520px;
    height: 760px;
    opacity:.14;
    filter: blur(10px) saturate(1.05);
  }
}

/* === v7 title locked to chamber + larger clipped/layered blueprint DNA === */
.pageHeader{
  width:100%;
  margin: 0 0 18px;
  display:grid;
  grid-template-columns:
    clamp(440px, 28vw, 620px)
    clamp(520px, 34vw, 780px)
    clamp(520px, 30vw, 760px);
  gap: clamp(18px, 1.6vw, 36px);
  align-items:end;
}

.pageTitle{
  grid-column:2;
  justify-self:center;
  text-align:center;
  width:auto;
  margin:0;
}

.readout.bpPanel{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.bpGhostDNA{
  left:54%;
  top:55%;
  width: 1080px;
  height: 1480px;
  transform: translate(-50%, -50%) rotate(-30deg);
  background: url('../images/bodlab/dna.gif') center / contain no-repeat;
  opacity: .24;
  filter: blur(8px) saturate(1.12) brightness(1.1);
  mix-blend-mode: screen;
}

/* make the floating DNA more present in negative space but quieter under content blocks */
.readout.bpPanel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 50% 18%, rgba(90,170,255,.06), transparent 24%),
    radial-gradient(circle at 58% 54%, rgba(90,170,255,.05), transparent 34%),
    linear-gradient(to bottom, rgba(7,12,22,.14), rgba(7,12,22,.02) 20%, rgba(7,12,22,.02) 80%, rgba(7,12,22,.12));
}

/* strengthen panel cards so the enlarged ghost DNA sits behind them instead of through them */
.bpHeader,
.fusionTop,
.fusionBody{
  position:relative;
  z-index:2;
  background-color: rgba(18,24,36,.86);
  backdrop-filter: blur(2px);
}

@media (max-width: 1200px){
  .pageHeader{
    display:flex;
    justify-content:flex-start;
    gap:16px;
  }
  .pageTitle{
    grid-column:auto;
    justify-self:flex-start;
    text-align:left;
  }
  .bpGhostDNA{
    width: 760px;
    height: 1020px;
    left:53%;
    top:56%;
    opacity:.18;
    filter: blur(9px) saturate(1.08) brightness(1.08);
  }
}


/* === v8 balanced side columns + chamber-centered title + lifted blueprint DNA === */
.labLayout{
  grid-template-columns:
    clamp(440px, 28.5vw, 620px)
    clamp(520px, 34vw, 780px)
    clamp(440px, 28.5vw, 620px) !important;
}

.pageHeader{
  width: min(100%, 1760px);
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns:
    clamp(440px, 28.5vw, 620px)
    clamp(520px, 34vw, 780px)
    clamp(440px, 28.5vw, 620px);
  gap: clamp(18px, 1.6vw, 36px);
  align-items: end;
}

.pageTitle{
  grid-column: 2;
  justify-self: center;
  align-self: end;
  text-align: center;
  width: auto;
  margin: 0;
}

.readout.bpPanel{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bpGhostDNA{
  left: 54%;
  top: 41%;
  width: 1260px;
  height: 1680px;
  transform: translate(-50%, -50%) rotate(-30deg);
  opacity: .22;
  filter: blur(9px) saturate(1.1) brightness(1.08);
  mix-blend-mode: screen;
}

/* stronger local card backplates so the ghost DNA reads in the gaps more than through text */
.bpHeader,
.fusionTop,
.fusionBody{
  position: relative;
  z-index: 2;
  background-color: rgba(18,24,36,.90);
  backdrop-filter: blur(2px);
}

@media (max-width: 1200px){
  .labLayout{
    grid-template-columns: 1fr !important;
  }
  .pageHeader{
    display:flex;
    width:100%;
    margin:0 0 18px;
    justify-content:flex-start;
  }
  .pageTitle{
    grid-column:auto;
    justify-self:flex-start;
    text-align:left;
  }
  .bpGhostDNA{
    left: 54%;
    top: 42%;
    width: 860px;
    height: 1180px;
    opacity: .16;
    filter: blur(8px) saturate(1.06) brightness(1.04);
  }
}


/* === v6 tighten/normalize inter-panel spacing, keep right panel on-screen, center title over chamber, straighten/center blueprint DNA === */

.labLayout{
  grid-template-columns:
    minmax(400px, 1fr)
    minmax(480px, 1.08fr)
    minmax(400px, 1fr);
  gap: 24px;
}

.pageHeader{
  width: 100%;
  margin: 0 0 18px;
  display: grid;
  grid-template-columns:
    minmax(400px, 1fr)
    minmax(480px, 1.08fr)
    minmax(400px, 1fr);
  gap: 24px;
  align-items: end;
}

.pageTitle{
  grid-column: 2;
  width: 100%;
  margin: 0;
  text-align: center;
  justify-self: stretch;
}

.inputs,
.readout{
  padding-left: 0;
  padding-right: 0;
}

.readout{
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.readout.bpPanel{
  overflow: hidden auto;
}

.bpGhostDNA{
  left: 50%;
  top: 49%;
  width: 430px;
  height: 620px;
  transform: translate(-50%, -50%) rotate(0deg);
  background-position: center center;
  background-size: contain;
  opacity: .16;
  filter: blur(7px) saturate(1.08);
}

.bpHeader,
.fusionTop,
.fusionBody,
.bpBlock{
  position: relative;
  z-index: 1;
}

.bpHeader,
.bpBlock{
  background: linear-gradient(180deg, rgba(12,18,28,.82), rgba(12,18,28,.74));
}

@media (max-width: 1500px){
  .labLayout{
    grid-template-columns:
      minmax(360px, .98fr)
      minmax(460px, 1.04fr)
      minmax(360px, .98fr);
    gap: 20px;
  }
  .pageHeader{
    grid-template-columns:
      minmax(360px, .98fr)
      minmax(460px, 1.04fr)
      minmax(360px, .98fr);
    gap: 20px;
  }
  .bpGhostDNA{
    width: 380px;
    height: 540px;
  }
}

@media (max-width: 1200px){
  .pageHeader{
    display:flex;
    justify-content:center;
  }
  .pageTitle{
    grid-column:auto;
    width:auto;
  }
}



/* === v7: balanced on-screen columns, chamber-centered title, huge centered blueprint DNA === */
.labLayout{
  grid-template-columns: minmax(400px, 1.02fr) minmax(500px, 1.08fr) minmax(360px, 0.9fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.pageHeader{
  display: grid !important;
  grid-template-columns: minmax(400px, 1.02fr) minmax(500px, 1.08fr) minmax(360px, 0.9fr) !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  align-items: end !important;
}

.pageTitle{
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;
  width: auto !important;
  margin: 0 !important;
}

.inputs{
  padding: 0 !important;
  min-width: 0 !important;
}

.chamber{
  min-width: 0 !important;
}

.readout{
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: auto !important;
}

.readout.bpPanel{
  position: relative !important;
  overflow: hidden !important;
}

.bpGhostDNA{
  left: 50% !important;
  top: 50% !important;
  width: 780px !important;
  height: 980px !important;
  transform: translate(-50%, -50%) !important;
  background-position: center center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  opacity: 0.16 !important;
  filter: blur(10px) saturate(1.08) !important;
  mix-blend-mode: screen !important;
  z-index: 0 !important;
}

.bpHeader,
.fusionTop,
.fusionBody{
  position: relative !important;
  z-index: 1 !important;
}

.bpHeader{
  background: linear-gradient(180deg, rgba(18,24,36,.84), rgba(18,24,36,.72)) !important;
}

.bpBlock{
  background: rgba(14,18,28,.78) !important;
}

@media (max-width: 1400px){
  .labLayout,
  .pageHeader{
    grid-template-columns: minmax(360px, 1fr) minmax(460px, 1.05fr) minmax(340px, 0.88fr) !important;
    gap: 14px !important;
  }
  .bpGhostDNA{
    width: 660px !important;
    height: 840px !important;
  }
}



/* v8 polish: tighten right blueprint panel spacing + enlarge background DNA much further */
.bodlab-right-panel,
.blueprint-panel,
.bodlab-blueprint-panel {
  position: relative;
}

/* tighten the overall internal spacing of the right panel */
.bodlab-right-panel,
.blueprint-panel,
.bodlab-blueprint-panel {
  padding: 14px !important;
  gap: 10px !important;
}

.bodlab-right-panel > .panel-section,
.blueprint-panel > .panel-section,
.bodlab-blueprint-panel > .panel-section,
.bodlab-right-panel .blueprint-section,
.blueprint-panel .blueprint-section,
.bodlab-blueprint-panel .blueprint-section {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* tighten cards inside right panel so the empty air is reduced */
.bodlab-right-panel .blueprint-card,
.blueprint-panel .blueprint-card,
.bodlab-blueprint-panel .blueprint-card,
.bodlab-right-panel .panel-card,
.blueprint-panel .panel-card,
.bodlab-blueprint-panel .panel-card,
.bodlab-right-panel .output-card,
.blueprint-panel .output-card,
.bodlab-blueprint-panel .output-card,
.bodlab-right-panel .profile-card,
.blueprint-panel .profile-card,
.bodlab-blueprint-panel .profile-card,
.bodlab-right-panel .data-card,
.blueprint-panel .data-card,
.bodlab-blueprint-panel .data-card {
  padding: 12px 14px !important;
  margin: 8px 0 !important;
  border-radius: 16px !important;
}

/* header area tighter */
.bodlab-right-panel .blueprint-header,
.blueprint-panel .blueprint-header,
.bodlab-blueprint-panel .blueprint-header {
  margin-bottom: 8px !important;
}

.bodlab-right-panel .chip-row,
.blueprint-panel .chip-row,
.bodlab-blueprint-panel .chip-row,
.bodlab-right-panel .blueprint-chips,
.blueprint-panel .blueprint-chips,
.bodlab-blueprint-panel .blueprint-chips {
  gap: 8px !important;
  margin: 8px 0 8px !important;
}

.bodlab-right-panel .support-copy,
.blueprint-panel .support-copy,
.bodlab-blueprint-panel .support-copy,
.bodlab-right-panel .blueprint-summary,
.blueprint-panel .blueprint-summary,
.bodlab-blueprint-panel .blueprint-summary {
  margin: 6px 0 10px !important;
}

/* reduce line-height a touch so blocks feel denser and more designed */
.bodlab-right-panel,
.blueprint-panel,
.bodlab-blueprint-panel {
  line-height: 1.34 !important;
}

.bodlab-right-panel h3,
.blueprint-panel h3,
.bodlab-blueprint-panel h3,
.bodlab-right-panel .section-title,
.blueprint-panel .section-title,
.bodlab-blueprint-panel .section-title {
  margin-bottom: 8px !important;
}

/* Make the ghost DNA much larger, clipped by panel, and more readable in open spaces */
.bodlab-right-panel::before,
.blueprint-panel::before,
.bodlab-blueprint-panel::before {
  background-size: 240% auto !important;
  background-position: center 32% !important;
  transform: none !important;
  opacity: 0.16 !important;
  filter: blur(6px) !important;
  inset: -8% -18% !important;
}

/* Keep cards slightly more opaque so the DNA stays behind them */
.bodlab-right-panel .blueprint-card,
.blueprint-panel .blueprint-card,
.bodlab-blueprint-panel .blueprint-card,
.bodlab-right-panel .panel-card,
.blueprint-panel .panel-card,
.bodlab-blueprint-panel .panel-card,
.bodlab-right-panel .output-card,
.blueprint-panel .output-card,
.bodlab-blueprint-panel .output-card,
.bodlab-right-panel .profile-card,
.blueprint-panel .profile-card,
.bodlab-blueprint-panel .profile-card,
.bodlab-right-panel .data-card,
.blueprint-panel .data-card,
.bodlab-blueprint-panel .data-card {
  background-color: rgba(23, 29, 42, 0.82) !important;
  backdrop-filter: blur(4px) !important;
}



/* v9: FIX panel edge breathing + MASSIVE DNA */

/* === RIGHT PANEL EDGE PADDING (fix bleed into borders) === */
.bodlab-right-panel,
.blueprint-panel,
.bodlab-blueprint-panel {
  padding: 20px 18px !important; /* more breathing space */
}

/* push content away from edges */
.bodlab-right-panel > *,
.blueprint-panel > *,
.bodlab-blueprint-panel > * {
  margin-left: 6px;
  margin-right: 6px;
}

/* add internal spacing between sections */
.bodlab-right-panel .blueprint-card,
.blueprint-panel .blueprint-card,
.bodlab-blueprint-panel .blueprint-card,
.bodlab-right-panel .panel-card,
.blueprint-panel .panel-card,
.bodlab-blueprint-panel .panel-card,
.bodlab-right-panel .output-card,
.blueprint-panel .output-card,
.bodlab-blueprint-panel .output-card,
.bodlab-right-panel .profile-card,
.blueprint-panel .profile-card,
.bodlab-blueprint-panel .profile-card,
.bodlab-right-panel .data-card,
.blueprint-panel .data-card,
.bodlab-blueprint-panel .data-card {
  margin: 12px 4px !important;
  padding: 14px 16px !important;
}

/* more spacing between text blocks */
.bodlab-right-panel p,
.blueprint-panel p,
.bodlab-blueprint-panel p {
  margin: 6px 0 !important;
}

/* === MASSIVE DNA BACKGROUND === */
.bodlab-right-panel::before,
.blueprint-panel::before,
.bodlab-blueprint-panel::before {
  background-size: 420% auto !important; /* MUCH bigger */
  background-position: center 25% !important;
  opacity: 0.22 !important;
  filter: blur(4px) !important;
  inset: -20% -30% !important; /* overflow heavily so it's clipped nicely */
}

/* soften cards slightly so DNA shows in gaps */
.bodlab-right-panel .blueprint-card,
.blueprint-panel .blueprint-card,
.bodlab-blueprint-panel .blueprint-card,
.bodlab-right-panel .panel-card,
.blueprint-panel .panel-card,
.bodlab-blueprint-panel .panel-card {
  background-color: rgba(23, 29, 42, 0.78) !important;
}



/* v10: target the ACTUAL blueprint selectors for spacing + much bigger DNA */
.readout.bpPanel{
  padding: 16px 18px 18px !important;
  overflow: hidden !important;
}

/* add real breathing room between the panel edge and each window/block */
.readout.bpPanel .bpHeader{
  margin: 0 8px 14px !important;
  padding: 14px 16px !important;
}

.readout.bpPanel .fusionTop.bpBlock,
.readout.bpPanel .fusionBody.bpBlock{
  margin: 14px 8px !important;
  padding: 16px 18px !important;
}

/* stop content from hugging left/right borders */
.readout.bpPanel .fusionTop,
.readout.bpPanel .fusionBody,
.readout.bpPanel .bpHeader{
  max-width: calc(100% - 16px) !important;
}

/* slightly more separation between sections inside the body */
.readout.bpPanel .fusionBody > * + *{
  margin-top: 12px !important;
}

/* give the background DNA much more presence */
.readout.bpPanel .bpGhostDNA{
  width: 1250px !important;
  height: 1650px !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  opacity: .22 !important;
  filter: blur(3px) saturate(1.1) !important;
  background-size: contain !important;
}

/* keep cards readable while letting DNA show in the open spaces */
.readout.bpPanel .bpHeader,
.readout.bpPanel .bpBlock{
  background-color: rgba(20, 26, 39, 0.82) !important;
  backdrop-filter: blur(4px) !important;
}

/* strengthen the gaps visually so the blocks don't feel like they bleed together */
.readout.bpPanel .bpBlock{
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
}


/* v11: fix fusion subtext alignment */
.readout.bpPanel .fusionTop .subtext,
.readout.bpPanel .fusionTop p {
  text-align: left !important;
  border-bottom: none !important;
  display: block !important;
  margin-top: 6px !important;
  opacity: 0.9;
}




/* v12: MacBook Pro friendly BodLab scaling */
@media (max-width: 1600px), (max-height: 980px) {
  .bodlab-shell,
  .bodlab-wrap,
  .bodlabLayout,
  .bodlab-layout,
  .bodlab-grid,
  .labGrid {
    column-gap: 20px !important;
    gap: 20px !important;
  }

  .readout.bpPanel {
    max-width: 360px !important;
  }
}

@media (max-width: 1512px), (max-height: 900px) {
  .bodlab-shell,
  .bodlab-wrap,
  .bodlabLayout,
  .bodlab-layout,
  .bodlab-grid,
  .labGrid {
    grid-template-columns: minmax(300px, 0.95fr) minmax(420px, 1.05fr) minmax(300px, 0.95fr) !important;
    column-gap: 18px !important;
    gap: 18px !important;
    align-items: start !important;
  }

  .bodlab-title,
  .labTitle,
  h1.bodlabTitle {
    font-size: 1.85rem !important;
    margin-bottom: 14px !important;
  }

  .dnaChamber,
  .dna-chamber,
  .fusionChamber,
  .chamberCard,
  .centerChamber {
    max-width: 500px !important;
  }

  .leftLane .bod-card,
  .inputLane .bod-card,
  .contributorCard,
  .recipeCard,
  .bodRecipeCard {
    transform: scale(0.96);
    transform-origin: top center;
    margin-bottom: -6px !important;
  }

  .readout.bpPanel {
    max-width: 340px !important;
    transform: scale(0.97);
    transform-origin: top center;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .readout.bpPanel .bpHeader{
    margin: 0 6px 12px !important;
    padding: 12px 14px !important;
  }

  .readout.bpPanel .fusionTop.bpBlock,
  .readout.bpPanel .fusionBody.bpBlock{
    margin: 12px 6px !important;
    padding: 14px 15px !important;
  }

  .buddiup-btn,
  .buddiUpBtn,
  .fusionButton,
  .ctaBuddiup {
    min-height: 54px !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 1366px), (max-height: 820px) {
  .bodlab-shell,
  .bodlab-wrap,
  .bodlabLayout,
  .bodlab-layout,
  .bodlab-grid,
  .labGrid {
    grid-template-columns: minmax(280px, 0.92fr) minmax(390px, 1fr) minmax(285px, 0.9fr) !important;
    column-gap: 14px !important;
    gap: 14px !important;
  }

  .bodlab-title,
  .labTitle,
  h1.bodlabTitle {
    font-size: 1.7rem !important;
    margin-bottom: 12px !important;
  }

  .dnaChamber,
  .dna-chamber,
  .fusionChamber,
  .chamberCard,
  .centerChamber {
    max-width: 455px !important;
  }

  .leftLane .bod-card,
  .inputLane .bod-card,
  .contributorCard,
  .recipeCard,
  .bodRecipeCard {
    transform: scale(0.92);
    transform-origin: top center;
    margin-bottom: -14px !important;
  }

  .readout.bpPanel {
    max-width: 320px !important;
    transform: scale(0.93);
    transform-origin: top center;
  }

  .factionChips,
  .contribFactions,
  .recipeFactions {
    gap: 8px !important;
  }

  .buddiup-btn,
  .buddiUpBtn,
  .fusionButton,
  .ctaBuddiup {
    min-height: 50px !important;
    font-size: 0.96rem !important;
  }
}

@media (max-height: 760px) {
  .bodlab-title,
  .labTitle,
  h1.bodlabTitle {
    margin-bottom: 10px !important;
  }

  .leftLane .bod-card,
  .inputLane .bod-card,
  .contributorCard,
  .recipeCard,
  .bodRecipeCard {
    transform: scale(0.88);
    transform-origin: top center;
    margin-bottom: -24px !important;
  }

  .readout.bpPanel {
    transform: scale(0.9);
    transform-origin: top center;
  }

  .dnaChamber,
  .dna-chamber,
  .fusionChamber,
  .chamberCard,
  .centerChamber {
    max-width: 430px !important;
  }
}


/* === 2026 BodLab MacBook + attribution polish === */
.squadContributionMap{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
  display: grid;
  gap: 8px;
}
.squadContributionMapTitle{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(170,220,255,.88);
}
.squadContributionRow{
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  align-items: start;
}
.squadContributionLabel{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
}
.squadContributionValue{
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255,255,255,.92);
}
.fusionValue{
  color: rgba(255,255,255,.94);
}
.contribLegend{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}
.contribLegendItem{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.contribLegendDot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: 0 0 9px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.contribLegendName{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.94);
}
.contribLegendText{
  font-size: 11.5px;
  color: rgba(255,255,255,.74);
}

@media (max-width: 1540px){
  .page{
    padding-inline: clamp(12px, 1.3vw, 22px);
  }
  .labLayout{
    grid-template-columns: minmax(350px, .94fr) minmax(420px, 1.14fr) minmax(320px, .88fr) !important;
    column-gap: clamp(18px, 1.5vw, 26px) !important;
    row-gap: 22px !important;
    align-items: stretch;
  }
  .inputs{
    padding-inline: 0;
  }
  .squadRow{
    gap: 12px;
  }
  .squadLane{
    grid-template-columns: minmax(0, 1.9fr) 170px;
    padding: 10px;
    gap: 10px;
    border-radius: 20px;
  }
  .squadInfo,
  .squadPortrait{
    border-radius: 18px;
  }
  .squadInfo{
    padding: 12px 12px 10px;
  }
  .squadLines,
  .squadBullets,
  .squadContributionValue{
    font-size: 11.8px;
  }
  .portraitMedia{
    margin: 0 10px 10px !important;
    flex-basis: 168px;
  }
  .portraitHead{
    padding: 10px 8px 6px;
  }
  .portraitHeadName{
    font-size: 11px;
  }
  .portraitHeadRole{
    font-size: 10px;
    padding: 5px 10px;
  }
  .squadPortrait::after{
    width: 36px;
    right: -36px;
  }
  .chamberStage{
    max-width: min(100%, 540px);
    max-height: 540px;
  }
  .readout.bpPanel{
    padding: 14px 14px 18px;
  }
  .bpHeader,
  .bpBlock{
    border-radius: 18px;
  }
  .kv{
    grid-template-columns: 92px 1fr;
    gap: 8px;
  }
  .k{
    font-size: 11px;
  }
  .fusionRow{
    padding: 11px;
    border-radius: 14px;
  }
  .contribLegendItem{
    padding: 6px 8px;
  }
  .contribLegendText{
    font-size: 11px;
  }
}

@media (max-width: 1366px){
  .labLayout{
    grid-template-columns: minmax(330px, .92fr) minmax(390px, 1.08fr) minmax(300px, .82fr) !important;
  }
  .pageTitle{
    font-size: 30px;
  }
  .squadLane{
    grid-template-columns: minmax(0, 1.8fr) 156px;
  }
  .squadContributionRow{
    grid-template-columns: 72px 1fr;
    gap: 8px;
  }
  .squadContributionLabel,
  .squadContributionMapTitle{
    font-size: 9px;
  }
  .dnaBubble,
  .fusionChip{
    transform: scale(.95);
    transform-origin: left center;
  }
  .readout{
    max-height: calc(100vh - 170px);
  }
}

@media (max-width: 1180px){
  .labLayout{
    grid-template-columns: 1fr !important;
  }
  .squadPortrait::after{
    display: none;
  }
  .inputs,
  .chamber,
  .readout{
    width: min(100%, 860px);
    margin-inline: auto;
  }
  .readout{
    max-height: none;
    overflow: visible;
  }
}


/* === 2026-03 pass: dedupe + compact blueprint + button color polish === */
.squadContributionMap{
  margin: 8px 0 12px;
  padding: 12px;
}

.squadContributionMapTitle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(170,220,255,.18);
  background: linear-gradient(180deg, rgba(90,150,255,.14), rgba(90,150,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.14);
}

.squadContributionRow--primary{
  align-items: center;
}

.squadContributionValue--primary{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 20px rgba(0,0,0,.12);
  color: rgba(255,255,255,.98);
  font-weight: 500;
}

.kv.kv--stack{
  grid-template-columns: 1fr;
  gap: 4px;
}

.kv.kv--stack + .kv.kv--stack{
  margin-top: 4px;
}

.fusionValueGroup{
  display: grid;
  gap: 6px;
}

.fusionValue{
  font-size: 13px;
  line-height: 1.35;
}

.contribLegend--compact{
  gap: 6px;
  margin-top: 2px;
}

.contribLegend--compact .contribLegendItem{
  gap: 7px;
  padding: 6px 9px;
  border-radius: 12px;
  max-width: 100%;
}

.contribLegend--compact .contribLegendName{
  font-size: 10px;
}

.contribLegend--compact .contribLegendText{
  font-size: 10.5px;
  line-height: 1.25;
}

.contribLegend--compact .contribLegendDot{
  width: 8px;
  height: 8px;
  flex-basis: 8px;
}

@media (max-width: 1540px){
  .squadContributionMap{
    padding: 10px 11px;
  }
  .squadContributionValue--primary{
    min-height: 34px;
    padding: 8px 10px;
  }
  .contribLegend--compact .contribLegendItem{
    padding: 5px 8px;
  }
}

@media (max-width: 1366px){
  .fusionValue{
    font-size: 12.4px;
  }
  .contribLegend--compact .contribLegendText{
    font-size: 10px;
  }
  .squadContributionValue--primary{
    font-size: 12px;
  }
}


/* === 2026-03 pass: portrait DNA move + tighter blueprint bullets === */
.portraitHead{
  gap: 8px;
}

.dnaBubbles--portrait{
  justify-content: center;
  gap: 5px;
}

.dnaBubbles--portrait .dnaBubble{
  padding: 4px 8px;
  min-height: 24px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .06em;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.dnaBubbles--portrait .dnaBubbleIcon{
  width: 12px;
  height: 12px;
}

.squadDNAFooter{
  justify-content: space-between;
}

.contribLegend--compact{
  display: grid;
  gap: 4px;
  margin-top: 2px;
}

.contribLegend--compact .contribLegendItem{
  display: grid;
  grid-template-columns: 10px 1fr;
  align-items: start;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.contribLegend--compact .contribLegendBody{
  display: grid;
}

.contribLegend--compact .contribLegendLine{
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.contribLegend--compact .contribLegendDot{
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-top: 5px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.06);
}

.contribLegend--compact .contribLegendName{
  font-size: 10.5px;
  letter-spacing: .02em;
  text-transform: none;
  flex: 0 0 auto;
}

.contribLegend--compact .contribLegendText{
  font-size: 10.5px;
  line-height: 1.24;
  color: rgba(255,255,255,.72);
}

.fusionValueGroup{
  gap: 4px;
}

.kv.kv--stack{
  gap: 3px;
}

.kv.kv--stack + .kv.kv--stack{
  margin-top: 2px;
}

@media (max-width: 1540px){
  .dnaBubbles--portrait .dnaBubble{
    padding: 4px 7px;
    font-size: 9px;
  }

  .contribLegend--compact .contribLegendLine{
    gap: 6px;
  }
}

@media (max-width: 1366px){
  .portraitHead{
    gap: 7px;
  }

  .dnaBubbles--portrait{
    gap: 4px;
  }

  .dnaBubbles--portrait .dnaBubble{
    padding: 3px 6px;
    min-height: 22px;
    font-size: 8.6px;
  }

  .contribLegend--compact .contribLegendName,
  .contribLegend--compact .contribLegendText{
    font-size: 10px;
  }
}


/* === 2026-03 pass v5: portrait dna under art + tighter blueprint lines === */
.portraitHead{
  gap: 6px;
}

.portraitMedia{
  margin-bottom: 10px;
}

.dnaBubbles--portrait{
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 0;
}

.squadPortrait .dnaBubbles--portrait{
  padding-bottom: 2px;
}

.contribLegend--compact{
  gap: 2px;
  margin-top: 1px;
}

.contribLegend--compact .contribLegendItem{
  grid-template-columns: 8px 1fr;
  gap: 6px;
}

.contribLegend--compact .contribLegendDot{
  width: 6px;
  height: 6px;
  flex-basis: 6px;
  margin-top: 4px;
}

.contribLegend--compact .contribLegendBody{
  gap: 0;
}

.contribLegend--compact .contribLegendLine{
  display: block;
  min-width: 0;
  line-height: 1.18;
}

.contribLegend--compact .contribLegendName{
  display: inline;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: none;
}

.contribLegend--compact .contribLegendSep{
  display: inline;
  font-size: 10px;
  color: rgba(255,255,255,.58);
}

.contribLegend--compact .contribLegendText{
  display: inline;
  font-size: 10px;
  line-height: 1.18;
  color: rgba(255,255,255,.76);
}

.fusionValueGroup{
  gap: 2px;
}

.kv.kv--stack{
  gap: 2px;
}

.kv.kv--stack + .kv.kv--stack{
  margin-top: 1px;
}

.fusionValue{
  line-height: 1.2;
}

@media (max-width: 1366px){
  .portraitMedia{
    margin-bottom: 8px;
  }

  .dnaBubbles--portrait{
    gap: 4px;
  }

  .contribLegend--compact .contribLegendName,
  .contribLegend--compact .contribLegendSep,
  .contribLegend--compact .contribLegendText{
    font-size: 9.6px;
  }
}

/* === 2026-03 pass v6: tighter blueprint + centered fusion header === */
.readout.bpPanel .fusionTop.bpBlock{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:94px;
  padding-top:14px !important;
  padding-bottom:14px !important;
}

.readout.bpPanel .fusionTop .fusionMeta{
  width:100%;
  justify-content:flex-start;
  align-items:center;
  margin:0;
}

.readout.bpPanel .fusionTop .fusionBadge,
.readout.bpPanel .fusionTop .chip{
  align-self:center;
}

.readout.bpPanel .fusionTop .fusionHint{
  margin:0;
  padding:0;
  text-align:left !important;
  line-height:1.22;
  font-size:11px;
}

.readout.bpPanel .fusionBody.bpBlock{
  padding:12px 14px !important;
}

.readout.bpPanel .fusionRow{
  gap:8px;
}

.readout.bpPanel .fusionRowTitle{
  margin-bottom:0;
  font-size:13px;
}

.readout.bpPanel .fusionKVs{
  display:grid;
  gap:6px;
}

.readout.bpPanel .kv.kv--stack{
  gap:1px;
}

.readout.bpPanel .kv.kv--stack + .kv.kv--stack{
  margin-top:0;
}

.readout.bpPanel .fusionValueGroup{
  gap:1px;
}

.readout.bpPanel .fusionValue{
  font-size:10px;
  line-height:1.18;
  color:rgba(255,255,255,.82);
}

.readout.bpPanel .contribLegend--compact{
  gap:0;
  margin-top:0;
}

.readout.bpPanel .contribLegend--compact .contribLegendItem{
  grid-template-columns:1fr;
  gap:0;
  padding:0;
  min-height:0;
}

.readout.bpPanel .contribLegend--compact .contribLegendDot{
  display:none;
}

.readout.bpPanel .contribLegend--compact .contribLegendBody{
  gap:0;
}

.readout.bpPanel .contribLegend--compact .contribLegendLine{
  display:block;
  margin:0;
  line-height:1.06;
}

.readout.bpPanel .contribLegend--compact .contribLegendName{
  display:inline;
  font-size:9px;
  font-weight:900;
  line-height:1.06;
}

.readout.bpPanel .contribLegend--compact .contribLegendSep{
  display:inline;
  font-size:9px;
  color:rgba(255,255,255,.52);
}

.readout.bpPanel .contribLegend--compact .contribLegendText{
  display:inline;
  font-size:9px;
  line-height:1.06;
  color:rgba(255,255,255,.72);
}

.readout.bpPanel .fusionBody .k{
  margin-bottom:1px;
  font-size:10px;
  line-height:1;
}

@media (max-width: 1366px){
  .readout.bpPanel .fusionBody.bpBlock{
    padding:10px 12px !important;
  }

  .readout.bpPanel .fusionValue,
  .readout.bpPanel .contribLegend--compact .contribLegendName,
  .readout.bpPanel .contribLegend--compact .contribLegendSep,
  .readout.bpPanel .contribLegend--compact .contribLegendText{
    font-size:8.8px;
  }
}


/* === 2026-03 pass v7: actually center top pills + heavily compress output card === */
.readout.bpPanel .fusionTop.bpBlock{
  display:grid !important;
  align-content:center !important;
  justify-items:center !important;
  gap:10px !important;
  min-height:106px;
  padding:16px 14px !important;
}

.readout.bpPanel .fusionTop .fusionMeta{
  width:100%;
  justify-content:center !important;
  align-items:center;
  gap:10px;
}

.readout.bpPanel .fusionTop .fusionHint{
  text-align:center !important;
  max-width:250px;
  line-height:1.15;
  font-size:10px;
  opacity:.78;
}

.readout.bpPanel .fusionBody.bpBlock{
  padding:9px 11px !important;
}

.readout.bpPanel .fusionRow{
  gap:5px;
}

.readout.bpPanel .fusionKVs{
  gap:4px;
}

.readout.bpPanel .fusionBody .k{
  margin-bottom:0;
  font-size:9px;
  line-height:1;
}

.readout.bpPanel .fusionValueGroup,
.readout.bpPanel .kv.kv--stack{
  gap:0;
}

.readout.bpPanel .fusionValue{
  font-size:8.5px;
  line-height:1.06;
  letter-spacing:-.01em;
}

.readout.bpPanel .contribLegend--compact{
  gap:0;
  margin-top:0;
}

.readout.bpPanel .contribLegend--compact .contribLegendItem{
  margin:0;
  padding:0;
}

.readout.bpPanel .contribLegend--compact .contribLegendBody{
  gap:0;
}

.readout.bpPanel .contribLegend--compact .contribLegendLine{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:4px;
  row-gap:0;
  line-height:1.02;
  margin:0;
}

.readout.bpPanel .contribLegend--compact .contribLegendLead{
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  flex:0 0 auto;
}

.readout.bpPanel .contribLegend--compact .contribLegendName{
  font-size:8.7px;
  font-weight:900;
  line-height:1.02;
}

.readout.bpPanel .contribLegend--compact .contribLegendSep{
  font-size:8.7px;
  line-height:1.02;
  color:rgba(255,255,255,.56);
}

.readout.bpPanel .contribLegend--compact .contribLegendText{
  display:inline;
  font-size:8.6px;
  line-height:1.02;
  color:rgba(255,255,255,.74);
}

.readout.bpPanel .fusionRow + .fusionRow{
  margin-top:2px;
}

@media (max-width: 1366px){
  .readout.bpPanel .fusionTop.bpBlock{
    min-height:100px;
    padding:14px 12px !important;
  }

  .readout.bpPanel .fusionTop .fusionHint{
    font-size:9.6px;
    max-width:230px;
  }

  .readout.bpPanel .fusionBody.bpBlock{
    padding:8px 10px !important;
  }

  .readout.bpPanel .fusionValue,
  .readout.bpPanel .contribLegend--compact .contribLegendName,
  .readout.bpPanel .contribLegend--compact .contribLegendSep,
  .readout.bpPanel .contribLegend--compact .contribLegendText{
    font-size:8.2px;
  }
}

/* === 2026-03 pass v8: fix portrait pill position + aggressively compact blueprint output === */
.squadPortrait{
  justify-content:flex-start !important;
  gap:6px;
}

.portraitHead{
  padding-bottom:4px;
}

.portraitMedia{
  margin-top:0 !important;
  margin-bottom:6px !important;
  flex:0 0 196px;
}

.dnaBubbles--portrait{
  margin-top:0 !important;
  margin-bottom:8px;
  padding:0 8px 6px !important;
  justify-content:center;
  align-content:flex-start;
  gap:4px;
}

.dnaBubbles--portrait .dnaBubble{
  min-height:20px;
  padding:3px 7px;
  font-size:8.4px;
}

.readout.bpPanel .fusionBody.bpBlock{
  padding:7px 9px !important;
}

.readout.bpPanel .fusionRow{
  gap:2px !important;
}

.readout.bpPanel .fusionRow + .fusionRow{
  margin-top:1px !important;
}

.readout.bpPanel .fusionRowTitle{
  margin-bottom:0 !important;
}

.readout.bpPanel .fusionKVs,
.readout.bpPanel .fusionValueGroup,
.readout.bpPanel .kv.kv--stack{
  gap:1px !important;
}

.readout.bpPanel .fusionValue{
  font-size:7.9px !important;
  line-height:1.02 !important;
  margin:0 !important;
}

.readout.bpPanel .fusionBody .k{
  margin-bottom:0 !important;
  font-size:8.6px !important;
  line-height:1 !important;
}

.readout.bpPanel .contribLegend--compact{
  display:grid !important;
  gap:1px !important;
  margin-top:0 !important;
}

.readout.bpPanel .contribLegend--compact .contribLegendItem{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
}

.readout.bpPanel .contribLegend--compact .contribLegendDot,
.readout.bpPanel .contribLegend--compact .contribLegendLead{
  display:none !important;
}

.readout.bpPanel .contribLegend--compact .contribLegendBody{
  display:block !important;
}

.readout.bpPanel .contribLegend--compact .contribLegendLine{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.04 !important;
}

.readout.bpPanel .contribLegend--compact .contribLegendName,
.readout.bpPanel .contribLegend--compact .contribLegendSep,
.readout.bpPanel .contribLegend--compact .contribLegendText{
  display:inline !important;
  vertical-align:baseline;
}

.readout.bpPanel .contribLegend--compact .contribLegendName{
  font-size:7.9px !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
}

.readout.bpPanel .contribLegend--compact .contribLegendSep,
.readout.bpPanel .contribLegend--compact .contribLegendText{
  font-size:7.9px !important;
  line-height:1.04 !important;
}

.readout.bpPanel .contribLegend--compact .contribLegendSep{
  color:rgba(255,255,255,.54) !important;
}

.readout.bpPanel .contribLegend--compact .contribLegendText{
  color:rgba(255,255,255,.76) !important;
}

@media (max-width: 1366px){
  .portraitMedia{
    flex-basis:186px;
  }

  .dnaBubbles--portrait .dnaBubble{
    min-height:19px;
    padding:3px 6px;
    font-size:8px;
  }

  .readout.bpPanel .fusionBody.bpBlock{
    padding:6px 8px !important;
  }

  .readout.bpPanel .fusionValue,
  .readout.bpPanel .contribLegend--compact .contribLegendName,
  .readout.bpPanel .contribLegend--compact .contribLegendSep,
  .readout.bpPanel .contribLegend--compact .contribLegendText{
    font-size:7.5px !important;
  }
}

/* === 2026-03 pass v9: remove remaining dead space from right blueprint panel === */
.readout.bpPanel .fusionBody.bpBlock{
  padding: 8px 10px !important;
  display: grid !important;
  gap: 8px !important;
}

.readout.bpPanel .fusionRow{
  display: grid !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.readout.bpPanel .fusionRow + .fusionRow{
  margin-top: 0 !important;
}

.readout.bpPanel .fusionRowTitle{
  margin: 0 !important;
  line-height: 1 !important;
}

.readout.bpPanel .fusionRowText,
.readout.bpPanel .fusionBody .v,
.readout.bpPanel .fusionKVs,
.readout.bpPanel .fusionValueGroup,
.readout.bpPanel .kv,
.readout.bpPanel .kv.kv--stack{
  margin: 0 !important;
  padding: 0 !important;
  gap: 2px !important;
}

.readout.bpPanel .fusionValue{
  margin: 0 !important;
  line-height: 1.08 !important;
}

.readout.bpPanel .contribLegend--compact{
  display: grid !important;
  gap: 2px !important;
  margin: 0 !important;
}

.readout.bpPanel .contribLegend--compact .contribLegendItem{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.readout.bpPanel .contribLegend--compact .contribLegendItem + .contribLegendItem{
  margin-top: 1px !important;
}

.readout.bpPanel .contribLegend--compact .contribLegendBody{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.readout.bpPanel .contribLegend--compact .contribLegendLine{
  display: grid !important;
  grid-template-columns: max-content max-content minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 4px !important;
  row-gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.05 !important;
}

.readout.bpPanel .contribLegend--compact .contribLegendName,
.readout.bpPanel .contribLegend--compact .contribLegendSep{
  white-space: nowrap !important;
}

.readout.bpPanel .contribLegend--compact .contribLegendText{
  min-width: 0 !important;
}


/* =========================
   V10 blueprint reset: restore clean original right-panel rhythm
   ========================= */
.readout.bpPanel #fusionTop.bpBlock{
  padding: 14px 16px !important;
  margin: 10px 0 12px !important;
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 10px;
}

.readout.bpPanel #fusionTop .fusionMeta{
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px !important;
  flex-wrap: wrap;
}

.readout.bpPanel #fusionTop .fusionHint{
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  opacity: .78 !important;
}

.readout.bpPanel #fusionBody.bpBlock{
  padding: 14px 16px 16px !important;
  display: grid !important;
  gap: 14px !important;
}

.readout.bpPanel #fusionBody .fusionRow{
  display: block !important;
  margin: 0 !important;
  padding: 12px 12px 13px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.03) !important;
}

.readout.bpPanel #fusionBody .fusionRowTitle{
  margin: 0 0 8px !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.readout.bpPanel #fusionBody .fusionKVs{
  display: grid !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.readout.bpPanel #fusionBody .kv{
  display: grid !important;
  grid-template-columns: 104px minmax(0,1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.readout.bpPanel #fusionBody .k{
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  opacity: .72 !important;
}

.readout.bpPanel #fusionBody .v,
.readout.bpPanel #fusionBody .fusionRowText{
  font-size: 14px !important;
  line-height: 1.33 !important;
  opacity: .92 !important;
  white-space: normal !important;
}

.readout.bpPanel #fusionBody .bpStatBars{
  gap: 8px !important;
  margin-top: 4px !important;
}

.readout.bpPanel #fusionBody .bpStatAvg{
  margin-top: 5px !important;
  font-size: 11px !important;
  opacity: .6 !important;
}

.readout.bpPanel #fusionBody .kv .v .contribLegend,
.readout.bpPanel #fusionBody .kv .v .contribLegend--compact,
.readout.bpPanel #fusionBody .fusionValueGroup,
.readout.bpPanel #fusionBody .fusionValue,
.readout.bpPanel #fusionBody .kv.kv--stack{
  all: unset;
}


/* === V11 faction contribution polish === */
.squadLane{
  --lane-accent: rgba(255,255,255,.16);
  --lane-accent-rgb: 255, 255, 255;
}

.squadContributionValue--primary{
  border-color: rgba(var(--lane-accent-rgb), .72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(var(--lane-accent-rgb), .18),
    0 10px 24px rgba(var(--lane-accent-rgb), .16);
  background:
    linear-gradient(180deg, rgba(var(--lane-accent-rgb), .16), rgba(var(--lane-accent-rgb), .08));
}

.readout.bpPanel #fusionBody .kv .v .fusionContribItem{
  font-weight: 700;
}

.readout.bpPanel #fusionBody .kv .v .fusionContribSep{
  color: rgba(255,255,255,.68);
  font-weight: 700;
}


/* === V12 polish: faction-colored Bod names + responsive BuddiUp Data bars === */
.portraitHeadName{
  text-shadow: 0 0 14px rgba(255,255,255,.06);
}

/* Keep BuddiUp Data bars full-size by default, but allow graceful shrink on tighter widths */
@media (max-width: 1420px){
  .readout.bpPanel #fusionBody .kv .v,
  .readout.bpPanel #fusionBody .bpStatBars,
  .readout.bpPanel #fusionBody .bpStatRow,
  .readout.bpPanel #fusionBody .bpStatBar{
    min-width: 0 !important;
  }

  .readout.bpPanel #fusionBody .bpStatRow{
    grid-template-columns: 48px 26px minmax(0,1fr) !important;
    gap: 8px !important;
  }

  .readout.bpPanel #fusionBody .bpStatBar{
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }
}

@media (max-width: 1280px){
  .readout.bpPanel #fusionBody .bpStatRow{
    grid-template-columns: 44px 24px minmax(0,1fr) !important;
    gap: 7px !important;
  }

  .readout.bpPanel #fusionBody .bpStatLabel,
  .readout.bpPanel #fusionBody .bpStatVal,
  .readout.bpPanel #fusionBody .bpStatAvg{
    font-size: 10px !important;
  }
}


/* === V13.1 polish: give BuddiUp Data bars the full row width by default === */
.readout.bpPanel #fusionBody .kv.kv--stats{
  grid-template-columns: minmax(0,1fr) !important;
  gap: 0 !important;
}

.readout.bpPanel #fusionBody .kv.kv--stats .v{
  width: 100% !important;
}

.readout.bpPanel #fusionBody .kv.kv--stats .bpStatRow{
  grid-template-columns: 52px 28px minmax(150px,1fr) !important;
  gap: 10px !important;
}

@media (max-width: 1420px){
  .readout.bpPanel #fusionBody .kv.kv--stats .bpStatRow{
    grid-template-columns: 48px 26px minmax(120px,1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 1280px){
  .readout.bpPanel #fusionBody .kv.kv--stats .bpStatRow{
    grid-template-columns: 44px 24px minmax(96px,1fr) !important;
    gap: 7px !important;
  }
}

/* === V16 ultrawide spacing + blueprint scroll safety === */
/* Keep the 3-panel composition tighter on very wide desktop screens (iMac / ultrawide)
   without changing the normal MacBook/Desktop composition. */
@media (min-width: 1800px){
  .pageHeader,
  .lab{
    max-width: 1720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .labLayout,
  .pageHeader{
    grid-template-columns: minmax(430px, 1.02fr) minmax(560px, 1.08fr) minmax(340px, 0.84fr) !important;
    gap: 18px !important;
  }
}

/* Let the blueprint panel scroll vertically when it is taller than the viewport,
   while keeping the premium clipped look horizontally. */
.readout.bpPanel{
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 120px) !important;
  scrollbar-gutter: stable;
}

/* Avoid the panel getting cropped by parent flex/grid math on taller content. */
.readout{
  align-self: start !important;
}

/* === V17: remove internal blueprint scrolling; let page scroll instead === */
/* The right panel should grow with its content and the browser window should handle scrolling.
   This keeps the scrollbar at the side of the whole page instead of inside the panel. */
@media (min-width: 1181px){
  .readout,
  .readout.bpPanel{
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    scrollbar-width: none !important;
  }

  .readout::-webkit-scrollbar,
  .readout.bpPanel::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
  }

  .lab,
  .page,
  body,
  html{
    overflow-y: auto !important;
  }
}

/* === V18: hide inactive-looking page scrollbars and prevent stray horizontal scroll === */
/* Keep page scrolling on the browser window, but do not show a useless internal horizontal bar.
   Also hide the page scrollbar chrome for BodLab so the screen stays clean when the page only barely overflows. */
html,
body{
  overflow-x: hidden !important;
}

.page,
.lab,
.labLayout{
  max-width: 100% !important;
  overflow-x: clip !important;
}

@media (min-width: 1181px){
  html,
  body{
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
}


/* === V19: ultrawide right panel should sit closer to chamber, without changing normal desktop === */
@media (min-width: 1800px){
  .pageHeader,
  .lab{
    max-width: 1560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .labLayout,
  .pageHeader{
    grid-template-columns: minmax(420px, 1fr) minmax(540px, 1.08fr) minmax(320px, 0.78fr) !important;
    gap: 14px !important;
    justify-content: center !important;
    align-items: start !important;
  }

  .readout,
  .readout.bpPanel{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* === V20: keep full-width desktop layout, fix ultrawide gap without re-centering/compressing === */
@media (min-width: 1800px){
  /* Use the available page width again so the layout starts near the left edge,
     but tighten the right lane itself so it doesn't look detached from the chamber. */
  .pageHeader,
  .lab{
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .labLayout,
  .pageHeader{
    width: 100% !important;
    justify-content: stretch !important;
    grid-template-columns:
      clamp(420px, 33vw, 610px)
      minmax(560px, 1.12fr)
      clamp(300px, 22vw, 380px) !important;
    gap: clamp(16px, 1.15vw, 24px) !important;
    column-gap: clamp(16px, 1.15vw, 24px) !important;
    align-items: start !important;
  }

  .readout,
  .readout.bpPanel{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: start !important;
  }
}

/* === V21: left-aligned 3-column desktop grid with even gutters === */
@media (min-width: 1200px){
  /* Keep the layout starting near the left edge and use a clean, even 3-column grid.
     No special ultrawide lane squeezing; just consistent gutters between all panels. */
  .pageHeader,
  .lab{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .labLayout,
  .pageHeader{
    width: 100% !important;
    max-width: none !important;
    justify-content: start !important;
    justify-items: stretch !important;
    align-items: start !important;
    grid-template-columns:
      minmax(420px, 1fr)
      minmax(500px, 1.08fr)
      minmax(320px, 0.9fr) !important;
    gap: 22px !important;
    column-gap: 22px !important;
  }

  .readout,
  .readout.bpPanel{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: start !important;
    margin: 0 !important;
  }
}

@media (min-width: 1800px){
  .labLayout,
  .pageHeader{
    grid-template-columns:
      minmax(430px, 1fr)
      minmax(560px, 1.1fr)
      minmax(330px, 0.92fr) !important;
    gap: 24px !important;
    column-gap: 24px !important;
  }
}

/* === v23 desktop layout: fixed 1:1 chamber, side lanes flex to fill available width === */
@media (min-width: 1201px){
  .labLayout{
    display:grid !important;
    grid-template-columns: minmax(420px, 1fr) 620px minmax(340px, 1fr) !important;
    justify-content:start !important;
    justify-items:stretch !important;
    align-items:start !important;
    column-gap: 24px !important;
    row-gap: 24px !important;
    gap: 24px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .pageHeader{
    display:grid !important;
    grid-template-columns: minmax(420px, 1fr) 620px minmax(340px, 1fr) !important;
    justify-content:start !important;
    justify-items:stretch !important;
    align-items:end !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    gap: 24px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 0 18px !important;
  }

  .pageTitle{
    grid-column:2 !important;
    justify-self:center !important;
    width:auto !important;
    text-align:center !important;
  }

  .inputs{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    justify-self:stretch !important;
  }

  .chamber{
    width:620px !important;
    max-width:620px !important;
    min-width:0 !important;
    justify-self:start !important;
    align-items:center !important;
  }

  .chamberStage,
  .dnaChamber,
  .dna-chamber,
  .fusionChamber,
  .chamberCard,
  .centerChamber{
    width:100% !important;
    max-width:620px !important;
  }

  .readout,
  .readout.bpPanel{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    justify-self:stretch !important;
    margin:0 !important;
    transform:none !important;
  }
}