:root {
  color-scheme: dark;
  --bg: #090e14;
  --bg-soft: #101923;
  --glass: rgba(10, 18, 26, .76);
  --glass-strong: rgba(7, 12, 18, .91);
  --ink: #f4f7f8;
  --muted: #aeb9c3;
  --faint: #697783;
  --line: rgba(216, 231, 239, .16);
  --line-bright: rgba(216, 231, 239, .36);
  --blue: #5fd1ff;
  --blue-soft: #4d9ec6;
  --gold: #d9bb74;
  --purple: #6e4387;
  --nav-h: 64px;
  --page-x: clamp(18px, 3.2vw, 58px);
  --font-ui: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Arial Narrow", "Roboto Condensed", "Avenir Next Condensed", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 5%, rgba(53, 103, 130, .18), transparent 30%),
    linear-gradient(135deg, #0c131b 0%, var(--bg) 46%, #0b1218 100%);
  font-family: var(--font-ui);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .23;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 1000;
  padding: 10px 14px;
  color: #071016;
  background: var(--blue);
  text-decoration: none;
  transition: top .2s ease;
}

.skip-link:focus { top: 12px; }

.app-nav {
  height: var(--nav-h);
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding: 0 22px;
  background: rgba(9, 15, 22, .78);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: white;
  text-decoration: none;
  letter-spacing: -.01em;
}

.brand-mark {
  width: 27px;
  height: 31px;
  display: grid;
  place-items: center;
  clip-path: polygon(0 0, 50% 17%, 100% 0, 78% 76%, 50% 100%, 22% 76%);
  background: #dce6e9;
}

.brand-mark i {
  display: block;
  width: 13px;
  height: 18px;
  background: #111b24;
  clip-path: polygon(0 0, 50% 35%, 100% 0, 70% 100%, 30% 100%);
}

.brand-name {
  font-size: 13px;
  line-height: .83;
  font-weight: 650;
}

.brand-name strong { font-weight: 750; }
.brand-name small { color: var(--faint); font-size: 9px; margin-left: 1px; }

.destinations {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.destination {
  position: relative;
  min-width: 94px;
  display: grid;
  place-items: center;
  padding: 3px 18px 0;
  color: #95a1ab;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .115em;
  font-size: 11px;
  font-weight: 700;
  transition: color .2s ease, background .2s ease;
}

.destination::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;
  height: 3px;
  background: var(--blue);
  box-shadow: 0 -6px 18px rgba(95, 209, 255, .55);
  transition: left .25s ease, right .25s ease;
}

.destination:hover, .destination.active { color: #f7fbfd; background: rgba(255,255,255,.025); }
.destination.active::after { left: 16px; right: 16px; }

.profile {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.profile-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #63d4a5;
  box-shadow: 0 0 9px #63d4a5;
}

.profile-name b { color: var(--blue); font-weight: 600; }

.profile-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-bright);
  background: rgba(255,255,255,.06);
  color: white;
  font-size: 12px;
}

main { min-height: 100vh; }

.weapon-hero {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  padding: calc(var(--nav-h) + 54px) var(--page-x) 38px;
  display: grid;
  grid-template-columns: minmax(340px, .88fr) minmax(520px, 1.4fr) auto;
  grid-template-rows: 1fr auto;
  align-items: end;
  isolation: isolate;
  border-bottom: 1px solid var(--line-bright);
  background: #0b1219;
}

.weapon-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(5, 10, 15, .98) 0%, rgba(7, 13, 19, .88) 25%, rgba(8, 14, 20, .25) 62%, rgba(8, 14, 20, .8) 100%),
    linear-gradient(0deg, rgba(5,10,15,.96), transparent 55%);
}

.weapon-hero::after {
  content: "MIDNIGHT COUP  /  01";
  position: absolute;
  right: var(--page-x);
  bottom: 18px;
  z-index: 0;
  color: rgba(255,255,255,.2);
  font: 600 9px/1 var(--font-ui);
  letter-spacing: .26em;
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .5;
  background-image:
    linear-gradient(rgba(160,190,205,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,190,205,.08) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent 0, black 42%, black 90%, transparent);
}

.weapon-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  --art-x: 0px;
  --art-y: 0px;
}

.weapon-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 70% center;
  opacity: .95;
  filter: contrast(1.06) saturate(.92) brightness(.92);
  transform: translate3d(var(--art-x), var(--art-y), 0) scale(1.025);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

.weapon-halo {
  position: absolute;
  z-index: 2;
  width: 650px;
  height: 650px;
  left: 45%;
  top: -22%;
  border: 1px solid rgba(115, 186, 218, .14);
  border-radius: 50%;
  box-shadow: inset 0 0 0 75px rgba(95, 209, 255, .015), inset 0 0 0 76px rgba(95,209,255,.07);
  pointer-events: none;
}

.weapon-halo::before,
.weapon-halo::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px solid rgba(115, 186, 218, .12);
  transform: rotate(28deg);
}

.weapon-halo::after { inset: 30%; transform: rotate(62deg); }

.weapon-identity {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0 17px;
  z-index: 2;
  max-width: 530px;
  min-width: 0;
}

.weapon-identity > div { min-width: 0; }

.identity-icon-wrap {
  position: relative;
  grid-row: 1 / 3;
  width: 70px;
  height: 70px;
  border: 2px solid #e3d9a6;
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 8px 22px rgba(0,0,0,.25);
}

.identity-icon { width: 100%; height: 100%; object-fit: cover; display: block; }

.legendary-corner {
  position: absolute;
  inset: 0 0 auto auto;
  width: 25px;
  height: 25px;
  background: rgba(0,0,0,.65);
  clip-path: polygon(0 0,100% 0,100% 100%);
}

.rarity, .section-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 9px;
  font-weight: 700;
  color: var(--blue);
}

.weapon-identity h1 {
  margin: 1px 0 0;
  color: white;
  font-family: var(--font-display);
  font-size: clamp(46px, 4.5vw, 74px);
  font-stretch: condensed;
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-shadow: 0 5px 25px rgba(0,0,0,.4);
}

.weapon-type {
  grid-column: 2;
  margin: 8px 0 0;
  color: #c6ced4;
  text-transform: uppercase;
  letter-spacing: .075em;
  font-size: 14px;
  font-weight: 580;
}

.weapon-type span { color: var(--faint); margin: 0 5px; }

.weapon-identity blockquote {
  grid-column: 1 / 3;
  margin: 27px 0 0;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.33);
  color: #c8d0d6;
  font-family: Georgia, serif;
  font-size: 14px;
  font-style: italic;
}

.power-block {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  z-index: 2;
  min-width: 150px;
  padding: 0 0 11px 24px;
  border-left: 1px solid rgba(255,255,255,.3);
  text-align: right;
  text-transform: uppercase;
}

.power-label, .power-slot { display: block; color: #9aa6ae; letter-spacing: .11em; font-size: 9px; font-weight: 700; }
.power-block strong { display: flex; align-items: center; justify-content: flex-end; gap: 9px; font: 600 46px/.95 var(--font-display); }
.power-slot { margin-top: 6px; color: #d3d9dd; }

.power-diamond {
  width: 22px;
  height: 22px;
  display: inline-block;
  border: 4px double #af8fcc;
  transform: rotate(45deg);
  box-shadow: 0 0 13px rgba(160,118,191,.35);
}

.manifest-link {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  position: relative;
  z-index: 3;
  padding: 9px 0 1px;
  color: #bbc5cb;
  border-bottom: 1px solid rgba(255,255,255,.4);
  text-decoration: none;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: color .2s, border-color .2s;
}

.manifest-link:hover { color: white; border-color: var(--blue); }

.inspection-shell {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 410px);
  gap: clamp(28px, 3.2vw, 58px);
  padding: 42px var(--page-x) 72px;
  background:
    linear-gradient(90deg, transparent calc(100% - 29vw), rgba(255,255,255,.012) calc(100% - 29vw)),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 260px);
}

.perk-workspace { min-width: 0; }

.section-heading, .inspector-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line-bright);
}

.section-heading h2, .inspector-heading h2 {
  margin: 3px 0 0;
  font: 500 25px/1 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.state-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #8f9ba5;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.state-legend span { display: flex; align-items: center; gap: 7px; }
.legend-dot { width: 9px; height: 9px; display: inline-block; border-radius: 50%; }
.selected-dot { background: var(--blue-soft); box-shadow: 0 0 0 2px rgba(95,209,255,.25); }
.recommended-dot { border: 1px solid var(--gold); }

.perk-columns {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) minmax(120px, .82fr);
  min-height: 610px;
  border-bottom: 1px solid var(--line);
}

.perk-column {
  position: relative;
  min-width: 0;
  padding: 18px 12px 22px;
  border-right: 1px solid var(--line);
}

.perk-column:first-child { border-left: 1px solid var(--line); }

.perk-column::before {
  content: attr(data-index);
  position: absolute;
  top: 18px;
  right: 12px;
  color: rgba(255,255,255,.13);
  font: 600 28px/1 var(--font-display);
}

.perk-column h3 {
  margin: 0 0 18px;
  color: #9faab3;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .15em;
}

.perk-list {
  display: grid;
  gap: 6px;
}

.perk-button {
  width: 100%;
  min-height: 70px;
  position: relative;
  display: grid;
  grid-template-columns: 50px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding: 5px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  isolation: isolate;
}

.perk-button::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(90deg, rgba(95,209,255,.12), transparent);
  border-left: 2px solid var(--blue);
  transform: scaleX(.75);
  transform-origin: left;
  transition: opacity .2s ease, transform .25s ease;
}

.perk-button:hover::before, .perk-button:focus-visible::before { opacity: .65; transform: scaleX(1); }
.perk-button.selected::before { opacity: 1; transform: scaleX(1); }

.perk-icon-wrap {
  width: 48px;
  height: 48px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(228, 240, 245, .3);
  border-radius: 50%;
  background: rgba(15, 23, 31, .68);
  transition: background .22s, border-color .22s, transform .22s, box-shadow .22s;
}

.perk-icon-wrap::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: inset .22s ease, border-color .22s ease, opacity .22s ease;
}

.perk-button:hover .perk-icon-wrap, .perk-button:focus-visible .perk-icon-wrap { border-color: rgba(255,255,255,.75); transform: translateX(2px); }

.perk-button.recommended .perk-icon-wrap::after {
  border-color: rgba(217,187,116,.72);
  border-style: dashed;
  opacity: .65;
}

.perk-button.recommended::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 9px;
  left: 47px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(217,187,116,.5);
}

.perk-button.selected .perk-icon-wrap {
  background: #438eaf;
  border-color: #b9edff;
  box-shadow: 0 0 24px rgba(95,209,255,.2), inset 0 0 20px rgba(255,255,255,.08);
}

.perk-button.selected .perk-icon-wrap::after {
  inset: -4px;
  border: 2px solid var(--blue);
  border-style: solid;
  opacity: 1;
  animation: selection-ring .32s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes selection-ring {
  from { inset: -12px; opacity: 0; }
  to { inset: -4px; opacity: 1; }
}

.perk-icon { width: 41px; height: 41px; display: block; border-radius: 50%; object-fit: cover; }

.perk-name {
  min-width: 0;
  color: #b9c2c9;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .025em;
  text-transform: uppercase;
  transition: color .2s;
}

.perk-button:hover .perk-name, .perk-button.selected .perk-name { color: white; }

.pool-help {
  margin: 12px 0 0;
  color: var(--faint);
  font-size: 10px;
}

.inspector { min-width: 0; }
.roll-section { padding-bottom: 38px; }
.roll-count { color: rgba(255,255,255,.16); font: 600 28px/1 var(--font-display); }

.roll-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}

.roll-tab {
  position: relative;
  min-width: 0;
  padding: 13px 7px 11px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: #89959e;
  cursor: pointer;
  text-align: left;
  transition: color .2s, background .2s;
}

.roll-tab:last-child { border-right: 0; }
.roll-tab span, .roll-tab small { display: block; }
.roll-tab span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.roll-tab small { margin-top: 2px; color: var(--faint); font-size: 9px; }
.roll-tab::after { content:""; position:absolute; height:2px; left:0; right:100%; bottom:-1px; background:var(--blue); transition:right .25s ease; }
.roll-tab:hover { color: white; background: rgba(255,255,255,.025); }
.roll-tab.active { color: white; background: rgba(95,209,255,.055); }
.roll-tab.active::after { right: 0; }

.roll-summary {
  padding: 17px 0 2px;
}

.summary-topline {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #9aa6af;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

#summary-status { color: var(--blue); }
#summary-list { list-style: none; margin: 0; padding: 0; counter-reset: roll; }

#summary-list li {
  counter-increment: roll;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 0 7px 33px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: #d3dadd;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#summary-list li::before {
  content: "0" counter(roll);
  position: absolute;
  left: 0;
  color: #62717c;
  font-size: 9px;
}

.stats-heading { margin-bottom: 14px; }
.rpm-badge { font: 500 26px/1 var(--font-display); }
.rpm-badge small { display: block; color: var(--faint); font: 700 8px/1.2 var(--font-ui); letter-spacing: .12em; text-align: right; }

.stats-list { display: grid; gap: 8px; }

.stat-row {
  display: grid;
  grid-template-columns: 145px 1fr 29px;
  align-items: center;
  gap: 10px;
  color: #aab4bc;
  font-size: 10px;
}

.stat-label { white-space: nowrap; text-transform: uppercase; letter-spacing: .055em; }
.stat-track { height: 5px; overflow: hidden; background: rgba(231,240,245,.12); }
.stat-fill { display: block; height: 100%; width: var(--value); background: linear-gradient(90deg, #dce5e9, white); transform-origin: left; animation: stat-fill .75s .42s cubic-bezier(.1,.7,.2,1) both; }
.stat-row.emphasis .stat-fill { background: linear-gradient(90deg, #5cb9e2, var(--blue)); }
.stat-value { color: #e7ecef; text-align: right; font-variant-numeric: tabular-nums; }

@keyframes stat-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.perk-tooltip {
  position: fixed;
  z-index: 500;
  width: min(285px, calc(100vw - 24px));
  padding: 14px 16px 15px;
  color: white;
  background: rgba(4, 8, 12, .96);
  border-top: 2px solid var(--blue);
  border-left: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 45px rgba(0,0,0,.55);
  pointer-events: none;
}

.perk-tooltip[hidden] { display: none; }
.tooltip-kind { display:block; margin-bottom:3px; color:var(--blue); font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; }
.perk-tooltip strong { display:block; font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.perk-tooltip p { margin:7px 0 0; color:#aeb8bf; font-size:11px; line-height:1.45; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px var(--page-x) 24px;
  color: #5f6c75;
  border-top: 1px solid var(--line);
  background: #080d12;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

noscript { position: fixed; left: 12px; bottom: 12px; z-index: 999; padding: 10px; background: #311; }

.entrance { opacity: 0; transform: translateY(12px); animation: enter .55s cubic-bezier(.15,.75,.25,1) forwards; }
.entrance-1 { animation-delay: .08s; }
.entrance-2 { animation-delay: .16s; }
.entrance-3 { animation-delay: .24s; }
.entrance-4 { animation-delay: .34s; }
@keyframes enter { to { opacity:1; transform:none; } }

@media (max-width: 1180px) {
  .app-nav { gap: 12px; padding-inline: 14px; }
  .destination { min-width: auto; padding-inline: 12px; }
  .profile-name { display: none; }
  .weapon-hero { grid-template-columns: minmax(340px, .85fr) 1fr auto; }
  .perk-columns { overflow-x: auto; grid-template-columns: repeat(5, minmax(150px, 1fr)); }
  .perk-name { font-size: 9px; }
  .stat-row { grid-template-columns: 115px 1fr 27px; }
}

@media (max-width: 900px) {
  :root { --nav-h: 58px; }
  .app-nav { padding-right: 10px; }
  .destinations { overflow-x: auto; flex: 1; scrollbar-width: none; }
  .destinations::-webkit-scrollbar { display: none; }
  .destination { flex: 0 0 auto; font-size: 10px; }
  .destination:first-child { display:none; }
  .profile { margin-left: 0; }
  .profile-status { display: none; }
  .weapon-hero { min-height: 470px; grid-template-columns: 1fr auto; padding-top: calc(var(--nav-h) + 44px); }
  .weapon-hero::before { background: linear-gradient(90deg, rgba(5,10,15,.98), rgba(5,10,15,.6) 55%, rgba(5,10,15,.55)), linear-gradient(0deg, rgba(5,10,15,.96), transparent 50%); }
  .weapon-art img { object-position: 64% center; opacity: .7; }
  .weapon-identity { grid-column: 1; grid-row: 1; align-self: center; }
  .power-block { grid-column: 2; grid-row: 1; }
  .manifest-link { grid-column: 2; }
  .inspection-shell { grid-template-columns: 1fr; }
  .perk-columns { min-height: auto; }
  .inspector { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
  .roll-section { padding-bottom: 0; }
}

@media (max-width: 680px) {
  :root { --page-x: 16px; --nav-h: 54px; }
  .app-nav { gap: 8px; padding-left: 10px; }
  .brand-name { display: none; }
  .brand-mark { width: 22px; height: 27px; }
  .destination { padding-inline: 11px; letter-spacing: .08em; }
  .destination:nth-child(3) { display: none; }
  .profile-avatar { width: 28px; height: 28px; }
  .weapon-hero { min-height: 500px; display: block; padding-top: calc(var(--nav-h) + 48px); }
  .weapon-hero::after { display: none; }
  .weapon-art { top: 135px; }
  .weapon-art img { height: 340px; object-fit: cover; object-position: 68% 50%; opacity: .72; }
  .hero-grid { mask-image: linear-gradient(180deg, transparent, black 35%, black 85%, transparent); }
  .weapon-halo { width:380px; height:380px; left:25%; top:0; }
  .weapon-identity { display:grid; grid-template-columns:54px 1fr; gap:0 11px; max-width:100%; }
  .identity-icon-wrap { width:54px; height:54px; }
  .weapon-identity h1 { max-width: 250px; font-size: 40px; }
  .weapon-type { margin-top:5px; font-size:11px; }
  .weapon-identity blockquote { margin-top: 20px; padding-top: 11px; font-size: 12px; }
  .power-block { position:absolute; right:var(--page-x); bottom:35px; min-width:120px; background:rgba(4,9,14,.26); }
  .power-block strong { font-size:39px; }
  .manifest-link { position:absolute; left:var(--page-x); bottom:39px; justify-self:auto; }
  .inspection-shell { padding-top:30px; padding-bottom:52px; gap:40px; }
  .section-heading { align-items:start; }
  .state-legend { flex-direction:column; align-items:start; gap:5px; }
  .perk-columns { width: calc(100% + (var(--page-x) * 2)); margin-inline: calc(var(--page-x) * -1); padding-left: var(--page-x); grid-template-columns: repeat(5, minmax(152px, 152px)); scrollbar-color: rgba(95,209,255,.4) transparent; scroll-snap-type:x proximity; }
  .perk-column { scroll-snap-align:start; }
  .perk-column:last-child { margin-right:var(--page-x); }
  .pool-help { font-size:9px; }
  .inspector { display:grid; grid-template-columns:1fr; gap:40px; }
  .roll-tabs { position:sticky; left:0; }
  .stat-row { grid-template-columns: minmax(110px, 1.2fr) 1fr 28px; }
  footer { flex-direction:column; gap:7px; line-height:1.5; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}